page-b407b94b0e972a37.js

js akasha-ui.pages.dev collected 2026-10-03 06:27:03 UTC 2,346,005 bytes, 1 lines download raw bytes

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[757],{61628:(e,n,l)=>{Promise.resolve().then(l.bind(l,28453)),Promise.resolve().then(l.bind(l,23702)),Promise.resolve().then(l.t.bind(l,91747,23)),Promise.resolve().then(l.bind(l,45628)),Promise.resolve().then(l.t.bind(l,57140,23))},36190:(e,n,l)=>{"use strict";l.d(n,{F:()=>r});var s=l(22613);let r={logo:e=>(0,s.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 449.7 422",width:"2500",height:"2346",...e,children:(0,s.jsx)("path",{fill:"currentColor",d:"M448 302.2c-5-26-21.3-48.5-44.4-61.4-11.7-6.5-24.8-9.9-38.1-10-29.7-.6-56.8 16.8-68.4 44.1-6.1 14.9-6.1 31.7 0 46.7 5.1 13.5 15.3 24.4 28.5 30.2 5.7 2.4 11.8 3.6 18 3.7 18.6.8 35.1-11.9 39.2-30.1 2.3-10.3-2.3-21-11.4-26.4-2.4-1.3-5-2-7.7-2.1-2.9-.1-5.7 1-7.7 3.1-.6.6-1.1 1.4-1.4 2.2.7.4 1.5.8 2.2 1.1 5.2 1.7 9.2 6 10.5 11.4.9 4.7-.6 9.5-4.1 12.8-4.9 4.9-11.3 8-18.1 8.9h-2.2c-15.4-1.2-27.9-12.8-30.1-28.1-5-24.9 10.2-49.5 34.7-56.2 5.6-1.8 11.4-2.7 17.3-2.7 26.6.7 50.2 17.3 59.7 42.2 7.9 19.4 7.4 41.2-1.3 60.3-9.2 21-26.6 37.3-48.1 45.3-10.2 3.8-21 5.7-31.9 5.8-45.5-.6-84.7-32.3-94.7-76.7C236.9 283 253 237 289 210.4c21.2-16.9 36.7-40 44.1-66 8.5-29.3 4.9-60.7-9.8-87.4-13.8-25.7-37.4-44.7-65.5-52.7-9.1-3-18.5-4.3-28-4.3-44.6-.7-83.5 30.1-93 73.6-5.5 23.5 0 48.2 14.8 67.3 13.9 17.8 35.3 28.2 57.9 28.1 2.9.2 5.7.2 8.6 0 16-1.7 30.6-10 40.3-22.8a56 56 0 0 0 11.4-41.2c-2.2-19.9-18-35.5-37.9-37.4h-2.5c-13.3-.4-25 8.7-28.1 21.6-1.5 6.8 2.1 13.6 8.6 16.2h1.8c.4.1.8.1 1.3 0 .1-.7.1-1.5 0-2.2-1-4.6.2-9.5 3.1-13.2 2.7-3.5 7-5.5 11.4-5.3h2.7c9.3 1.2 17 7.8 19.5 16.9 4.5 13.3.4 28.1-10.4 37.1-8.2 7.3-18.8 11.3-29.8 11.1-10 .1-19.7-2.7-28.1-8.2-14.1-9.3-23.5-24.2-25.9-40.9-2.8-18.6 2.3-37.6 14.1-52.3 14.6-18 36.7-28.3 59.9-28.1 21.5.1 42.5 8.7 58.2 23.8 19.7 19 30.2 45.6 28.8 72.9-1.4 29.5-15.5 56.9-38.6 75.2-19.3 15.9-43.4 24.7-68.4 24.9-16.1-.2-32-3.3-46.9-9.1-14.8-5.7-30.4-8.7-46.2-8.9-20.9.1-41.5 5.7-59.6 16.2-26.3 14.9-45.3 39.7-53 68.7-7.5 27.3-3.8 56.5 10.4 81 16.9 29.1 48 47.2 81.6 47.5 18.5.1 36.5-5.7 51.4-16.6 16.9-12.1 28.3-30.6 31.5-51.2 3-18.7-1.5-37.8-12.6-53.1a61.205 61.205 0 0 0-49-25.4c-12.3-.1-24.3 4.1-33.9 11.8-9.5 7.8-15.4 19.3-16.2 31.6-1 10.3 2.5 20.6 9.6 28.1 5.2 5.6 12.5 8.9 20.1 9 3.6 0 7.2-.8 10.4-2.5 5.3-2.6 8.3-8.2 7.7-14.1 0-1.4-.9-2.6-2.2-3.1-.8.1-1.6.5-2.2 1.1-2.9 2.5-6.6 4-10.4 4.1-6.3-.1-11.9-4.1-14.1-10-4.5-12.4.9-26.2 12.6-32.2 5.4-3.2 11.7-4.9 18-4.9 9.4.1 18.6 3.4 25.9 9.4 15.4 13.3 21.4 34.6 15.2 54-8.4 27-33.7 45.1-62 44.4-9.7 0-19.2-1.9-28.1-5.8-20.5-8.8-36.3-26-43.5-47.1a87.86 87.86 0 0 1 5.2-68.7c17.1-32.6 51-52.8 87.8-52.6 20.3 0 40.1 5.9 57.1 17 29.3 19.1 48.5 50.4 52.3 85.2 9.2 58.7 60.1 101.8 119.6 101.2 32.8-.3 63.6-15.9 83.2-42.2 17.2-22 24.1-50.3 18.8-77.7z"})}),twitter:e=>(0,s.jsx)("svg",{...e,height:"23",viewBox:"0 0 1200 1227",width:"23",xmlns:"http://www.w3.org/2000/svg",children:(0,s.jsx)("path",{d:"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"})}),gitHub:e=>(0,s.jsx)("svg",{viewBox:"0 0 438.549 438.549",...e,children:(0,s.jsx)("path",{fill:"currentColor",d:"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19

16.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"})}),radix:e=>(0,s.jsxs)("svg",{viewBox:"0 0 25 25",fill:"none",...e,children:[(0,s.jsx)("path",{d:"M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z",fill:"currentcolor"}),(0,s.jsx)("path",{d:"M12 0H4V8H12V0Z",fill:"currentcolor"}),(0,s.jsx)("path",{d:"M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z",fill:"currentcolor"})]}),aria:e=>(0,s.jsx)("svg",{role:"img",viewBox:"0 0 24 24",fill:"currentColor",...e,children:(0,s.jsx)("path",{d:"M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z"})}),npm:e=>(0,s.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,s.jsx)("path",{d:"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z",fill:"currentColor"})}),yarn:e=>(0,s.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,s.jsx)("path",{d:"M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z",fill:"currentColor"})}),pnpm:e=>(0,s.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,s.jsx)("path",{d:"M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z",fill:"currentColor"})}),react:e=>(0,s.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,s.jsx)("path",{d:"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.

1183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z",fill:"currentColor"})}),tailwind:e=>(0,s.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,s.jsx)("path",{d:"M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z",fill:"currentColor"})}),google:e=>(0,s.jsx)("svg",{role:"img",viewBox:"0 0 24 24",...e,children:(0,s.jsx)("path",{fill:"currentColor",d:"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"})}),apple:e=>(0,s.jsx)("svg",{role:"img",viewBox:"0 0 24 24",...e,children:(0,s.jsx)("path",{d:"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701",fill:"currentColor"})}),paypal:e=>(0,s.jsx)("svg",{role:"img",viewBox:"0 0 24 24",...e,children:(0,s.jsx)("path",{d:"M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z",fill:"currentColor"})}),spinner:e=>(0,s.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...e,children:(0,s.jsx)("path",{d:"M21 12a9 9 0 1 1-6.219-8.56"})})}},28453:(e,n,l)=>{"use strict";l.d(n,{Mdx:()=>W});

1var s=l(22613),r=l(83153),a=l(49807),c=l(91747),o=l.n(c),t=l(96372),i=l(592);let d=(e,n={})=>{let l={React:r,ReactDOM:t,_jsx_runtime:i.c,...n};return Function(...Object.keys(l),e)(...Object.values(l)).default},p=(e,n={})=>r.useMemo(()=>d(e,n),[e,n]);var h=l(85722),x=l(6792);let E=(0,l(24831).F)("relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",{variants:{variant:{default:"bg-background text-foreground",destructive:"border-destructive/50 text-destructive dark:text-destructive-foreground/80 dark:border-destructive [&>svg]:text-current dark:bg-destructive/50"}},defaultVariants:{variant:"default"}});function j(e){let{className:n,variant:l,...r}=e;return(0,s.jsx)("div",{"data-slot":"alert",role:"alert",className:(0,h.cn)(E({variant:l}),n),...r})}function y(e){let{className:n,...l}=e;return(0,s.jsx)("div",{"data-slot":"alert-title",className:(0,h.cn)("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",n),...l})}function m(e){let{className:n,...l}=e;return(0,s.jsx)("div",{"data-slot":"alert-description",className:(0,h.cn)("col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",n),...l})}var F=l(40391),u=l(68065),g=l(25854),N=l(89683);async function f(e){navigator.clipboard.writeText(e)}function B(e){let{value:n,className:l,variant:a="ghost",...c}=e,[o,t]=r.useState(!1);return r.useEffect(()=>{setTimeout(()=>{t(!1)},2e3)},[o]),(0,s.jsxs)(g.Button,{size:"icon",variant:a,className:(0,h.cn)("relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3",l),onClick:()=>{f(n),t(!0)},...c,children:[(0,s.jsx)("span",{className:"sr-only",children:"Copy"}),o?(0,s.jsx)(F.A,{}):(0,s.jsx)(u.A,{})]})}function v(e){let{value:n,classNames:l,className:a}=e,[c,o]=r.useState(!1);r.useEffect(()=>{setTimeout(()=>{o(!1)},2e3)},[c]);let t=r.useCallback(e=>{f(e),o(!0)},[]);return(0,s.jsxs)(N.DropdownMenu,{children:[(0,s.jsx)(N.DropdownMenuTrigger,{asChild:!0,children:(0,s.jsxs)(g.Button,{size:"icon",variant:"ghost",className:(0,h.cn)("relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",a),children:[c?(0,s.jsx)(F.A,{className:"h-3 w-3"}):(0,s.jsx)(u.A,{className:"h-3 w-3"}),(0,s.jsx)("span",{className:"sr-only",children:"Copy"})]})}),(0,s.jsxs)(N.DropdownMenuContent,{align:"end",children:[(0,s.jsx)(N.DropdownMenuItem,{onClick:()=>t(n),children:"Component"}),(0,s.jsx)(N.DropdownMenuItem,{onClick:()=>t(l),children:"Classname"})]})]})}var b=l(24030);function C(e){let{__npmCommand__:n,__yarnCommand__:l,__pnpmCommand__:a,__bunCommand__:c}=e,[o,t]=(0,x.U)(),[i,d]=r.useState(!1);r.useEffect(()=>{if(i){let e=setTimeout(()=>d(!1),2e3);return()=>clearTimeout(e)}},[i]);let p=o.packageManager||"pnpm",h=r.useMemo(()=>({pnpm:a,npm:n,yarn:l,bun:c}),[n,a,l,c]),E=r.useCallback(()=>{let e=h[p];e&&(f(e),d(!0))},[p,h]);return(0,s.jsxs)("div",{className:"relative mt-6 max-h-[650px] overflow-x-auto rounded-xl bg-zinc-950 dark:bg-zinc-900",children:[(0,s.jsxs)(b.Tabs,{defaultValue:p,onValueChange:e=>{t({...o,packageManager:e})},children:[(0,s.jsx)("div",{className:"flex items-center justify-between border-b border-zinc-800 bg-zinc-900 px-3 pt-2.5",children:(0,s.jsx)(b.TabsList,{className:"h-7 translate-y-[2px] gap-3 bg-transparent p-0 pl-1",children:Object.entries(h).map(e=>{let[n]=e;return(0,s.jsx)(b.TabsTrigger,{value:n,className:"rounded-none border-b border-transparent bg-transparent p-0 pb-1.5 font-mono text-zinc-400 data-[state=active]:border-b-zinc-50 data-[state=active]:bg-transparent data-[state=active]:text-zinc-50",children:n},n)})})}),Object.entries(h).map(e=>{let[n,l]=e;return(0,s.jsx)(b.TabsContent,{value:n,className:"mt-0",children:(0,s.jsx)("pre",{className:"px-4 py-5",children:(0,s.jsx)("code",{className:"relative font-mono text-sm leading-none","data-language":"bash",children:l})})},n)})]}),(0,s.jsxs)(g.Button,{size:"icon",variant:"ghost",className:"absolute right-2.5 top-2 z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3",onClick:E,children:[(0,s.jsx)("span",{className:"sr-only",children:"Copy"}),i?(0,s.jsx)(F.A,{}):(0,s.jsx)(u.A,{})]})]})}var _=l(19090);function w(e){let{expandButtonTitle:n="View Code",className:l,children:a,...c}=e,[o,t]=r.useState(!1);return(0,s.jsx)(_.Nt,{open:o,onOpenChange:t,children:(0,s.jsxs)("div",{className:(0,h.cn)("relative overflow-hidden",l),...c,children:[(0,s.jsx)(_.Ke,{forceMount:!0,className:(0,h.cn)("overflow-hidden",!o&&"max-h-32"),children:(0,s.jsx)("div",{className:(0,h.cn)("[&_pre]:my-0 [&_pre]:max-h-[650px] [&_pre]:pb-[100px]",o?"[&_pre]:overflow-auto]":"[&_pre]:overflow-hidden"),children:a})}),(0,s.jsx)("div",{className:(0,h.cn)("absolute flex items-center justify-center bg-gradient-to-b from-zinc-700/30 to-zinc-950/90 p-2",o?"inset-x-0 bottom-0 h-12":"inset-0"),children:(0,s.jsx)(_.R6,{asChild:!0,children:(0,s.jsx)(g.Button,{variant:"secondary",className:"h-8 text-xs",children:o?"Collapse":n})})})]})})}let T={default:{accordion:{name:"accordion",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/accordion.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.resolve().then(l.bind(l,69816))),source:"",meta:void 0},autocomplete:{name:"autocomplete",description:"",type:"registry:ui",registryDependencies:["command","custom/input"],files:[{path:"registry/default/ui/autocomplete.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(4645),l.e(8358),l.e(1820)]).then(l.bind(l,42270))),source:"",meta:void 0},badge:{name:"badge",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/badge.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(8639).then(l.bind(l,8639))),source:"",meta:void 0},button:{name:"button",description:"",type:"registry:ui",registryDependencies:["custom/typography"],files:[{path:"registry/default/ui/button.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.resolve().then(l.bind(l,25854))),source:"",meta:void 0},card:{name:"card",description:"",type:"registry:ui",registryDependencies:["custom/typography"],files:[{path:"registry/default/ui/card.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(7092).then(l.bind(l,57092))),source:"",meta:void 0},input:{name:"input",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/input.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(4645),l.e(4512)]).then(l.bind(l,23222))),source:"",meta:void 0},checkbox:{name:"checkbox",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/checkbox.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(7857).then(l.bind(l,7857))),source:"",meta:void 0},tabs:{name:"tabs",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/tabs.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.resolve().then(l.bind(l,24030))),source:"",meta:void 0},"tags-input":{name:"tags-input",description:"",type:"registry:ui",registryDependencies:["custom/badge","custom/input"],files:[{path:"registry/default/ui/tags-input.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(4645),l.e(7456)]).then(l.bind(l,24394))),source:"",meta:void 0},textarea:{name:"textarea",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/textarea.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(3360).then(l.bind(l,73360))),source:"",meta:void 0},"circular-progress":{name:"circular-progress",description:"",type:"registry:ui",registryDependencies:["custom/typography"],files:[{path:"registry/default/ui/circular-progress.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(8071).then(l.bind(l,28071))),source:"",meta:void 0},"content-card":{name:"content-card",description:"",type:"registry:ui",registryDependencies:["custom/card","custom/

1profile-avatar-button","custom/typography"],files:[{path:"registry/default/ui/content-card.tsx",type:"registry:ui",target:""},{path:"registry/default/lib/format-relative-time.ts",type:"registry:lib",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(1108),l.e(5447)]).then(l.bind(l,1108))),source:"",meta:void 0},"copy-to-clipboard":{name:"copy-to-clipboard",description:"",type:"registry:ui",registryDependencies:["tooltip"],files:[{path:"registry/default/ui/copy-to-clipboard.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(8408),l.e(7016)]).then(l.bind(l,37016))),source:"",meta:void 0},"duplex-button":{name:"duplex-button",description:"",type:"registry:ui",registryDependencies:["custom/button"],files:[{path:"registry/default/ui/duplex-button.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(6073).then(l.bind(l,16073))),source:"",meta:void 0},"error-loader":{name:"error-loader",description:"",type:"registry:ui",registryDependencies:["custom/card","custom/image"],files:[{path:"registry/default/ui/error-loader.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(5956).then(l.bind(l,15956))),source:"",meta:void 0},"extension-avatar":{name:"extension-avatar",description:"",type:"registry:ui",registryDependencies:["custom/image"],files:[{path:"registry/default/ui/extension-avatar.tsx",type:"registry:ui",target:""},{path:"registry/default/lib/get-image-from-seed.ts",type:"registry:lib",target:""},{path:"registry/default/types/extension-type.ts",type:"registry:file",target:"types/extension-type.ts"}],categories:void 0,component:r.lazy(()=>l.e(1361).then(l.bind(l,51361))),source:"",meta:void 0},"extension-card":{name:"extension-card",description:"",type:"registry:ui",registryDependencies:["badge","custom/extension-avatar","custom/extension-type-icon","custom/typography"],files:[{path:"registry/default/ui/extension-card.tsx",type:"registry:ui",target:""},{path:"registry/default/types/extension-type.ts",type:"registry:file",target:"types/extension-type.ts"}],categories:void 0,component:r.lazy(()=>l.e(6396).then(l.bind(l,6396))),source:"",meta:void 0},"extension-type-icon":{name:"extension-type-icon",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/extension-type-icon.tsx",type:"registry:ui",target:""},{path:"registry/default/types/extension-type.ts",type:"registry:file",target:"types/extension-type.ts"}],categories:void 0,component:r.lazy(()=>l.e(3300).then(l.bind(l,93300))),source:"",meta:void 0},"feed-cta":{name:"feed-cta",description:"",type:"registry:ui",registryDependencies:["custom/card","custom/profile-avatar","custom/stack","custom/typography"],files:[{path:"registry/default/ui/feed-cta.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(3507).then(l.bind(l,73507))),source:"",meta:void 0},form:{name:"form",description:"",type:"registry:ui",registryDependencies:["label"],files:[{path:"registry/default/ui/form.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(4322),l.e(5516)]).then(l.bind(l,15516))),source:"",meta:void 0},"icon-container":{name:"icon-container",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/icon-container.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(7359).then(l.bind(l,7359))),source:"",meta:void 0},image:{name:"image",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/image.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(6453).then(l.bind(l,6453))),source:"",meta:void 0},"infinite-scroll":{name:"infinite-scroll",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/infinite-scroll.tsx",type:"registry:ui",target:""},{path:"registry/default/hooks/use-scroll-restoration.ts",type:"registry:hook",target:""},{path:"registry/default/hooks/use-mobile.tsx",type:"registry:hook",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5591),l.e(1876)]).then(l.bind(l,71876))),source:"",meta:void 0},"inline-notification":{name:"inline-notification",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/inline-notification.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>

1l.e(4835).then(l.bind(l,24835))),source:"",meta:void 0},"profile-avatar-button":{name:"profile-avatar-button",description:"",type:"registry:ui",registryDependencies:["custom/profile-avatar","custom/stack","custom/icon-container","custom/typography"],files:[{path:"registry/default/ui/profile-avatar-button.tsx",type:"registry:ui",target:""},{path:"registry/default/custom-icons/did-key.tsx",type:"registry:file",target:"custom-icons/did-key.tsx"},{path:"registry/default/custom-icons/ethereum.tsx",type:"registry:file",target:"custom-icons/ethereum.tsx"},{path:"registry/default/custom-icons/no-eth.tsx",type:"registry:file",target:"custom-icons/no-eth.tsx"},{path:"registry/default/custom-icons/solana.tsx",type:"registry:file",target:"custom-icons/solana.tsx"}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(4218)]).then(l.bind(l,34218))),source:"",meta:void 0},"profile-avatar":{name:"profile-avatar",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/profile-avatar.tsx",type:"registry:ui",target:""},{path:"registry/default/lib/get-image-from-seed.ts",type:"registry:lib",target:""}],categories:void 0,component:r.lazy(()=>l.e(4649).then(l.bind(l,14649))),source:"",meta:void 0},select:{name:"select",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/select.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.resolve().then(l.bind(l,42770))),source:"",meta:void 0},sonner:{name:"sonner",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/sonner.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5103),l.e(8985)]).then(l.bind(l,8985))),source:"",meta:void 0},slider:{name:"slider",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/slider.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(7007),l.e(1045)]).then(l.bind(l,91045))),source:"",meta:void 0},stack:{name:"stack",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/stack.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(626).then(l.bind(l,90626))),source:"",meta:void 0},"stacked-avatar":{name:"stacked-avatar",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/stacked-avatar.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(4173).then(l.bind(l,14173))),source:"",meta:void 0},stepper:{name:"stepper",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/stepper.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>l.e(1841).then(l.bind(l,81841))),source:"",meta:void 0},typography:{name:"typography",description:"",type:"registry:ui",registryDependencies:void 0,files:[{path:"registry/default/ui/typography.tsx",type:"registry:ui",target:""}],categories:void 0,component:r.lazy(()=>Promise.resolve().then(l.bind(l,56165))),source:"",meta:void 0},"did-key":{name:"did-key",description:"",type:"registry:file",registryDependencies:void 0,files:[{path:"registry/default/custom-icons/did-key.tsx",type:"registry:file",target:"custom-icons/did-key.tsx"}],categories:void 0,component:r.lazy(()=>l.e(5197).then(l.bind(l,45197))),source:"",meta:void 0},ethereum:{name:"ethereum",description:"",type:"registry:file",registryDependencies:void 0,files:[{path:"registry/default/custom-icons/ethereum.tsx",type:"registry:file",target:"custom-icons/ethereum.tsx"}],categories:void 0,component:r.lazy(()=>l.e(1819).then(l.bind(l,1819))),source:"",meta:void 0},"extension-type":{name:"extension-type",description:"",type:"registry:file",registryDependencies:void 0,files:[{path:"registry/default/types/extension-type.ts",type:"registry:file",target:"types/extension-type.ts"}],categories:void 0,component:r.lazy(()=>l.e(4443).then(l.bind(l,54443))),source:"",meta:void 0},"no-eth":{name:"no-eth",description:"",type:"registry:file",registryDependencies:void 0,files:[{path:"registry/default/custom-icons/no-eth.tsx",type:"registry:file",target:"custom-icons/no-eth.tsx"}],categories:void 0,component:r.lazy(()=>l.e(9899).then(l.bind(l,59899))),source:"",meta:void 0},solana:{name:"solana",description:"",type:"registry:file",registryDependencies:void 0,files:[{path:"registry/default/custom-icons/solana.tsx",type:"registry:file",target:"custom-icons/solana.tsx"}],categories:void 0,component:r.lazy(()=>l.e(8872).then(l.bind(l,78872))),source:"",meta:void 0},"post-feed":{name:"post-feed",description:"A post-feed page displaying a list of posts.",type:"registry:block",registryDependencies:["custom/

1profile-avatar","custom/profile-avatar-button","custom/card","custom/stack","custom/typography","custom/icon-container","custom/button","custom/feed-cta"],files:[{path:"registry/default/blocks/social-content/post-feed/page.tsx",type:"registry:page",target:"app/post-feed/page.tsx"},{path:"registry/default/blocks/social-content/post-card.tsx",type:"registry:component",target:""},{path:"registry/default/blocks/social-content/post-feed/components/posts-resolver.tsx",type:"registry:component",target:""},{path:"registry/default/blocks/social-content/post-feed/mock-data.ts",type:"registry:file",target:"app/post-feed/mock-data.ts"},{path:"registry/default/lib/format-relative-time.ts",type:"registry:lib",target:""}],categories:["social-content"],component:r.lazy(()=>Promise.all([l.e(5360),l.e(5591),l.e(4444),l.e(1876),l.e(1108),l.e(662),l.e(1938)]).then(l.bind(l,80662))),source:"__registry__/default/blocks/social-content/post-feed/page.tsx",meta:void 0},"post-page":{name:"post-page",description:"A post page displaying the main post along with its replies.",type:"registry:block",registryDependencies:["custom/profile-avatar-button","custom/card","custom/stack","custom/typography","custom/icon-container","custom/button"],files:[{path:"registry/default/blocks/social-content/post-page/page.tsx",type:"registry:page",target:"app/post/page.tsx"},{path:"registry/default/blocks/social-content/post-page/mock-data.ts",type:"registry:file",target:"app/post/mock-data.ts"},{path:"registry/default/blocks/social-content/post-card.tsx",type:"registry:component",target:""},{path:"registry/default/blocks/social-content/reply-card.tsx",type:"registry:component",target:""},{path:"registry/default/blocks/social-content/reply-resolver.tsx",type:"registry:component",target:""},{path:"registry/default/blocks/social-content/reply-preview.tsx",type:"registry:component",target:""},{path:"registry/default/blocks/social-content/reply-editor.tsx",type:"registry:component",target:""},{path:"registry/default/blocks/social-content/reply-mock-data.ts",type:"registry:file",target:"app/reply/mock-data.ts"},{path:"registry/default/blocks/social-content/post-page/components/nsfw-warning.tsx",type:"registry:component",target:""},{path:"registry/default/lib/format-relative-time.ts",type:"registry:lib",target:""}],categories:["social-content"],component:r.lazy(()=>Promise.all([l.e(5360),l.e(5591),l.e(4444),l.e(1876),l.e(1108),l.e(7982),l.e(1618)]).then(l.bind(l,26469))),source:"__registry__/default/blocks/social-content/post-page/page.tsx",meta:void 0},"reply-page":{name:"reply-page",description:"A reply post page with reply editor and replies",type:"registry:block",registryDependencies:["custom/profile-avatar-button","custom/card","custom/stack","custom/typography","custom/icon-container","custom/button"],files:[{path:"registry/default/blocks/social-content/reply-page/page.tsx",type:"registry:page",target:"app/post/page.tsx"},{path:"registry/default/blocks/social-content/reply-page/mock-data.ts",type:"registry:file",target:"app/reply/mock-data.ts"},{path:"registry/default/blocks/social-content/reply-card.tsx",type:"registry:component",target:""},{path:"registry/default/blocks/social-content/reply-resolver.tsx",type:"registry:component",target:""},{path:"registry/default/blocks/social-content/reply-preview.tsx",type:"registry:component",target:""},{path:"registry/default/blocks/social-content/reply-editor.tsx",type:"registry:component",target:""},{path:"registry/default/blocks/social-content/reply-mock-data.ts",type:"registry:file",target:"app/reply/mock-data.ts"},{path:"registry/default/lib/format-relative-time.ts",type:"registry:lib",target:""}],categories:["social-content"],component:r.lazy(()=>Promise.all([l.e(5360),l.e(5591),l.e(4444),l.e(1876),l.e(1108),l.e(7982),l.e(7551)]).then(l.bind(l,63371))),source:"__registry__/default/blocks/social-content/reply-page/page.tsx",meta:void 0},utils:{name:"utils",description:"",type:"registry:lib",registryDependencies:void 0,files:[{path:"registry/default/lib/utils.ts",type:"registry:lib",target:""}],categories:void 0,component:r.lazy(()=>l.e(2806).then(l.bind(l,12806))),source:"",meta:void 0},"get-image-from-seed":{name:"get-image-from-seed",description:"",type:"registry:lib",registryDependencies:void 0,files:[{path:"registry/default/lib/get-image-from-seed.ts",type:"registry:lib",target:""}],categories:void 0,component:r.lazy(()=>l.e(6056).then(l.bind(l,26056))),source:"",meta:void 0},"format-relative-time":{name:"format-relative-time",description:"",type:"registry:lib",registryDependencies:void 0,files:[{path:"registry/default/lib/format-relative-time.ts",type:"registry:lib",target:""}],categories:void 0,component:r.lazy(()=>l.e(4201).then(l.bind(l,14201))),source:"",meta:void 0},"use-mobile":{name:"use-mobile",description:"",type:"registry:hook",registryDependencies:void 0,files:[{path:"registry/default/hooks/use-mobile.tsx",type:"registry:hook",target:""}],categories:void 0,component:r.lazy(()=>l.e(7782).then(l.bind(l,47782))),source:"",meta:void 0},"use-toast":{name:"use-toast",description:"",type:"registry:hook",registryDependencies:void 0,files:[{path:"registry/default/hooks/use-toast.ts",type:"registry:hook",target:""}],categories:void 0,component:r.lazy(()=>l.e(2437).then(l.bind(l,62437))),source:"",meta:void 0},"use-scroll-restoration":{name:"use-scroll-restoration",description:"",type:"registry:hook",registryDependencies:void 0,files:[{path:"registry/default/hooks/use-scroll-restoration.ts",type:"registry:hook",target:""}],categories:void 0,component:r.lazy(()=>l.e(9750).then(l.bind(l,49750))),source:"",meta:void 0},"autocomplete-demo":{name:"autocomplete-demo",description:"",type:"registry:example",registryDependencies:["custom/autocomplete"],files:[{path:"registry/default/examples/autocomplete-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(4645),l.e(8358),l.e(9119)]).then(l.bind(l,46093))),source:"",meta:void 0},"accordion-demo":{name:"accordion-demo",description:"",type:"registry:example",registryDependencies:["custom/accordion"],files:[{path:"registry/default/examples/accordion-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(1417).then(l.bind(l,71417))),source:"",meta:void 0},"autocomplete-multiple-demo":{name:"autocomplete-multiple-demo",description:"",type:"registry:example",registryDependencies:["custom/autocomplete","badge","custom/button"],files:[{path:"registry/default/examples/autocomplete-multiple-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(4645),l.e(8358),l.e(4742)]).then(l.bind(l,30320))),source:"",meta:void 0},"button-demo":{name:"button-demo",description:"",type:"registry:example",registryDependencies:["custom/button"],files:[{path:"registry/default/examples/button-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(913).then(l.bind(l,90913))),source:"",meta:void 0},"button-secondary":{name:"button-secondary",description:"",type:"registry:example",registryDependencies:["custom/button"],files:[{path:"registry/default/examples/button-secondary.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(7730).then(l.bind(l,47730))),source:"",meta:void 0},"button-destructive":{name:"button-destructive",description:"",type:"registry:example",registryDependencies:["custom/button"],files:[{path:"registry/default/examples/button-destructive.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(6872).then(l.bind(l,76872))),source:"",meta:void 0},"button-outline":{name:"button-outline",description:"",type:"registry:example",registryDependencies:["custom/button"],files:[{path:"registry/default/examples/button-outline.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(3922).then(l.bind(l,53922))),source:"",meta:void 0},"button-ghost":{name:"button-ghost",description:"",type:"registry:example",registryDependencies:["custom/button"],files:[{path:"registry/default/examples/button-ghost.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(9821).then(l.bind(l,39821))),source:"",meta:void 0},"button-link":{name:"button-link",description:"",type:"registry:example",registryDependencies:["custom/button"],files:[{path:"registry/default/examples/button-link.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(5220).then(l.bind(l,35220))),source:"",meta:void 0},"button-with-icon":{name:"button-with-icon",description:"",type:"registry:example",registryDependencies:["custom/button"],files:[{path:"registry/default/examples/button-with-icon.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(4888).then(l.bind(l,24888))),source:"",meta:void 0},"button-loading":{name:"button-loading",description:"",type:"registry:example",registryDependencies:["custom/button"],files:[{path:"registry/default/examples/button-loading.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(5272).then(l.bind(l,45272))),source:"",meta:void 0},"button-icon":{name:"button-icon",description:"",type:"registry:example",registryDependencies:["custom/button"],files:[{path:"registry/default/examples/button-icon.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(7055).then(l.bind(l,87055))),source:"",meta:void 0},"button-as-child":{name:"button-as-child",description:"",type:"registry:example",registryDependencies:["custom/button"],files:[{path:"registry/default/examples/button-as-child.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(6813).then(l.bind(l,46813))),source:"",meta:void 0},"card-demo":{name:"card-demo",description:"",type:"registry:example",registryDependencies:["custom/button","custom/card","custom/input","label","select"],files:[{path:"registry/default/examples/card-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(4645),l.e(405)]).then(l.bind(l,19231))),source:"",meta:void 0},"input-demo":{name:"input-demo",description:"",type:"registry:example",registryDependencies:["custom/input"],files:[{path:"registry/default/examples/input-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(4645),l.e(2249)]).then(l.bind(l,50387))),source:"",meta:void 0},"checkbox-demo":{name:"checkbox-demo",description:"",type:"registry:example",registryDependencies:["custom/checkbox"],files:[{path:"registry/default/examples/checkbox-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(6384).then(l.bind(l,66384))),source:"",meta:void 0},"checkbox-form-demo":{name:"checkbox-form-demo",description:"",type:"registry:example",registryDependencies:["custom/checkbox"],files:[{path:"registry/default/examples/checkbox-form-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(5103),l.e(4322),l.e(189)]).then(l.bind(l,60189))),source:"",meta:void 0},"checkbox-disabled-demo":{name:"checkbox-disabled-demo",description:"",type:"registry:example",registryDependencies:["custom/checkbox"],files:[{path:"registry/default/examples/checkbox-disabled-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(3559).then(l.bind(l,43559))),source:"",meta:void 0},"badge-demo":{name:"badge-demo",description:"",type:"registry:example",registryDependencies:["custom/badge"],files:[{path:"registry/default/examples/badge-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(8336).then(l.bind(l,48336))),source:"",meta:void 0},"badge-secondary-demo":{name:"badge-secondary-demo",description:"",type:"registry:example",registryDependencies:["custom/badge"],files:[{path:"registry/default/examples/badge-secondary-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(6107).then(l.bind(l,46107))),source:"",meta:void 0},"badge-outline-demo":{name:"badge-outline-demo",description:"",type:"registry:example",registryDependencies:["custom/badge"],files:[{path:"registry/default/examples/badge-outline-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(6895).then(l.bind(l,96895))),source:"",meta:void 0},"badge-destructive-demo":{name:"badge-destructive-demo",description:"",type:"registry:example",registryDependencies:["custom/badge"],files:[{path:"registry/default/examples/badge-destructive-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(3345).then(l.bind(l,93345))),source:"",meta:void 0},"input-search-demo":{name:"input-search-demo",description:"",type:"registry:example",registryDependencies:["custom/input"],files:[{path:"registry/default/examples/input-search-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(4645),l.e(7968)]).then(l.bind(l,92426))),source:"",meta:void 0},"circular-progress-demo":{name:"circular-progress-demo",description:"",type:"registry:example",registryDependencies:["custom/circular-progress"],files:[{path:"registry/default/examples/circular-progress-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(4696).then(l.bind(l,34696))),source:"",meta:void 0},"content-card-demo":{name:"content-card-demo",description:"",type:"registry:example",registryDependencies:["custom/content-card","custom/button","custom/typography","custom/stack","custom/icon-container","dropdown-menu"],files:[{path:"registry/default/examples/content-card-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(1108),l.e(5981)]).then(l.bind(l,12151))),source:"",meta:void 0}

1,"copy-to-clipboard-demo":{name:"copy-to-clipboard-demo",description:"",type:"registry:example",registryDependencies:["custom/copy-to-clipboard","custom/profile-avatar-button"],files:[{path:"registry/default/examples/copy-to-clipboard-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(8408),l.e(4505)]).then(l.bind(l,24505))),source:"",meta:void 0},"duplex-button-demo":{name:"duplex-button-demo",description:"",type:"registry:example",registryDependencies:["custom/duplex-button"],files:[{path:"registry/default/examples/duplex-button-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(5266).then(l.bind(l,5266))),source:"",meta:void 0},"duplex-button-loading":{name:"duplex-button-loading",description:"",type:"registry:example",registryDependencies:["custom/duplex-button"],files:[{path:"registry/default/examples/duplex-button-loading.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(6253).then(l.bind(l,6253))),source:"",meta:void 0},"duplex-button-disabled":{name:"duplex-button-disabled",description:"",type:"registry:example",registryDependencies:["custom/duplex-button"],files:[{path:"registry/default/examples/duplex-button-disabled.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(1463).then(l.bind(l,1463))),source:"",meta:void 0},"error-loader-demo":{name:"error-loader-demo",description:"",type:"registry:example",registryDependencies:["custom/error-loader"],files:[{path:"registry/default/examples/error-loader-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(4487).then(l.bind(l,14487))),source:"",meta:void 0},"extension-avatar-demo":{name:"extension-avatar-demo",description:"",type:"registry:example",registryDependencies:["custom/extension-avatar"],files:[{path:"registry/default/examples/extension-avatar-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(4016).then(l.bind(l,4016))),source:"",meta:void 0},"extension-card-demo":{name:"extension-card-demo",description:"",type:"registry:example",registryDependencies:["custom/extension-card","custom/profile-avatar-button"],files:[{path:"registry/default/examples/extension-card-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(6396),l.e(3527)]).then(l.bind(l,93527))),source:"",meta:void 0},"extension-type-icon-demo":{name:"extension-type-icon-demo",description:"",type:"registry:example",registryDependencies:["custom/extension-type-icon"],files:[{path:"registry/default/examples/extension-type-icon-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(5349).then(l.bind(l,75349))),source:"",meta:void 0},"icon-container-demo":{name:"icon-container-demo",description:"",type:"registry:example",registryDependencies:["custom/icon-container"],files:[{path:"registry/default/examples/icon-container-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(2370).then(l.bind(l,82370))),source:"",meta:void 0},"icon-container-round":{name:"icon-container-round",description:"",type:"registry:example",registryDependencies:["custom/icon-container"],files:[{path:"registry/default/examples/icon-container-round.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(6305).then(l.bind(l,36305))),source:"",meta:void 0},"icon-container-square":{name:"icon-container-square",description:"",type:"registry:example",registryDependencies:["custom/icon-container"],files:[{path:"registry/default/examples/icon-container-square.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(7614).then(l.bind(l,47614))),source:"",meta:void 0},"icon-container-notification-dot":{name:"icon-container-notification-dot",description:"",type:"registry:example",registryDependencies:["custom/icon-container"],files:[{path:"registry/default/examples/icon-container-notification-dot.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(9620).then(l.bind(l,59620))),source:"",meta:void 0},"image-demo":{name:"image-demo",description:"",type:"registry:example",registryDependencies:["custom/image"],files:[{path:"registry/default/examples/image-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(4250).then(l.bind(l,94250))),source:"",meta:void 0},"infinite-scroll-demo":{name:"infinite-scroll-demo",description:"",type:"registry:example",registryDependencies:["custom/infinite-scroll"],files:[{path:"registry/default/examples/infinite-scroll-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(3127),l.e(2549),l.e(5591),l.e(3744),l.e(1876),l.e(4093)]).then(l.bind(l,44093))),source:"",meta:void 0},"infinite-scroll-element-demo":{name:"infinite-scroll-element-demo",description:"",type:"registry:example",registryDependencies:["custom/infinite-scroll"],files:[{path:"registry/default/examples/infinite-scroll-element-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(3127),l.e(2549),l.e(5591),l.e(4444),l.e(3744),l.e(1876),l.e(7348)]).then(l.bind(l,27348))),source:"",meta:void 0},"inline-notification-demo":{name:"inline-notification-demo",description:"",type:"registry:example",registryDependencies:["custom/inline-notification"],files:[{path:"registry/default/examples/inline-notification-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(764).then(l.bind(l,90764))),source:"",meta:void 0},"inline-notification-info":{name:"inline-notification-info",description:"",type:"registry:example",registryDependencies:["custom/inline-notification"],files:[{path:"registry/default/examples/inline-notification-info.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(5325).then(l.bind(l,95325))),source:"",meta:void 0},"inline-notification-success":{name:"inline-notification-success",description:"",type:"registry:example",registryDependencies:["custom/inline-notification"],files:[{path:"registry/default/examples/inline-notification-success.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(8490).then(l.bind(l,98490))),source:"",meta:void 0},"inline-notification-destructive":{name:"inline-notification-destructive",description:"",type:"registry:example",registryDependencies:["custom/inline-notification"],files:[{path:"registry/default/examples/inline-notification-destructive.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(6191).then(l.bind(l,56191))),source:"",meta:void 0},"input-form":{name:"input-form",description:"",type:"registry:example",registryDependencies:["custom/input","custom/button","custom/form"],files:[{path:"registry/default/examples/input-form.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(4645),l.e(5103),l.e(4322),l.e(6034)]).then(l.bind(l,74876))),source:"",meta:void 0},"profile-avatar-button-demo":{name:"profile-avatar-button-demo",description:"",type:"registry:example",registryDependencies:["custom/

1profile-avatar-button"],files:[{path:"registry/default/examples/profile-avatar-button-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(7971)]).then(l.bind(l,17971))),source:"",meta:void 0},"profile-avatar-button-large-vertical":{name:"profile-avatar-button-large-vertical",description:"",type:"registry:example",registryDependencies:["custom/profile-avatar-button"],files:[{path:"registry/default/examples/profile-avatar-button-large-vertical.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(414)]).then(l.bind(l,40414))),source:"",meta:void 0},"profile-avatar-button-large-horizontal":{name:"profile-avatar-button-large-horizontal",description:"",type:"registry:example",registryDependencies:["custom/profile-avatar-button"],files:[{path:"registry/default/examples/profile-avatar-button-large-horizontal.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(6248)]).then(l.bind(l,36248))),source:"",meta:void 0},"profile-avatar-button-medium":{name:"profile-avatar-button-medium",description:"",type:"registry:example",registryDependencies:["custom/profile-avatar-button"],files:[{path:"registry/default/examples/profile-avatar-button-medium.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(1059)]).then(l.bind(l,61059))),source:"",meta:void 0},"profile-avatar-button-metadata":{name:"profile-avatar-button-metadata",description:"",type:"registry:example",registryDependencies:["custom/profile-avatar-button"],files:[{path:"registry/default/examples/profile-avatar-button-metadata.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(9445)]).then(l.bind(l,19445))),source:"",meta:void 0},"profile-avatar-button-nsfw":{name:"profile-avatar-button-nsfw",description:"",type:"registry:example",registryDependencies:["custom/profile-avatar-button"],files:[{path:"registry/default/examples/profile-avatar-button-nsfw.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(7426)]).then(l.bind(l,57426))),source:"",meta:void 0},"profile-avatar-button-small":{name:"profile-avatar-button-small",description:"",type:"registry:example",registryDependencies:["custom/profile-avatar-button"],files:[{path:"registry/default/examples/profile-avatar-button-small.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5360),l.e(1635)]).then(l.bind(l,81635))),source:"",meta:void 0},"profile-avatar-demo":{name:"profile-avatar-demo",description:"",type:"registry:example",registryDependencies:["custom/profile-avatar"],files:[{path:"registry/default/examples/profile-avatar-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(24).then(l.bind(l,50024))),source:"",meta:void 0},"profile-avatar-nsfw":{name:"profile-avatar-nsfw",description:"",type:"registry:example",registryDependencies:["custom/profile-avatar"],files:[{path:"registry/default/examples/profile-avatar-nsfw.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(8033).then(l.bind(l,58033))),source:"",meta:void 0},"profile-avatar-size":{name:"profile-avatar-size",description:"",type:"registry:example",registryDependencies:["custom/profile-avatar"],files:[{path:"registry/default/examples/profile-avatar-size.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(7634).then(l.bind(l,37634))),source:"",meta:void 0},"stack-demo":{name:"stack-demo",description:"",type:"registry:example",registryDependencies:["custom/stack"],files:[{path:"registry/default/examples/stack-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(8415).then(l.bind(l,88415))),source:"",meta:void 0},"stack-align-items":{name:"stack-align-items",description:"",type:"registry:example",registryDependencies:["custom/stack"],files:[{path:"registry/default/examples/stack-align-items.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(6786).then(l.bind(l,66786))),source:"",meta:void 0},"stack-direction":{name:"stack-direction",description:"",type:"registry:example",registryDependencies:["custom/stack"],files:[{path:"registry/default/examples/stack-direction.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(2285).then(l.bind(l,22285))),source:"",meta:void 0},"stack-divider":{name:"stack-divider",description:"",type:"registry:example",registryDependencies:["custom/stack"],files:[{path:"registry/default/examples/stack-divider.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(4349).then(l.bind(l,64349))),source:"",meta:void 0},"stack-justify-content":{name:"stack-justify-content",description:"",type:"registry:example",registryDependencies:["custom/stack"],files:[{path:"registry/default/examples/stack-justify-content.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(1326).then(l.bind(l,71326))),source:"",meta:void 0},"stacked-avatar-demo":{name:"stacked-avatar-demo",description:"",type:"registry:example",registryDependencies:["custom/stacked-avatar"],files:[{path:"registry/default/examples/stacked-avatar-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(5464).then(l.bind(l,45464))),source:"",meta:void 0},"stepper-demo":{name:"stepper-demo",description:"",type:"registry:example",registryDependencies:["custom/stepper","custom/button"],files:[{path:"registry/default/examples/stepper-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(9762).then(l.bind(l,9762))),source:"",meta:void 0},"select-demo":{name:"select-demo",description:"",type:"registry:example",registryDependencies:["custom/select"],files:[{path:"registry/default/examples/select-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(1465).then(l.bind(l,61465))),source:"",meta:void 0},"sonner-demo":{name:"sonner-demo",description:"",type:"registry:example",registryDependencies:["custom/sonner","custom/button"],files:[{path:"registry/default/examples/sonner-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5103),l.e(6764)]).then(l.bind(l,6764))),source:"",meta:void 0},"sonner-info":{name:"sonner-info",description:"",type:"registry:example",registryDependencies:["custom/sonner","custom/button"],files:[{path:"registry/default/examples/sonner-info.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5103),l.e(1325)]).then(l.bind(l,11325))),source:"",meta:void 0},"sonner-success":{name:"sonner-success",description:"",type:"registry:example",registryDependencies:["custom/sonner","custom/button"],files:[{path:"registry/default/examples/sonner-success.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5103),l.e(5402)]).then(l.bind(l,65402))),source:"",meta:void 0},"sonner-warning":{name:"sonner-warning",description:"",type:"registry:example",registryDependencies:["custom/sonner","custom/button"],files:[{path:"registry/default/examples/sonner-warning.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5103),l.e(3835)]).then(l.bind(l,33835))),source:"",meta:void 0}

1,"slider-demo":{name:"slider-demo",description:"",type:"registry:example",registryDependencies:["custom/slider"],files:[{path:"registry/default/examples/slider-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(7007),l.e(3968)]).then(l.bind(l,93968))),source:"",meta:void 0},"tabs-demo":{name:"tabs-demo",description:"",type:"registry:example",registryDependencies:["tabs"],files:[{path:"registry/default/examples/tabs-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(9665).then(l.bind(l,89665))),source:"",meta:void 0},"tags-input-demo":{name:"tags-input-demo",description:"",type:"registry:example",registryDependencies:["custom/tags-input"],files:[{path:"registry/default/examples/tags-input-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(4645),l.e(6983)]).then(l.bind(l,14293))),source:"",meta:void 0},"tags-input-autocomplete":{name:"tags-input-autocomplete",description:"",type:"registry:example",registryDependencies:["custom/tags-input","custom/autocomplete"],files:[{path:"registry/default/examples/tags-input-autocomplete.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(4645),l.e(8358),l.e(2938),l.e(8639)]).then(l.bind(l,92224))),source:"",meta:void 0},"textarea-demo":{name:"textarea-demo",description:"",type:"registry:example",registryDependencies:["custom/textarea"],files:[{path:"registry/default/examples/textarea-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(1375).then(l.bind(l,1375))),source:"",meta:void 0},"sonner-error":{name:"sonner-error",description:"",type:"registry:example",registryDependencies:["custom/sonner","custom/button"],files:[{path:"registry/default/examples/sonner-error.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>Promise.all([l.e(5103),l.e(6817)]).then(l.bind(l,86817))),source:"",meta:void 0},"typography-demo":{name:"typography-demo",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(7212).then(l.bind(l,37212))),source:"",meta:void 0},"typography-h1":{name:"typography-h1",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-h1.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(3664).then(l.bind(l,73664))),source:"",meta:void 0},"typography-h2":{name:"typography-h2",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-h2.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(2851).then(l.bind(l,52851))),source:"",meta:void 0},"typography-h3":{name:"typography-h3",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-h3.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(5926).then(l.bind(l,55926))),source:"",meta:void 0},"typography-h4":{name:"typography-h4",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-h4.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(4857).then(l.bind(l,34857))),source:"",meta:void 0},"typography-h5":{name:"typography-h5",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-h5.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(9636).then(l.bind(l,89636))),source:"",meta:void 0},"typography-h6":{name:"typography-h6",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-h6.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(2215).then(l.bind(l,82215))),source:"",meta:void 0},"typography-p":{name:"typography-p",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-p.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(4459).then(l.bind(l,84459))),source:"",meta:void 0},"typography-small":{name:"typography-small",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-small.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(9334).then(l.bind(l,59334))),source:"",meta:void 0},"typography-small-bold":{name:"typography-small-bold",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-small-bold.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(7318).then(l.bind(l,77318))),source:"",meta:void 0},"typography-extra-small":{name:"typography-extra-small",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-extra-small.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(7511).then(l.bind(l,27511))),source:"",meta:void 0},"typography-extra-small-bold":{name:"typography-extra-small-bold",description:"",type:"registry:example",registryDependencies:["custom/typography"],files:[{path:"registry/default/examples/typography-extra-small-bold.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(8845).then(l.bind(l,8845))),source:"",meta:void 0},"feed-cta-demo":{name:"feed-cta-demo",description:"",type:"registry:example",registryDependencies:["custom/feed-cta"],files:[{path:"registry/default/examples/feed-cta-demo.tsx",type:"registry:example",target:""}],categories:void 0,component:r.lazy(()=>l.e(9122).then(l.bind(l,19122))),source:"",meta:void 0}}};var k=l(36190),A=l(42770);let S=[{name:"default",label:"Default"}];function P(e){let{className:n,...l}=e,[r,a]=(0,x.U)();return(0,s.jsxs)(A.Select,{value:r.style,onValueChange:e=>a({...r,style:e}),children:[(0,s.jsxs)(A.SelectTrigger,{className:(0,h.cn)("h-7 w-[145px] text-xs [&_svg]:h-4 [&_svg]:w-4",n),...l,children:[(0,s.jsx)("span",{className:"text-muted-foreground",children:"Style: "}),(0,s.jsx)(A.SelectValue,{placeholder:"Select style"})]}),(0,s.jsx)(A.SelectContent,{children:S.map(e=>(0,s.jsx)(A.SelectItem,{value:e.name,className:"text-xs",children:e.label},e.name))})]})}function I(e){let{defaultTheme:n,children:l,className:r}=e,[a]=(0,x.U)();return(0,s.jsx)("div",{className:(0,h.cn)("theme-".concat(n||a.theme),"w-full",r),style:{"--radius":"".concat(n?.5:a.radius,"rem")},children:l})}var D=l(54887);let L=l(41040).env.REGISTRY_URL||"https://akasha-ui.pages.dev/r",R=JSON.parse('[{"title":"Introduction","description":"A collection of components and blocks built on top of shadcn/ui and Tailwind CSS that you can copy and paste into your apps.","published":true,"featured":false,"component":false,"toc":true,"body":{"raw":"\\nA curated list of UI components used in [AKASHA World](https://akasha.org/world).\\n\\nPick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.\\n","code":"var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var y=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var e in t)r(n,e,{get:t[e],enumerable:!0})},a=(n,t,e,s)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let c of m(t))!x.call(n,c)&&c!==e&&r(n,c,{get:()=>t[c],enumerable:!(s=h(t,c))||s.enumerable});return n};var j=(n,t,e)=>(e=n!=null?l(f(n)):{},a(t||!n||!n.__esModule?r(e,\\"default\\",{value:n,enumerable:!0}):e,n)),A=n=>a(r({}

1,\\"__esModule\\",{value:!0}),n);var d=y((w,i)=>{i.exports=_jsx_runtime});var g={};_(g,{default:()=>u,frontmatter:()=>C});var o=j(d()),C={title:\\"Introduction\\",description:\\"A collection of components and blocks built on top of shadcn/ui and Tailwind CSS that you can copy and paste into your apps.\\"};function p(n){let t={a:\\"a\\",p:\\"p\\",...n.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:[\\"A curated list of UI components used in \\",(0,o.jsx)(t.a,{href:\\"https://akasha.org/world\\",children:\\"AKASHA World\\"}),\\".\\"]}),`\\n`,(0,o.jsx)(t.p,{children:\\"Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.\\"})]})}function u(n={}){let{wrapper:t}=n.components||{};return t?(0,o.jsx)(t,{...n,children:(0,o.jsx)(p,{...n})}):p(n)}return A(g);})();\\n;return Component;"},"_id":"docs/index.mdx","_raw":{"sourceFilePath":"docs/index.mdx","sourceFileName":"index.mdx","sourceFileDir":"docs","contentType":"mdx","flattenedPath":"docs"},"type":"Doc","slug":"/docs","slugAsParams":""},{"title":"Theming","description":"List of CSS Variables","published":true,"featured":false,"component":false,"toc":true,"body":{"raw":"\\nHere is a list of CSS variables to add to your CSS file, in addition to those described in the [theming](https://ui.shadcn.com/docs/theming) section of the shadcn website.\\n\\n```css title=\\"app/globals.css\\"\\n:root {\\n  --success: oklch(69.6% 0.149 162.5);\\n  --success-foreground: oklch(97.9% 0.021 166.1);\\n  --warning: oklch(86% 0.173 91.8);\\n  --warning-foreground: oklch(98.7% 0.026 102.2);\\n}\\n\\n.dark {\\n  --success: oklch(90.5% 0.089 164.2);\\n  --success-foreground: oklch(37.8% 0.073 168.9);\\n  --warning: oklch(97.3% 0.07 103.2);\\n  --warning-foreground: oklch(55.4% 0.121 66.4);\\n}\\n```\\n","code":"var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var u=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),g=(e,l)=>{for(var s in l)r(e,s,{get:l[s],enumerable:!0})},a=(e,l,s,o)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let c of y(l))!B.call(e,c)&&c!==s&&r(e,c,{get:()=>l[c],enumerable:!(o=F(l,c))||o.enumerable});return e};var m=(e,l,s)=>(s=e!=null?p(E(e)):{},a(l||!e||!e.__esModule?r(s,\\"default\\",{value:e,enumerable:!0}):s,e)),f=e=>a(r({},\\"__esModule\\",{value:!0}),e);var t=u((w,i)=>{i.exports=_jsx_runtime});var _={};g(_,{default:()=>h,frontmatter:()=>k});var n=m(t()),k={title:\\"Theming\\",description:\\"List of CSS Variables\\"};function d(e){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(l.p,{children:[\\"Here is a list of CSS variables to add to your CSS file, in addition to those described in the \\",(0,n.jsx)(l.a,{href:\\"https://ui.shadcn.com/docs/theming\\",children:\\"theming\\"}),\\" section of the shadcn website.\\"]}),`\\n`,(0,n.jsxs)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:[(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-title\\":\\"\\",\\"data-language\\":\\"css\\",\\"data-theme\\":\\"default\\",children:\\"app/globals.css\\"}),(0,n.jsx)(l.pre,{\\"data-language\\":\\"css\\",\\"data-theme\\":\\"default\\",__withMeta__:!0,__rawString__:`:root {\\n  --success: oklch(69.6% 0.149 162.5);\\n  --success-foreground: oklch(97.9% 0.021 166.1);\\n  --warning: oklch(86% 0.173 91.8);\\n  --warning-foreground: oklch(98.7% 0.026 102.2);\\n}\\n\\n.dark {\\n  --success: oklch(90.5% 0.089 164.2);\\n  --success-foreground: oklch(37.8% 0.073 168.9);\\n  --warning: oklch(97.3% 0.07 103.2);\\n  --warning-foreground: oklch(55.4% 0.121 66.4);\\n}\\n`,children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"css\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\":root\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  --success\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"oklch\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"69.6\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.149\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 162.5\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  --success-foreground\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"oklch\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"97.9\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.021\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 166.1\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  --warning\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"oklch\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"86\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.173\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 91.8\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  --warning-foreground\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"oklch\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"98.7\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.026\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 102.2\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\".dark\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  --success\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"oklch\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"90.5\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.089\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 164.2\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  --success-foreground\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"oklch\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"37.8\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.073\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 168.9\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  --warning\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"oklch\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"97.3\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.07\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 103.2\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  --warning-foreground\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"oklch\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"55.4\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.121\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 66.4\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})]})]})}function h(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}return f(_);})();\\n;return Component;"},"_id":"docs/theming.mdx","_raw":{"sourceFilePath":"docs/theming.mdx","sourceFileName":"theming.mdx","sourceFileDir":"docs","contentType":"mdx","flattenedPath":"docs/theming"},"type":"Doc","slug":"/docs/theming","slugAsParams":"theming"},{"title":"Accordion","description":"A vertically stacked set of interactive headings that each reveal a section of content.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/

1accordion","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Accordion component customized by and adjusting icon color.\\n\\n<ComponentPreview name=\\"accordion-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/accordion.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"accordion\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\"<path-to-ui-components>/accordion\\";\\n```\\n\\n```tsx\\n <Accordion type=\\"single\\" collapsible className=\\"w-full\\">\\n  <AccordionItem value=\\"item-1\\">\\n    <AccordionTrigger>Is it accessible?</AccordionTrigger>\\n    <AccordionContent>\\n      Yes. It adheres to the WAI-ARIA design pattern.\\n    </AccordionContent>\\n  </AccordionItem>\\n  <AccordionItem value=\\"item-2\\">\\n    <AccordionTrigger>Is it styled?</AccordionTrigger>\\n    <AccordionContent>\\n      Yes. It comes with default styles that matches the other\\n      components&apos; aesthetic.\\n    </AccordionContent>\\n  </AccordionItem>\\n  <AccordionItem value=\\"item-3\\">\\n    <AccordionTrigger>Is it animated?</AccordionTrigger>\\n    <AccordionContent>\\n      Yes. It\'s animated by default, but you can disable it if you prefer.\\n    </AccordionContent>\\n  </AccordionItem>\\n</Accordion>\\n```","code":"var Component=(()=>{var A=Object.create;var a=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var C=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),v=(l,n)=>{for(var c in n)a(l,c,{get:n[c],enumerable:!0})},E=(l,n,c,o)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let s of g(n))!f.call(l,s)&&s!==c&&a(l,s,{get:()=>n[s],enumerable:!(o=N(n,s))||o.enumerable});return l};var I=(l,n,c)=>(c=l!=null?A(B(l)):{},E(n||!l||!l.__esModule?a(c,\\"default\\",{value:l,enumerable:!0}):c,l)),b=l=>E(a({},\\"__esModule\\",{value:!0}),l);var m=C((P,y)=>{y.exports=_jsx_runtime});var x={};v(x,{default:()=>u,frontmatter:()=>_});var e=I(m()),_={title:\\"Accordion\\",description:\\"A vertically stacked set of interactive headings that each reveal a section of content.\\",component:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/accordion\\"}};function F(l){let n={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...l.components},{ComponentPreview:c,ComponentSource:o,Step:s,Steps:d,Tabs:p,TabsContent:i,TabsList:h,TabsTrigger:t}=n;return c||r(\\"ComponentPreview\\",!0),o||r(\\"ComponentSource\\",!0),s||r(\\"Step\\",!0),d||r(\\"Steps\\",!0),p||r(\\"Tabs\\",!0),i||r(\\"TabsContent\\",!0),h||r(\\"TabsList\\",!0),t||r(\\"TabsTrigger\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:\\"A ShadCN Accordion component customized by and adjusting icon color.\\"}),`\\n`,(0,e.jsx)(c,{name:\\"accordion-demo\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\"@/components/ui/accordion\\";\\n\\nexport function AccordionDemo() {\\n  return (\\n    <Accordion type=\\"single\\" collapsible className=\\"w-full\\">\\n      <AccordionItem value=\\"item-1\\">\\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes. It adheres to the WAI-ARIA design pattern.\\n        </AccordionContent>\\n      </AccordionItem>\\n      <AccordionItem value=\\"item-2\\">\\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes. It comes with default styles that matches the other\\n          components&apos; aesthetic.\\n        </AccordionContent>\\n      </AccordionItem>\\n      <AccordionItem value=\\"item-3\\">\\n        <AccordionTrigger>Is it animated?</AccordionTrigger>\\n        <AccordionContent>\\n          Yes. It\'s animated by default, but you can disable it if you prefer.\\n        </AccordionContent>\\n      </AccordionItem>\\n    </Accordion>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/accordion-demo.tsx\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Accordion,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AccordionContent,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AccordionItem,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AccordionTrigger,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/accordion\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" AccordionDemo\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Accordion\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" type\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"single\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" collapsible\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-full\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"item-1\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Is it accessible?</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          Yes. It adheres to the WAI-ARIA design pattern.\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"item-2\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Is it styled?</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          Yes. It comes with default styles that matches the other\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          components\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"&apos;\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" aesthetic.\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"item-3\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Is it animated?</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          Yes. It\'s animated by default, but you can disable it if you prefer.\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Accordion\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"installation\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,e.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,e.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,e.jsx)(i,{value:\\"cli\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/accordion.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/accordion.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/accordion.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/accordion.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/accordion.json\\"\\n`,children:(0,e.jsx)(n.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/accordion.json\\"\'})]})})})})}),(0,e.jsx)(i,{value:\\"manual\\",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(s,{children:\\"Copy and paste the following code into your project.\\"}),(0,e.jsx)(o,{name:\\"accordion\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport * as AccordionPrimitive from \\"@radix-ui/react-accordion\\";\\nimport { ChevronDownIcon } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nfunction Accordion({\\n  ...props\\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\\n  return <AccordionPrimitive.Root data-slot=\\"accordion\\" {...props} />;\\n}\\n\\nfunction AccordionItem({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\\n  return (\\n    <AccordionPrimitive.Item\\n      data-slot=\\"accordion-item\\"\\n      className={cn(\\"border-b last:border-b-0\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction AccordionTrigger({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\\n  return (\\n    <AccordionPrimitive.Header className=\\"flex\\">\\n      <AccordionPrimitive.Trigger\\n        data-slot=\\"accordion-trigger\\"\\n        className={cn(\\n          \\"ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all hover:underline focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\\",\\n          className\\n        )}\\n        {...props}\\n      >\\n        {children}\\n        <ChevronDownIcon className=\\"text-primary pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\\" />\\n      </AccordionPrimitive.Trigger>\\n    </AccordionPrimitive.Header>\\n  );\\n}\\n\\nfunction AccordionContent({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\\n  return (\\n    <AccordionPrimitive.Content\\n      data-slot=\\"accordion-content\\"\\n      className=\\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\\"\\n      {...props}\\n    >\\n      <div className={cn(\\"pt-0 pb-4\\", className)}>{children}</div>\\n    </AccordionPrimitive.Content>\\n  );\\n}\\n\\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\\n`,__src__:\\"registry/default/ui/accordion.tsx\\",__style__:\\"default\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" AccordionPrimitive \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-accordion\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { ChevronDownIcon } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" Accordion\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" AccordionPrimitive.Root>) {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionPrimitive.Root\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"accordion\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props} />;\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" AccordionPrimitive.Item>) {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionPrimitive.Item\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"accordion-item\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"border-b last:border-b-0\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  children\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" AccordionPrimitive.Trigger>) {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionPrimitive.Header\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionPrimitive.Trigger\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"accordion-trigger\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 flex flex-1 items-start justify-between gap-4 roun

1ded-md py-4 text-left text-sm font-medium transition-all hover:underline focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          className\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {children}\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ChevronDownIcon\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-primary pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionPrimitive.Trigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionPrimitive.Header\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  children\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" AccordionPrimitive.Content>) {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionPrimitive.Content\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"accordion-content\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"pt-0 pb-4\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}>{children}</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionPrimitive.Content\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\\"})]})]})})})}),(0,e.jsx)(s,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"usage\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\"<path-to-ui-components>/accordion\\";\\n`,children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Accordion,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AccordionContent,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AccordionItem,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AccordionTrigger,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/accordion\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:` <Accordion type=\\"single\\" collapsible className=\\"w-full\\">\\n  <AccordionItem value=\\"item-1\\">\\n    <AccordionTrigger>Is it accessible?</AccordionTrigger>\\n    <AccordionContent>\\n      Yes. It adheres to the WAI-ARIA design pattern.\\n    </AccordionContent>\\n  </AccordionItem>\\n  <AccordionItem value=\\"item-2\\">\\n    <AccordionTrigger>Is it styled?</AccordionTrigger>\\n    <AccordionContent>\\n      Yes. It comes with default styles that matches the other\\n      components&apos; aesthetic.\\n    </AccordionContent>\\n  </AccordionItem>\\n  <AccordionItem value=\\"item-3\\">\\n    <AccordionTrigger>Is it animated?</AccordionTrigger>\\n    <AccordionContent>\\n      Yes. It\'s animated by default, but you can disable it if you prefer.\\n    </AccordionContent>\\n  </AccordionItem>\\n</Accordion>\\n`,children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Accordion\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" type\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"single\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" collapsible\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-full\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"item-1\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Is it accessible?</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Yes. It adheres to the WAI-ARIA design pattern.\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"item-2\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Is it styled?</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Yes. It comes with default styles that matches the other\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      components\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"&apos;\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" aesthetic.\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"item-3\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Is it animated?</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionTrigger\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Yes. It\'s animated by default, but you can disable it if you prefer.\\"})}),`\\n`,(0,e.

1jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"AccordionItem\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Accordion\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})})]})}function u(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(F,{...l})}):F(l)}function r(l,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+l+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(x);})();\\n;return Component;"},"_id":"docs/components/accordion.mdx","_raw":{"sourceFilePath":"docs/components/accordion.mdx","sourceFileName":"accordion.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/accordion"},"type":"Doc","slug":"/docs/components/accordion","slugAsParams":"components/accordion"},{"title":"Autocomplete","description":"A component that allows users to search and select single or multiple options from a list.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"autocomplete-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/autocomplete.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install @radix-ui/react-slot cmdk lucide-react\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"autocomplete\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  Autocomplete,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompleteTrigger,\\n} from \\"<path-to-ui-components>/autocomplete\\";\\n```\\n\\n```tsx\\n<Autocomplete\\n  value={singleValue}\\n  emptyMessage=\\"No framework found.\\"\\n  onValueChange={setSingleValue}\\n>\\n  <AutocompleteTrigger placeholder=\\"Select a framework\\" />\\n  <AutocompleteList>\\n    <AutocompleteItem value=\\"next\\">Next.js</AutocompleteItem>\\n    <AutocompleteItem value=\\"sveltekit\\">SvelteKit</AutocompleteItem>\\n    <AutocompleteItem value=\\"nuxt\\">Nuxt.js</AutocompleteItem>\\n    <AutocompleteItem value=\\"remix\\">Remix</AutocompleteItem>\\n    <AutocompleteItem value=\\"astro\\">Astro</AutocompleteItem>\\n    <AutocompleteItem value=\\"wordpress\\">WordPress</AutocompleteItem>\\n    <AutocompleteItem value=\\"express\\">Express.js</AutocompleteItem>\\n    <AutocompleteItem value=\\"nest\\">Nest.js</AutocompleteItem>\\n  </AutocompleteList>\\n</Autocomplete>\\n```\\n\\n## Props\\n\\n| Name         | Type                 | Description                            |\\n| ------------ | -------------------- | -------------------------------------- |\\n| value        | string or `string[]` | Component\'s value.                     |\\n| emptyMessage | `string`             | Message to display when list is empty. |\\n| loading      | `boolean`            | Shows spinner while list loads.        |\\n| multiple     | `boolean`            | Allows single or multiple selections.  |\\n\\n<Callout>\\n\\nSingle selection is supported by default.\\n\\n</Callout>\\n\\n### AutocompleteItem\\n\\n#### Props\\n\\n| Name  | Type   | Description        |\\n| ----- | ------ | ------------------ |\\n| value | string | Component\'s value. |\\n\\n## Example\\n\\n### Multiple options selection\\n\\n<ComponentPreview name=\\"autocomplete-multiple-demo\\" />\\n","code":"var Component=(()=>{var B=Object.create;var t=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var A=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),x=(n,l)=>{for(var s in l)t(n,s,{get:l[s],enumerable:!0})},y=(n,l,s,o)=>

1{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let r of C(l))!f.call(n,r)&&r!==s&&t(n,r,{get:()=>l[r],enumerable:!(o=g(l,r))||o.enumerable});return n};var S=(n,l,s)=>(s=n!=null?B(v(n)):{},y(l||!n||!n.__esModule?t(s,\\"default\\",{value:n,enumerable:!0}):s,n)),V=n=>y(t({},\\"__esModule\\",{value:!0}),n);var F=A((w,m)=>{m.exports=_jsx_runtime});var b={};x(b,{default:()=>N,frontmatter:()=>I});var e=S(F()),I={title:\\"Autocomplete\\",description:\\"A component that allows users to search and select single or multiple options from a list.\\",component:!0};function u(n){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",h4:\\"h4\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...n.components},{Callout:s,ComponentPreview:o,ComponentSource:r,Step:a,Steps:d,Tabs:h,TabsContent:i,TabsList:E,TabsTrigger:p}=l;return s||c(\\"Callout\\",!0),o||c(\\"ComponentPreview\\",!0),r||c(\\"ComponentSource\\",!0),a||c(\\"Step\\",!0),d||c(\\"Steps\\",!0),h||c(\\"Tabs\\",!0),i||c(\\"TabsContent\\",!0),E||c(\\"TabsList\\",!0),p||c(\\"TabsTrigger\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(o,{name:\\"autocomplete-demo\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport { useState } from \\"react\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompleteTrigger,\\n} from \\"@/components/ui/autocomplete\\";\\n\\nexport function AutoCompleteDemo() {\\n  const [singleValue, setSingleValue] = useState<string>(\\"\\");\\n\\n  return (\\n    <div className=\\"flex flex-col gap-2\\">\\n      <Autocomplete\\n        value={singleValue}\\n        emptyMessage=\\"No framework found.\\"\\n        onValueChange={setSingleValue}\\n      >\\n        <AutocompleteTrigger placeholder=\\"Select a framework\\" />\\n        <AutocompleteList>\\n          <AutocompleteItem value=\\"next\\">Next.js</AutocompleteItem>\\n          <AutocompleteItem value=\\"sveltekit\\">SvelteKit</AutocompleteItem>\\n          <AutocompleteItem value=\\"nuxt\\">Nuxt.js</AutocompleteItem>\\n          <AutocompleteItem value=\\"remix\\">Remix</AutocompleteItem>\\n          <AutocompleteItem value=\\"astro\\">Astro</AutocompleteItem>\\n          <AutocompleteItem value=\\"wordpress\\">WordPress</AutocompleteItem>\\n          <AutocompleteItem value=\\"express\\">Express.js</AutocompleteItem>\\n          <AutocompleteItem value=\\"nest\\">Nest.js</AutocompleteItem>\\n        </AutocompleteList>\\n      </Autocomplete>\\n      <p className=\\"text-sm text-muted-foreground\\">\\n        Selected: {singleValue || \\"None\\"}\\n      </p>\\n    </div>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/autocomplete-demo.tsx\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useState } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Autocomplete,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteItem,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteList,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteTrigger,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/autocomplete\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" AutoCompleteDemo\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"singleValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setSingleValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-col gap-2\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Autocomplete\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{singleValue}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        emptyMessage\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"No framework found.\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        onValueChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{setSingleValue}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteTrigger\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" placeholder\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Select a framework\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteList\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"next\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Next.js</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sveltekit\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">SvelteKit</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"nuxt\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Nuxt.js</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"remix\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Remix</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"astro\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Astro</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"wordpress\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">WordPress</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"express\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Express.js</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"nest\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Nest.js</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteList\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Autocomplete\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-sm text-muted-foreground\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Selected: {singleValue \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"None\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"installation\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-la

1bel\\":\\"Link to section\\",href:\\"#installation\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,e.jsxs)(h,{defaultValue:\\"cli\\",children:[(0,e.jsxs)(E,{children:[(0,e.jsx)(p,{value:\\"cli\\",children:\\"CLI\\"}),(0,e.jsx)(p,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,e.jsx)(i,{value:\\"cli\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/autocomplete.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/autocomplete.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/autocomplete.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/autocomplete.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/autocomplete.json\\"\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/autocomplete.json\\"\'})]})})})})}),(0,e.jsx)(i,{value:\\"manual\\",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(a,{children:\\"Install the following dependencies:\\"}),(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install @radix-ui/react-slot cmdk lucide-react\\n`,__npmCommand__:`npm install @radix-ui/react-slot cmdk lucide-react\\n`,__yarnCommand__:`yarn add @radix-ui/react-slot cmdk lucide-react\\n`,__pnpmCommand__:`pnpm add @radix-ui/react-slot cmdk lucide-react\\n`,__bunCommand__:`bun add @radix-ui/react-slot cmdk lucide-react\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" @radix-ui/react-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" cmdk\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" lucide-react\\"})]})})})}),(0,e.jsx)(a,{children:\\"Copy and paste the following code into your project.\\"}),(0,e.jsx)(r,{name:\\"autocomplete\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport { Slot } from \\"@radix-ui/react-slot\\";\\nimport { Command as CommandPrimitive } from \\"cmdk\\";\\nimport { Check, Loader2 } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n} from \\"@/components/ui/command\\";\\nimport { Input } from \\"@/components/ui/input\\";\\n\\nconst AutocompleteContext = React.createContext<\\n  | ((\\n      | {\\n          multiple: true;\\n          onValueChange?: (value: string[]) => void;\\n        }\\n      | { multiple?: false; onValueChange?: (value: string) => void }\\n    ) & {\\n      searchValue: string;\\n      open: boolean;\\n      emptyMessage: string;\\n      loading?: boolean;\\n      selectedValues: string[];\\n      setSearchValue: React.Dispatch<React.SetStateAction<string>>;\\n      setOpen: React.Dispatch<React.SetStateAction<boolean>>;\\n    })\\n  | null\\n>(null);\\n\\nconst useAutocompleteContext = () => {\\n  const context = React.useContext(AutocompleteContext);\\n  if (!context) {\\n    throw new Error(\\n      \\"\\\\`useAutocompleteContext\\\\` must be used within \\\\`Autocomplete\\\\`\\"\\n    );\\n  }\\n  return context;\\n};\\n\\nconst Autocomplete = ({\\n  emptyMessage = \\"\\",\\n  loading = false,\\n  className,\\n  children,\\n  ...props\\n}: {\\n  emptyMessage?: string;\\n  loading?: boolean;\\n  className?: string;\\n  children?: React.ReactNode;\\n} & (\\n  | {\\n      multiple: true;\\n      value?: string[];\\n      onValueChange?: (value: string[]) => void;\\n    }\\n  | {\\n      multiple?: false;\\n      value?: string;\\n      onValueChange?: (value: string) => void;\\n    }\\n)) => {\\n  const [open, setOpen] = React.useState(false);\\n  const [searchValue, setSearchValue] = React.useState(\\"\\");\\n\\n  const getSelectedValues = React.useCallback(() => {\\n    if (props.multiple) return props.value || [];\\n    return typeof props.value === \\"string\\" ? [props.value] : [];\\n  }, [props.multiple, props.value]);\\n\\n  return (\\n    <AutocompleteContext.Provider\\n      value={{\\n        ...props,\\n        searchValue,\\n        emptyMessage,\\n        open,\\n        selectedValues: getSelectedValues(),\\n        loading,\\n        setOpen,\\n        setSearchValue,\\n      }}\\n    >\\n      <Command\\n        data-slot=\\"autocomplete\\"\\n        className={cn(\\n          \\"relative flex flex-col gap-2 bg-transparent roun

1ded-lg text-sm overflow-visible\\",\\n          className\\n        )}\\n      >\\n        <div className=\\"hidden\\">\\n          <CommandInput value={searchValue} />\\n        </div>\\n        {children}\\n      </Command>\\n    </AutocompleteContext.Provider>\\n  );\\n};\\n\\nconst AutocompleteTrigger = (\\n  props:\\n    | { asChild: true; children?: React.ReactNode }\\n    | (React.ComponentProps<\\"input\\"> & {\\n        asChild?: false;\\n      })\\n) => {\\n  const { searchValue, setSearchValue, setOpen, multiple } =\\n    useAutocompleteContext();\\n\\n  const { asChild, ...rest } = props;\\n  const Comp = asChild ? Slot : Input;\\n\\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\\n    setSearchValue(event.target.value);\\n    setOpen(true);\\n    if (asChild === false) {\\n      props.onChange?.(event);\\n    }\\n  };\\n\\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\\n    setOpen(true);\\n    if (asChild === false) {\\n      props.onFocus?.(event);\\n    }\\n  };\\n\\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\\n    setOpen(false);\\n    if (!multiple) {\\n      setSearchValue(searchValue || \\"\\");\\n    }\\n    if (asChild === false) {\\n      props.onBlur?.(event);\\n    }\\n  };\\n\\n  return (\\n    <Comp\\n      data-slot=\\"autocomplete-trigger\\"\\n      value={searchValue}\\n      type=\\"search\\"\\n      onChange={handleChange}\\n      onFocus={handleFocus}\\n      onBlur={handleBlur}\\n      {...rest}\\n    />\\n  );\\n};\\n\\nconst AutocompleteList = ({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof CommandList>) => {\\n  const { open, loading, emptyMessage } = useAutocompleteContext();\\n\\n  return (\\n    <CommandList\\n      data-slot=\\"autocomplete-list\\"\\n      className={cn(\\n        \\"absolute top-11 animate-in fade-in-0 zoom-in-95 z-10 w-full border rounded-lg bg-card p-1\\",\\n        {\\n          hidden: !open,\\n        },\\n        !emptyMessage && \\"has-[[data-slot=\'command-group\'][hidden]]:hidden\\",\\n        className\\n      )}\\n      {...props}\\n    >\\n      {loading && (\\n        <CommandPrimitive.Loading className=\\"flex justify-center p-1\\">\\n          <Loader2 className=\\"animate-spin\\" />\\n        </CommandPrimitive.Loading>\\n      )}\\n      {!loading && emptyMessage && (\\n        <CommandEmpty className=\\"flex justify-center p-2\\">\\n          {emptyMessage}\\n        </CommandEmpty>\\n      )}\\n      {!loading && <CommandGroup>{children}</CommandGroup>}\\n    </CommandList>\\n  );\\n};\\n\\nconst AutocompleteItem = ({\\n  value,\\n  children,\\n  className,\\n  onMouseDown,\\n  onSelect,\\n  ...props\\n}: {\\n  children: React.ReactNode;\\n  value: string;\\n} & React.ComponentProps<typeof CommandItem>) => {\\n  const { selectedValues, setSearchValue, setOpen, multiple, onValueChange } =\\n    useAutocompleteContext();\\n\\n  const isSelected = selectedValues.includes(value);\\n\\n  const searchValue = typeof children === \\"string\\" ? children : value;\\n  const handleSelect = () => {\\n    if (multiple === true) {\\n      const newSelected = isSelected\\n        ? selectedValues.filter((item) => item !== value)\\n        : [...selectedValues, value];\\n\\n      onValueChange?.(newSelected);\\n    } else {\\n      onValueChange?.(value);\\n      setSearchValue(searchValue);\\n      setOpen(false);\\n    }\\n    onSelect?.(value);\\n  };\\n\\n  return (\\n    <CommandItem\\n      data-slot=\\"autocomplete-item\\"\\n      value={searchValue}\\n      onMouseDown={(event) => {\\n        event.preventDefault();\\n        event.stopPropagation();\\n        onMouseDown?.(event);\\n      }}\\n      onSelect={handleSelect}\\n      className={cn(\\n        \\"flex w-full items-center gap-2\\",\\n        !isSelected && \\"pl-8\\",\\n        className\\n      )}\\n      {...props}\\n    >\\n      {isSelected && <Check className=\\"w-4 text-current\\" />}\\n      {children}\\n    </CommandItem>\\n  );\\n};\\n\\nexport {\\n  Autocomplete,\\n  AutocompleteTrigger,\\n  AutocompleteList,\\n  AutocompleteItem,\\n};\\n`,__src__:\\"registry/default/ui/autocomplete.tsx\\",__style__:\\"default\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Slot } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-slot\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Command \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" CommandPrimitive } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"cmdk\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Check, Loader2 } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Command,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CommandEmpty,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CommandGroup,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CommandInput,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CommandItem,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CommandList,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/command\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Input } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/input\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" AutocompleteContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.createContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"<\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  |\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ((\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"      |\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"          multiple\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"          onValueChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?: (value: string[]) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" void\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"      |\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"multiple\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"; \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"onValueChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?: (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" void\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    ) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      searchValue: string;\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      open: boolean;\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      emptyMessage: string;\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      loading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" boolean;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      selectedValues: string[];\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      setSearchValue: React.Dispatch\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"React.SetStateAction\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\">>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      setOpen: React.Dispatch\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"React.SetStateAction\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"boolean\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\">>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    })\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  |\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\">\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useAutocompleteContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" context\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(AutocompleteContext);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"context) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"

1},children:\'      \\"`useAutocompleteContext` must be used within `Autocomplete`\\"\'})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" context;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Autocomplete\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  emptyMessage \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  loading \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  emptyMessage\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  loading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  children\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ReactNode\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  |\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"      multiple\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"      value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"[];\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      onValueChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"[]) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" void\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  |\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"      multiple\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"      value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      onValueChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" void\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"open\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setOpen\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"searchValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setSearchValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" getSelectedValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useCallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (props.multiple) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" props.value \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [];\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" props.value \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"string\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" ?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [props.value] \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [];\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [props.multiple, props.value]);\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteContext.Provider\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"        ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props,\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        searchValue,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        emptyMessage,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        open,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        selectedValues: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"getSelectedValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(),\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        loading,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        setOpen,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        setSearchValue,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Command\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"autocomplete\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"relative flex flex-col gap-2 bg-transparent roun

1ded-lg text-sm overflow-visible\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          className\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"hidden\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CommandInput\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{searchValue} />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {children}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Command\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteContext.Provider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" AutocompleteTrigger\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  props\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    |\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"asChild\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"; \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"children\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ReactNode\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    |\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"input\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"        asChild\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      })\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"searchValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setSearchValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setOpen\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"multiple\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    useAutocompleteContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"asChild\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"rest\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" props;\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" Comp\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" asChild \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Slot \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Input;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"event\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ChangeEvent\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLInputElement\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setSearchValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(event.target.value);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setOpen\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (asChild \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      props.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"onChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(event);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleFocus\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"event\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"FocusEvent\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLInputElement\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setOpen\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (asChild \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      props.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"onFocus\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(event);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleBlur\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"event\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"FocusEvent\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLInputElement\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setOpen\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"multiple) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      setSearchValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(searchValue \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (asChild \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      props.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"onBlur\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(event);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\

1n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Comp\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"autocomplete-trigger\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{searchValue}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      type\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"search\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      onChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{handleChange}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      onFocus\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{handleFocus}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      onBlur\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{handleBlur}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"rest}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" AutocompleteList\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" CommandList>) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"open\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"loading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"emptyMessage\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useAutocompleteContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CommandList\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"autocomplete-list\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"absolute top-11 animate-in fade-in-0 zoom-in-95 z-10 w-full border rounded-lg bg-card p-1\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          hidden: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"open,\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        },\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"        !\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"emptyMessage \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:` \\"has-[[data-slot=\'command-group\'][hidden]]:hidden\\"`}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {loading \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CommandPrimitive.Loading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex justify-center p-1\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Loader2\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"animate-spin\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CommandPrimitive.Loading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"loading \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" emptyMessage \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CommandEmpty\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex justify-center p-2\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          {emptyMessage}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CommandEmpty\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"loading \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CommandGroup\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">{children}</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CommandGroup\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CommandList\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  value,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  onMouseDown,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  onSelect,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  children\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ReactNode\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" CommandItem>) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"selectedValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setSearchValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setOpen\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"multiple\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#

179B8FF\\"},children:\\"onValueChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    useAutocompleteContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" isSelected\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" selectedValues.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"includes\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(value);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" searchValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" children \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"string\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" ?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" children \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" value;\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleSelect\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (multiple \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"      const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" newSelected\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" isSelected\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"        ?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" selectedValues.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"filter\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"item\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" item \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!==\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" value)\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"        :\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"selectedValues, value];\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      onValueChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(newSelected);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"else\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      onValueChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(value);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      setSearchValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(searchValue);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      setOpen\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    onSelect\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(value);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CommandItem\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"autocomplete-item\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{searchValue}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      onMouseDown\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"event\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        event.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"preventDefault\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        event.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"stopPropagation\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        onMouseDown\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(event);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      onSelect\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{handleSelect}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"flex w-full items-center gap-2\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"        !\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"isSelected \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"pl-8\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {isSelected \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Check\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-4 text-current\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {children}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CommandItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Autocomplete,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteTrigger,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteList,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteItem,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})})]})})})}),(0,e.jsx)(a,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"usage\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  Autocomplete,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompleteTrigger,\\n} from \\"<path-to-ui-components>/autocomplete\\";\\n`,children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Autocomplete,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteItem,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteList,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteTrigger,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/autocomplete\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<Autocomplete\\n  value={singleValue}\\n  emptyMessage=\\"No framework found.\\"\\n  onValueChange={setSingleValue}\\n>

1\\n  <AutocompleteTrigger placeholder=\\"Select a framework\\" />\\n  <AutocompleteList>\\n    <AutocompleteItem value=\\"next\\">Next.js</AutocompleteItem>\\n    <AutocompleteItem value=\\"sveltekit\\">SvelteKit</AutocompleteItem>\\n    <AutocompleteItem value=\\"nuxt\\">Nuxt.js</AutocompleteItem>\\n    <AutocompleteItem value=\\"remix\\">Remix</AutocompleteItem>\\n    <AutocompleteItem value=\\"astro\\">Astro</AutocompleteItem>\\n    <AutocompleteItem value=\\"wordpress\\">WordPress</AutocompleteItem>\\n    <AutocompleteItem value=\\"express\\">Express.js</AutocompleteItem>\\n    <AutocompleteItem value=\\"nest\\">Nest.js</AutocompleteItem>\\n  </AutocompleteList>\\n</Autocomplete>\\n`,children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Autocomplete\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{singleValue}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  emptyMessage\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"No framework found.\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  onValueChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{setSingleValue}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteTrigger\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" placeholder\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Select a framework\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteList\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"next\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Next.js</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sveltekit\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">SvelteKit</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"nuxt\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Nuxt.js</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"remix\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Remix</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"astro\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Astro</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"wordpress\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">WordPress</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"express\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Express.js</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"nest\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Nest.js</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteList\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Autocomplete\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"props\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:\\"Name\\"}),(0,e.jsx)(l.th,{children:\\"Type\\"}),(0,e.jsx)(l.th,{children:\\"Description\\"})]})}),(0,e.jsxs)(l.tbody,{children:[(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"value\\"}),(0,e.jsxs)(l.td,{children:[\\"string or \\",(0,e.jsx)(l.code,{children:\\"string[]\\"})]}),(0,e.jsx)(l.td,{children:\\"Component\'s value.\\"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"emptyMessage\\"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:\\"string\\"})}),(0,e.jsx)(l.td,{children:\\"Message to display when list is empty.\\"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"loading\\"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:\\"boolean\\"})}),(0,e.jsx)(l.td,{children:\\"Shows spinner while list loads.\\"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"multiple\\"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:\\"boolean\\"})}),(0,e.jsx)(l.td,{children:\\"Allows single or multiple selections.\\"})]})]})]}),`\\n`,(0,e.jsx)(s,{children:(0,e.jsx)(l.p,{children:\\"Single selection is supported by default.\\"})}),`\\n`,(0,e.jsxs)(l.h3,{id:\\"autocompleteitem\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#autocompleteitem\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"AutocompleteItem\\"]}),`\\n`,(0,e.jsxs)(l.h4,{id:\\"props-1\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props-1\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:\\"Name\\"}),(0,e.jsx)(l.th,{children:\\"Type\\"}),(0,e.jsx)(l.th,{children:\\"Description\\"})]})}),(0,e.jsx)(l.tbody,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"value\\"}),(0,e.jsx)(l.td,{children:\\"string\\"}),(0,e.jsx)(l.td,{children:\\"Component\'s value.\\"})]})})]}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"example\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#example\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Example\\"]}),`\\n`,(0,e.jsxs)(l.h3,{id:\\"multiple-options-selection\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#multiple-options-selection\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Multiple options selection\\"]}),`\\n`,(0,e.jsx)(o,{name:\\"autocomplete-multiple-demo\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";

1\\n\\nimport { useState } from \\"react\\";\\nimport { X } from \\"lucide-react\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompleteTrigger,\\n} from \\"@/components/ui/autocomplete\\";\\nimport { Badge } from \\"@/components/ui/badge\\";\\nimport { Button } from \\"@/components/ui/button\\";\\n\\n// Sample data for demonstrations\\nconst frameworks = [\\n  { value: \\"next\\", label: \\"Next.js\\" },\\n  { value: \\"sveltekit\\", label: \\"SvelteKit\\" },\\n  { value: \\"nuxt\\", label: \\"Nuxt.js\\" },\\n  { value: \\"remix\\", label: \\"Remix\\" },\\n  { value: \\"astro\\", label: \\"Astro\\" },\\n  { value: \\"wordpress\\", label: \\"WordPress\\" },\\n  { value: \\"express\\", label: \\"Express.js\\" },\\n  { value: \\"nest\\", label: \\"Nest.js\\" },\\n];\\n\\nexport function AutoCompleteMultipleDemo() {\\n  const [selectedValues, setSelectedValues] = useState<string[]>([]);\\n\\n  const handleValueChange = (value: string[]) => {\\n    setSelectedValues(value);\\n  };\\n\\n  const handleRemove = (valueToRemove: string) => {\\n    setSelectedValues((prev) => prev.filter((item) => item !== valueToRemove));\\n  };\\n\\n  return (\\n    <div className=\\"flex flex-col gap-2 items-center\\">\\n      <Autocomplete\\n        multiple\\n        value={selectedValues}\\n        emptyMessage=\\"No framework found.\\"\\n        onValueChange={handleValueChange}\\n        className=\\"w-56\\"\\n      >\\n        <AutocompleteTrigger placeholder=\\"Select frameworks...\\" />\\n        <AutocompleteList>\\n          {frameworks.map((framework) => (\\n            <AutocompleteItem key={framework.value} value={framework.value}>\\n              {framework.label}\\n            </AutocompleteItem>\\n          ))}\\n        </AutocompleteList>\\n      </Autocomplete>\\n\\n      <div className=\\"flex flex-wrap gap-2\\">\\n        {selectedValues.map((value) => {\\n          const label =\\n            frameworks.find((f) => f.value === value)?.label || value;\\n          return (\\n            <Badge key={value} variant=\\"secondary\\">\\n              {label}\\n              <Button\\n                variant=\\"ghost\\"\\n                size=\\"sm\\"\\n                className=\\"h-auto p-1 ml-2\\"\\n                onClick={() => handleRemove(value)}\\n              >\\n                <X className=\\"h-3 w-3\\" />\\n              </Button>\\n            </Badge>\\n          );\\n        })}\\n      </div>\\n\\n      <p className=\\"text-sm text-muted-foreground\\">\\n        Selected: {selectedValues.length ? selectedValues.join(\\", \\") : \\"None\\"}\\n      </p>\\n    </div>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/autocomplete-multiple-demo.tsx\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useState } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { X } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Autocomplete,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteItem,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteList,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteTrigger,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/autocomplete\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Badge } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/badge\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#6A737D\\"},children:\\"// Sample data for demonstrations\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" frameworks\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"next\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Next.js\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sveltekit\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"SvelteKit\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"nuxt\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Nuxt.js\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"remix\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Remix\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"astro\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Astro\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"wordpress\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"WordPress\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"express\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Express.js\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"nest\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Nest.js\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"];\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" AutoCompleteMultipleDemo\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"selectedValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setSelectedValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"[]>([]);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleValueChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"[]) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setSelectedValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(value);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleRemove\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"valueToRemove\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setSelectedValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"prev\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" prev.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"filter\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"item\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" item \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!==\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" valueToRemove));\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-col gap-2 items-center\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Autocomplete\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        multiple\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{selectedValues}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        emptyMessage\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"No framework found.\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        onValueChange\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{handleValueChange}\\"})]}),`\\n`,(0,e.jsxs)(

1l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-56\\"\'})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteTrigger\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" placeholder\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Select frameworks...\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteList\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          {frameworks.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"map\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"framework\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" key\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{framework.value} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{framework.value}>\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              {framework.label}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          ))}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteList\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Autocomplete\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-wrap gap-2\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {selectedValues.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"map\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" label\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            frameworks.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"find\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"f\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" f.value \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" value)?.label \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" value;\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" key\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{value} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"variant\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"secondary\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              {label}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"                variant\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ghost\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"                size\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sm\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"                className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h-auto p-1 ml-2\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"                onClick\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleRemove\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(value)}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"X\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h-3 w-3\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        })}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-sm text-muted-foreground\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Selected: {selectedValues.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" ?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" selectedValues.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"join\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\", \\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"None\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function N(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(u,{...n})}):u(n)}function c(n,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return V(b);})();\\n;return Component;"}

1,"_id":"docs/components/autocomplete.mdx","_raw":{"sourceFilePath":"docs/components/autocomplete.mdx","sourceFileName":"autocomplete.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/autocomplete"},"type":"Doc","slug":"/docs/components/autocomplete","slugAsParams":"components/autocomplete"},{"title":"Badge","description":"Displays a badge or a component that looks like a badge.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/badge","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Badge component customized by and adjusting colors and adding `asChild` prop.\\n\\n<ComponentPreview name=\\"badge-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/badge.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"badge\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Examples\\n\\n### Default\\n\\n<ComponentPreview name=\\"badge-demo\\" description=\\"A default badge\\" />\\n\\n### Secondary\\n\\n<ComponentPreview name=\\"badge-secondary-demo\\" description=\\"A secondary badge\\" />\\n\\n### Outline\\n\\n<ComponentPreview name=\\"badge-outline-demo\\" description=\\"An outline badge\\" />\\n\\n### Destructive\\n\\n<ComponentPreview name=\\"badge-destructive-demo\\" description=\\"A destructive badge\\" />\\n","code":"var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),x=(l,e)=>{for(var a in e)o(l,a,{get:e[a],enumerable:!0})},E=(l,e,a,c)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let s of B(e))!b.call(l,s)&&s!==a&&o(l,s,{get:()=>e[s],enumerable:!(c=f(e,s))||c.enumerable});return l};var _=(l,e,a)=>(a=l!=null?u(N(l)):{},E(e||!l||!l.__esModule?o(a,\\"default\\",{value:l,enumerable:!0}):a,l)),C=l=>E(o({},\\"__esModule\\",{value:!0}),l);var m=v((S,y)=>{y.exports=_jsx_runtime});var k={};x(k,{default:()=>g,frontmatter:()=>D});var n=_(m()),D={title:\\"Badge\\",description:\\"Displays a badge or a component that looks like a badge.\\",component:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/badge\\"}};function F(l){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...l.components},{ComponentPreview:a,ComponentSource:c,Step:s,Steps:d,Tabs:p,TabsContent:i,TabsList:h,TabsTrigger:t}=e;return a||r(\\"ComponentPreview\\",!0),c||r(\\"ComponentSource\\",!0),s||r(\\"Step\\",!0),d||r(\\"Steps\\",!0),p||r(\\"Tabs\\",!0),i||r(\\"TabsContent\\",!0),h||r(\\"TabsList\\",!0),t||r(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[\\"A ShadCN Badge component customized by and adjusting colors and adding \\",(0,n.jsx)(e.code,{children:\\"asChild\\"}),\\" prop.\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"badge-demo\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Badge } from \\"../ui/badge\\";\\n\\nexport function BadgeDemo() {\\n  return (\\n    <div className=\\"flex gap-4 flex-col\\">\\n      <Badge variant=\\"default\\" asChild>\\n        <a>Default</a>\\n      </Badge>\\n    </div>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/badge-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Badge } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"../ui/badge\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" BadgeDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex gap-4 flex-col\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"default\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" asChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Default</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"installation\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(i,{value:\\"cli\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/badge.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/badge.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/badge.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/badge.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/badge.json\\"\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/badge.json\\"\'})]})})})})}),(0,n.jsx)(i,{value:\\"manual\\",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(s,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(c,{name:\\"badge\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { Slot } from \\"@radix-ui/react-slot\\";\\nimport { cva, type VariantProps } from \\"class-variance-authority\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nconst badgeVariants = cva(\\n  \\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0 transition-[color,box-shadow]\\",\\n  {\\n    variants: {\\n      variant: {\\n        default:\\n          \\"border-transparent bg-primary text-primary-foreground shadow-sm [a&]:hover:bg-primary/90\\",\\n        secondary:\\n          \\"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80\\",\\n        destructive:\\n          \\"border-transparent bg-destructive text-destructive-foreground shadow-sm [a&]:hover:bg-destructive/90\\",\\n        outline:\\n          \\"border-primary bg-card text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\\",\\n      },\\n    },\\n    defaultVariants: {\\n      variant: \\"default\\",\\n    },\\n  }\\n);\\n\\nfunction Badge({\\n  className,\\n  variant,\\n  asChild = false,\\n  ...props\\n}: React.ComponentProps<\\"span\\"> &\\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\\n  const Comp = asChild ? Slot : \\"span\\";\\n\\n  return (\\n    <Comp\\n      data-slot=\\"badge\\"\\n      className={cn(badgeVariants({ variant }), className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Badge, badgeVariants };\\n`,__src__:\\"registry/default/ui/badge.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Slot } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-slot\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cva, \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" VariantProps } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"}

1,children:\' \\"class-variance-authority\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" badgeVariants\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" cva\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'  \\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0 transition-[color,box-shadow]\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  {\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    variants: {\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      variant: {\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        default:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"border-transparent bg-primary text-primary-foreground shadow-sm [a&]:hover:bg-primary/90\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        secondary:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        destructive:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"border-transparent bg-destructive text-destructive-foreground shadow-sm [a&]:hover:bg-destructive/90\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        outline:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"border-primary bg-card text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    defaultVariants: {\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      variant: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"default\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Badge\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  asChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"span\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"  VariantProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"}

1,children:\\" badgeVariants> \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"asChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" Comp\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" asChild \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" Slot \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"span\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Comp\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"badge\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"badgeVariants\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ variant }), className)}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Badge, badgeVariants };\\"})]})]})})})}),(0,n.jsx)(s,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"examples\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"default\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#default\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Default\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"badge-demo\\",description:\\"A default badge\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Badge } from \\"../ui/badge\\";\\n\\nexport function BadgeDemo() {\\n  return (\\n    <div className=\\"flex gap-4 flex-col\\">\\n      <Badge variant=\\"default\\" asChild>\\n        <a>Default</a>\\n      </Badge>\\n    </div>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/badge-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Badge } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"../ui/badge\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" BadgeDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex gap-4 flex-col\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"default\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" asChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Default</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"secondary\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#secondary\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Secondary\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"badge-secondary-demo\\",description:\\"A secondary badge\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Badge } from \\"../ui/badge\\";\\n\\nexport function BadgeDemo() {\\n  return (\\n    <Badge variant=\\"secondary\\" asChild>\\n      <a>Secondary</a>\\n    </Badge>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/badge-secondary-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Badge } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"../ui/badge\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" BadgeDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"secondary\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" asChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Secondary</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"outline\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#outline\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Outline\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"badge-outline-demo\\",description:\\"An outline badge\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Badge } from \\"../ui/badge\\";\\n\\nexport function BadgeDemo() {\\n  return (\\n    <Badge variant=\\"outline\\" asChild>\\n      <a>Outline</a>\\n    </Badge>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/badge-outline-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Badge } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"../ui/badge\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" BadgeDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" asChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Outline</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\

1\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"destructive\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#destructive\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Destructive\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"badge-destructive-demo\\",description:\\"A destructive badge\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Badge } from \\"../ui/badge\\";\\n\\nexport function BadgeDemo() {\\n  return (\\n    <Badge variant=\\"destructive\\" asChild>\\n      <a>Destructive</a>\\n    </Badge>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/badge-destructive-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Badge } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"../ui/badge\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" BadgeDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"destructive\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" asChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Destructive</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function g(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(F,{...l})}):F(l)}function r(l,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+l+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return C(k);})();\\n;return Component;"},"_id":"docs/components/badge.mdx","_raw":{"sourceFilePath":"docs/components/badge.mdx","sourceFileName":"badge.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/badge"},"type":"Doc","slug":"/docs/components/badge","slugAsParams":"components/badge"},{"title":"Button","description":"Displays a button or a component that looks like a button.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/button","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Button component customized by adding gradient color and adjusting hover states.\\n\\n<ComponentPreview name=\\"button-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n<Steps>\\n\\n<Step>Run the following command to install `button.tsx`</Step>\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/button.json\\"\\n```\\n\\n<Step>Add the following colors to your CSS file</Step>\\n\\nThe command above should install the colors for you. If not, copy and paste the following in your CSS file.\\n\\n```css title=\\"app/globals.css\\"\\n:root {\\n  --primary-start: 72.4% 0.177 350.2;\\n  --primary-end: 58.7% 0.204 277.4;\\n}\\n\\n.dark {\\n  --primary-start: 72.4% 0.177 350.2;\\n  --primary-end: 58.7% 0.204 277.4;\\n}\\n```\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install @radix-ui/react-slot lucide-react\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"button\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n<Step>Add the following colors to your CSS file</Step>\\n\\n```css title=\\"app/globals.css\\"\\n:root {\\n  --primary-start: 72.4% 0.177 350.2;\\n  --primary-end: 58.7% 0.204 277.4;\\n}\\n\\n.dark {\\n  --primary-start: 72.4% 0.177 350.2;\\n  --primary-end: 58.7% 0.204 277.4;\\n}\\n```\\n\\n<Step>Add the Button tailwind config into `tailwind.config.js`</Step>

1\\n\\n<Callout>\\n\\n**This is not necessary if you are on tailwind version 4 and above.**\\n\\n</Callout>\\n\\nAdd the following object in the `theme.extend.colors` section of your `tailwind.config.js` file\\nthis config enable button related style utilities like `from-primary-start`\\n\\n```javascript title=\\"tailwind.config.js\\"\\n// ...\\nprimary: {\\n  start: \'hsl(var(--primary-start))\',\\n  end: \'hsl(var(--primary-end))\',\\n},\\n// ...\\n```\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { Button } from \\"<path-to-ui-components>/button\\";\\n```\\n\\n```tsx\\n<Button variant=\\"outline\\">Button</Button>\\n```\\n\\n## Link\\n\\nYou can use the `link` variant to create a link button.\\n\\n```tsx\\nimport { Button } from \\"@/components/ui/button\\";\\n```\\n\\n```tsx\\n<Button variant=\\"link\\">Click here</Button>\\n```\\n\\nAlternatively, you can set the `asChild` parameter and nest the anchor element.\\n\\n```tsx\\n<Button asChild>\\n  <a href=\\"/link\\">Link</a>\\n</Button>

1\\n```\\n\\n## Examples\\n\\n### Primary\\n\\n<ComponentPreview name=\\"button-demo\\" description=\\"A primary button\\" />\\n\\n### Secondary\\n\\n<ComponentPreview name=\\"button-secondary\\" description=\\"A secondary button\\" />\\n\\n### Destructive\\n\\n<ComponentPreview\\n  name=\\"button-destructive\\"\\n  description=\\"A destructive button\\"\\n/>\\n\\n### Outline\\n\\n<ComponentPreview\\n  name=\\"button-outline\\"\\n  description=\\"A button using the outline variant.\\"\\n/>\\n\\n### Ghost\\n\\n<ComponentPreview\\n  name=\\"button-ghost\\"\\n  description=\\"A button using the ghost variant\\"\\n/>\\n\\n### Link\\n\\n<ComponentPreview\\n  name=\\"button-link\\"\\n  description=\\"A button using the link variant.\\"\\n/>\\n\\n### Icon\\n\\n<ComponentPreview name=\\"button-icon\\" description=\\"An icon button\\" />\\n\\n### With Icon\\n\\n<ComponentPreview name=\\"button-with-icon\\" description=\\"A button with an icon\\" />\\n\\n### Loading\\n\\n<ComponentPreview\\n  name=\\"button-loading\\"\\n  description=\\"A button with a loading state.\\"\\n/>\\n\\n### As Child\\n\\n<ComponentPreview\\n  name=\\"button-as-child\\"\\n  description=\\"A button wrapping a custom Link component\\"\\n/>\\n","code":"var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),x=(l,e)=>{for(var s in e)o(l,s,{get:e[s],enumerable:!0})},y=(l,e,s,r)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let c of N(e))!b.call(l,c)&&c!==s&&o(l,c,{get:()=>e[c],enumerable:!(r=f(e,c))||r.enumerable});return l};var C=(l,e,s)=>(s=l!=null?g(_(l)):{},y(e||!l||!l.__esModule?o(s,\\"default\\",{value:l,enumerable:!0}):s,l)),k=l=>y(o({},\\"__esModule\\",{value:!0}),l);var m=v((L,u)=>{u.exports=_jsx_runtime});var S={};x(S,{default:()=>B,frontmatter:()=>w});var n=C(m()),w={title:\\"Button\\",description:\\"Displays a button or a component that looks like a button.\\",component:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/button\\"}};function F(l){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",strong:\\"strong\\",...l.components},{Callout:s,ComponentPreview:r,ComponentSource:c,Step:t,Steps:i,Tabs:p,TabsContent:d,TabsList:E,TabsTrigger:h}=e;return s||a(\\"Callout\\",!0),r||a(\\"ComponentPreview\\",!0),c||a(\\"ComponentSource\\",!0),t||a(\\"Step\\",!0),i||a(\\"Steps\\",!0),p||a(\\"Tabs\\",!0),d||a(\\"TabsContent\\",!0),E||a(\\"TabsList\\",!0),h||a(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\\"A ShadCN Button component customized by adding gradient color and adjusting hover states.\\"}),`\\n`,(0,n.jsx)(r,{name:\\"button-demo\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"@/components/ui/button\\";\\n\\nexport function ButtonDemo() {\\n  return <Button>Button</Button>;\\n}\\n`,__src__:\\"registry/default/examples/button-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ButtonDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Button</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"installation\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(E,{children:[(0,n.jsx)(h,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(h,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(d,{value:\\"cli\\",children:(0,n.jsxs)(i,{children:[(0,n.jsxs)(t,{children:[\\"Run the following command to install \\",(0,n.jsx)(e.code,{children:\\"button.tsx\\"})]}),(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/button.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/button.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/button.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/button.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/button.json\\"\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/button.json\\"\'})]})})})}),(0,n.jsx)(t,{children:\\"Add the following colors to your CSS file\\"}),(0,n.jsx)(e.p,{children:\\"The command above should install the colors for you. If not, copy and paste the following in your CSS file.\\"}),(0,n.jsxs)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:[(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-title\\":\\"\\",\\"data-language\\":\\"css\\",\\"data-theme\\":\\"default\\",children:\\"app/globals.css\\"}),(0,n.jsx)(e.pre,{\\"data-language\\":\\"css\\",\\"data-theme\\":\\"default\\",__withMeta__:!0,__rawString__:`:root {\\n  --primary-start: 72.4% 0.177 350.2;\\n  --primary-end: 58.7% 0.204 277.4;\\n}\\n\\n.dark {\\n  --primary-start: 72.4% 0.177 350.2;\\n  --primary-end: 58.7% 0.204 277.4;\\n}\\n`,children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"css\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\":root\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  --primary-start\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"72.4\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.177\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 350.2\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  --primary-end\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"58.7\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.204\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 277.4\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\".dark\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  --primary-start\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"72.4\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.177\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 350.2\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  --primary-end\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"58.7\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.204\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 277.4\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})]})]})}),(0,n.jsx)(d,{value:\\"manual\\",children:(0,n.jsxs)(i,{children:[(0,n.jsx)(t,{children:\\"Install the following dependencies:\\"}),(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install @radix-ui/react-slot lucide-react\\n`,__npmCommand__:`npm install @radix-ui/react-slot lucide-react\\n`,__yarnCommand__:`yarn add @radix-ui/react-slot lucide-react\\n`,__pnpmCommand__:`pnpm add @radix-ui/react-slot lucide-react\\n`,__bunCommand__:`bun add @radix-ui/react-slot lucide-react\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" @radix-ui/react-slot\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" lucide-react\\"})]})})})}),(0,n.jsx)(t,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(c,{name:\\"button\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { Slot } from \\"@radix-ui/react-slot\\";\\nimport { cva, type VariantProps } from \\"class-variance-authority\\";\\nimport { Loader2 } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { typographyVariants } from \\"@/components/ui/typography\\";\\n\\nconst buttonVariants = cva(\\n  \\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-bold transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0\\",\\n  {\\n    variants: {\\n      variant: {\\n        default:\\n          \\"bg-gradient-to-r from-primary-start to-primary-end text-primary-foreground hover:opacity-70\\",\\n        destructive:\\n          \\"bg-destructive text-destructive-foreground hover:bg-destructive/90\\",\\n        outline:\\n          \\"border border-input bg-transparent text-primary hover:bg-accent hover:text-accent-foreground\\",\\n        secondary:\\n          \\"bg-secondary text-secondary-foreground hover:bg-secondary/80\\",\\n        ghost: \\"hover:bg-accent hover:text-accent-foreground\\",\\n        link: \\"text-primary underline-offset-4 hover:underline\\",\\n      },\\n      size: {\\n        default: \\"h-10 px-4 py-2\\",\\n        sm: \\"h-8 rounded-md px-3\\",\\n        icon: \\"h-10 w-10\\",\\n      },\\n    },\\n    defaultVariants: {\\n      variant: \\"default\\",\\n      size: \\"default\\",\\n    },\\n  }\\n);\\n\\nfunction Button({\\n  className,\\n  variant,\\n  size = \\"default\\",\\n  loading,\\n  asChild = false,\\n  type = \\"button\\",\\n  disabled,\\n  children,\\n  ...props\\n}: React.ComponentProps<\\"button\\"> &\\n  VariantProps<typeof buttonVariants> & {\\n    loading?: boolean;\\n    asChild?: boolean;\\n  }) {\\n  const Comp = asChild ? Slot : \\"button\\";\\n\\n  return (\\n    <Comp\\n      data-slot=\\"button\\"\\n      className={cn(\\n        {\\n          [typographyVariants({ variant: \\"sm\\" })]: size === \\"default\\",\\n          [typographyVariants({ variant: \\"xs\\" })]: size === \\"sm\\",\\n        },\\n        buttonVariants({ variant, size, className }),\\n        { \\"p-0\\": variant === \\"link\\" },\\n        { \\"h-fit\\": variant === \\"link\\" && asChild }\\n      )}\\n      type={type}\\n      disabled={loading || disabled}\\n      {...props}\\n    >\\n      {loading ? <Loader2 className=\\"animate-spin\\" /> : children}\\n    </Comp>\\n  );\\n}\\n\\nexport { Button, buttonVariants };\\n`,__src__:\\"registry/default/ui/button.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Slot } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-slot\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cva, \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" VariantProps } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"}

1,children:\' \\"class-variance-authority\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Loader2 } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { typographyVariants } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" buttonVariants\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" cva\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:`  \\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-bold transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0\\"`}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  {\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    variants: {\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      variant: {\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        default:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"bg-gradient-to-r from-primary-start to-primary-end text-primary-foreground hover:opacity-70\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        destructive:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"bg-destructive text-destructive-foreground hover:bg-destructive/90\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        outline:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"border border-input bg-transparent text-primary hover:bg-accent hover:text-accent-foreground\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        secondary:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"bg-secondary text-secondary-foreground hover:bg-secondary/80\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        ghost: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"hover:bg-accent hover:text-accent-foreground\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        link: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-primary underline-offset-4 hover:underline\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      size: {\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        default: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h-10 px-4 py-2\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        sm: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h-8 rounded-md px-3\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        icon: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h-10 w-10\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    defaultVariants: {\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      variant: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"default\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      size: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"default\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  size\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"default\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  loading\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  asChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  type\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  disabled\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  children\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"  VariantProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" buttonVariants> \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"    loading\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"    asChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }) {\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" Comp\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" asChild \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" Slot \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Comp\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"button\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          [\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"typographyVariants\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ variant: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sm\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" })]: size \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"default\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          [\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"typographyVariants\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ variant: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" })]: size \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sm\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        },\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        buttonVariants\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ variant, size, className }),\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        { \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-0\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": variant \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"link\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        { \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children

1:\'\\"h-fit\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": variant \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"link\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" asChild }\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      type\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{type}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      disabled\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{loading \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" disabled}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {loading \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Loader2\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"animate-spin\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" /> \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" children}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Comp\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button, buttonVariants };\\"})]})]})})})}),(0,n.jsx)(t,{children:\\"Update the import paths to match your project setup.\\"}),(0,n.jsx)(t,{children:\\"Add the following colors to your CSS file\\"}),(0,n.jsxs)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:[(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-title\\":\\"\\",\\"data-language\\":\\"css\\",\\"data-theme\\":\\"default\\",children:\\"app/globals.css\\"}),(0,n.jsx)(e.pre,{\\"data-language\\":\\"css\\",\\"data-theme\\":\\"default\\",__withMeta__:!0,__rawString__:`:root {\\n  --primary-start: 72.4% 0.177 350.2;\\n  --primary-end: 58.7% 0.204 277.4;\\n}\\n\\n.dark {\\n  --primary-start: 72.4% 0.177 350.2;\\n  --primary-end: 58.7% 0.204 277.4;\\n}\\n`,children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"css\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\":root\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  --primary-start\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"72.4\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.177\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 350.2\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  --primary-end\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"58.7\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.204\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 277.4\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\".dark\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  --primary-start\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"72.4\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.177\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 350.2\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  --primary-end\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"58.7\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"%\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 0.204\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 277.4\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})]}),(0,n.jsxs)(t,{children:[\\"Add the Button tailwind config into \\",(0,n.jsx)(e.code,{children:\\"tailwind.config.js\\"})]}),(0,n.jsx)(s,{children:(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:\\"This is not necessary if you are on tailwind version 4 and above.\\"})})}),(0,n.jsxs)(e.p,{children:[\\"Add the following object in the \\",(0,n.jsx)(e.code,{children:\\"theme.extend.colors\\"}),\\" section of your \\",(0,n.jsx)(e.code,{children:\\"tailwind.config.js\\"}),` file\\nthis config enable button related style utilities like `,(0,n.jsx)(e.code,{children:\\"from-primary-start\\"})]}),(0,n.jsxs)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:[(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-title\\":\\"\\",\\"data-language\\":\\"javascript\\",\\"data-theme\\":\\"default\\",children:\\"tailwind.config.js\\"}),(0,n.jsx)(e.pre,{\\"data-language\\":\\"javascript\\",\\"data-theme\\":\\"default\\",__withMeta__:!0,__rawString__:`// ...\\nprimary: {\\n  start: \'hsl(var(--primary-start))\',\\n  end: \'hsl(var(--primary-end))\',\\n},\\n// ...\\n`,children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"javascript\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#6A737D\\"},children:\\"// ...\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"primary\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"  start\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"\'hsl(var(--primary-start))\'\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"  end\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"\'hsl(var(--primary-end))\'\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"},\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#6A737D\\"},children:\\"// ...\\"})})]})})]})]})})]}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"usage\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"<path-to-ui-components>/button\\";\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<Button variant=\\"outline\\">Button</Button>

1\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Button</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})})})}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"link\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#link\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Link\\"]}),`\\n`,(0,n.jsxs)(e.p,{children:[\\"You can use the \\",(0,n.jsx)(e.code,{children:\\"link\\"}),\\" variant to create a link button.\\"]}),`\\n`,(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"@/components/ui/button\\";\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<Button variant=\\"link\\">Click here</Button>\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"link\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Click here</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})})})}),`\\n`,(0,n.jsxs)(e.p,{children:[\\"Alternatively, you can set the \\",(0,n.jsx)(e.code,{children:\\"asChild\\"}),\\" parameter and nest the anchor element.\\"]}),`\\n`,(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<Button asChild>\\n  <a href=\\"/link\\">Link</a>\\n</Button>

1\\n`,children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" asChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" href\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"/link\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Link</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"examples\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"primary\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#primary\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Primary\\"]}),`\\n`,(0,n.jsx)(r,{name:\\"button-demo\\",description:\\"A primary button\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"@/components/ui/button\\";\\n\\nexport function ButtonDemo() {\\n  return <Button>Button</Button>;\\n}\\n`,__src__:\\"registry/default/examples/button-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ButtonDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Button</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"secondary\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#secondary\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Secondary\\"]}),`\\n`,(0,n.jsx)(r,{name:\\"button-secondary\\",description:\\"A secondary button\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"@/components/ui/button\\";\\n\\nexport function ButtonSecondary() {\\n  return <Button variant=\\"secondary\\">Secondary</Button>;\\n}\\n`,__src__:\\"registry/default/examples/button-secondary.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ButtonSecondary\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"secondary\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Secondary</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}

1),`\\n`,(0,n.jsxs)(e.h3,{id:\\"destructive\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#destructive\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Destructive\\"]}),`\\n`,(0,n.jsx)(r,{name:\\"button-destructive\\",description:\\"A destructive button\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"@/components/ui/button\\";\\n\\nexport function ButtonDestructive() {\\n  return <Button variant=\\"destructive\\">Destructive</Button>;\\n}\\n`,__src__:\\"registry/default/examples/button-destructive.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ButtonDestructive\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"destructive\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Destructive</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"outline\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#outline\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Outline\\"]}),`\\n`,(0,n.jsx)(r,{name:\\"button-outline\\",description:\\"A button using the outline variant.\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"@/components/ui/button\\";\\n\\nexport function ButtonOutline() {\\n  return <Button variant=\\"outline\\">Outline</Button>;\\n}\\n`,__src__:\\"registry/default/examples/button-outline.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ButtonOutline\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Outline</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"ghost\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#ghost\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Ghost\\"]}),`\\n`,(0,n.jsx)(r,{name:\\"button-ghost\\",description:\\"A button using the ghost variant\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"@/components/ui/button\\";\\n\\nexport function ButtonGhost() {\\n  return <Button variant=\\"ghost\\">Ghost</Button>;\\n}\\n`,__src__:\\"registry/default/examples/button-ghost.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ButtonGhost\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ghost\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Ghost</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"link-1\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#link-1\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Link\\"]}),`\\n`,(0,n.jsx)(r,{name:\\"button-link\\",description:\\"A button using the link variant.\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"@/components/ui/button\\";\\n\\nexport function ButtonLink() {\\n  return <Button variant=\\"link\\">Link</Button>;\\n}\\n`,__src__:\\"registry/default/examples/button-link.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ButtonLink\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"link\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Link</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"icon\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#icon\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Icon\\"]}),`\\n`,(0,n.jsx)(r,{name:\\"button-icon\\",description:\\"An icon button\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { ChevronRight } from \\"lucide-react\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\n\\nexport function ButtonIcon() {\\n  return (\\n    <Button variant=\\"outline\\" size=\\"icon\\">\\n      <ChevronRight />\\n    </Button>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/button-icon.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { ChevronRight } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ButtonIcon\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"icon\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ChevronRight\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"with-icon\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#with-icon\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"With Icon\\"]}),`\\n`,(0,n.jsx)(r,{name:\\"button-with-icon\\",description:\\"A button with an icon\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Mail } from \\"lucide-react\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\n\\nexport function ButtonWithIcon() {\\n  return (\\n    <Button>\\n      <Mail /> Login with Email\\n    </Button>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/button-with-icon.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Mail } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ButtonWithIcon\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Mail\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" /> Login with Email\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"loading\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#loading\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Loading\\"]}),`\\n`,(0,n.jsx)(r,{name:\\"button-loading\\",description:\\"A button with a loading state.\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"@/components/ui/button\\";\\n\\nexport function ButtonLoading() {\\n  return <Button loading={true}>Please wait</Button>;\\n}\\n`,__src__:\\"registry/default/examples/button-loading.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ButtonLoading\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" loading\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}>Please wait</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"as-child\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#as-child\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"As Child\\"]}),`\\n`,(0,n.jsx)(r,{name:\\"button-as-child\\",description:\\"A button wrapping a custom Link component\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"@/components/ui/button\\";\\n\\nexport function ButtonAsChild() {\\n  return (\\n    <Button variant=\\"link\\" asChild>\\n      <a rel=\\"noreferrer\\" href=\\"#primary\\">\\n        Primary\\n      </a>\\n    </Button>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/button-as-child.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ButtonAsChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"link\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" asChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" rel\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"noreferrer\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" href\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"#primary\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Primary\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"a\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function B(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(F,{...l})}):F(l)}function a(l,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+l+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return k(S);})();\\n;return Component;"},"_id":"docs/components/button.mdx","_raw":{"sourceFilePath":"docs/components/button.mdx","sourceFileName":"button.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/button"},"type":"Doc","slug":"/docs/components/button","slugAsParams":"components/button"},{"title":"Card","description":"Displays a card with header, content, and footer.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/card","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Card component customized by centering the header and right-aligning the footer by default.\\n\\n<ComponentPreview name=\\"card-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/card.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"card\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n","code":"var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),x=(e,l)=>{for(var s in l)o(e,s,{get:l[s],enumerable:!0})},h=(e,l,s,a)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let c of C(l))!g.call(e,c)&&c!==s&&o(e,c,{get:()=>l[c],enumerable:!(a=B(l,c))||a.enumerable});return e};var S=(e,l,s)=>(s=e!=null?u(f(e)):{},h(l||!e||!e.__esModule?o(s,\\"default\\",{value:e,enumerable:!0}):s,e)),_=e=>h(o({},\\"__esModule\\",{value:!0}),e);var F=v((j,y)=>{y.exports=_jsx_runtime});var D={};x(D,{default:()=>N,frontmatter:()=>b});var n=S(F()),b={title:\\"Card\\",description:\\"Displays a card with header, content, and footer.\\",component:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/card\\"}};function m(e){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...e.components},{ComponentPreview:s,ComponentSource:a,Step:c,Steps:d,Tabs:p,TabsContent:t,TabsList:E,TabsTrigger:i}=l;return s||r(\\"ComponentPreview\\",!0),a||r(\\"ComponentSource\\",!0),c||r(\\"Step\\",!0),d||r(\\"Steps\\",!0),p||r(\\"Tabs\\",!0),t||r(\\"TabsContent\\",!0),E||r(\\"TabsList\\",!0),i||r(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l.p,{children:\\"A ShadCN Card component customized by centering the header and right-aligning the footer by default.\\"}),`\\n`,(0,n.jsx)(s,{name:\\"card-demo\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\nimport {\\n  Card,\\n  CardContent,\\n  CardDescription,\\n  CardFooter,\\n  CardHeader,\\n  CardTitle,\\n} from \\"@/components/ui/card\\";\\nimport { Input } from \\"@/components/ui/input\\";\\nimport { Label } from \\"@/components/ui/label\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\"@/components/ui/select\\";\\n\\nexport function CardDemo() {\\n  return (\\n    <Card className=\\"w-[350px]\\">\\n      <CardHeader>\\n        <CardTitle>Create project</CardTitle>\\n        <CardDescription>Deploy your new project in one-click.</CardDescription>\\n      </CardHeader>\\n      <CardContent className=\\"justify-left\\">\\n        <form className=\\"w-full\\">\\n          <div className=\\"grid w-full items-center gap-4\\">\\n            <div className=\\"flex flex-col space-y-1.5\\">\\n              <Label htmlFor=\\"name\\">Name</Label>\\n              <Input id=\\"name\\" placeholder=\\"Name of your project\\" />\\n            </div>\\n            <div className=\\"flex flex-col space-y-1.5\\">\\n              <Label htmlFor=\\"framework\\">Framework</Label>\\n              <Select>\\n                <SelectTrigger id=\\"framework\\">\\n                  <SelectValue placeholder=\\"Select\\" />\\n                </SelectTrigger>\\n                <SelectContent position=\\"popper\\">\\n                  <SelectItem value=\\"next\\">Next.js</SelectItem>\\n                  <SelectItem value=\\"sveltekit\\">SvelteKit</SelectItem>\\n                  <SelectItem value=\\"astro\\">Astro</SelectItem>\\n                  <SelectItem value=\\"nuxt\\">Nuxt.js</SelectItem>\\n                </SelectContent>\\n              </Select>\\n            </div>\\n          </div>\\n        </form>\\n      </CardContent>\\n      <CardFooter>\\n        <Button variant=\\"outline\\">Cancel</Button>

1\\n        <Button>Deploy</Button>\\n      </CardFooter>\\n    </Card>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/card-demo.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Card,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardContent,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardDescription,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardFooter,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardHeader,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardTitle,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/card\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Input } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/input\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Label } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/label\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Select,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectContent,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectItem,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectTrigger,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectValue,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/select\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" CardDemo\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Card\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-[350px]\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CardHeader\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CardTitle\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Create project</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CardTitle\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CardDescription\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Deploy your new project in one-click.</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CardDescription\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CardHeader\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CardContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"justify-left\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"form\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-full\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"grid w-full items-center gap-4\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-col space-y-1.5\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Label\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" htmlFor\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"name\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Name</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Label\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Input\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" id\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"name\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" placeholder\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Name of your project\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-col space-y-1.5\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Label\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" htmlFor\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"framework\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Framework</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Label\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Select\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" id\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"framework\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectValue\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" placeholder\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Select\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" position\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"popper\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"next\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Next.js</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sveltekit\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">SvelteKit</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"astro\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Astro</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"nuxt\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Nuxt.js</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Select

1Item\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Select\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"form\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CardContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CardFooter\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Cancel</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Deploy</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CardFooter\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Card\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"installation\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(E,{children:[(0,n.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(t,{value:\\"cli\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/card.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/card.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/card.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/card.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/card.json\\"\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/card.json\\"\'})]})})})})}),(0,n.jsx)(t,{value:\\"manual\\",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(c,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(a,{name:\\"card\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { typographyVariants } from \\"@/components/ui/typography\\";\\n\\nfunction Card({ className, ...props }: React.ComponentProps<\\"div\\">) {\\n  return (\\n    <div\\n      data-slot=\\"card\\"\\n      className={cn(\\n        \\"bg-card text-card-foreground flex flex-col rounded-lg border p-6\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CardHeader({ className, ...props }: React.ComponentProps<\\"div\\">) {\\n  return (\\n    <div\\n      data-slot=\\"card-header\\"\\n      className={cn(\\n        \\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 pb-6 has-[data-slot=card-action]:grid-cols-[1fr_auto]\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CardTitle({ className, ...props }: React.ComponentProps<\\"div\\">) {\\n  return (\\n    <div\\n      data-slot=\\"card-title\\"\\n      className={cn(\\n        \\"font-bold text-center\\",\\n        typographyVariants({ variant: \\"h5\\" }),\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CardDescription({ className, ...props }: React.ComponentProps<\\"div\\">) {\\n  return (\\n    <div\\n      data-slot=\\"card-description\\"\\n      className={cn(\\"text-muted-foreground text-sm text-center\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CardAction({ className, ...props }: React.ComponentProps<\\"div\\">) {\\n  return (\\n    <div\\n      data-slot=\\"card-action\\"\\n      className={cn(\\n        \\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CardContent({ className, ...props }: React.ComponentProps<\\"div\\">) {\\n  return <div data-slot=\\"card-content\\" className={cn(className)} {...props} />;\\n}\\n\\nfunction CardFooter({ className, ...props }: React.ComponentProps<\\"div\\">) {\\n  return (\\n    <div\\n      data-slot=\\"card-footer\\"\\n      className={cn(\\"flex items-center justify-end gap-2\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport {\\n  Card,\\n  CardHeader,\\n  CardFooter,\\n  CardTitle,\\n  CardAction,\\n  CardDescription,\\n  CardContent,\\n};\\n`,__src__:\\"registry/default/ui/card.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { typographyVariants } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Card\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"card\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"bg-card text-card-foreground flex flex-col rounded-lg border p-6\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" CardHeader\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"card-header\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 pb-6 has-[data-slot=card-action]:grid-cols-[1fr_auto]\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" CardTitle\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"card-title\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"font-bold text-center\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        typographyVariants\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ variant: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h5\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }),\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" CardDescription\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,n.jsx)(l.span,

1{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"card-description\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-muted-foreground text-sm text-center\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" CardAction\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"card-action\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" CardContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"card-content\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(className)} {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props} />;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" CardFooter\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"card-footer\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex items-center justify-end gap-2\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Card,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardHeader,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardFooter,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardTitle,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardAction,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardDescription,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardContent,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})})]})})})}),(0,n.jsx)(c,{children:\\"Update the import paths to match your project setup.\\"})]})})]})]})}function N(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}function r(e,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return _(D);})();\\n;return Component;"},"_id":"docs/components/card.mdx","_raw":{"sourceFilePath":"docs/components/card.mdx","sourceFileName":"card.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/card"},"type":"Doc","slug":"/docs/components/card","slugAsParams":"components/card"}

1,{"title":"Checkbox","description":"Displays a form checkbox field or a component that looks like an checkbox field..","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/checkbox","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Checkbox component customized by adjusting colors.\\n\\n<ComponentPreview name=\\"checkbox-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/checkbox.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"checkbox\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Examples\\n\\n### Disabled checkbox\\n\\n<ComponentPreview name=\\"checkbox-disabled-demo\\" description=\\"A disabled checkbox\\" />\\n\\n### Checkbox with form\\n\\n<ComponentPreview name=\\"checkbox-form-demo\\" description=\\"A checkbox with form\\" />\\n","code":"var Component=(()=>{var b=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var k=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),C=(n,e)=>{for(var s in e)a(n,s,{get:e[s],enumerable:!0})},E=(n,e,s,o)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let c of N(e))!B.call(n,c)&&c!==s&&a(n,c,{get:()=>e[c],enumerable:!(o=f(e,c))||o.enumerable});return n};var g=(n,e,s)=>(s=n!=null?b(x(n)):{},E(e||!n||!n.__esModule?a(s,\\"default\\",{value:n,enumerable:!0}):s,n)),v=n=>E(a({},\\"__esModule\\",{value:!0}),n);var y=k((S,m)=>{m.exports=_jsx_runtime});var w={};C(w,{default:()=>u,frontmatter:()=>_});var l=g(y()),_={title:\\"Checkbox\\",description:\\"Displays a form checkbox field or a component that looks like an checkbox field..\\",component:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/checkbox\\"}};function F(n){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...n.components},{ComponentPreview:s,ComponentSource:o,Step:c,Steps:d,Tabs:h,TabsContent:i,TabsList:p,TabsTrigger:t}=e;return s||r(\\"ComponentPreview\\",!0),o||r(\\"ComponentSource\\",!0),c||r(\\"Step\\",!0),d||r(\\"Steps\\",!0),h||r(\\"Tabs\\",!0),i||r(\\"TabsContent\\",!0),p||r(\\"TabsList\\",!0),t||r(\\"TabsTrigger\\",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.p,{children:\\"A ShadCN Checkbox component customized by adjusting colors.\\"}),`\\n`,(0,l.jsx)(s,{name:\\"checkbox-demo\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Checkbox } from \\"@/components/ui/checkbox\\";\\n\\nexport function CheckboxDemo() {\\n  return (\\n    <div className=\\"flex items-center space-x-2\\">\\n      <Checkbox id=\\"terms\\" />\\n      <label\\n        htmlFor=\\"terms\\"\\n        className=\\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\\"\\n      >\\n        Accept terms and conditions\\n      </label>\\n    </div>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/checkbox-demo.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Checkbox } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/checkbox\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" CheckboxDemo\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex items-center space-x-2\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Checkbox\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" id\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"terms\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"label\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        htmlFor\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"terms\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Accept terms and conditions\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"label\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"installation\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,l.jsxs)(h,{defaultValue:\\"cli\\",children:[(0,l.jsxs)(p,{children:[(0,l.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,l.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,l.jsx)(i,{value:\\"cli\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/checkbox.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/checkbox.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/checkbox.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/checkbox.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/checkbox.json\\"\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/checkbox.json\\"\'})]})})})})}),(0,l.jsx)(i,{value:\\"manual\\",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(c,{children:\\"Copy and paste the following code into your project.\\"}),(0,l.jsx)(o,{name:\\"checkbox\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport * as CheckboxPrimitive from \\"@radix-ui/react-checkbox\\";\\nimport { CheckIcon } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nfunction Checkbox({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\\n  return (\\n    <CheckboxPrimitive.Root\\n      data-slot=\\"checkbox\\"\\n      className={cn(\\n        \\"peer border-border data-[state=checked]:bg-accent data-[state=checked]:text-black data-[state=checked]:border-border ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-4 shrink-0 rounded-[4px] border shadow-xs transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-0\\",\\n        className\\n      )}\\n      {...props}\\n    >\\n      <CheckboxPrimitive.Indicator\\n        data-slot=\\"checkbox-indicator\\"\\n        className=\\"flex items-center justify-center text-current\\"\\n      >\\n        <CheckIcon className=\\"size-3.5\\" />\\n      </CheckboxPrimitive.Indicator>\\n    </CheckboxPrimitive.Root>\\n  );\\n}\\n\\nexport { Checkbox };\\n`,__src__:\\"registry/default/ui/checkbox.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" CheckboxPrimitive \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-checkbox\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CheckIcon } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Checkbox\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" CheckboxPrimitive.Root>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CheckboxPrimitive.Root\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"checkbox\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"peer border-border data-[state=checked]:bg-accent data-[state=checked]:text-black data-[state=checked]:border-border ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-4 shrink-0 rounded-[4px] border shadow-xs transition-[color,box-shadow] focu

1s-visible:ring-4 focus-visible:outline-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-0\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CheckboxPrimitive.Indicator\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"checkbox-indicator\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex items-center justify-center text-current\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CheckIcon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-3.5\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CheckboxPrimitive.Indicator\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CheckboxPrimitive.Root\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Checkbox };\\"})]})]})})})}),(0,l.jsx)(c,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"examples\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,l.jsxs)(e.h3,{id:\\"disabled-checkbox\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#disabled-checkbox\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Disabled checkbox\\"]}),`\\n`,(0,l.jsx)(s,{name:\\"checkbox-disabled-demo\\",description:\\"A disabled checkbox\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Checkbox } from \\"@/components/ui/checkbox\\";\\n\\nexport function CheckboxDisabledDemo() {\\n  return (\\n    <div className=\\"flex items-center space-x-2\\">\\n      <Checkbox id=\\"terms-conditions\\" disabled checked />

1\\n      <label\\n        htmlFor=\\"terms-conditions\\"\\n        className=\\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\\"\\n      >\\n        Accept terms and conditions\\n      </label>\\n    </div>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/checkbox-disabled-demo.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Checkbox } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/checkbox\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" CheckboxDisabledDemo\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex items-center space-x-2\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Checkbox\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" id\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"terms-conditions\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" disabled\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" checked\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"label\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        htmlFor\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"terms-conditions\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Accept terms and conditions\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"label\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(e.h3,{id:\\"checkbox-with-form\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#checkbox-with-form\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Checkbox with form\\"]}),`\\n`,(0,l.jsx)(s,{name:\\"checkbox-form-demo\\",description:\\"A checkbox with form\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";

1\\n\\nimport Link from \\"next/link\\";\\nimport { zodResolver } from \\"@hookform/resolvers/zod\\";\\nimport { useForm } from \\"react-hook-form\\";\\nimport { toast } from \\"sonner\\";\\nimport { z } from \\"zod\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\nimport { Checkbox } from \\"@/components/ui/checkbox\\";\\nimport {\\n  Form,\\n  FormControl,\\n  FormDescription,\\n  FormField,\\n  FormItem,\\n  FormLabel,\\n} from \\"@/components/ui/form\\";\\n\\nconst FormSchema = z.object({\\n  mobile: z.boolean().default(false).optional(),\\n});\\n\\nexport function CheckboxFormDemo() {\\n  const form = useForm<z.infer<typeof FormSchema>>({\\n    resolver: zodResolver(FormSchema),\\n    defaultValues: {\\n      mobile: true,\\n    },\\n  });\\n\\n  function onSubmit(data: z.infer<typeof FormSchema>) {\\n    toast.info(\\"You submitted the following values:\\", {\\n      description: (\\n        <pre className=\\"mt-2 w-max rounded-md bg-slate-950 p-4\\">\\n          <code className=\\"text-white\\">{JSON.stringify(data, null, 2)}</code>\\n        </pre>\\n      ),\\n    });\\n  }\\n\\n  return (\\n    <Form {...form}>\\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\\"space-y-6\\">\\n        <FormField\\n          control={form.control}\\n          name=\\"mobile\\"\\n          render={({ field }) => (\\n            <FormItem className=\\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow\\">\\n              <FormControl>\\n                <Checkbox\\n                  checked={field.value}\\n                  onCheckedChange={field.onChange}\\n                />\\n              </FormControl>\\n              <div className=\\"space-y-1 leading-none\\">\\n                <FormLabel>\\n                  Use different settings for my mobile devices\\n                </FormLabel>\\n                <FormDescription>\\n                  You can manage your mobile notifications in the{\\" \\"}\\n                  <Link href=\\"/examples/forms\\">mobile settings</Link> page.\\n                </FormDescription>\\n              </div>\\n            </FormItem>\\n          )}\\n        />\\n        <Button type=\\"submit\\">Submit</Button>\\n      </form>\\n    </Form>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/checkbox-form-demo.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" Link \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"next/link\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { zodResolver } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@hookform/resolvers/zod\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useForm } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react-hook-form\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { toast } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sonner\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { z } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"zod\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Checkbox } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/checkbox\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Form,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormControl,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormDescription,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormField,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormItem,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormLabel,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/form\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" FormSchema\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" z.\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"object\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  mobile: z.\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"boolean\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"().\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"default\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\").\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"optional\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(),\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"});\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" CheckboxFormDemo\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" form\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" useForm\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"z\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"infer\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" FormSchema>>({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    resolver: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"zodResolver\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(FormSchema),\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    defaultValues: {\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      mobile: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  });\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" onSubmit\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"data\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" z\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"infer\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" FormSchema>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    toast.\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"info\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"You submitted the following values:\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      description\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"pre\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"mt-2 w-max rounded-md bg-slate-950 p-4\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"code\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-white\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"JSON\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"stringify\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(data, \\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"2\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\")}</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"code\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"pre\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      ),\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    });\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Form\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"form}>\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"form\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" onSubmit\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{form.\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"handleSubmit\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(onSubmit)} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"space-y-6\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FormField\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          control\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{form.control}\\"})]})

1,`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          name\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"mobile\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          render\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{({ \\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"field\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FormItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FormControl\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Checkbox\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"                  checked\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{field.value}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"                  onCheckedChange\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{field.onChange}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                />\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"              </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FormControl\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"space-y-1 leading-none\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FormLabel\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  Use different settings for my mobile devices\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FormLabel\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FormDescription\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  You can manage your mobile notifications in the{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\" \\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Link\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" href\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"/examples/forms\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">mobile settings</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Link\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"> page.\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FormDescription\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"              </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FormItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          )}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" type\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"submit\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Submit</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"form\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Form\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(F,{...n})}):F(n)}function r(n,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return v(w);})();\\n;return Component;"},"_id":"docs/components/checkbox.mdx","_raw":{"sourceFilePath":"docs/components/checkbox.mdx","sourceFileName":"checkbox.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/checkbox"},"type":"Doc","slug":"/docs/components/checkbox","slugAsParams":"components/checkbox"},{"title":"Circular Progress","description":"Displays the remaining character count on a text editor, ensuring users are aware of their input limit.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"circular-progress-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/circular-progress.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"circular-progress\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { CircularProgress } from \\"<path-to-ui-components>/circular-progress\\";\\n```\\n\\n```tsx\\n<CircularProgress value={40} />\\n```\\n\\nThe `value` is a percentage.\\n","code":"var Component=(()=>{var B=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var v=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),_=(n,l)=>{for(var s in l)a(n,s,{get:l[s],enumerable:!0})},E=(n,l,s,o)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let r of N(l))!C.call(n,r)&&r!==s&&a(n,r,{get:()=>l[r],enumerable:!(o=g(l,r))||o.enumerable});return n};var x=(n,l,s)=>(s=n!=null?B(f(n)):{},E(l||!n||!n.__esModule?a(s,\\"default\\",{value:n,enumerable:!0}):s,n)),S=n=>E(a({},\\"__esModule\\",{value:!0}),n);var F=v((P,y)=>{y.exports=_jsx_runtime});var b={};_(b,{default:()=>u,frontmatter:()=>I});var e=x(F()),I={title:\\"Circular Progress\\",description:\\"Displays the remaining character count on a text editor, ensuring users are aware of their input limit.\\",component:!0};function m(n){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...n.components},{ComponentPreview:s,ComponentSource:o,Step:r,Steps:d,Tabs:p,TabsContent:i,TabsList:h,TabsTrigger:t}=l;return s||c(\\"ComponentPreview\\",!0),o||c(\\"ComponentSource\\",!0),r||c(\\"Step\\",!0),d||c(\\"Steps\\",!0),p||c(\\"Tabs\\",!0),i||c(\\"TabsContent\\",!0),h||c(\\"TabsList\\",!0),t||c(\\"TabsTrigger\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s,{name:\\"circular-progress-demo\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { CircularProgress } from \\"@/components/ui/circular-progress\\";\\n\\nexport function CircularProgressDemo() {\\n  const [progress, setProgress] = React.useState(20);\\n\\n  React.useEffect(() => {\\n    const timer1 = setTimeout(() => setProgress(80), 500);\\n    const timer2 = setTimeout(() => setProgress(100), 1000);\\n    const timer3 = setTimeout(() => setProgress(105), 1500);\\n    const timer4 = setTimeout(() => setProgress(80), 3000);\\n    return () => {\\n      clearTimeout(timer1);\\n      clearTimeout(timer2);\\n      clearTimeout(timer3);\\n      clearTimeout(timer4);\\n    };\\n  }, []);\\n  return <CircularProgress value={progress} />;\\n}\\n`,__src__:\\"registry/default/examples/circular-progress-demo.tsx\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CircularProgress } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/circular-progress\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" CircularProgressDemo\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"progress\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setProgress\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"20\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useEffect\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" timer1\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setTimeout\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setProgress\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"80\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"), \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"500\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" timer2\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setTimeout\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setProgress\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"100\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"), \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"1000\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" timer3\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setTimeout\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setProgress\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"105\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"), \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"1500\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" timer4\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setTimeout\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setProgress\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"80\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"), \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"3000\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      clearTimeout\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(timer1);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      clearTimeout\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(timer2);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      clearTimeout\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(timer3);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      clearTimeout\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(timer4);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    };\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, []);\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CircularProgress\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{progress} />;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"installation\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,e.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,e.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,e.jsx)(i,{value:\\"cli\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/circular-progress.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/circular-progress.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/circular-progress.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/circular-progress.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/circular-progress.json\\"\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/circular-progress.json\\"\'})]})})})})}),(0,e.jsx)(i,{value:\\"manual\\",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(r,{children:\\"Copy and paste the following code into your project.\\"}),(0,e.jsx)(o,{name:\\"circular-progress\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { typographyVariants } from \\"@/components/ui/typography\\";\\n\\nconst MAX = 100;\\n\\nconst CIRCLE_SIZE = 24;\\n\\nconst SIZE = CIRCLE_SIZE + 10;\\n\\nconst RADIUS = SIZE / 2 - 5;\\n\\nconst CircularProgress = ({\\n  value = 0,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"div\\"> & { value?: number }) => {\\n  const percentage = Math.min(Math.max(value, 0), MAX);\\n  const circumference = 2 * Math.PI * RADIUS;\\n  const offset = circumference - (percentage / MAX) * circumference;\\n\\n  const getColor = React.useCallback(() => {\\n    if (value < 100) return \\"stroke-primary\\";\\n    if (value === 100) return \\"stroke-warning\\";\\n    return \\"stroke-destructive\\";\\n  }, [value]);\\n\\n  const label = React.useMemo(() => {\\n    if (value === 100) return 1;\\n    if (value > 100) return -1;\\n    return \\"\\";\\n  }, [value]);\\n\\n  return (\\n    <div\\n      data-slot=\\"circular-progress\\"\\n      className={cn(\\"relative flex items-center justify-center\\", className)}\\n      {...props}\\n    >\\n      <svg\\n        width={SIZE}\\n        height={SIZE}

1\\n        viewBox={\\\\`0 0 \\\\${SIZE} \\\\${SIZE}\\\\`}\\n        className={cn(\\"rotate-[0deg]\\")}\\n      >\\n        <circle\\n          cx={SIZE / 2}\\n          cy={SIZE / 2}\\n          r={RADIUS}\\n          strokeWidth=\\"2\\"\\n          className={cn(\\"stroke-muted fill-none\\")}\\n        />\\n        <circle\\n          cx={SIZE / 2}\\n          cy={SIZE / 2}\\n          r={RADIUS}\\n          stroke=\\"currentColor\\"\\n          strokeWidth=\\"2\\"\\n          className={cn(\\"fill-none transition-all\\", getColor())}\\n          strokeDasharray={circumference}\\n          strokeDashoffset={offset}\\n          strokeLinecap=\\"round\\"\\n        />\\n      </svg>\\n      {label && (\\n        <p\\n          className={cn(\\n            \\"absolute text-foreground\\",\\n            typographyVariants({ variant: \\"xs\\" })\\n          )}\\n        >\\n          {label}\\n        </p>\\n      )}\\n    </div>\\n  );\\n};\\n\\nexport { CircularProgress };\\n`,__src__:\\"registry/default/ui/circular-progress.tsx\\",__style__:\\"default\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { typographyVariants } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" MAX\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 100\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" CIRCLE_SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 24\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" CIRCLE_SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" +\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 10\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" RADIUS\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" /\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 2\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" -\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 5\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" CircularProgress\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  value \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" percentage\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Math.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"min\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(Math.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"max\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(value, \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"0\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"), \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"MAX\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" circumference\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 2\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Math.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"PI\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" RADIUS\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" offset\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" circumference \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"-\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (percentage \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"/\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" MAX\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"*\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" circumference;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" getColor\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useCallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (value \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 100\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"stroke-primary\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (value \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 100\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"stroke-warning\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"stroke-destructive\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [value]);\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" label\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useMemo\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (value \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 100\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 1\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (value \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\">\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 100\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" -\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"1\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [value]);\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"circular-progress\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"relative flex items-center justify-center\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"svg\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        width\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},chil

1dren:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        height\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        viewBox\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"`0 0 ${\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"} ${\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}`\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"rotate-[0deg]\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"circle\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          cx\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" /\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 2\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          cy\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" /\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 2\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          r\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"RADIUS\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          strokeWidth\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"2\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"stroke-muted fill-none\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"circle\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          cx\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" /\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 2\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          cy\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SIZE\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" /\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 2\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          r\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"RADIUS\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          stroke\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"currentColor\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          strokeWidth\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"2\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"fill-none transition-all\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"getColor\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"())}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          strokeDasharray\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{circumference}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          strokeDashoffset\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{offset}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          strokeLinecap\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"svg\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {label \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"absolute text-foreground\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            typographyVariants\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ variant: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" })\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          )}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          {label}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CircularProgress };\\"})]})]})})})}),(0,e.jsx)(r,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"usage\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { CircularProgress } from \\"<path-to-ui-components>/circular-progress\\";\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CircularProgress } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/circular-progress\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<CircularProgress value={40} />\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CircularProgress\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"40\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]})})})}),`\\n`,(0,e.jsxs)(l.p,{children:[\\"The \\",(0,e.jsx)(l.code,{children:\\"value\\"}),\\" is a percentage.\\"]})]})}function u(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(m,{...n})}):m(n)}function c(n,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return S(b);})();\\n;return Component;"},"_id":"docs/components/circular-progress.mdx","_raw":{"sourceFilePath":"docs/components/circular-progress.mdx","sourceFileName":"circular-progress.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/circular-progress"},"type":"Doc","slug":"/docs/components/circular-progress","slugAsParams":"components/circular-progress"},{"title":"Content Card","description":"Displays a content card with action, body and footer","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"content-card-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/content-card.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"content-card\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n```tsx\\nimport {\\n  ContentCard,\\n  ContentCardAction,\\n  ContentCardBody,\\n  ContentCardFooter,\\n} from \\"<path-to-ui-components>/content-card\\";\\n```\\n\\n```tsx\\n<ContentCard>\\n  <ContentCardAction>Menu</ContentCardAction>\\n  <ContentCardBody>Body</ContentCardBody>\\n  <ContentCardFooter>Footer</ContentCardFooter>\\n</ContentCard>\\n```\\n","code":"var Component=(()=>{var N=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var A=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),v=(e,n)=>{for(var s in n)a(e,s,{get:n[s],enumerable:!0})},h=(e,n,s,c)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let r of B(n))!g.call(e,r)&&r!==s&&a(e,r,{get:()=>n[r],enumerable:!(c=u(n,r))||c.enumerable});return e};var b=(e,n,s)=>(s=e!=null?N(f(e)):{},h(n||!e||!e.__esModule?a(s,\\"default\\",{value:e,enumerable:!0}):s,e)),_=e=>h(a({},\\"__esModule\\",{value:!0}),e);var F=A((D,y)=>{y.exports=_jsx_runtime});var w={};v(w,{default:()=>C,frontmatter:()=>x});var l=b(F()),x={title:\\"Content Card\\",description:\\"Displays a content card with action, body and footer\\",component:!0};function m(e){let n={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",pre:\\"pre\\",span:\\"span\\",...e.components},{ComponentPreview:s,ComponentSource:c,Step:r,Steps:d,Tabs:p,TabsContent:t,TabsList:E,TabsTrigger:i}=n;return s||o(\\"ComponentPreview\\",!0),c||o(\\"ComponentSource\\",!0),r||o(\\"Step\\",!0),d||o(\\"Steps\\",!0),p||o(\\"Tabs\\",!0),t||o(\\"TabsContent\\",!0),E||o(\\"TabsList\\",!0),i||o(\\"TabsTrigger\\",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s,{name:\\"content-card-demo\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Ellipsis, MessageCircle, SatelliteDish } from \\"lucide-react\\";\\n\\nimport { formatRelativeTime } from \\"@/components/lib/format-relative-time\\";\\nimport { Button } from \\"@/components/ui/button\\";\\nimport {\\n  ContentCard,\\n  ContentCardAction,\\n  ContentCardBody,\\n  ContentCardFooter,\\n} from \\"@/components/ui/content-card\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\"@/components/ui/dropdown-menu\\";\\nimport { IconContainer } from \\"@/components/ui/icon-container\\";\\nimport { Stack } from \\"@/components/ui/stack\\";\\nimport { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function ContentCardDemo() {\\n  return (\\n    <ContentCard\\n      author={{\\n        did: \\"did:pkh:eip155:11155111:0x1a4b3c567890abcdeffedcba1234567890abcdef\\",\\n        name: \\"CoffeLover\\",\\n        avatarSrc: \\"https://github.com/akashaorg.png\\",\\n      }}\\n      publishedAt={formatRelativeTime(\\"2025-02-28T06:26:53.092058Z\\")}\\n    >\\n      <ContentCardAction>\\n        <DropdownMenu>\\n          <DropdownMenuTrigger>\\n            <Ellipsis size={20} className=\\"text-primary hover:text-muted\\" />\\n          </DropdownMenuTrigger>\\n          <DropdownMenuContent align=\\"end\\">\\n            <DropdownMenuItem\\n              onClick={() => {\\n                console.log(\\"Flag content\\");\\n              }}\\n            >\\n              Flag\\n            </DropdownMenuItem>\\n          </DropdownMenuContent>\\n        </DropdownMenu>\\n      </ContentCardAction>\\n      <ContentCardBody>This is a sample post ...</ContentCardBody>\\n      <ContentCardFooter>\\n        <Stack direction=\\"row\\" spacing={1} alignItems=\\"center\\">\\n          <IconContainer size=\\"xs\\" variant=\\"round\\">\\n            <SatelliteDish className=\\"text-primary\\" size={12} />

1\\n          </IconContainer>\\n\\n          <Typography variant=\\"xs\\" className=\\"text-muted-foreground\\">\\n            Published via Antenna\\n          </Typography>\\n        </Stack>\\n        <Button\\n          asChild\\n          onClick={() => {\\n            console.log(\\"Reply to the post\\");\\n          }}\\n          className=\\"border-none bg-transparent pr-0\\"\\n        >\\n          <MessageCircle size={16} className=\\"text-primary\\" />\\n        </Button>\\n      </ContentCardFooter>\\n    </ContentCard>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/content-card-demo.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Ellipsis, MessageCircle, SatelliteDish } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { formatRelativeTime } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/lib/format-relative-time\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ContentCard,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ContentCardAction,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ContentCardBody,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ContentCardFooter,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/content-card\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DropdownMenu,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DropdownMenuContent,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DropdownMenuItem,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DropdownMenuTrigger,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/dropdown-menu\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { IconContainer } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/icon-container\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stack } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/stack\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ContentCardDemo\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCard\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      author\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        did: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x1a4b3c567890abcdeffedcba1234567890abcdef\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        name: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"CoffeLover\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        avatarSrc: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      publishedAt\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"formatRelativeTime\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"2025-02-28T06:26:53.092058Z\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\")}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardAction\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"DropdownMenu\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"DropdownMenuTrigger\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Ellipsis\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"20\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-primary hover:text-muted\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"DropdownMenuTrigger\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"DropdownMenuContent\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" align\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"end\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"DropdownMenuItem\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"              onClick\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"                console.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"log\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Flag content\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"              }}\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            >\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"              Flag\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"DropdownMenuItem\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"DropdownMenuContent\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"DropdownMenu\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardAction\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardBody\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">This is a sample post ...</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardBody\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardFooter\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" direction\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"row\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" spacing\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"1\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"alignItems\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"center\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"SatelliteDish\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-primary\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"}

1,children:\\" size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"12\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-muted-foreground\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            Published via Antenna\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          asChild\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          onClick\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            console.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"log\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Reply to the post\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"border-none bg-transparent pr-0\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"MessageCircle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-primary\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardFooter\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCard\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(n.h2,{id:\\"installation\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,l.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,l.jsxs)(E,{children:[(0,l.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,l.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,l.jsx)(t,{value:\\"cli\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/content-card.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/content-card.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/content-card.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/content-card.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/content-card.json\\"\\n`,children:(0,l.jsx)(n.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/content-card.json\\"\'})]})})})})}),(0,l.jsx)(t,{value:\\"manual\\",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(r,{children:\\"Copy and paste the following code into your project.\\"}),(0,l.jsx)(c,{name:\\"content-card\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport {\\n  Card,\\n  CardAction,\\n  CardContent,\\n  CardFooter,\\n  CardHeader,\\n} from \\"@/components/ui/card\\";\\nimport {\\n  ProfileAvatarButton,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n  ProfileDidField,\\n  ProfileName,\\n} from \\"@/components/ui/profile-avatar-button\\";\\nimport { Typography } from \\"@/components/ui/typography\\";\\n\\nconst ContentCard = ({\\n  author,\\n  publishedAt,\\n  className,\\n  children,\\n  ...props\\n}: {\\n  author: {\\n    did: string;\\n    name?: string;\\n    avatarSrc?: string;\\n  };\\n  publishedAt?: string;\\n} & React.ComponentProps<typeof Card>) => {\\n  return (\\n    <Card className={cn(\\"p-4 w-full\\", className)} {...props}>\\n      <CardHeader>\\n        <ProfileAvatarButton profileDID={author.did}>\\n          <ProfileAvatarButtonAvatar>\\n            <ProfileAvatarButtonAvatarImage\\n              src={author.avatarSrc}\\n              alt={author.name}\\n            />\\n            <ProfileAvatarButtonAvatarFallback />\\n          </ProfileAvatarButtonAvatar>\\n          <ProfileName>\\n            {author.name}\\n            {publishedAt && (\\n              <Typography\\n                variant=\\"xs\\"\\n                className=\\"text-muted-foreground font-normal\\"\\n              >\\n                {\\" \\"}\\n                \\\\xB7 {publishedAt}\\n              </Typography>\\n            )}\\n          </ProfileName>\\n          <ProfileDidField />\\n        </ProfileAvatarButton>\\n        {React.Children.toArray(children).find(\\n          (child) =>\\n            React.isValidElement(child) && child.type === ContentCardAction\\n        )}\\n      </CardHeader>\\n      {React.Children.toArray(children).find(\\n        (child) => React.isValidElement(child) && child.type === ContentCardBody\\n      )}\\n      {React.Children.toArray(children).find(\\n        (child) =>\\n          React.isValidElement(child) && child.type === ContentCardFooter\\n      )}\\n    </Card>\\n  );\\n};\\n\\nconst ContentCardAction = (props: React.ComponentProps<typeof CardAction>) => {\\n  return <CardAction {...props} />;\\n};\\n\\nconst ContentCardBody = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CardContent>) => {\\n  return (\\n    <CardContent className={cn(\\"justify-start w-full\\", className)} {...props} />\\n  );\\n};\\n\\nconst ContentCardFooter = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CardFooter>) => {\\n  return <CardFooter className={cn(\\"justify-between\\", className)} {...props} />;\\n};\\n\\nexport { ContentCard, ContentCardAction, ContentCardBody, ContentCardFooter };\\n`,__src__:\\"registry/default/ui/content-card.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Card,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardAction,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardContent,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardFooter,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardHeader,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/card\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatar,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarImage,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileName,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar-button\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ContentCard\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  author,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  publishedAt,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  author\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"    did\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"    name\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"    avatarSrc\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  publishedAt\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" Card>) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Card\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-4 w-full\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)} {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}>\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"CardHeader\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{author.did}>\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarImage\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"              src\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{author.avatarSrc}\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"              alt\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{author.name}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarFallback\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"})

1,(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            {author.name}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            {publishedAt \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"                variant\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"                className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-muted-foreground font-normal\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"              >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"                {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\" \\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"                \\\\xB7 {publishedAt}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"              </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            )}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileDidField\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {React.Children.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"toArray\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(children).\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"find\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"child\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            React.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"isValidElement\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(child) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" child.type \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ContentCardAction\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"CardHeader\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {React.Children.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"toArray\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(children).\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"find\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"child\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"isValidElement\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(child) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" child.type \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ContentCardBody\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {React.Children.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"toArray\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(children).\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"find\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"child\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          React.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"isValidElement\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(child) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" child.type \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ContentCardFooter\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Card\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ContentCardAction\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" CardAction>) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"CardAction\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props} />;\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ContentCardBody\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" CardContent>) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"CardContent\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"justify-start w-full\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)} {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props} />\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ContentCardFooter\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" CardFooter>) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"CardFooter\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"justify-between\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)} {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props} />;\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { ContentCard, ContentCardAction, ContentCardBody, ContentCardFooter };\\"})]})]})})})}),(0,l.jsx)(r,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ContentCard,\\n  ContentCardAction,\\n  ContentCardBody,\\n  ContentCardFooter,\\n} from \\"<path-to-ui-components>/content-card\\";\\n`,children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ContentCard,\\"})}),`\\n

1`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ContentCardAction,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ContentCardBody,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ContentCardFooter,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/content-card\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<ContentCard>\\n  <ContentCardAction>Menu</ContentCardAction>\\n  <ContentCardBody>Body</ContentCardBody>\\n  <ContentCardFooter>Footer</ContentCardFooter>\\n</ContentCard>\\n`,children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCard\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardAction\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Menu</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardAction\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardBody\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Body</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardBody\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardFooter\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Footer</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCardFooter\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ContentCard\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})})]})}function C(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(m,{...e})}):m(e)}function o(e,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return _(w);})();\\n;return Component;"},"_id":"docs/components/content-card.mdx","_raw":{"sourceFilePath":"docs/components/content-card.mdx","sourceFileName":"content-card.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/content-card"},"type":"Doc","slug":"/docs/components/content-card","slugAsParams":"components/content-card"}

1,{"title":"Copy-to-clipboard","description":"Component that wraps any children with copy to clipboard functionality and a tooltip.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"copy-to-clipboard-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/copy-to-clipboard.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"copy-to-clipboard\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { CopyToClipboard } from \\"<path-to-ui-components>/copy-to-clipboard\\";\\n```\\n\\n```tsx\\n<CopyToClipboard\\n  textToCopy=\\"0x8a022905463998860516390fb27548479a098b95\\"\\n  ctaText=\\"Copy address\\"\\n  successText=\\"Copied â\\"\\n>\\n  <p>Click here to copy</p>\\n</CopyToClipboard>\\n```\\n\\n## Props\\n\\n| Name          | Type     | Description                                               |\\n| ------------- | -------- | --------------------------------------------------------- |\\n| textToCopy    | `string` | Text to copy.                                             |\\n| ctaText       | `string` | Call to action text.                                      |\\n| successText   | `string` | Success message to display once text is copied.           |\\n| resetDuration | `number` | Duration in milliseconds before success message is reset. |\\n\\n<Callout>\\n \\nThe **default** value of `resetDuration` is 5000 milliseconds.\\n\\n</Callout>\\n","code":"var Component=(()=>{var T=Object.create;var a=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),x=(n,l)=>{for(var s in l)a(n,s,{get:l[s],enumerable:!0})},y=(n,l,s,c)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let r of N(l))!f.call(n,r)&&r!==s&&a(n,r,{get:()=>l[r],enumerable:!(c=B(l,r))||c.enumerable});return n};var _=(n,l,s)=>(s=n!=null?T(g(n)):{},y(l||!n||!n.__esModule?a(s,\\"default\\",{value:n,enumerable:!0}):s,n)),v=n=>y(a({},\\"__esModule\\",{value:!0}),n);var m=b((k,F)=>{F.exports=_jsx_runtime});var P={};x(P,{default:()=>C,frontmatter:()=>D});var e=_(m()),D={title:\\"Copy-to-clipboard\\",description:\\"Component that wraps any children with copy to clipboard functionality and a tooltip.\\",component:!0};function u(n){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",strong:\\"strong\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...n.components},{Callout:s,ComponentPreview:c,ComponentSource:r,Step:t,Steps:p,Tabs:h,TabsContent:i,TabsList:E,TabsTrigger:d}=l;return s||o(\\"Callout\\",!0),c||o(\\"ComponentPreview\\",!0),r||o(\\"ComponentSource\\",!0),t||o(\\"Step\\",!0),p||o(\\"Steps\\",!0),h||o(\\"Tabs\\",!0),i||o(\\"TabsContent\\",!0),E||o(\\"TabsList\\",!0),d||o(\\"TabsTrigger\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(c,{name:\\"copy-to-clipboard-demo\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { CopyToClipboard } from \\"@/components/ui/copy-to-clipboard\\";\\nimport {\\n  ProfileAvatarButton,\\n  ProfileDidField,\\n} from \\"@/components/ui/profile-avatar-button\\";\\n\\nexport function CopyToClipboardDemo() {\\n  return (\\n    <CopyToClipboard\\n      textToCopy=\\"0x8a022905463998860516390fb27548479a098b95\\"\\n      ctaText=\\"Copy address\\"\\n      successText=\\"Copied \\\\u2713\\"\\n    >\\n      <ProfileAvatarButton profileDID=\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\">\\n        <ProfileDidField />\\n      </ProfileAvatarButton>

1\\n    </CopyToClipboard>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/copy-to-clipboard-demo.tsx\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CopyToClipboard } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/copy-to-clipboard\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar-button\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" CopyToClipboardDemo\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CopyToClipboard\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      textToCopy\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"0x8a022905463998860516390fb27548479a098b95\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      ctaText\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Copy address\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      successText\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Copied \\\\u2713\\"\'})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" profileDID\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileDidField\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CopyToClipboard\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"installation\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,e.jsxs)(h,{defaultValue:\\"cli\\",children:[(0,e.jsxs)(E,{children:[(0,e.jsx)(d,{value:\\"cli\\",children:\\"CLI\\"}),(0,e.jsx)(d,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,e.jsx)(i,{value:\\"cli\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/copy-to-clipboard.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/copy-to-clipboard.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/copy-to-clipboard.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/copy-to-clipboard.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/copy-to-clipboard.json\\"\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/copy-to-clipboard.json\\"\'})]})})})})}),(0,e.jsx)(i,{value:\\"manual\\",children:(0,e.jsxs)(p,{children:[(0,e.jsx)(t,{children:\\"Copy and paste the following code into your project.\\"}),(0,e.jsx)(r,{name:\\"copy-to-clipboard\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\n\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\"@/components/ui/tooltip\\";\\n\\nfunction CopyToClipboard({\\n  textToCopy,\\n  ctaText = \\"Copy to clipboard\\",\\n  successText = \\"Copied\\",\\n  resetDuration = 5000,\\n  asChild,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof TooltipProvider> &\\n  React.PropsWithChildren<{\\n    textToCopy: string;\\n    ctaText?: string;\\n    successText?: string;\\n    resetDuration?: number;\\n    asChild?: boolean;\\n  }>) {\\n  const [copied, setCopied] = React.useState(false);\\n  const [open, setOpen] = React.useState(false);\\n\\n  const copyToClipboard = async () => {\\n    await navigator.clipboard.writeText(textToCopy);\\n    setCopied(true);\\n    setTimeout(() => setCopied(false), resetDuration);\\n  };\\n\\n  const handleTooltipOpen = () => {\\n    setOpen(true);\\n  };\\n\\n  const handleTooltipClose = () => {\\n    setOpen(false);\\n  };\\n\\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\\n\\n  const handlePointerDown = (event: { target: EventTarget | null }) => {\\n    const target = event.target as Node;\\n    // Only clicking outside the trigger closes the tooltip\\n    if (!triggerRef.current?.contains(target)) {\\n      handleTooltipClose();\\n    }\\n  };\\n\\n  return (\\n    <TooltipProvider data-slot=\\"copy-to-clipboard\\" {...props}>\\n      <Tooltip open={open}>\\n        <TooltipTrigger\\n          onClick={copyToClipboard}\\n          ref={triggerRef}\\n          onMouseEnter={handleTooltipOpen}\\n          onMouseLeave={handleTooltipClose}\\n          asChild={asChild}\\n        >\\n          {children}\\n        </TooltipTrigger>\\n        <TooltipContent onPointerDownOutside={handlePointerDown}>\\n          {copied ? successText : ctaText}\\n        </TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\\nexport { CopyToClipboard };\\n`,__src__:\\"registry/default/ui/copy-to-clipboard.tsx\\",__style__:\\"default\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Tooltip,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TooltipContent,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TooltipProvider,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TooltipTrigger,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/tooltip\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" CopyToClipboard\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  textToCopy\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  ctaText\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"Copy to clipboard\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  successText\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"Copied\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  resetDuration\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 5000\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  asChild\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  children\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" TooltipProvider> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"PropsWithChildren\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"    textToCopy\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"    ctaText\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"    successText\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"    resetDuration\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"    asChild\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }>) {\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"copied\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setCopied\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"open\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setOpen\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" copyToClipboard\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" async\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    await\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" navigator.clipboard.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"writeText\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(textToCopy);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setCopied\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setTimeout\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setCopied\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"), resetDuration);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleTooltipOpen\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setOpen\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleTooltipClose\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setOpen\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"

1})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" triggerRef\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useRef\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLButtonElement\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handlePointerDown\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"event\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"target\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" EventTarget\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" target\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" event.target \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Node\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#6A737D\\"},children:\\"    // Only clicking outside the trigger closes the tooltip\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"triggerRef.current?.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"contains\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(target)) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      handleTooltipClose\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TooltipProvider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"}

1,children:\'\\"copy-to-clipboard\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}>\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Tooltip\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" open\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{open}>\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TooltipTrigger\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          onClick\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{copyToClipboard}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          ref\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{triggerRef}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          onMouseEnter\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{handleTooltipOpen}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          onMouseLeave\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{handleTooltipClose}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          asChild\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{asChild}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          {children}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TooltipTrigger\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TooltipContent\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" onPointerDownOutside\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{handlePointerDown}>\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          {copied \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" successText \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ctaText}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TooltipContent\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Tooltip\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TooltipProvider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CopyToClipboard };\\"})]})]})})})}),(0,e.jsx)(t,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"usage\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { CopyToClipboard } from \\"<path-to-ui-components>

1/copy-to-clipboard\\";\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CopyToClipboard } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/copy-to-clipboard\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<CopyToClipboard\\n  textToCopy=\\"0x8a022905463998860516390fb27548479a098b95\\"\\n  ctaText=\\"Copy address\\"\\n  successText=\\"Copied \\\\u2713\\"\\n>\\n  <p>Click here to copy</p>\\n</CopyToClipboard>\\n`,children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CopyToClipboard\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  textToCopy\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"0x8a022905463998860516390fb27548479a098b95\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  ctaText\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Copy address\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  successText\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Copied \\\\u2713\\"\'})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Click here to copy</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CopyToClipboard\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"props\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:\\"Name\\"}),(0,e.jsx)(l.th,{children:\\"Type\\"}),(0,e.jsx)(l.th,{children:\\"Description\\"})]})}),(0,e.jsxs)(l.tbody,{children:[(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"textToCopy\\"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:\\"string\\"})}),(0,e.jsx)(l.td,{children:\\"Text to copy.\\"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"ctaText\\"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:\\"string\\"})}),(0,e.jsx)(l.td,{children:\\"Call to action text.\\"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"successText\\"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:\\"string\\"})}),(0,e.jsx)(l.td,{children:\\"Success message to display once text is copied.\\"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"resetDuration\\"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:\\"number\\"})}),(0,e.jsx)(l.td,{children:\\"Duration in milliseconds before success message is reset.\\"})]})]})]}),`\\n`,(0,e.jsx)(s,{children:(0,e.jsxs)(l.p,{children:[\\"The \\",(0,e.jsx)(l.strong,{children:\\"default\\"}),\\" value of \\",(0,e.jsx)(l.code,{children:\\"resetDuration\\"}),\\" is 5000 milliseconds.\\"]})})]})}function C(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(u,{...n})}):u(n)}function o(n,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return v(P);})();\\n;return Component;"}

1,"_id":"docs/components/copy-to-clipboard.mdx","_raw":{"sourceFilePath":"docs/components/copy-to-clipboard.mdx","sourceFileName":"copy-to-clipboard.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/copy-to-clipboard"},"type":"Doc","slug":"/docs/components/copy-to-clipboard","slugAsParams":"components/copy-to-clipboard"},{"title":"Duplex Button","description":"A component that can change its label, icon, and appearance based on active, hover and inactive states.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"duplex-button-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/duplex-button.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"duplex-button\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  DuplexButton,\\n  DuplexButtonActive,\\n  DuplexButtonHover,\\n  DuplexButtonInactive,\\n} from \\"<path-to-ui-components>/duplex-button\\";\\n```\\n\\n```tsx\\nconst [subscribe, setSubscribe] = useState(false);\\n\\n<DuplexButton active={subscribe}>\\n  <DuplexButtonInactive\\n    variant=\\"default\\"\\n    onClick={() => {\\n      setSubscribe(true);\\n    }}\\n  >\\n    Subscribe <UsersIcon size={16} />\\n  </DuplexButtonInactive>\\n\\n  <DuplexButtonHover\\n    variant=\\"outline\\"\\n    onClick={() => {\\n      setSubscribe(false);\\n    }}\\n  >\\n    Unsubscribe <UsersIcon size={16} />\\n  </DuplexButtonHover>\\n\\n  <DuplexButtonActive>\\n    Subscribed <UserIcon size={16} />\\n  </DuplexButtonActive>\\n</DuplexButton>;\\n```\\n\\n## Props\\n\\n| Name     | Type      | Description                                           |\\n| -------- | --------- | ----------------------------------------------------- |\\n| active   | `boolean` | Checks if the component is currently active.          |\\n| loading  | `boolean` | Specifies whether the component is currently loading. |\\n| disabled | `boolean` | Specifies whether the component is disabled.          |\\n\\n## Examples\\n\\n### Loading\\n\\n<ComponentPreview\\n  name=\\"duplex-button-loading\\"\\n  description=\\"A duplex button loading\\"\\n/>\\n\\n### Disabled\\n\\n<ComponentPreview\\n  name=\\"duplex-button-disabled\\"\\n  description=\\"A disabled duplex button\\"\\n/>\\n","code":"var Component=(()=>{var B=Object.create;var a=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var f=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),D=(e,l)=>{for(var s in l)a(e,s,{get:l[s],enumerable:!0})},E=(e,l,s,r)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let c of x(l))!b.call(e,c)&&c!==s&&a(e,c,{get:()=>l[c],enumerable:!(r=N(l,c))||r.enumerable});return e};var g=(e,l,s)=>(s=e!=null?B(v(e)):{},E(l||!e||!e.__esModule?a(s,\\"default\\",{value:e,enumerable:!0}):s,e)),C=e=>E(a({},\\"__esModule\\",{value:!0}),e);var F=f((z,y)=>{y.exports=_jsx_runtime});var w={};D(w,{default:()=>m,frontmatter:()=>_});var n=g(F()),_={title:\\"Duplex Button\\",description:\\"A component that can change its label, icon, and appearance based on active, hover and inactive states.\\",component:!0};function u(e){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...e.components},{ComponentPreview:s,ComponentSource:r,Step:c,Steps:d,Tabs:p,TabsContent:t,TabsList:h,TabsTrigger:i}=l;return s||o(\\"ComponentPreview\\",!0),r||o(\\"ComponentSource\\",!0),c||o(\\"Step\\",!0),d||o(\\"Steps\\",!0),p||o(\\"Tabs\\",!0),t||o(\\"TabsContent\\",!0),h||o(\\"TabsList\\",!0),i||o(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s,{name:\\"duplex-button-demo\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";

1\\n\\nimport { useState } from \\"react\\";\\nimport { UserIcon, UsersIcon } from \\"lucide-react\\";\\n\\nimport {\\n  DuplexButton,\\n  DuplexButtonActive,\\n  DuplexButtonHover,\\n  DuplexButtonInactive,\\n} from \\"@/components/ui/duplex-button\\";\\n\\nexport function DuplexButtonDemo() {\\n  const [follow, setFollow] = useState(false);\\n  return (\\n    <DuplexButton active={follow}>\\n      <DuplexButtonInactive\\n        onClick={() => {\\n          setFollow(true);\\n        }}\\n        variant=\\"outline\\"\\n      >\\n        Follow <UsersIcon size={16} />\\n      </DuplexButtonInactive>\\n\\n      <DuplexButtonHover\\n        variant=\\"destructive\\"\\n        onClick={() => {\\n          setFollow(false);\\n        }}\\n      >\\n        Unfollow <UsersIcon size={16} />\\n      </DuplexButtonHover>\\n\\n      <DuplexButtonActive variant=\\"outline\\">\\n        Following <UserIcon size={16} />\\n      </DuplexButtonActive>\\n    </DuplexButton>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/duplex-button-demo.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useState } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { UserIcon, UsersIcon } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButton,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonActive,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonHover,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonInactive,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/duplex-button\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" DuplexButtonDemo\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"follow\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setFollow\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useState\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButton\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" active\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{follow}>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonInactive\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        onClick\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          setFollow\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Follow <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UsersIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonInactive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonHover\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"destructive\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        onClick\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          setFollow\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Unfollow <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UsersIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonHover\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonActive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Following <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UserIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonActive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButton\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"installation\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(t,{value:\\"cli\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/duplex-button.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/duplex-button.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/duplex-button.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/duplex-button.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/duplex-button.json\\"\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/duplex-button.json\\"\'})]})})})})}),(0,n.jsx)(t,{value:\\"manual\\",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(c,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(r,{name:\\"duplex-button\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { Button } from \\"@/components/ui/button\\";\\n\\nconst DuplexButtonContext = React.createContext<{\\n  active: boolean;\\n  size: React.ComponentProps<typeof Button>[\\"size\\"];\\n  loading?: boolean;\\n  disabled?: boolean;\\n} | null>(null);\\n\\nconst useDuplexButtonContext = () => {\\n  const context = React.useContext(DuplexButtonContext);\\n  if (!context) {\\n    throw new Error(\\n      \\"\\\\`useDuplexButtonContext\\\\` must be used within \\\\`DuplexButton\\\\`\\"\\n    );\\n  }\\n  return context;\\n};\\n\\nconst DuplexButton = ({\\n  size = \\"default\\",\\n  active,\\n  loading,\\n  disabled,\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<\\"div\\"> & {\\n  active: boolean;\\n  size?: React.ComponentProps<typeof Button>[\\"size\\"];\\n  loading?: boolean;\\n  disabled?: boolean;\\n  children: React.ReactNode;\\n}) => {\\n  return (\\n    <DuplexButtonContext.Provider\\n      value={{\\n        active,\\n        size,\\n        loading,\\n        disabled,\\n      }}\\n    >\\n      <div\\n        data-slot=\\"duplex-button\\"\\n        className={cn(\\n          \\"group/duplex-button [&_button]:w-full space-2\\",\\n          className\\n        )}\\n        {...props}\\n      >\\n        {children}\\n      </div>\\n    </DuplexButtonContext.Provider>\\n  );\\n};\\n\\nconst DuplexButtonActive = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"button\\"> & React.ComponentProps<typeof Button>) => {\\n  const { active, loading, disabled, size } = useDuplexButtonContext();\\n  if (!active) return;\\n  return (\\n    <Button\\n      data-slot=\\"duplex-button-active\\"\\n      loading={loading}\\n      disabled={disabled}\\n      size={size}\\n      className={cn(\\n        {\\n          \\"group-hover/duplex-button:hidden\\": !loading && !disabled,\\n        },\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst DuplexButtonHover = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"button\\"> & React.ComponentProps<typeof Button>) => {\\n  const { active, loading, disabled, size } = useDuplexButtonContext();\\n  if (loading || disabled || !active) return;\\n  return (\\n    <Button\\n      data-slot=\\"duplex-button-hover\\"\\n      size={size}\\n      className={cn(\\n        \\"hidden group-hover/duplex-button:flex border border-destructive text-destructive bg-transparent hover:bg-transparent\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst DuplexButtonInactive = (\\n  props: React.ComponentProps<\\"button\\"> & React.ComponentProps<typeof Button>

1\\n) => {\\n  const { active, loading, disabled, size } = useDuplexButtonContext();\\n  if (active) return;\\n  return (\\n    <Button\\n      data-slot=\\"duplex-button-inactive\\"\\n      size={size}\\n      loading={loading}\\n      disabled={disabled}\\n      {...props}\\n    />\\n  );\\n};\\n\\nexport {\\n  DuplexButton,\\n  DuplexButtonActive,\\n  DuplexButtonHover,\\n  DuplexButtonInactive,\\n};\\n`,__src__:\\"registry/default/ui/duplex-button.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" DuplexButtonContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"createContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  active\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Button>[\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"];\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  disabled\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"|\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useDuplexButtonContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" context\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(DuplexButtonContext);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"context) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"`useDuplexButtonContext` must be used within `DuplexButton`\\"\'})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" context;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" DuplexButton\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  size \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"default\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  active,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  loading,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  disabled,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  active\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Button>[\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"];\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  disabled\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  children\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ReactNode\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonContext.Provider\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        active,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        size,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        loading,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        disabled,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"duplex-button\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"group/duplex-button [&_button]:w-full space-2\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          className\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {children}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonContext.Provider\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{styl

1e:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" DuplexButtonActive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"button\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Button>) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"active\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"disabled\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useDuplexButtonContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"active) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"duplex-button-active\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{loading}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      disabled\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{disabled}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{size}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"group-hover/duplex-button:hidden\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"loading \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" !\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"disabled,\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        },\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" DuplexButtonHover\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"button\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Button>) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"active\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"disabled\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useDuplexButtonContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (loading \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" disabled \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" !\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"active) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"duplex-button-hover\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{size}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"hidden group-hover/duplex-button:flex border border-destructive text-destructive bg-transparent hover:bg-transparent\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" DuplexButtonInactive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  props\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"button\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Button>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"active\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"disabled\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useDuplexButtonContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (active) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,n.jsx)(l

1.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"duplex-button-inactive\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{size}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{loading}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      disabled\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{disabled}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButton,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonActive,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonHover,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonInactive,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})})]})})})}),(0,n.jsx)(c,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"usage\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  DuplexButton,\\n  DuplexButtonActive,\\n  DuplexButtonHover,\\n  DuplexButtonInactive,\\n} from \\"<path-to-ui-components>/duplex-button\\";\\n`,children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButton,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonActive,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonHover,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonInactive,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/duplex-button\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`const [subscribe, setSubscribe] = useState(false);\\n\\n<DuplexButton active={subscribe}>\\n  <DuplexButtonInactive\\n    variant=\\"default\\"\\n    onClick={() => {\\n      setSubscribe(true);\\n    }}\\n  >\\n    Subscribe <UsersIcon size={16} />\\n  </DuplexButtonInactive>\\n\\n  <DuplexButtonHover\\n    variant=\\"outline\\"\\n    onClick={() => {\\n      setSubscribe(false);\\n    }}\\n  >\\n    Unsubscribe <UsersIcon size={16} />\\n  </DuplexButtonHover>\\n\\n  <DuplexButtonActive>\\n    Subscribed <UserIcon size={16} />\\n  </DuplexButtonActive>\\n</DuplexButton>;\\n`,children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"subscribe\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setSubscribe\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useState\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButton\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" active\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{subscribe}>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonInactive\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"default\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    onClick\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      setSubscribe\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    Subscribe <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UsersIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonInactive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonHover\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    onClick\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      setSubscribe\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    Unsubscribe <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UsersIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonHover\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonActive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    Subscribed <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UserIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonActive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButton\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]})]})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"props\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:\\"Name\\"}),(0,n.jsx)(l.th,{children:\\"Type\\"}),(0,n.jsx)(l.th,{children:\\"Description\\"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"active\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"boolean\\"})}),(0,n.jsx)(l.td,{children:\\"Checks if the component is currently active.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"loading\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"boolean\\"})}),(0,n.jsx)(l.td,{children:\\"Specifies whether the component is currently loading.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"disabled\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"boolean\\"})}),(0,n.jsx)(l.td,{children:\\"Specifies whether the component is disabled.\\"})]})]})]}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"examples\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,n.jsxs)(l.h3,{id:\\"loading\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#loading\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Loading\\"]}),`\\n`,(0,n.jsx)(s,{name:\\"duplex-button-loading\\",description:\\"A duplex button loading\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";

1\\n\\nimport { useState } from \\"react\\";\\nimport { UserIcon, UsersIcon } from \\"lucide-react\\";\\n\\nimport {\\n  DuplexButton,\\n  DuplexButtonActive,\\n  DuplexButtonHover,\\n  DuplexButtonInactive,\\n} from \\"@/components/ui/duplex-button\\";\\n\\nexport function DuplexButtonLoading() {\\n  const [follow, setFollow] = useState(false);\\n  const [loading, setLoading] = useState(false);\\n\\n  return (\\n    <DuplexButton active={follow} loading={loading}>\\n      <DuplexButtonInactive\\n        onClick={() => {\\n          setLoading(true);\\n          setTimeout(() => {\\n            setFollow(true);\\n            setLoading(false);\\n          }, 1000);\\n        }}\\n        variant=\\"outline\\"\\n      >\\n        Follow <UsersIcon size={16} />\\n      </DuplexButtonInactive>\\n\\n      <DuplexButtonHover\\n        variant=\\"destructive\\"\\n        onClick={() => {\\n          setLoading(true);\\n          setTimeout(() => {\\n            setFollow(false);\\n            setLoading(false);\\n          }, 1000);\\n        }}\\n      >\\n        Unfollow <UsersIcon size={16} />\\n      </DuplexButtonHover>\\n\\n      <DuplexButtonActive variant=\\"outline\\">\\n        Following <UserIcon size={16} />\\n      </DuplexButtonActive>\\n    </DuplexButton>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/duplex-button-loading.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useState } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { UserIcon, UsersIcon } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButton,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonActive,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonHover,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonInactive,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/duplex-button\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" DuplexButtonLoading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"follow\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setFollow\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useState\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setLoading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useState\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButton\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" active\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{follow} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{loading}>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonInactive\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        onClick\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"}

1,children:\\"          setLoading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          setTimeout\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            setFollow\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            setLoading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }, \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"1000\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Follow <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UsersIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonInactive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonHover\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"destructive\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        onClick\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          setLoading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          setTimeout\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            setFollow\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"}

1,children:\\"            setLoading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }, \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"1000\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Unfollow <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UsersIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonHover\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonActive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Following <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UserIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonActive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButton\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h3,{id:\\"disabled\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#disabled\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Disabled\\"]}),`\\n`,(0,n.jsx)(s,{name:\\"duplex-button-disabled\\",description:\\"A disabled duplex button\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport { useEffect, useState } from \\"react\\";\\nimport { UserIcon, UsersIcon } from \\"lucide-react\\";\\n\\nimport {\\n  DuplexButton,\\n  DuplexButtonActive,\\n  DuplexButtonHover,\\n  DuplexButtonInactive,\\n} from \\"@/components/ui/duplex-button\\";\\n\\nexport function DuplexButtonDisabled() {\\n  const [follow, setFollow] = useState(false);\\n\\n  useEffect(() => {\\n    setTimeout(() => setFollow(true), 2000);\\n  }, []);\\n\\n  return (\\n    <DuplexButton active={follow} disabled={true}>\\n      <DuplexButtonInactive variant=\\"outline\\">\\n        Follow <UsersIcon size={16} />\\n      </DuplexButtonInactive>\\n\\n      <DuplexButtonHover variant=\\"destructive\\">\\n        Unfollow <UsersIcon size={16} />\\n      </DuplexButtonHover>\\n\\n      <DuplexButtonActive variant=\\"outline\\">\\n        Following <UserIcon size={16} />\\n      </DuplexButtonActive>\\n    </DuplexButton>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/duplex-button-disabled.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useEffect, useState } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { UserIcon, UsersIcon } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButton,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonActive,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonHover,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  DuplexButtonInactive,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/duplex-button\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" DuplexButtonDisabled\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"follow\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setFollow\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useState\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  useEffect\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setTimeout\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setFollow\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"), \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"2000\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, []);\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButton\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" active\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{follow} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"disabled\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonInactive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Follow <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UsersIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonInactive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonHover\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"destructive\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Unfollow <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UsersIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonHover\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonActive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        Following <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"UserIcon\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButtonActive\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DuplexButton\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function m(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}function o(e,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return C(w);})();\\n;return Component;"},"_id":"docs/components/duplex-button.mdx","_raw":{"sourceFilePath":"docs/components/duplex-button.mdx","sourceFileName":"duplex-button.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/duplex-button"},"type":"Doc","slug":"/docs/components/duplex-button","slugAsParams":"components/duplex-button"},{"title":"Error Loader","description":"Displays error info based on error type with title, description and footer.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"error-loader-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/error-loader.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n<Step> Add the following images to your project </Step>\\n\\n1.  https://akasha-ui.pages.dev/images/not-authenticated.webp\\n2.  https://akasha-ui.pages.dev/images/new404.webp\\n3.  https://akasha-ui.pages.dev/images/list-not-available.webp\\n4.  https://akasha-ui.pages.dev/images/general-error.webp\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"error-loader\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  ErrorLoader,\\n  ErrorLoaderDescription,\\n  ErrorLoaderFooter,\\n  ErrorLoaderTitle,\\n} from \\"<path-to-ui-components>/error-loader\\";\\n```\\n\\n```tsx\\n<ErrorLoader type=\\"not-authenticated\\">\\n  <ErrorLoaderTitle>Uh-oh! You are not connected!</ErrorLoaderTitle>\\n  <ErrorLoaderDescription>\\n    To create post you must be connected â¡ï¸\\n  </ErrorLoaderDescription>\\n  <ErrorLoaderFooter>\\n    <Button>Connect</Button>\\n  </ErrorLoaderFooter>\\n</ErrorLoader>\\n```\\n\\n## Props\\n\\n| Name          | Type                 | Description                  |\\n| ------------- | -------------------- | ---------------------------- |\\n| type          | `no-apps`            | No application found.        |\\n|               | `not-authenticated`  | Not authenticated.           |\\n|               | `script-error`       | Script error.                |\\n|               | `page-not-found`     | 404 (page not found).        |\\n|               | `list-not-available` | Data contains empty list.    |\\n| publicImgPath | `string`             | Path to public image folder. |\\n","code":"var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var f=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),L=(n,e)=>{for(var r in e)o(n,r,{get:e[r],enumerable:!0})},E=(n,e,r,c)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let s of B(e))!C.call(n,s)&&s!==r&&o(n,s,{get:()=>e[s],enumerable:!(c=g(e,s))||c.enumerable});return n};var _=(n,e,r)=>(r=n!=null?u(b(n)):{},E(e||!n||!n.__esModule?o(r,\\"default\\",{value:n,enumerable:!0}):r,n)),v=n=>E(o({},\\"__esModule\\",{value:!0}),n);var m=f((T,y)=>{y.exports=_jsx_runtime});var w={};L(w,{default:()=>N,frontmatter:()=>k});var l=_(m()),k={title:\\"Error Loader\\",description:\\"Displays error info based on error type with title, description and footer.\\",component:!0};function F(n){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",li:\\"li\\",ol:\\"ol\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...n.components},{ComponentPreview:r,ComponentSource:c,Step:s,Steps:d,Tabs:p,TabsContent:i,TabsList:h,TabsTrigger:t}=e;return r||a(\\"ComponentPreview\\",!0),c||a(\\"ComponentSource\\",!0),s||a(\\"Step\\",!0),d||a(\\"Steps\\",!0),p||a(\\"Tabs\\",!0),i||a(\\"TabsContent\\",!0),h||a(\\"TabsList\\",!0),t||a(\\"TabsTrigger\\",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(r,{name:\\"error-loader-demo\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Button } from \\"@/components/ui/button\\";\\nimport {\\n  ErrorLoader,\\n  ErrorLoaderDescription,\\n  ErrorLoaderFooter,\\n  ErrorLoaderTitle,\\n} from \\"@/components/ui/error-loader\\";\\n\\nexport function ErrorLoaderDemo() {\\n  return (\\n    <ErrorLoader type=\\"not-authenticated\\">\\n      <ErrorLoaderTitle>Uh-oh! You are not connected!</ErrorLoaderTitle>\\n      <ErrorLoaderDescription>\\n        To create post you must be connected \\\\u26A1\\\\uFE0F\\n      </ErrorLoaderDescription>\\n      <ErrorLoaderFooter>\\n        <Button>Connect</Button>

1\\n      </ErrorLoaderFooter>\\n    </ErrorLoader>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/error-loader-demo.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoader,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoaderDescription,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoaderFooter,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoaderTitle,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/error-loader\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ErrorLoaderDemo\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoader\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" type\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"not-authenticated\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderTitle\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Uh-oh! You are not connected!</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderTitle\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderDescription\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        To create post you must be connected \\\\u26A1\\\\uFE0F\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderDescription\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderFooter\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Connect</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderFooter\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoader\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"installation\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,l.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,l.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,l.jsx)(i,{value:\\"cli\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/error-loader.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/error-loader.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/error-loader.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/error-loader.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/error-loader.json\\"\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/error-loader.json\\"\'})]})})})})}),(0,l.jsx)(i,{value:\\"manual\\",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(s,{children:\\" Add the following images to your project \\"}),(0,l.jsxs)(e.ol,{children:[`\\n`,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:\\"https://akasha-ui.pages.dev/images/not-authenticated.webp\\",children:\\"https://akasha-ui.pages.dev/images/not-authenticated.webp\\"})}),`\\n`,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:\\"https://akasha-ui.pages.dev/images/new404.webp\\",children:\\"https://akasha-ui.pages.dev/images/new404.webp\\"})}),`\\n`,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:\\"https://akasha-ui.pages.dev/images/list-not-available.webp\\",children:\\"https://akasha-ui.pages.dev/images/list-not-available.webp\\"})}),`\\n`,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:\\"https://akasha-ui.pages.dev/images/general-error.webp\\",children:\\"https://akasha-ui.pages.dev/images/general-error.webp\\"})}),`\\n`]}),(0,l.jsx)(s,{children:\\"Copy and paste the following code into your project.\\"}),(0,l.jsx)(c,{name:\\"error-loader\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport {\\n  Card,\\n  CardDescription,\\n  CardFooter,\\n  CardTitle,\\n} from \\"@/components/ui/card\\";\\nimport { Image, ImageFallback } from \\"@/components/ui/image\\";\\n\\nconst ErrorLoaderTitle = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"div\\">) => (\\n  <CardTitle\\n    data-slot=\\"error-loader-title\\"\\n    className={cn(\\"pt-4\\", className)}\\n    {...props}\\n  />\\n);\\n\\nconst ErrorLoaderDescription = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"div\\">) => (\\n  <CardDescription\\n    data-slot=\\"error-loader-description\\"\\n    className={cn(\\"pt-2\\", className)}\\n    {...props}\\n  />\\n);\\n\\nconst ErrorLoaderFooter = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"div\\">) => (\\n  <CardFooter\\n    data-slot=\\"error-loader-footer\\"\\n    className={cn(\\"justify-center\\", className)}\\n    {...props}\\n  />\\n);\\n\\nconst ErrorLoader = ({\\n  children,\\n  publicImgPath = \\"/images\\",\\n  type,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"div\\"> & {\\n  type:\\n    | \\"no-apps\\"\\n    | \\"not-authenticated\\"\\n    | \\"script-error\\"\\n    | \\"page-not-found\\"\\n    | \\"list-not-available\\";\\n  publicImgPath?: string;\\n}) => {\\n  let imageSrc: string;\\n\\n  switch (type) {\\n    case \\"no-apps\\":\\n      imageSrc = \\\\`\\\\${publicImgPath}/no-apps-error.webp\\\\`;\\n      break;\\n    case \\"not-authenticated\\":\\n      imageSrc = \\\\`\\\\${publicImgPath}/not-authenticated.webp\\\\`;\\n      break;\\n    case \\"page-not-found\\":\\n      imageSrc = \\\\`\\\\${publicImgPath}/new404.webp\\\\`;\\n      break;\\n    case \\"list-not-available\\":\\n      imageSrc = \\\\`\\\\${publicImgPath}/list-not-available.webp\\\\`;\\n      break;\\n    default:\\n      imageSrc = \\\\`\\\\${publicImgPath}/general-error.webp\\\\`;\\n      break;\\n  }\\n\\n  return (\\n    <Card data-slot=\\"error-loader\\" className={cn(className)} {...props}>\\n      <div className={cn(\\"flex justify-center px-6\\")}>\\n        <Image\\n          src={imageSrc}\\n          alt=\\"Error Image\\"\\n          className=\\"size-[12.5rem] object-contain rounded-lg\\"\\n        >\\n          <ImageFallback>Failed to load image</ImageFallback>\\n        </Image>\\n      </div>\\n      {children}\\n    </Card>\\n  );\\n};\\n\\nexport {\\n  ErrorLoader,\\n  ErrorLoaderTitle,\\n  ErrorLoaderDescription,\\n  ErrorLoaderFooter,\\n};\\n`,__src__:\\"registry/default/ui/error-loader.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Card,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardDescription,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardFooter,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  CardTitle,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/card\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Image, ImageFallback } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/image\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ErrorLoaderTitle\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CardTitle\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"    data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"error-loader-title\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"    className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"pt-4\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  />\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ErrorLoaderDescription\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CardDescription\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"    data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"error-loader-description\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"    className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"pt-2\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  />\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ErrorLoaderFooter\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CardFooter\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"    data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"error-loader-footer\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"    className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"justify-center\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n

1`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  />\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ErrorLoader\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  publicImgPath \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"/images\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  type,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  type\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    |\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"no-apps\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    |\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"not-authenticated\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    |\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"script-error\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    |\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"page-not-found\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    |\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"list-not-available\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  publicImgPath\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  let\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" imageSrc\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  switch\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (type) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    case\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"no-apps\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\":\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      imageSrc \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"publicImgPath\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"}/no-apps-error.webp`\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"      break\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    case\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"not-authenticated\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\":\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      imageSrc \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"publicImgPath\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"}/not-authenticated.webp`\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"      break\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    case\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"page-not-found\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\":\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      imageSrc \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"publicImgPath\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"}/new404.webp`\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"      break\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    case\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"list-not-available\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\":\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      imageSrc \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"publicImgPath\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"}/list-not-available.webp`\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"      break\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    default\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\":\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      imageSrc \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"publicImgPath\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"}/general-error.webp`\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"      break\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Card\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"error-loader\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(className)} {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}>\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex justify-center px-6\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\")}>\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Image\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          src\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{imageSrc}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          alt\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Error Image\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-[12.5rem] object-contain rounded-lg\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ImageFallback\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Failed to load image</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ImageFallback\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Image\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {children}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Card\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoader,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoaderTitle,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoaderDescription,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoaderFooter,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})})]})})})}),(0,l.jsx)(s,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"usage\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ErrorLoader,\\n  ErrorLoaderDescription,\\n  ErrorLoaderFooter,\\n  ErrorLoaderTitle,\\n} from \\"<path-to-ui-components>/error-loader\\";\\n`,children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(e

1.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoader,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoaderDescription,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoaderFooter,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ErrorLoaderTitle,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/error-loader\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<ErrorLoader type=\\"not-authenticated\\">\\n  <ErrorLoaderTitle>Uh-oh! You are not connected!</ErrorLoaderTitle>\\n  <ErrorLoaderDescription>\\n    To create post you must be connected \\\\u26A1\\\\uFE0F\\n  </ErrorLoaderDescription>\\n  <ErrorLoaderFooter>\\n    <Button>Connect</Button>\\n  </ErrorLoaderFooter>\\n</ErrorLoader>\\n`,children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoader\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" type\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"not-authenticated\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderTitle\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Uh-oh! You are not connected!</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderTitle\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderDescription\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    To create post you must be connected \\\\u26A1\\\\uFE0F\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderDescription\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderFooter\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Connect</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoaderFooter\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ErrorLoader\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"props\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.th,{children:\\"Name\\"}),(0,l.jsx)(e.th,{children:\\"Type\\"}),(0,l.jsx)(e.th,{children:\\"Description\\"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:\\"type\\"}),(0,l.jsx)(e.td,{children:(0,l.jsx)(e.code,{children:\\"no-apps\\"})}),(0,l.jsx)(e.td,{children:\\"No application found.\\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{}),(0,l.jsx)(e.td,{children:(0,l.jsx)(e.code,{children:\\"not-authenticated\\"})}),(0,l.jsx)(e.td,{children:\\"Not authenticated.\\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{}),(0,l.jsx)(e.td,{children:(0,l.jsx)(e.code,{children:\\"script-error\\"})}),(0,l.jsx)(e.td,{children:\\"Script error.\\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{}),(0,l.jsx)(e.td,{children:(0,l.jsx)(e.code,{children:\\"page-not-found\\"})}),(0,l.jsx)(e.td,{children:\\"404 (page not found).\\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{}),(0,l.jsx)(e.td,{children:(0,l.jsx)(e.code,{children:\\"list-not-available\\"})}),(0,l.jsx)(e.td,{children:\\"Data contains empty list.\\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:\\"publicImgPath\\"}),(0,l.jsx)(e.td,{children:(0,l.jsx)(e.code,{children:\\"string\\"})}),(0,l.jsx)(e.td,{children:\\"Path to public image folder.\\"})]})]})]})]})}function N(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(F,{...n})}):F(n)}function a(n,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return v(w);})();\\n;return Component;"},"_id":"docs/components/error-loader.mdx","_raw":{"sourceFilePath":"docs/components/error-loader.mdx","sourceFileName":"error-loader.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/error-loader"},"type":"Doc","slug":"/docs/components/error-loader","slugAsParams":"components/error-loader"},{"title":"Extension Avatar","description":"An extension avatar","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"extension-avatar-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-avatar.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install lucide-react\\n```\\n\\n<Step>Add the following images to your project</Step>\\n\\n1. https://akasha-ui.pages.dev/images/app-1.webp\\n2. https://akasha-ui.pages.dev/images/app-2.webp\\n3. https://akasha-ui.pages.dev/images/app-3.webp\\n4. https://akasha-ui.pages.dev/images/widget-1.webp\\n5. https://akasha-ui.pages.dev/images/widget-2.webp\\n6. https://akasha-ui.pages.dev/images/widget-3.webp\\n7. https://akasha-ui.pages.dev/images/plugin-1.webp\\n8. https://akasha-ui.pages.dev/images/plugin-2.webp\\n9. https://akasha-ui.pages.dev/images/plugin-3.webp\\n10. https://akasha-ui.pages.dev/images/other-1.webp\\n11. https://akasha-ui.pages.dev/images/other-2.webp\\n12. https://akasha-ui.pages.dev/images/other-3.webp\\n\\n<Step>Add the following type into your project.</Step>\\n\\n<ComponentSource name=\\"extension-type\\" />\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"extension-avatar\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  ExtensionAvatar,\\n  ExtensionAvatarFallback,\\n  ExtensionAvatarImage,\\n} from \\"<path-to-ui-component>/extension-avatar\\";\\n```\\n\\n```tsx\\n<ExtensionAvatar>\\n  <ExtensionAvatarImage\\n    src=\\"https://github.com/akashaorg.png\\"\\n    alt=\\"@akashaorg\\"\\n    showLoadingIndicator={true}\\n  >\\n    <ExtensionAvatarFallback />\\n  </ExtensionAvatarImage>\\n</ExtensionAvatar>\\n```\\n\\n## Props\\n\\n| Name          | Type                     | Description                  |\\n| ------------- | ------------------------ | ---------------------------- |\\n| extensionId   | `string`                 | Extension id.                |\\n| size          | `sm`, `md`, `lg` or `xl` | Component sizes.             |\\n| extensionType | `ExtensionType`          | Extension type.              |\\n| nsfw          | `boolean`                | Not safe for work.           |\\n| publicImgPath | `string`                 | Path to public image folder. |\\n","code":"var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var b=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),f=(l,n)=>{for(var a in n)o(l,a,{get:n[a],enumerable:!0})},E=(l,n,a,r)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let s of N(n))!B.call(l,s)&&s!==a&&o(l,s,{get:()=>n[s],enumerable:!(r=x(n,s))||r.enumerable});return l};var C=(l,n,a)=>(a=l!=null?u(v(l)):{},E(n||!l||!l.__esModule?o(a,\\"default\\",{value:l,enumerable:!0}):a,l)),k=l=>E(o({},\\"__esModule\\",{value:!0}),l);var F=b((I,y)=>{y.exports=_jsx_runtime});var w={};f(w,{default:()=>g,frontmatter:()=>_});var e=C(F()),_={title:\\"Extension Avatar\\",description:\\"An extension avatar\\",component:!0};function m(l){let n={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",li:\\"li\\",ol:\\"ol\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...l.components},{ComponentPreview:a,ComponentSource:r,Step:s,Steps:d,Tabs:p,TabsContent:i,TabsList:h,TabsTrigger:t}=n;return a||c(\\"ComponentPreview\\",!0),r||c(\\"ComponentSource\\",!0),s||c(\\"Step\\",!0),d||c(\\"Steps\\",!0),p||c(\\"Tabs\\",!0),i||c(\\"TabsContent\\",!0),h||c(\\"TabsList\\",!0),t||c(\\"TabsTrigger\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a,{name:\\"extension-avatar-demo\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport {\\n  ExtensionAvatar,\\n  ExtensionAvatarFallback,\\n  ExtensionAvatarImage,\\n} from \\"../ui/extension-avatar\\";\\n\\nexport function ExtensionCardDemo() {\\n  return (\\n    <ExtensionAvatar>\\n      <ExtensionAvatarImage\\n        src=\\"https://github.com/akashaorg.png\\"\\n        alt=\\"@akashaorg\\"\\n        showLoadingIndicator={true}\\n      >\\n        <ExtensionAvatarFallback />\\n      </ExtensionAvatarImage>\\n    </ExtensionAvatar>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/extension-avatar-demo.tsx\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionAvatar,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionAvatarImage,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"../ui/extension-avatar\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCardDemo\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatarImage\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        src\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        alt\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        showLoadingIndicator\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatarFallback\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatarImage\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"installation\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,e.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,e.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,e.jsx)(i,{value:\\"cli\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-avatar.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-avatar.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-avatar.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-avatar.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-avatar.json\\"\\n`,children:(0,e.jsx)(n.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/extension-avatar.json\\"\'})]})})})})}),(0,e.jsx)(i,{value:\\"manual\\",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(s,{children:\\"Install the following dependencies:\\"}),(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install lucide-react\\n`,__npmCommand__:`npm install lucide-react\\n`,__yarnCommand__:`yarn add lucide-react\\n`,__pnpmCommand__:`pnpm add lucide-react\\n`,__bunCommand__:`bun add lucide-react\\n`,children:(0,e.jsx)(n.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" lucide-react\\"})]})})})}),(0,e.jsx)(s,{children:\\"Add the following images to your project\\"}),(0,e.jsxs)(n.ol,{children:[`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/app-1.webp\\",children:\\"https://akasha-ui.pages.dev/images/app-1.webp\\"})}),`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/app-2.webp\\",children:\\"https://akasha-ui.pages.dev/images/app-2.webp\\"})}),`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/app-3.webp\\",children:\\"https://akasha-ui.pages.dev/images/app-3.webp\\"})}),`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/widget-1.webp\\",children:\\"https://akasha-ui.pages.dev/images/widget-1.webp\\"})}),`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/widget-2.webp\\",children:\\"https://akasha-ui.pages.dev/images/widget-2.webp\\"})}),`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/widget-3.webp\\",children:\\"https://akasha-ui.pages.dev/images/widget-3.webp\\"})}),`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/plugin-1.webp\\",children:\\"https://akasha-ui.pages.dev/images/plugin-1.webp\\"})}),`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/plugin-2.webp\\",children:\\"https://akasha-ui.pages.dev/images/plugin-2.webp\\"})}),`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/plugin-3.webp\\",children:\\"https://akasha-ui.pages.dev/images/plugin-3.webp\\"})}),`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/other-1.webp\\",children:\\"https://akasha-ui.pages.dev/images/other-1.webp\\"})}),`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/other-2.webp\\",children:\\"https://akasha-ui.pages.dev/images/other-2.webp\\"})}),`\\n`,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:\\"https://akasha-ui.pages.dev/images/other-3.webp\\",children:\\"https://akasha-ui.pages.dev/images/other

1-3.webp\\"})}),`\\n`]}),(0,e.jsx)(s,{children:\\"Add the following type into your project.\\"}),(0,e.jsx)(r,{name:\\"extension-type\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`export enum ExtensionType {\\n  App = \\"APP\\",\\n  Other = \\"OTHER\\",\\n  Plugin = \\"PLUGIN\\",\\n  Widget = \\"WIDGET\\",\\n}\\n`,__src__:\\"registry/default/types/extension-type.ts\\",__style__:\\"default\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" enum\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"  App\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"APP\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"  Other\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"OTHER\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"  Plugin\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"PLUGIN\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"  Widget\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"WIDGET\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),(0,e.jsx)(s,{children:\\"Copy and paste the following code into your project.\\"}),(0,e.jsx)(r,{name:\\"extension-avatar\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport { cva, type VariantProps } from \\"class-variance-authority\\";\\nimport { EyeOff } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { getImageFromSeed } from \\"@/components/lib/get-image-from-seed\\";\\nimport { ExtensionType } from \\"@/components/types/extension-type\\";\\nimport { Image, ImageFallback } from \\"@/components/ui/image\\";\\n\\nconst extensionVariants = cva(\\n  \\"flex justify-center items-center rounded-lg overflow-hidden shrink-0\\",\\n  {\\n    variants: {\\n      size: {\\n        xl: \\"size-28 [&_svg]:size-6\\",\\n        lg: \\"size-15 [&_svg]:size-4\\",\\n        md: \\"size-12 [&_svg]:size-4\\",\\n        sm: \\"size-10 [&_svg]:size-4\\",\\n      },\\n    },\\n    defaultVariants: {\\n      size: \\"lg\\",\\n    },\\n  }\\n);\\n\\nconst ExtensionAvatarContext = React.createContext<{\\n  extensionId: string;\\n  extensionType: ExtensionType;\\n  nsfw: boolean;\\n  publicImgPath: string;\\n} | null>(null);\\n\\nconst useExtensionAvatarContext = () => {\\n  const context = React.useContext(ExtensionAvatarContext);\\n  if (!context) {\\n    throw new Error(\\n      \\"\\\\`useExtensionAvatarContext\\\\` must be used within an \\\\`ExtensionAvatar\\\\` component\\"\\n    );\\n  }\\n  return context;\\n};\\n\\nconst ExtensionAvatar = ({\\n  extensionId = \\"\\",\\n  size = \\"lg\\",\\n  extensionType = ExtensionType.Widget,\\n  publicImgPath = \\"/images\\",\\n  nsfw = false,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"div\\"> &\\n  VariantProps<typeof extensionVariants> & {\\n    extensionId?: string;\\n    extensionType?: ExtensionType;\\n    nsfw?: boolean;\\n    publicImgPath?: string;\\n  }) =>

1 (\\n  <ExtensionAvatarContext.Provider\\n    value={{ extensionId, extensionType, nsfw, publicImgPath }}\\n  >\\n    <div\\n      data-slot=\\"extension-avatar\\"\\n      className={cn(extensionVariants({ size }), nsfw && \\"bg-muted\\", className)}\\n      {...props}\\n    />\\n  </ExtensionAvatarContext.Provider>\\n);\\n\\nconst ExtensionAvatarImage = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof Image>) => {\\n  const { nsfw } = useExtensionAvatarContext();\\n  return nsfw ? (\\n    <EyeOff strokeWidth={1} className={cn(\\"text-destructive\\", className)} />\\n  ) : (\\n    <Image\\n      data-slot=\\"extension-avatar-image\\"\\n      className={cn(className)}\\n      alt={props.alt}\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst ExtensionAvatarFallback = ({\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof ImageFallback>) => {\\n  const { extensionType, publicImgPath, extensionId, nsfw } =\\n    useExtensionAvatarContext();\\n  const seed = getImageFromSeed(extensionId, 3);\\n\\n  let avatarFallback: string;\\n\\n  switch (extensionType) {\\n    case ExtensionType.App:\\n      avatarFallback = \\\\`\\\\${publicImgPath}/app-\\\\${seed}.webp\\\\`;\\n      break;\\n    case ExtensionType.Widget:\\n      avatarFallback = \\\\`\\\\${publicImgPath}/widget-\\\\${seed}.webp\\\\`;\\n      break;\\n    case ExtensionType.Plugin:\\n      avatarFallback = \\\\`\\\\${publicImgPath}/plugin-\\\\${seed}.webp\\\\`;\\n      break;\\n    case ExtensionType.Other:\\n      avatarFallback = \\\\`\\\\${publicImgPath}/other-\\\\${seed}.webp\\\\`;\\n      break;\\n    default:\\n      avatarFallback = \\\\`\\\\${publicImgPath}/app-\\\\${seed}.webp\\\\`;\\n      break;\\n  }\\n\\n  return (\\n    !nsfw &&\\n    avatarFallback && (\\n      <ImageFallback data-slot=\\"extension-avatar-fallback\\" {...props}>\\n        {React.Children.count(children) ? (\\n          children\\n        ) : (\\n          <img\\n            data-slot=\\"image\\"\\n            loading=\\"lazy\\"\\n            decoding=\\"async\\"\\n            src={avatarFallback}\\n            alt=\\"fallback\\"\\n            className=\\"object-contain\\"\\n          />\\n        )}\\n      </ImageFallback>\\n    )\\n  );\\n};\\n\\nexport { ExtensionAvatar, ExtensionAvatarImage, ExtensionAvatarFallback };\\n`,__src__:\\"registry/default/ui/extension-avatar.tsx\\",__style__:\\"default\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cva, \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" VariantProps } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"class-variance-authority\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { EyeOff } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { getImageFromSeed } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/lib/get-image-from-seed\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { ExtensionType } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/types/extension-type\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Image, ImageFallback } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/image\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" extensionVariants\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" cva\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'  \\"flex justify-center items-center rounded-lg overflow-hidden shrink-0\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  {\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    variants: {\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      size: {\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        xl: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-28 [&_svg]:size-6\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        lg: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-15 [&_svg]:size-4\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        md: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-12 [&_svg]:size-4\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        sm: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-10 [&_svg]:size-4\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      },\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    defaultVariants: {\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      size: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"lg\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" ExtensionAvatarContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"createContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  extensionId\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  extensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  nsfw\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  publicImgPath\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"|\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" useExtensionAvatarContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" context\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(ExtensionAvatarContext);\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"context) {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"`useExtensionAvatarContext` must be used within an `ExtensionAvatar` component\\"\'})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" context;\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  extensionId \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  size \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lg\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  extensionType \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionType.Widget,\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  publicImgPath \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"/images\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  nsfw \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"l

1ine\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"  VariantProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" extensionVariants> \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"    extensionId\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"    extensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"    nsfw\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"    publicImgPath\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatarContext.Provider\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    value\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{ extensionId, extensionType, nsfw, publicImgPath }}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  >\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-avatar\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"extensionVariants\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ size }), nsfw \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"bg-muted\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatarContext.Provider\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionAvatarImage\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" Image>) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"nsfw\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" useExtensionAvatarContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" nsfw \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"EyeOff\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" strokeWidth\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"1\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-destructive\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)} />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Image\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-avatar-image\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(className)}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      alt\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{props.alt}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionAvatarFallback\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ImageFallback>) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"extensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"publicImgPath\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"extensionId\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"nsfw\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    useExtensionAvatarContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" seed\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" getImageFromSeed\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(extensionId, \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"3\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  let\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" avatarFallback\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  switch\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (extensionType) {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    case\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionType.App:\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      avatarFallback \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"publicImgPath\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}/app-${\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"seed\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}.webp`\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"      break\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    case\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionType.Widget:\\"})]}),`\\n`,(0,e.jsxs)(n.spa

1n,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      avatarFallback \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"publicImgPath\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}/widget-${\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"seed\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}.webp`\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"      break\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    case\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionType.Plugin:\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      avatarFallback \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"publicImgPath\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}/plugin-${\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"seed\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}.webp`\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"      break\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    case\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionType.Other:\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      avatarFallback \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"publicImgPath\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}/other-${\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"seed\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}.webp`\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"      break\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    default\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\":\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      avatarFallback \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"publicImgPath\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}/app-${\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"seed\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}.webp`\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"      break\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    !\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"nsfw \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    avatarFallback \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ImageFallback\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-avatar-fallback\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}>\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {React.Children.\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"count\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(children) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          children\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        ) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"img\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"            data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"image\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"            loading\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"lazy\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"            decoding\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"async\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"            src\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{avatarFallback}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"            alt\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"fallback\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"            className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"object-contain\\"\'})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          />\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ImageFallback\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    )\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { ExtensionAvatar, ExtensionAvatarImage, ExtensionAvatarFallback };\\"})]})]})})})}),(0,e.jsx)(s,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"usage\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ExtensionAvatar,\\n  ExtensionAvatarFallback,\\n  ExtensionAvatarImage,\\n} from \\"<path-to-ui-component>/extension-avatar\\";\\n`,children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionAvatar,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionAvatarImage,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-component>/extension-avatar\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<ExtensionAvatar>\\n  <ExtensionAvatarImage\\n    src=\\"https://github.com/akashaorg.png\\"\\n    alt=\\"@akashaorg\\"\\n    showLoadingIndicator={true}\\n  >\\n    <ExtensionAvatarFallback />\\n  </ExtensionAvatarImage>\\n</ExtensionAvatar>\\n`,children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatarImage\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    src\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    alt\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    showLoadingIndicator\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  >\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatarFallback\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatarImage\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"props\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:\\"Name\\"}),(0,e.jsx)(n.th,{children:\\"Type\\"}),(0,e.jsx)(n.th,{children:\\"Description\\"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\\"extensionId\\"}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:\\"string\\"})}),(0,e.jsx)(n.td,{children:\\"Extension id.\\"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\\"size\\"}),(0,e.jsxs)(n.td,{children:[(0,e.jsx)(n.code,{children:\\"sm\\"}),\\", \\",(0,e.jsx)(n.code,{children:\\"md\\"}),\\", \\",(0,e.jsx)(n.code,{children:\\"lg\\"}),\\" or \\",(0,e.jsx)(n.code,{children:\\"xl\\"})]}),(0,e.jsx)(n.td,{children:\\"Component sizes.\\"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\\"extensionType\\"}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:\\"ExtensionType\\"})}),(0,e.jsx)(n.td,{children:\\"Extension type.\\"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\\"nsfw\\"}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:\\"boolean\\"})}),(0,e.jsx)(n.td,{children:\\"Not safe for work.\\"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\\"publicImgPath\\"}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:\\"string\\"})}),(0,e.jsx)(n.td,{children:\\"Path to public image folder.\\"})]})]})]})]})}function g(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(m,{...l})}):m(l)}function c(l,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+l+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return k(w);})();\\n;return Component;"},"_id":"docs/components/extension-avatar.mdx","_raw":{"sourceFilePath":"docs/components/extension-avatar.mdx","sourceFileName":"extension-avatar.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/extension-avatar"},"type":"Doc","slug":"/docs/components/extension-avatar","slugAsParams":"components/extension-av

1atar"},{"title":"Extension Card","description":"A card containing basic information about an extension(an app, widget or plugin).","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"extension-card-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-card.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install lucide-react\\n```\\n\\n<Step>Add the following type into your project.</Step>\\n\\n<ComponentSource name=\\"extension-type\\" />\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"extension-card\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  ExtensionCard,\\n  ExtensionCardAction,\\n  ExtensionCardActionActive,\\n  ExtensionCardActionInactive,\\n  ExtensionCardAvatar,\\n  ExtensionCardAvatarFallback,\\n  ExtensionCardAvatarImage,\\n  ExtensionCardContent,\\n  ExtensionCardDescription,\\n  ExtensionCardName,\\n} from \\"<path-to-ui-component>/extension-card\\";\\n```\\n\\n```tsx\\n<ExtensionCard extensionId=\'\'>\\n  <ExtensionCardAvatar>\\n    <ExtensionCardAvatarImage>\\n      <ExtensionAvatarImage\\n        src=\\"https://github.com/akashaorg.png\\"\\n        alt=\\"@akashaorg\\"\\n        showLoadingIndicator={true}\\n      >\\n        <ExtensionCardAvatarFallback />\\n      </ExtensionCardAvatarImage>\\n    </ExtensionAvatar>\\n  </ExtensionCardAvatar>\\n  <ExtensionCardContent>\\n    <ExtensionCardName>Extensions</ExtensionCardName>\\n    <ExtensionCardDescription>Extension description</ExtensionCardDescription>\\n  </ExtensionCardContent>\\n  <ExtensionCardAction active={active}>\\n    <ExtensionCardActionInactive\\n      onClick={() => {\\n        setActive(true);\\n      }}\\n    >\\n      Add\\n    </ExtensionCardActionInactive>\\n    <ExtensionCardActionActive\\n      onClick={() => {\\n        setActive(false);\\n      }}\\n    >\\n      Added\\n    </ExtensionCardActionActive>\\n  </ExtensionCardAction>\\n</ExtensionCard>\\n```\\n\\n## Props\\n\\n| Name          | Type            | Description     |\\n| ------------- | --------------- | --------------- |\\n| extensionId   | `string`        | Extension id.   |\\n| extensionType | `ExtensionType` | Extension type. |\\n\\n`ExtensionCardAction`\\n\\n| Name   | Type      | Description                                     |\\n| ------ | --------- | ----------------------------------------------- |\\n| active | `boolean` | Indicates if a badge button is in active state. |\\n","code":"var Component=(()=>{var N=Object.create;var o=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var A=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),g=(l,n)=>{for(var s in n)o(l,s,{get:n[s],enumerable:!0})},h=(l,n,s,r)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let c of B(n))!u.call(l,c)&&c!==s&&o(l,c,{get:()=>n[c],enumerable:!(r=C(n,c))||r.enumerable});return l};var f=(l,n,s)=>(s=l!=null?N(v(l)):{},h(n||!l||!l.__esModule?o(s,\\"default\\",{value:l,enumerable:!0}):s,l)),_=l=>h(o({},\\"__esModule\\",{value:!0}),l);var F=A((T,y)=>{y.exports=_jsx_runtime});var I={};g(I,{default:()=>x,frontmatter:()=>b});var e=f(F()),b={title:\\"Extension Card\\",description:\\"A card containing basic information about an extension(an app, widget or plugin).\\",component:!0};function m(l){let n={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...l.components},{ComponentPreview:s,ComponentSource:r,Step:c,Steps:d,Tabs:p,TabsContent:i,TabsList:E,TabsTrigger:t}=n;return s||a(\\"ComponentPreview\\",!0),r||a(\\"ComponentSource\\",!0),c||a(\\"Step\\",!0),d||a(\\"Steps\\",!0),p||a(\\"Tabs\\",!0),i||a(\\"TabsContent\\",!0),E||a(\\"TabsList\\",!0),t||a(\\"TabsTrigger\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s,{name:\\"extension-card-demo\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport {\\n  ProfileAvatarButton,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n  ProfileDidField,\\n  ProfileName,\\n} from \\"@/components//ui/profile-avatar-button\\";\\nimport {\\n  ExtensionCard,\\n  ExtensionCardAction,\\n  ExtensionCardActionActive,\\n  ExtensionCardActionInactive,\\n  ExtensionCardAvatar,\\n  ExtensionCardAvatarFallback,\\n  ExtensionCardAvatarImage,\\n  ExtensionCardContent,\\n  ExtensionCardDescription,\\n  ExtensionCardName,\\n} from \\"@/components/ui/extension-card\\";\\n\\nexport function ExtensionCardDemo() {\\n  const [active, setActive] = React.useState(false);\\n  return (\\n    <ExtensionCard>\\n      <ExtensionCardAvatar>\\n        <ExtensionCardAvatarImage\\n          src=\\"https://github.com/akashaorg.png\\"\\n          alt=\\"@akashaorg\\"\\n          showLoadingIndicator={true}\\n        >\\n          <ExtensionCardAvatarFallback />\\n        </ExtensionCardAvatarImage>\\n      </ExtensionCardAvatar>\\n      <ExtensionCardContent>\\n        <ExtensionCardName>Extensions</ExtensionCardName>\\n        <ProfileAvatarButton\\n          size=\\"sm\\"\\n          profileDID=\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\\n        >\\n          <ProfileAvatarButtonAvatar>\\n            <ProfileAvatarButtonAvatarImage\\n              src=\\"https://github.com/akashaorg.png\\"\\n              alt=\\"@akashaorg\\"\\n            />\\n            <ProfileAvatarButtonAvatarFallback />\\n          </ProfileAvatarButtonAvatar>\\n          <ProfileName>CoffeeLover</ProfileName>\\n          <ProfileDidField />\\n        </ProfileAvatarButton>

1\\n        <ExtensionCardDescription>App for extensions.</ExtensionCardDescription>\\n      </ExtensionCardContent>\\n      <ExtensionCardAction active={active}>\\n        <ExtensionCardActionInactive\\n          onClick={() => {\\n            setActive(true);\\n          }}\\n        >\\n          Add\\n        </ExtensionCardActionInactive>\\n        <ExtensionCardActionActive\\n          onClick={() => {\\n            setActive(false);\\n          }}\\n        >\\n          Added\\n        </ExtensionCardActionActive>\\n      </ExtensionCardAction>\\n    </ExtensionCard>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/extension-card-demo.tsx\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatar,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarImage,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileName,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components//ui/profile-avatar-button\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCard,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAction,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardActionActive,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardActionInactive,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAvatar,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAvatarImage,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardContent,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardDescription,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardName,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/extension-card\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCardDemo\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"active\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"setActive\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCard\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAvatarImage\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          src\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          alt\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          showLoadingIndicator\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAvatarFallback\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAvatarImage\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardName\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Extensions</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardName\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          size\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sm\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          profileDID\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\'})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarImage\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"              src\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"              alt\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            />\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarFallback\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">CoffeeLover</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileDidField\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardDescription\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">App for extensions.</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardDescription\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAction\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" active\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{active}>\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardActionInactive\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          onClick\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"}

1,children:\\"            setActive\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }}\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          Add\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardActionInactive\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardActionActive\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          onClick\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"}

1,children:\\"            setActive\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }}\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          Added\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardActionActive\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAction\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCard\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"installation\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,e.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,e.jsxs)(E,{children:[(0,e.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,e.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,e.jsx)(i,{value:\\"cli\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-card.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-card.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-card.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-card.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-card.json\\"\\n`,children:(0,e.jsx)(n.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/extension-card.json\\"\'})]})})})})}),(0,e.jsx)(i,{value:\\"manual\\",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(c,{children:\\"Install the following dependencies:\\"}),(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install lucide-react\\n`,__npmCommand__:`npm install lucide-react\\n`,__yarnCommand__:`yarn add lucide-react\\n`,__pnpmCommand__:`pnpm add lucide-react\\n`,__bunCommand__:`bun add lucide-react\\n`,children:(0,e.jsx)(n.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" lucide-react\\"})]})})})}),(0,e.jsx)(c,{children:\\"Add the following type into your project.\\"}),(0,e.jsx)(r,{name:\\"extension-type\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`export enum ExtensionType {\\n  App = \\"APP\\",\\n  Other = \\"OTHER\\",\\n  Plugin = \\"PLUGIN\\",\\n  Widget = \\"WIDGET\\",\\n}\\n`,__src__:\\"registry/default/types/extension-type.ts\\",__style__:\\"default\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" enum\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"  App\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"APP\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"  Other\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"OTHER\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"  Plugin\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"PLUGIN\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"  Widget\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"WIDGET\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),(0,e.jsx)(c,{children:\\"Copy and paste the following code into your project.\\"}),(0,e.jsx)(r,{name:\\"extension-card\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { Check } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { ExtensionType } from \\"@/components/types/extension-type\\";\\nimport { Badge } from \\"@/components/ui/badge\\";\\nimport {\\n  ExtensionAvatar,\\n  ExtensionAvatarFallback,\\n  ExtensionAvatarImage,\\n} from \\"@/components/ui/extension-avatar\\";\\nimport { ExtensionTypeIcon } from \\"@/components/ui/extension-type-icon\\";\\nimport { Typography } from \\"@/components/ui/typography\\";\\n\\nconst ExtensionCardContext = React.createContext<{\\n  extensionId?: string;\\n  extensionType?: ExtensionType;\\n} | null>(null);\\n\\nconst useExtensionCardContext = () => {\\n  const context = React.useContext(ExtensionCardContext);\\n  if (!context) {\\n    throw new Error(\\n      \\"\\\\`useExtensionCardContext\\\\` must be used within \\\\`ExtensionCard\\\\`\\"\\n    );\\n  }\\n  return context;\\n};\\n\\nconst ExtensionCard = ({\\n  extensionId = \\"\\",\\n  extensionType = ExtensionType.App,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"div\\"> & {\\n  extensionId?: string;\\n  extensionType?: ExtensionType;\\n}) => {\\n  return (\\n    <ExtensionCardContext.Provider value={{ extensionId, extensionType }}>\\n      <div\\n        data-slot=\\"extension-card\\"\\n        className={cn(\\"grid grid-cols-[60px_auto_1fr] gap-2\\", className)}

1\\n        {...props}\\n      />\\n    </ExtensionCardContext.Provider>\\n  );\\n};\\n\\nconst ExtensionCardAvatar = (\\n  props: Omit<React.ComponentProps<typeof ExtensionAvatar>, \\"extensionType\\">\\n) => {\\n  const { extensionId, extensionType } = useExtensionCardContext();\\n\\n  return (\\n    <ExtensionAvatar\\n      data-slot=\\"extension-card-avatar\\"\\n      extensionId={extensionId}\\n      size=\\"lg\\"\\n      extensionType={extensionType}\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst ExtensionCardAvatarFallback = (\\n  props: React.ComponentProps<typeof ExtensionAvatarFallback>\\n) => <ExtensionAvatarFallback {...props} />;\\n\\nconst ExtensionCardAvatarImage = (\\n  props: React.ComponentProps<typeof ExtensionAvatarImage>\\n) => <ExtensionAvatarImage {...props} />;\\n\\nconst ExtensionCardContent = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"div\\">) => {\\n  return (\\n    <div\\n      data-slot=\\"extension-card-content\\"\\n      className={cn(\\"flex flex-col gap-1 min-w-0\\", className)}\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst ExtensionCardName = ({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<\\"div\\">) => {\\n  const { extensionType } = useExtensionCardContext();\\n  return (\\n    <div\\n      data-slot=\\"extension-card-name-wrapper\\"\\n      className={cn(\\"flex items-center gap-1\\", className)}\\n      {...props}\\n    >\\n      <Typography data-slot=\\"extension-card-name\\" variant=\\"sm\\" bold>\\n        {children}\\n      </Typography>\\n      <ExtensionTypeIcon extensionType={extensionType} />\\n    </div>\\n  );\\n};\\n\\nconst ExtensionCardDescription = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof Typography>) => {\\n  return (\\n    <Typography\\n      variant=\\"xs\\"\\n      data-slot=\\"extension-card-description\\"\\n      className={cn(\\n        \\"text-muted-foreground line-clamp-1 truncate block\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst ExtensionCardActionContext = React.createContext<{\\n  active?: boolean;\\n} | null>(null);\\n\\nconst useExtensionCardActionContext = () => {\\n  const context = React.useContext(ExtensionCardActionContext);\\n  if (!context) {\\n    throw new Error(\\n      \\"\\\\`useExtensionCardActionContext\\\\` must be used within \\\\`ExtensionCardAction\\\\`\\"\\n    );\\n  }\\n  return context;\\n};\\n\\nconst ExtensionCardAction = ({\\n  active,\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<\\"div\\"> & { active?: boolean }) => {\\n  return (\\n    <ExtensionCardActionContext.Provider value={{ active }}>\\n      <div\\n        data-slot=\\"extension-card-action\\"\\n        className={cn(\\"self-center text-end min-w-20 ml-5\\", className)}\\n        {...props}\\n      >\\n        {children}\\n      </div>\\n    </ExtensionCardActionContext.Provider>\\n  );\\n};\\n\\nconst ExtensionCardActionInactive = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof Badge>) => {\\n  const { active } = useExtensionCardActionContext();\\n  return (\\n    !active && (\\n      <Badge\\n        data-slot=\\"extension-card-action-inactive\\"\\n        variant=\\"outline\\"\\n        className={cn(\\"cursor-pointer rounded-full bg-transparent\\", className)}\\n        {...props}\\n      />\\n    )\\n  );\\n};\\n\\nconst ExtensionCardActionActive = ({\\n  children,\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof Badge>) => {\\n  const { active } = useExtensionCardActionContext();\\n  return (\\n    active && (\\n      <Badge\\n        data-slot=\\"extension-card-action-active\\"\\n        variant=\\"secondary\\"\\n        className={cn(\\n          \\"[&_svg]:size-4 cursor-pointer rounded-full bg-transparent\\",\\n          className\\n        )}\\n        {...props}\\n      >\\n        <Check />\\n        {children}\\n      </Badge>\\n    )\\n  );\\n};\\n\\nexport {\\n  ExtensionCard,\\n  ExtensionCardAvatar,\\n  ExtensionCardAvatarFallback,\\n  ExtensionCardAvatarImage,\\n  ExtensionCardContent,\\n  ExtensionCardName,\\n  ExtensionCardDescription,\\n  ExtensionCardAction,\\n  ExtensionCardActionInactive,\\n  ExtensionCardActionActive,\\n};\\n`,__src__:\\"registry/default/ui/extension-card.tsx\\",__style__:\\"default\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Check } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { ExtensionType } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/types/extension-type\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Badge } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/badge\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionAvatar,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionAvatarImage,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/extension-avatar\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { ExtensionTypeIcon } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/extension-type-icon\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" ExtensionCardContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"createContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  extensionId\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  extensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"|\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" useExtensionCardContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" context\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(ExtensionCardContext);\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"context) {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"`useExtensionCardContext` must be used within `ExtensionCard`\\"\'})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" context;\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCard\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  extensionId \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  extensionType \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionType.App,\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  extensionId\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  extensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardContext.Provider\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{colo

1r:\\"#E1E4E8\\"},children:\\"{{ extensionId, extensionType }}>\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-card\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"grid grid-cols-[60px_auto_1fr] gap-2\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      />\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardContext.Provider\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCardAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  props\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" Omit\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionAvatar>, \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extensionType\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"extensionId\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"extensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" useExtensionCardContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatar\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-card-avatar\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      extensionId\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{extensionId}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      size\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"lg\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      extensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{extensionType}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCardAvatarFallback\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  props\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionAvatarFallback>\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatarFallback\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props} />;\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCardAvatarImage\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  props\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionAvatarImage>\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatarImage\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props} />;\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCardContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-card-content\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-col gap-1 min-w-0\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCardName\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"extensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" useExtensionCardContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-card-name-wrapper\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})

1,(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex items-center gap-1\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-card-name\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sm\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" bold\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {children}\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionTypeIcon\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" extensionType\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{extensionType} />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCardDescription\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" Typography>) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      variant\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-card-description\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"text-muted-foreground line-clamp-1 truncate block\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" ExtensionCardActionContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"createContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  active\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"|\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" useExtensionCardActionContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" context\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(ExtensionCardActionContext);\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"context) {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"`useExtensionCardActionContext` must be used within `ExtensionCardAction`\\"\'})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" context;\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCardAction\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  active,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"active\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardActionContext.Provider\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{ active }}>\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-card-action\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"self-center text-end min-w-20 ml-5\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {children}\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardActionContext.Provider\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCardActionInactive\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F9758

13\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" Badge>) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"active\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" useExtensionCardActionContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    !\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"active \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-card-action-inactive\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        variant\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"cursor-pointer rounded-full bg-transparent\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      />\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    )\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionCardActionActive\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" Badge>) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"active\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" useExtensionCardActionContext\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    active \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-card-action-active\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        variant\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"secondary\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"[&_svg]:size-4 cursor-pointer rounded-full bg-transparent\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          className\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Check\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {children}\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    )\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCard,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAvatar,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAvatarImage,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardContent,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardName,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardDescription,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAction,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardActionInactive,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardActionActive,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})})]})})})}),(0,e.jsx)(c,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"usage\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ExtensionCard,\\n  ExtensionCardAction,\\n  ExtensionCardActionActive,\\n  ExtensionCardActionInactive,\\n  ExtensionCardAvatar,\\n  ExtensionCardAvatarFallback,\\n  ExtensionCardAvatarImage,\\n  ExtensionCardContent,\\n  ExtensionCardDescription,\\n  ExtensionCardName,\\n} from \\"<path-to-ui-component>/extension-card\\";\\n`,children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCard,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAction,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardActionActive,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardActionInactive,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAvatar,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardAvatarImage,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardContent,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardDescription,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ExtensionCardName,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-component>/extension-card\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<ExtensionCard extensionId=\'\'>\\n  <ExtensionCardAvatar>\\n    <ExtensionCardAvatarImage>\\n      <ExtensionAvatarImage\\n        src=\\"https://github.com/akashaorg.png\\"\\n        alt=\\"@akashaorg\\"\\n        showLoadingIndicator={true}\\n      >\\n        <ExtensionCardAvatarFallback />\\n      </ExtensionCardAvatarImage>\\n    </ExtensionAvatar>\\n  </ExtensionCardAvatar>\\n  <ExtensionCardContent>\\n    <ExtensionCardName>Extensions</ExtensionCardName>\\n    <ExtensionCardDescription>Extension description</ExtensionCardDescription>\\n  </ExtensionCardContent>\\n  <ExtensionCardAction active={active}>\\n    <ExtensionCardActionInactive\\n      onClick={() =>

1 {\\n        setActive(true);\\n      }}\\n    >\\n      Add\\n    </ExtensionCardActionInactive>\\n    <ExtensionCardActionActive\\n      onClick={() => {\\n        setActive(false);\\n      }}\\n    >\\n      Added\\n    </ExtensionCardActionActive>\\n  </ExtensionCardAction>\\n</ExtensionCard>\\n`,children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCard\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" extensionId\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"\'\'\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAvatarImage\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatarImage\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        src\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        alt\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        showLoadingIndicator\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAvatarFallback\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAvatarImage\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAvatar\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardName\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Extensions</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardName\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardDescription\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Extension description</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardDescription\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardContent\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAction\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" active\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{active}>\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardActionInactive\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      onClick\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"}

1,children:\\"        setActive\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Add\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardActionInactive\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardActionActive\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      onClick\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"}

1,children:\\"        setActive\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Added\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardActionActive\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCardAction\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionCard\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"props\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:\\"Name\\"}),(0,e.jsx)(n.th,{children:\\"Type\\"}),(0,e.jsx)(n.th,{children:\\"Description\\"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\\"extensionId\\"}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:\\"string\\"})}),(0,e.jsx)(n.td,{children:\\"Extension id.\\"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\\"extensionType\\"}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:\\"ExtensionType\\"})}),(0,e.jsx)(n.td,{children:\\"Extension type.\\"})]})]})]}),`\\n`,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.code,{children:\\"ExtensionCardAction\\"})}),`\\n`,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:\\"Name\\"}),(0,e.jsx)(n.th,{children:\\"Type\\"}),(0,e.jsx)(n.th,{children:\\"Description\\"})]})}),(0,e.jsx)(n.tbody,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\\"active\\"}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:\\"boolean\\"})}),(0,e.jsx)(n.td,{children:\\"Indicates if a badge button is in active state.\\"})]})})]})]})}function x(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(m,{...l})}):m(l)}function a(l,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+l+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return _(I);})();\\n;return Component;"},"_id":"docs/components/extension-card.mdx","_raw":{"sourceFilePath":"docs/components/extension-card.mdx","sourceFileName":"extension-card.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/extension-card"},"type":"Doc","slug":"/docs/components/extension-card","slugAsParams":"components/extension-card"},{"title":"Extension Type Icon","description":"Icon in a container that indicates an extension type.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"extension-type-icon-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-type-icon.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>

1\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install lucide-react\\n```\\n\\n<Step>Add the following type into your project.</Step>\\n\\n<ComponentSource name=\\"extension-type\\" />\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"extension-type-icon\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { ExtensionTypeIcon } from \\"<path-to-ui-component>/extension-type-icon\\";\\n```\\n\\n```tsx\\n<ExtensionTypeIcon />\\n```\\n\\n## Props\\n\\n| Name          | Type            | Description     |\\n| ------------- | --------------- | --------------- |\\n| extensionType | `ExtensionType` | Extension type. |\\n","code":"var Component=(()=>{var x=Object.create;var o=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var T=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),B=(l,e)=>{for(var s in e)o(l,s,{get:e[s],enumerable:!0})},y=(l,e,s,r)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let a of f(e))!N.call(l,a)&&a!==s&&o(l,a,{get:()=>e[a],enumerable:!(r=_(e,a))||r.enumerable});return l};var C=(l,e,s)=>(s=l!=null?x(g(l)):{},y(e||!l||!l.__esModule?o(s,\\"default\\",{value:l,enumerable:!0}):s,l)),b=l=>y(o({},\\"__esModule\\",{value:!0}),l);var m=T((P,E)=>{E.exports=_jsx_runtime});var I={};B(I,{default:()=>F,frontmatter:()=>v});var n=C(m()),v={title:\\"Extension Type Icon\\",description:\\"Icon in a container that indicates an extension type.\\",component:!0};function u(l){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...l.components},{ComponentPreview:s,ComponentSource:r,Step:a,Steps:d,Tabs:p,TabsContent:t,TabsList:h,TabsTrigger:i}=e;return s||c(\\"ComponentPreview\\",!0),r||c(\\"ComponentSource\\",!0),a||c(\\"Step\\",!0),d||c(\\"Steps\\",!0),p||c(\\"Tabs\\",!0),t||c(\\"TabsContent\\",!0),h||c(\\"TabsList\\",!0),i||c(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s,{name:\\"extension-type-icon-demo\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { ExtensionTypeIcon } from \\"@/components/ui/extension-type-icon\\";\\n\\nexport function ExtensionTypeIconDemo() {\\n  return <ExtensionTypeIcon />;\\n}\\n`,__src__:\\"registry/default/examples/extension-type-icon-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { ExtensionTypeIcon } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/extension-type-icon\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionTypeIconDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionTypeIcon\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"installation\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(t,{value:\\"cli\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-type-icon.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-type-icon.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-type-icon.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-type-icon.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/extension-type-icon.json\\"\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/extension-type-icon.json\\"\'})]})})})})}),(0,n.jsx)(t,{value:\\"manual\\",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(a,{children:\\"Install the following dependencies:\\"}),(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install lucide-react\\n`,__npmCommand__:`npm install lucide-react\\n`,__yarnCommand__:`yarn add lucide-react\\n`,__pnpmCommand__:`pnpm add lucide-react\\n`,__bunCommand__:`bun add lucide-react\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" lucide-react\\"})]})})})}),(0,n.jsx)(a,{children:\\"Add the following type into your project.\\"}),(0,n.jsx)(r,{name:\\"extension-type\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`export enum ExtensionType {\\n  App = \\"APP\\",\\n  Other = \\"OTHER\\",\\n  Plugin = \\"PLUGIN\\",\\n  Widget = \\"WIDGET\\",\\n}\\n`,__src__:\\"registry/default/types/extension-type.ts\\",__style__:\\"default\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" enum\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionType\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"  App\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"APP\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"  Other\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"OTHER\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"  Plugin\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"PLUGIN\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"  Widget\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"WIDGET\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),(0,n.jsx)(a,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(r,{name:\\"extension-type-icon\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { LayoutGrid, LayoutPanelLeft, Puzzle } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { ExtensionType } from \\"@/components/types/extension-type\\";\\n\\nconst Icon = ({ extensionType }: { extensionType: ExtensionType }) => {\\n  switch (extensionType) {\\n    case ExtensionType.App:\\n      return <LayoutGrid />;\\n    case ExtensionType.Plugin:\\n      return <Puzzle />;\\n    case ExtensionType.Widget:\\n      return <LayoutPanelLeft />;\\n    default:\\n      return <LayoutGrid />;\\n  }\\n};\\n\\nconst ExtensionTypeIcon = ({\\n  extensionType = ExtensionType.App,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"div\\"> & {\\n  extensionType?: ExtensionType;\\n}) => {\\n  return (\\n    <div\\n      data-slot=\\"extension-type-icon\\"\\n      className={cn(\\n        \\"flex items-center justify-center size-5 [&_svg]:size-3 text-secondary-foreground rounded-full bg-secondary\\",\\n        className\\n      )}\\n      {...props}\\n    >\\n      <Icon extensionType={extensionType} />\\n    </div>\\n  );\\n};\\n\\nexport { ExtensionTypeIcon };\\n`,__src__:\\"registry/default/ui/extension-type-icon.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { LayoutGrid, LayoutPanelLeft, Puzzle } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { ExtensionType } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/types/extension-type\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Icon\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({ \\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"extensionType\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"extensionType\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionType\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  switch\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (extensionType) {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    case\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionType.App:\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"      return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"LayoutGrid\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />;\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    case\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionType.Plugin:\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"      return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Puzzle\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />;\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    case\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionType.Widget:\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"      return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"LayoutPanelLeft\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />;\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    default\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\":\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"      return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"LayoutGrid\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionTypeIcon\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  extensionType \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ExtensionType.App,\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  extensionType\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ExtensionType\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"extension-type-icon\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"flex items-center justify-center size-5 [&_svg]:size-3 text-secondary-foreground rounded-full bg-secondary\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Icon\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},chil

1dren:\\" extensionType\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{extensionType} />\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { ExtensionTypeIcon };\\"})]})]})})})}),(0,n.jsx)(a,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"usage\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { ExtensionTypeIcon } from \\"<path-to-ui-component>/extension-type-icon\\";\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { ExtensionTypeIcon } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-component>/extension-type-icon\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<ExtensionTypeIcon />\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ExtensionTypeIcon\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]})})})}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"props\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:\\"Name\\"}),(0,n.jsx)(e.th,{children:\\"Type\\"}),(0,n.jsx)(e.th,{children:\\"Description\\"})]})}),(0,n.jsx)(e.tbody,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:\\"extensionType\\"}),(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:\\"ExtensionType\\"})}),(0,n.jsx)(e.td,{children:\\"Extension type.\\"})]})})]})]})}function F(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(u,{...l})}):u(l)}function c(l,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+l+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(I);})();\\n;return Component;"},"_id":"docs/components/extension-type-icon.mdx","_raw":{"sourceFilePath":"docs/components/extension-type-icon.mdx","sourceFileName":"extension-type-icon.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/extension-type-icon"},"type":"Doc","slug":"/docs/components/extension-type-icon","slugAsParams":"components/extension-type-icon"},{"title":"Feed CTA","description":"Displays a card with profile avatar, call to action label and action component.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"feed-cta-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/feed-cta.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"feed-cta\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { FeedCTA } from \\"<path-to-ui-components>/feed-cta\\";\\n```\\n\\n```tsx\\n<FeedCTA\\n  avatarSrc=\\"https://github.com/akashaorg.png\\"\\n  profileDID=\\"did:pkh:eip155:11155111:0x1a4b3c567890abcdeffedcba1234567890abcdef\\"\\n  cta=\\"From your mind to the world.\\"\\n>\\n  <Button size=\\"sm\\">Post Something</Button>\\n</FeedCTA>\\n```\\n","code":"var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),v=(n,e)=>{for(var s in e)o(n,s,{get:e[s],enumerable:!0})},E=(n,e,s,c)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let a of g(e))!C.call(n,a)&&a!==s&&o(n,a,{get:()=>e[a],enumerable:!(c=B(e,a))||c.enumerable});return n};var _=(n,e,s)=>(s=n!=null?u(N(n)):{},E(e||!n||!n.__esModule?o(s,\\"default\\",{value:n,enumerable:!0}):s,n)),x=n=>E(o({},\\"__esModule\\",{value:!0}),n);var F=b((T,y)=>{y.exports=_jsx_runtime});var k={};v(k,{default:()=>f,frontmatter:()=>A});var l=_(F()),A={title:\\"Feed CTA\\",description:\\"Displays a card with profile avatar, call to action label and action component.\\",component:!0};function m(n){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",pre:\\"pre\\",span:\\"span\\",...n.components},{ComponentPreview:s,ComponentSource:c,Step:a,Steps:d,Tabs:p,TabsContent:t,TabsList:h,TabsTrigger:i}=e;return s||r(\\"ComponentPreview\\",!0),c||r(\\"ComponentSource\\",!0),a||r(\\"Step\\",!0),d||r(\\"Steps\\",!0),p||r(\\"Tabs\\",!0),t||r(\\"TabsContent\\",!0),h||r(\\"TabsList\\",!0),i||r(\\"TabsTrigger\\",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s,{name:\\"feed-cta-demo\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\nimport { FeedCTA } from \\"@/components/ui/feed-cta\\";\\n\\nexport function FeedCTADemo() {\\n  return (\\n    <div className=\\"flex gap-4 flex-col w-full\\">\\n      <FeedCTA\\n        avatarSrc=\\"https://github.com/akashaorg.png\\"\\n        profileDID=\\"did:pkh:eip155:11155111:0x1a4b3c567890abcdeffedcba1234567890abcdef\\"\\n        cta=\\"From your mind to the world.\\"\\n      >\\n        <Button size=\\"sm\\">Post Something</Button>\\n      </FeedCTA>\\n    </div>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/feed-cta-demo.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { FeedCTA } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/feed-cta\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" FeedCTADemo\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex gap-4 flex-col w-full\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FeedCTA\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        avatarSrc\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        profileDID\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x1a4b3c567890abcdeffedcba1234567890abcdef\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        cta\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"From your mind to the world.\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sm\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Post Something</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FeedCTA\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"installation\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,l.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,l.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,l.jsx)(t,{value:\\"cli\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/feed-cta.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/feed-cta.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/feed-cta.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/feed-cta.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/feed-cta.json\\"\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/feed-cta.json\\"\'})]})})})})}),(0,l.jsx)(t,{value:\\"manual\\",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(a,{children:\\"Copy and paste the following code into your project.\\"}),(0,l.jsx)(c,{name:\\"feed-cta\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { Card } from \\"@/components/ui/card\\";\\nimport {\\n  ProfileAvatar,\\n  ProfileAvatarFallback,\\n  ProfileAvatarImage,\\n} from \\"@/components/ui/profile-avatar\\";\\nimport { Stack } from \\"@/components/ui/stack\\";\\nimport { Typography } from \\"@/components/ui/typography\\";\\n\\nconst FeedCTA = ({\\n  avatarSrc,\\n  profileDID,\\n  cta,\\n  className,\\n  children,\\n  ...props\\n}: {\\n  avatarSrc: string;\\n  profileDID: string;\\n  cta: string;\\n} & React.ComponentProps<\\"div\\">) => {\\n  return (\\n    <Card\\n      className={cn(\\"border-border bg-nested-card p-4\\", className)}\\n      {...props}\\n    >\\n      <Stack direction=\\"row\\" alignItems=\\"center\\" justifyContent=\\"between\\">\\n        <Stack direction=\\"row\\" alignItems=\\"center\\" spacing={2}>\\n          <ProfileAvatar profileDID={profileDID}>\\n            <ProfileAvatarImage src={avatarSrc} alt=\\"Profile avatar\\" />\\n            <ProfileAvatarFallback />\\n          </ProfileAvatar>\\n          <Typography variant=\\"xs\\" bold>\\n            {cta}\\n          </Typography>\\n        </Stack>\\n        {children}\\n      </Stack>\\n    </Card>\\n  );\\n};\\n\\nexport { FeedCTA };\\n`,__src__:\\"registry/default/ui/feed-cta.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Card } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/card\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatar,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarImage,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stack } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/stack\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" FeedCTA\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  avatarSrc,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  profileDID,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  cta,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  avatarSrc\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  profileDID\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  cta\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Card\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"border-border bg-nested-card p-4\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" direction\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"row\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" alignItems\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"center\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" justifyContent\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"between\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" direction\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"row\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" alignItems\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"center\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" spacing\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"2\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}>\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" profileDID\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{profileDID}>\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarImage\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" src\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{avatarSrc} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"alt\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Profile avatar\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarFallback\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" bold\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            {cta}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {children}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(

10,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Card\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { FeedCTA };\\"})]})]})})})}),(0,l.jsx)(a,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"usage\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { FeedCTA } from \\"<path-to-ui-components>/feed-cta\\";\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { FeedCTA } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/feed-cta\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<FeedCTA\\n  avatarSrc=\\"https://github.com/akashaorg.png\\"\\n  profileDID=\\"did:pkh:eip155:11155111:0x1a4b3c567890abcdeffedcba1234567890abcdef\\"\\n  cta=\\"From your mind to the world.\\"\\n>\\n  <Button size=\\"sm\\">Post Something</Button>\\n</FeedCTA>\\n`,children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FeedCTA\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"  avatarSrc\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"  profileDID\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x1a4b3c567890abcdeffedcba1234567890abcdef\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"  cta\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"From your mind to the world.\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sm\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Post Something</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"FeedCTA\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})})]})}function f(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(m,{...n})}):m(n)}function r(n,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return x(k);})();\\n;return Component;"},"_id":"docs/components/feed-cta.mdx","_raw":{"sourceFilePath":"docs/components/feed-cta.mdx","sourceFileName":"feed-cta.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/feed-cta"},"type":"Doc","slug":"/docs/components/feed-cta","slugAsParams":"components/feed-cta"},{"title":"Form","description":"Building forms with React Hook Form and Zod.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/form","type":"LinksProperties","_raw":{}},"featured":false,"component":false,"toc":true,"body":{"raw":"\\nA customized ShadCN Form component with modified `FormLabel` font size, an optional required field indicator, and an error icon integrated into the `FormMessage` sub-component.\\n\\n<ComponentPreview name=\\"input-form\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n<Steps>\\n\\n### Command\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/form.json\\"\\n```\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install @radix-ui/react-label lucide-react @radix-ui/react-slot react-hook-form @hookform/resolvers zod\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"form\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n","code":"var Component=(()=>{var N=Object.create;var a=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var b=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),g=(n,l)=>{for(var s in l)a(n,s,{get:l[s],enumerable:!0})},E=(n,l,s,c)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let r of f(l))!x.call(n,r)&&r!==s&&a(n,r,{get:()=>l[r],enumerable:!(c=B(l,r))||c.enumerable});return n};var I=(n,l,s)=>(s=n!=null?N(C(n)):{},E(l||!n||!n.__esModule?a(s,\\"default\\",{value:n,enumerable:!0}):s,n)),v=n=>E(a({},\\"__esModule\\",{value:!0}),n);var m=b((V,y)=>{y.exports=_jsx_runtime});var S={};g(S,{default:()=>u,frontmatter:()=>_});var e=I(m()),_={title:\\"Form\\",description:\\"Building forms with React Hook Form and Zod.\\",links:{doc:\\"https://ui.shadcn.com/docs/components/form\\"}};function F(n){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...n.components},{ComponentPreview:s,ComponentSource:c,Step:r,Steps:i,Tabs:p,TabsContent:t,TabsList:h,TabsTrigger:d}=l;return s||o(\\"ComponentPreview\\",!0),c||o(\\"ComponentSource\\",!0),r||o(\\"Step\\",!0),i||o(\\"Steps\\",!0),p||o(\\"Tabs\\",!0),t||o(\\"TabsContent\\",!0),h||o(\\"TabsList\\",!0),d||o(\\"TabsTrigger\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(l.p,{children:[\\"A customized ShadCN Form component with modified \\",(0,e.jsx)(l.code,{children:\\"FormLabel\\"}),\\" font size, an optional required field indicator, and an error icon integrated into the \\",(0,e.jsx)(l.code,{children:\\"FormMessage\\"}),\\" sub-component.\\"]}),`\\n`,(0,e.jsx)(s,{name:\\"input-form\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport { zodResolver } from \\"@hookform/resolvers/zod\\";\\nimport { useForm } from \\"react-hook-form\\";\\nimport { toast } from \\"sonner\\";\\nimport { z } from \\"zod\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\nimport {\\n  Form,\\n  FormControl,\\n  FormDescription,\\n  FormField,\\n  FormItem,\\n  FormLabel,\\n  FormMessage,\\n} from \\"@/components/ui/form\\";\\nimport { Input } from \\"@/components/ui/input\\";\\n\\nconst FormSchema = z.object({\\n  username: z.string().min(2, {\\n    message: \\"Username must be at least 2 characters.\\",\\n  }),\\n});\\n\\nexport function InputForm() {\\n  const form = useForm<z.infer<typeof FormSchema>>({\\n    resolver: zodResolver(FormSchema),\\n    defaultValues: {\\n      username: \\"\\",\\n    },\\n  });\\n\\n  function onSubmit(data: z.infer<typeof FormSchema>) {\\n    toast(\\"You submitted the following values:\\", {\\n      description: (\\n        <pre className=\\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\\">\\n          <code className=\\"text-white\\">{JSON.stringify(data, null, 2)}</code>\\n        </pre>\\n      ),\\n    });\\n  }\\n\\n  return (\\n    <Form {...form}>\\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\\"w-2/3 space-y-6\\">\\n        <FormField\\n          control={form.control}\\n          name=\\"username\\"\\n          render={({ field }) => (\\n            <FormItem>\\n              <FormLabel required>Username</FormLabel>\\n              <FormControl>\\n                <Input placeholder=\\"coffeelover\\" {...field} />\\n              </FormControl>\\n              <FormDescription>\\n                This is your public display name.\\n              </FormDescription>\\n              <FormMessage />\\n            </FormItem>\\n          )}\\n        />\\n        <Button type=\\"submit\\">Submit</Button>

1\\n      </form>\\n    </Form>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/input-form.tsx\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { zodResolver } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@hookform/resolvers/zod\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useForm } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react-hook-form\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { toast } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sonner\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { z } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"zod\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Form,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormControl,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormDescription,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormField,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormItem,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormLabel,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormMessage,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/form\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Input } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/input\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" FormSchema\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" z.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"object\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  username: z.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"().\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"min\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"2\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    message: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Username must be at least 2 characters.\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }),\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"});\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" InputForm\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" form\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useForm\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"z\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"infer\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" FormSchema>>({\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    resolver: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"zodResolver\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(FormSchema),\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    defaultValues: {\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      username: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  });\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" onSubmit\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"data\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" z\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"infer\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" FormSchema>) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    toast\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"You submitted the following values:\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      description\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"pre\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"code\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-white\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"JSON\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"stringify\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(data, \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"2\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")}</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"code\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"pre\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      ),\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    });\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Form\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"form}>\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"form\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" onSubmit\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{form.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"handleSubmit\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(onSubmit)} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-2/3 space-y-6\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormField\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          control\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{form.control}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          name\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"username\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          render\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{({ \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"field\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormLabel\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" required\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Username</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormLabel\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormControl\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Input\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" placeholder\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"coffeelover\\"

1\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"field} />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormControl\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormDescription\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                This is your public display name.\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormDescription\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormMessage\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          )}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" type\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"submit\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Submit</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"form\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Form\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"installation\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,e.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(d,{value:\\"cli\\",children:\\"CLI\\"}),(0,e.jsx)(d,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,e.jsx)(t,{value:\\"cli\\",children:(0,e.jsxs)(i,{children:[(0,e.jsxs)(l.h3,{id:\\"command\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#command\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Command\\"]}),(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/form.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/form.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/form.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/form.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/form.json\\"\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/form.json\\"\'})]})})})})]})}),(0,e.jsx)(t,{value:\\"manual\\",children:(0,e.jsxs)(i,{children:[(0,e.jsx)(r,{children:\\"Install the following dependencies:\\"}),(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install @radix-ui/react-label lucide-react @radix-ui/react-slot react-hook-form @hookform/resolvers zod\\n`,__npmCommand__:`npm install @radix-ui/react-label lucide-react @radix-ui/react-slot react-hook-form @hookform/resolvers zod\\n`,__yarnCommand__:`yarn add @radix-ui/react-label lucide-react @radix-ui/react-slot react-hook-form @hookform/resolvers zod\\n`,__pnpmCommand__:`pnpm add @radix-ui/react-label lucide-react @radix-ui/react-slot react-hook-form @hookform/resolvers zod\\n`,__bunCommand__:`bun add @radix-ui/react-label lucide-react @radix-ui/react-slot react-hook-form @hookform/resolvers zod\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" @radix-ui/react-label\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" lucide-react\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" @radix-ui/react-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" react-hook-form\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" @hookform/resolvers\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" zod\\"})]})})})}),(0,e.jsx)(r,{children:\\"Copy and paste the following code into your project.\\"}),(0,e.jsx)(c,{name:\\"form\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport * as LabelPrimitive from \\"@radix-ui/react-label\\";\\nimport { Slot } from \\"@radix-ui/react-slot\\";\\nimport { CircleX } from \\"lucide-react\\";\\nimport {\\n  Controller,\\n  ControllerProps,\\n  FieldPath,\\n  FieldValues,\\n  FormProvider,\\n  useFormContext,\\n  useFormState,\\n} from \\"react-hook-form\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { Label } from \\"@/components/ui/label\\";\\n\\nconst Form = FormProvider;\\n\\ntype FormFieldContextValue<\\n  TFieldValues extends FieldValues = FieldValues,\\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\\n> = {\\n  name: TName;\\n};\\n\\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\\n  {} as FormFieldContextValue\\n);\\n\\nconst FormField = <\\n  TFieldValues extends FieldValues = FieldValues,\\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\\n>({\\n  ...props\\n}: ControllerProps<TFieldValues, TName>) => {\\n  return (\\n    <FormFieldContext.Provider value={{ name: props.name }}>\\n      <Controller {...props} />\\n    </FormFieldContext.Provider>\\n  );\\n};\\n\\nconst useFormField = () => {\\n  const fieldContext = React.useContext(FormFieldContext);\\n  const itemContext = React.useContext(FormItemContext);\\n  const { getFieldState } = useFormContext();\\n  const formState = useFormState({ name: fieldContext.name });\\n  const fieldState = getFieldState(fieldContext.name, formState);\\n\\n  if (!fieldContext) {\\n    throw new Error(\\"useFormField should be used within <FormField>\\");\\n  }\\n\\n  const { id } = itemContext;\\n\\n  return {\\n    id,\\n    name: fieldContext.name,\\n    formItemId: \\\\`\\\\${id}-form-item\\\\`,\\n    formDescriptionId: \\\\`\\\\${id}-form-item-description\\\\`,\\n    formMessageId: \\\\`\\\\${id}-form-item-message\\\\`,\\n    ...fieldState,\\n  };\\n};\\n\\ntype FormItemContextValue = {\\n  id: string;\\n};\\n\\nconst FormItemContext = React.createContext<FormItemContextValue>(\\n  {} as FormItemContextValue\\n);\\n\\nfunction FormItem({ className, ...props }: React.ComponentProps<\\"div\\">) {\\n  const id = React.useId();\\n\\n  return (\\n    <FormItemContext.Provider value={{ id }}>\\n      <div\\n        data-slot=\\"form-item\\"\\n        className={cn(\\"grid gap-2\\", className)}

1\\n        {...props}\\n      />\\n    </FormItemContext.Provider>\\n  );\\n}\\n\\nfunction FormLabel({\\n  required = false,\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof LabelPrimitive.Root> & { required?: boolean }) {\\n  const { error, formItemId } = useFormField();\\n\\n  return (\\n    <Label\\n      data-slot=\\"form-label\\"\\n      data-error={!!error}\\n      data-required={!!required}\\n      className={cn(\\n        \\"data-[error=true]:text-destructive\\",\\n        \\"text-base\\",\\n        \\"after:content-[\'_*\'] after:text-destructive data-[required=false]:after:hidden\\",\\n        className\\n      )}\\n      htmlFor={formItemId}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\\n  const { error, formItemId, formDescriptionId, formMessageId } =\\n    useFormField();\\n\\n  return (\\n    <Slot\\n      data-slot=\\"form-control\\"\\n      id={formItemId}\\n      aria-describedby={\\n        !error\\n          ? \\\\`\\\\${formDescriptionId}\\\\`\\n          : \\\\`\\\\${formDescriptionId} \\\\${formMessageId}\\\\`\\n      }\\n      aria-invalid={!!error}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction FormDescription({ className, ...props }: React.ComponentProps<\\"p\\">) {\\n  const { formDescriptionId } = useFormField();\\n\\n  return (\\n    <p\\n      data-slot=\\"form-description\\"\\n      id={formDescriptionId}\\n      className={cn(\\"text-muted-foreground text-xs\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction FormMessage({ className, ...props }: React.ComponentProps<\\"p\\">) {\\n  const { error, formMessageId } = useFormField();\\n  const body = error ? String(error?.message) : props.children;\\n\\n  if (!body) {\\n    return null;\\n  }\\n\\n  return (\\n    <p\\n      data-slot=\\"form-message\\"\\n      id={formMessageId}\\n      className={cn(\\n        \\"flex items-center gap-1 text-destructive text-xs\\",\\n        className\\n      )}\\n      {...props}\\n    >\\n      <CircleX size={16} className=\\"text-destructive\\" />\\n      {body}\\n    </p>\\n  );\\n}\\n\\nexport {\\n  useFormField,\\n  Form,\\n  FormItem,\\n  FormLabel,\\n  FormControl,\\n  FormDescription,\\n  FormMessage,\\n  FormField,\\n};\\n`,__src__:\\"registry/default/ui/form.tsx\\",__style__:\\"default\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" LabelPrimitive \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-label\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Slot } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-slot\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CircleX } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Controller,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ControllerProps,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FieldPath,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FieldValues,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormProvider,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  useFormContext,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  useFormState,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react-hook-form\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Label } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/label\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" Form\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" FormProvider;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FormFieldContextValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  TFieldValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" extends\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FieldValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FieldValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  TName\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" extends\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FieldPath\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"TFieldValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FieldPath\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"TFieldValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">,\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  name\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TName\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" FormFieldContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"createContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"FormFieldContextValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  {} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FormFieldContextValue\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FormField\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  TFieldValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" extends\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FieldValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FieldValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  TName\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" extends\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FieldPath\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"TFieldValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FieldPath\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"TFieldValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">,\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">({\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" ControllerProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"TFieldValues\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"TName\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormFieldContext.Provider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{ name: props.name }}>\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Controller\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props} />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormFieldContext.Provider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useFormField\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" fieldContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(FormFieldContext);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(

10,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" itemContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(FormItemContext);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"getFieldState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useFormContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" formState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useFormState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ name: fieldContext.name });\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" fieldState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" getFieldState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(fieldContext.name, formState);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"fieldContext) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"useFormField should be used within <FormField>\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"id\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" itemContext;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    id,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    name: fieldContext.name,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    formItemId: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"`${\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"id\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}-form-item`\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    formDescriptionId: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"`${\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"id\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}-form-item-description`\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    formMessageId: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"`${\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"id\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}-form-item-message`\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"fieldState,\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FormItemContextValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  id\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" FormItemContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"createContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"FormItemContextValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  {} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FormItemContextValue\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FormItem\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" id\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useId\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormItemContext.Provider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{ id }}>\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"form-item\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"grid gap-2\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      />\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"FormItemContext.Provider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FormLabel\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  required\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" LabelPrimitive.Root> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"required\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"error\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"formItemId\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useFormField\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Label\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"form-label\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-error\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"error}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-required\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"required}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},chil

1dren:\\"      className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"data-[error=true]:text-destructive\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"text-base\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:`        \\"after:content-[\'_*\'] after:text-destructive data-[required=false]:after:hidden\\"`}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      htmlFor\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{formItemId}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FormControl\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Slot>) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"error\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"formItemId\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"formDescriptionId\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"formMessageId\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    useFormField\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Slot\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"form-control\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      id\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{formItemId}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      aria-describedby\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"        !\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"error\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          ?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"formDescriptionId\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}`\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          :\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"formDescriptionId\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"} ${\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"formMessageId\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}`\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      aria-invalid\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"error}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FormDescription\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"formDescriptionId\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useFormField\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"form-description\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      id\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{formDescriptionId}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-muted-foreground text-xs\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" FormMessage\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"error\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"formMessageId\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useFormField\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" body\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" error \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" String\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(error?.message) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" props.children;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"body) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"form-message\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      id\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{formMessageId}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l

1.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"flex items-center gap-1 text-destructive text-xs\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleX\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-destructive\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {body}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  useFormField,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Form,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormItem,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormLabel,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormControl,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormDescription,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormMessage,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  FormField,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})})]})})})}),(0,e.jsx)(r,{children:\\"Update the import paths to match your project setup.\\"})]})})]})]})}function u(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(F,{...n})}):F(n)}function o(n,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return v(S);})();\\n;return Component;"},"_id":"docs/components/form.mdx","_raw":{"sourceFilePath":"docs/components/form.mdx","sourceFileName":"form.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/form"},"type":"Doc","slug":"/docs/components/form","slugAsParams":"components/form"},{"title":"Icon Container","description":"A customizable container of icons.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"icon-container-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n\\n<TabsContent value=\\"cli\\">\\n\\n<Step>Run the following command to install `button.tsx`</Step>\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/icon-container.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"icon-container\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { IconContainer } from \\"<path-to-ui-components>/icon-container\\";\\n```\\n\\n```tsx\\n<IconContainer>\\n  <Icon className=\\"w-full h-full p-2\\" />\\n</IconContainer>\\n```\\n\\n## Props\\n\\n| Name                | Type                           | Description                                      |\\n| ------------------- | ------------------------------ | ------------------------------------------------ |\\n| variant             | `round` or `square`            | Component variants.                              |\\n| size                | `xs`, `sm`, `md`, `lg` or `xl` | Component sizes.                                 |\\n| showNotificationDot | `boolean`                      | Marks if a notification dot should be displayed. |\\n\\n<Callout>\\n\\nThe **default** value of `variant` is `round` and that of `size` is `md`.\\n\\n</Callout>\\n\\n## Examples\\n\\n### Round\\n\\n<ComponentPreview name=\\"icon-container-round\\" />\\n\\n### Square\\n\\n<ComponentPreview name=\\"icon-container-square\\" />\\n\\n### Show notification dot\\n\\n<ComponentPreview name=\\"icon-container-notification-dot\\" />\\n","code":"var Component=(()=>{var f=Object.create;var i=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var v=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),x=(l,n)=>{for(var s in n)i(l,s,{get:n[s],enumerable:!0})},y=(l,n,s,c)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let r of g(n))!B.call(l,r)&&r!==s&&i(l,r,{get:()=>n[r],enumerable:!(c=C(n,r))||c.enumerable});return l};var I=(l,n,s)=>(s=l!=null?f(_(l)):{},y(n||!l||!l.__esModule?i(s,\\"default\\",{value:l,enumerable:!0}):s,l)),b=l=>y(i({},\\"__esModule\\",{value:!0}),l);var F=v((D,m)=>{m.exports=_jsx_runtime});var w={};x(w,{default:()=>N,frontmatter:()=>z});var e=I(F()),z={title:\\"Icon Container\\",description:\\"A customizable container of icons.\\",component:!0};function u(l){let n={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",strong:\\"strong\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...l.components},{Callout:s,ComponentPreview:c,ComponentSource:r,Step:o,Steps:h,Tabs:p,TabsContent:t,TabsList:E,TabsTrigger:d}=n;return s||a(\\"Callout\\",!0),c||a(\\"ComponentPreview\\",!0),r||a(\\"ComponentSource\\",!0),o||a(\\"Step\\",!0),h||a(\\"Steps\\",!0),p||a(\\"Tabs\\",!0),t||a(\\"TabsContent\\",!0),E||a(\\"TabsList\\",!0),d||a(\\"TabsTrigger\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(c,{name:\\"icon-container-demo\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import React from \\"react\\";\\nimport { Heart } from \\"lucide-react\\";\\n\\nimport { IconContainer } from \\"@/components/ui/icon-container\\";\\n\\nconst IconContainerDemo = () => {\\n  return (\\n    <IconContainer>\\n      <Heart />\\n    </IconContainer>\\n  );\\n};\\n\\nexport IconContainerDemo;\\n`,__src__:\\"registry/default/examples/icon-container-demo.tsx\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Heart } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { IconContainer } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/icon-container\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" IconContainerDemo\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Heart\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" IconContainerDemo;\\"})]})]})})})}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"installation\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,e.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,e.jsxs)(E,{children:[(0,e.jsx)(d,{value:\\"cli\\",children:\\"CLI\\"}),(0,e.jsx)(d,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,e.jsxs)(t,{value:\\"cli\\",children:[(0,e.jsxs)(o,{children:[\\"Run the following command to install \\",(0,e.jsx)(n.code,{children:\\"button.tsx\\"})]}),(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/icon-container.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/icon-container.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/icon-container.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/icon-container.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/icon-container.json\\"\\n`,children:(0,e.jsx)(n.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/icon-container.json\\"\'})]})})})})]}),(0,e.jsx)(t,{value:\\"manual\\",children:(0,e.jsxs)(h,{children:[(0,e.jsx)(o,{children:\\"Copy and paste the following code into your project.\\"}),(0,e.jsx)(r,{name:\\"icon-container\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { cva, VariantProps } from \\"class-variance-authority\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nconst iconContainerStyles = cva(\\n  \\"flex items-center justify-center relative bg-muted\\",\\n  {\\n    variants: {\\n      variant: {\\n        square: \\"rounded-lg\\",\\n        round: \\"rounded-full\\",\\n      },\\n      size: {\\n        xl: \\"size-28 [&_svg]:size-10\\",\\n        lg: \\"size-12 [&_svg]:size-6\\",\\n        md: \\"size-10 [&_svg]:size-5\\",\\n        sm: \\"size-8 [&_svg]:size-4\\",\\n        xs: \\"size-4 [&_svg]:size-4\\",\\n      },\\n    },\\n    compoundVariants: [\\n      {\\n        variant: \\"square\\",\\n        size: \\"xs\\",\\n        class: \\"rounded-sm\\",\\n      },\\n    ],\\n    defaultVariants: {\\n      variant: \\"round\\",\\n      size: \\"md\\",\\n    },\\n  }\\n);\\n\\nconst IconContainer = ({\\n  variant,\\n  size,\\n  className,\\n  showNotificationDot = false,\\n  children,\\n  ...props\\n}: React.ComponentProps<\\"div\\"> &\\n  VariantProps<typeof iconContainerStyles> & {\\n    showNotificationDot?: boolean; // If true, show the notification dot\\n  }) => {\\n  return (\\n    <div\\n      data-slot=\\"icon-container\\"\\n      className={iconContainerStyles({ variant, size, className })}\\n      {...props}\\n    >\\n      {children}\\n      {showNotificationDot && (\\n        <div\\n          className={cn(\\n            \\"absolute rounded-full w-3 h-3 bg-orange-500 top-0 right-0\\",\\n            variant === \\"square\\" && \\"-right-1\\"\\n          )}\\n        />\\n      )}\\n    </div>\\n  );\\n};\\n\\nexport { IconContainer };\\n`,__src__:\\"registry/default/ui/icon-container.tsx\\",__style__:\\"default\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cva, VariantProps } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"}

1,children:\' \\"class-variance-authority\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" iconContainerStyles\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" cva\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'  \\"flex items-center justify-center relative bg-muted\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  {\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    variants: {\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      variant: {\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        square: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"rounded-lg\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        round: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"rounded-full\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      },\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      size: {\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        xl: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-28 [&_svg]:size-10\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        lg: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-12 [&_svg]:size-6\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        md: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-10 [&_svg]:size-5\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        sm: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-8 [&_svg]:size-4\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        xs: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-4 [&_svg]:size-4\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      },\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    compoundVariants: [\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        variant: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"square\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        size: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        class: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"rounded-sm\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      },\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    ],\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    defaultVariants: {\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      variant: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      size: \\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"md\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" IconContainer\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  variant,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  size,\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  showNotificationDot \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"  VariantProps\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" iconContainerStyles> \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"    showNotificationDot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"; \\"}),(0,e.jsx)(n.span,{style:{color:\\"#6A737D\\"},children:\\"// If true, show the notification dot\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }) \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"icon-container\\"\'})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"iconContainerStyles\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ variant, size, className })}\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {children}\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {showNotificationDot \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"absolute rounded-full w-3 h-3 bg-orange-500 top-0 right-0\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            variant \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"square\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"-right-1\\"\'})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          )}\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { IconContainer };\\"})]})]})})})}),(0,e.jsx)(o,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"usage\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { IconContainer } from \\"<path-to-ui-components>/icon-container\\";\\n`,children:(0,e.jsx)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { IconContainer } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/icon-container\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<IconContainer>\\n  <Icon className=\\"w-full h-full p-2\\" />\\n</IconContainer>\\n`,children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Icon\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" clas

1sName\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-full h-full p-2\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"props\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:\\"Name\\"}),(0,e.jsx)(n.th,{children:\\"Type\\"}),(0,e.jsx)(n.th,{children:\\"Description\\"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\\"variant\\"}),(0,e.jsxs)(n.td,{children:[(0,e.jsx)(n.code,{children:\\"round\\"}),\\" or \\",(0,e.jsx)(n.code,{children:\\"square\\"})]}),(0,e.jsx)(n.td,{children:\\"Component variants.\\"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\\"size\\"}),(0,e.jsxs)(n.td,{children:[(0,e.jsx)(n.code,{children:\\"xs\\"}),\\", \\",(0,e.jsx)(n.code,{children:\\"sm\\"}),\\", \\",(0,e.jsx)(n.code,{children:\\"md\\"}),\\", \\",(0,e.jsx)(n.code,{children:\\"lg\\"}),\\" or \\",(0,e.jsx)(n.code,{children:\\"xl\\"})]}),(0,e.jsx)(n.td,{children:\\"Component sizes.\\"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:\\"showNotificationDot\\"}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:\\"boolean\\"})}),(0,e.jsx)(n.td,{children:\\"Marks if a notification dot should be displayed.\\"})]})]})]}),`\\n`,(0,e.jsx)(s,{children:(0,e.jsxs)(n.p,{children:[\\"The \\",(0,e.jsx)(n.strong,{children:\\"default\\"}),\\" value of \\",(0,e.jsx)(n.code,{children:\\"variant\\"}),\\" is \\",(0,e.jsx)(n.code,{children:\\"round\\"}),\\" and that of \\",(0,e.jsx)(n.code,{children:\\"size\\"}),\\" is \\",(0,e.jsx)(n.code,{children:\\"md\\"}),\\".\\"]})}),`\\n`,(0,e.jsxs)(n.h2,{id:\\"examples\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,e.jsxs)(n.h3,{id:\\"round\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#round\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Round\\"]}),`\\n`,(0,e.jsx)(c,{name:\\"icon-container-round\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import React from \\"react\\";\\nimport { Heart } from \\"lucide-react\\";\\n\\nimport { IconContainer } from \\"@/components/ui/icon-container\\";\\n\\nconst IconContainerNotificationRound = () => {\\n  return (\\n    <IconContainer variant=\\"round\\" size=\\"xl\\">\\n      <Heart />\\n    </IconContainer>\\n  );\\n};\\n\\nexport IconContainerNotificationRound;\\n`,__src__:\\"registry/default/examples/icon-container-round.tsx\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Heart } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { IconContainer } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/icon-container\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" IconContainerNotificationRound\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xl\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Heart\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" IconContainerNotificationRound;\\"})]})]})})})}),`\\n`,(0,e.jsxs)(n.h3,{id:\\"square\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#square\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Square\\"]}),`\\n`,(0,e.jsx)(c,{name:\\"icon-container-square\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import React from \\"react\\";\\nimport { Heart } from \\"lucide-react\\";\\n\\nimport { IconContainer } from \\"@/components/ui/icon-container\\";\\n\\nconst IconContainerNotificationSquare = () => {\\n  return (\\n    <IconContainer variant=\\"square\\" size=\\"xl\\">\\n      <Heart />\\n    </IconContainer>\\n  );\\n};\\n\\nexport IconContainerNotificationSquare;\\n`,__src__:\\"registry/default/examples/icon-container-square.tsx\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Heart } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { IconContainer } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/icon-container\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" IconContainerNotificationSquare\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"square\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xl\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Heart\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" IconContainerNotificationSquare;\\"})]})]})})})}),`\\n`,(0,e.jsxs)(n.h3,{id:\\"show-notification-dot\\",children:[(0,e.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#show-notification-dot\\",children:(0,e.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Show notification dot\\"]}),`\\n`,(0,e.jsx)(c,{name:\\"icon-container-notification-dot\\",children:(0,e.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import React from \\"react\\";\\nimport { Heart } from \\"lucide-react\\";\\n\\nimport { IconContainer } from \\"@/components/ui/icon-container\\";\\n\\nconst IconContainerNotificationDot = () => {\\n  return (\\n    <IconContainer showNotificationDot={true}>\\n      <Heart />\\n    </IconContainer>\\n  );\\n};\\n\\nexport IconContainerNotificationDot;\\n`,__src__:\\"registry/default/examples/icon-container-notification-dot.tsx\\",children:(0,e.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Heart } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { IconContainer } \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/icon-container\\"\'}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" IconContainerNotificationDot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,e.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" showNotificationDot\\"}),(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}>\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Heart\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)

1(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(n.span,{className:\\"line\\",children:[(0,e.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" IconContainerNotificationDot;\\"})]})]})})})})]})}function N(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(u,{...l})}):u(l)}function a(l,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+l+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(w);})();\\n;return Component;"},"_id":"docs/components/icon-container.mdx","_raw":{"sourceFilePath":"docs/components/icon-container.mdx","sourceFileName":"icon-container.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/icon-container"},"type":"Doc","slug":"/docs/components/icon-container","slugAsParams":"components/icon-container"},{"title":"Image","description":"An image component.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"image-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/image.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install lucide-react\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"image\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { Image } from \\"<path-to-ui-components>/image\\";\\n```\\n\\n```tsx\\n<Image\\n  showLoadingIndicator={true}\\n  src=\\"https://picsum.photos/200/300\\"\\n  alt=\\"Example\\"\\n  width={256}\\n  height={256}\\n>\\n  <ImageFallback>\\n    <div className=\\"w-full p-2 h-full flex items-center justify-center bg-gray-200 text-gray-500\\">\\n      Failed to load image\\n    </div>\\n  </ImageFallback>\\n</Image>\\n```\\n\\n## Props\\n\\n| Name                 | Type      | Description                                          |\\n| -------------------- | --------- | ---------------------------------------------------- |\\n| showLoadingIndicator | `boolean` | Checks if the loading indicator should be displayed. |\\n","code":"var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var C=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),x=(n,l)=>{for(var s in l)o(n,s,{get:l[s],enumerable:!0})},E=(n,l,s,r)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let c of B(l))!_.call(n,c)&&c!==s&&o(n,c,{get:()=>l[c],enumerable:!(r=N(l,c))||r.enumerable});return n};var b=(n,l,s)=>(s=n!=null?g(f(n)):{},E(l||!n||!n.__esModule?o(s,\\"default\\",{value:n,enumerable:!0}):s,n)),I=n=>E(o({},\\"__esModule\\",{value:!0}),n);var m=C((k,y)=>{y.exports=_jsx_runtime});var w={};x(w,{default:()=>u,frontmatter:()=>v});var e=b(m()),v={title:\\"Image\\",description:\\"An image component.\\",component:!0};function F(n){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...n.components},{ComponentPreview:s,ComponentSource:r,Step:c,Steps:d,Tabs:h,TabsContent:i,TabsList:p,TabsTrigger:t}=l;return s||a(\\"ComponentPreview\\",!0),r||a(\\"ComponentSource\\",!0),c||a(\\"Step\\",!0),d||a(\\"Steps\\",!0),h||a(\\"Tabs\\",!0),i||a(\\"TabsContent\\",!0),p||a(\\"TabsList\\",!0),t||a(\\"TabsTrigger\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s,{name:\\"image-demo\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Image, ImageFallback } from \\"@/components/ui/image\\";\\n\\nexport function ImageDemo() {\\n  return (\\n    <Image\\n      showLoadingIndicator={true}\\n      src=\\"https://picsum.photos/200/300\\"\\n      alt=\\"Example\\"\\n      width={256}\\n      height={256}\\n    >\\n      <ImageFallback>Failed to load image</ImageFallback>\\n    </Image>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/image-demo.tsx\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Image, ImageFallback } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/image\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" ImageDemo\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Image\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      showLoadingIndicator\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      src\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://picsum.photos/200/300\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      alt\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Example\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      width\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"256\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      height\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"256\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ImageFallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Failed to load image</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ImageFallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Image\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"installation\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,e.jsxs)(h,{defaultValue:\\"cli\\",children:[(0,e.jsxs)(p,{children:[(0,e.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,e.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,e.jsx)(i,{value:\\"cli\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/image.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/image.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/image.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/image.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/image.json\\"\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/image.json\\"\'})]})})})})}),(0,e.jsx)(i,{value:\\"manual\\",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(c,{children:\\"Install the following dependencies:\\"}),(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install lucide-react\\n`,__npmCommand__:`npm install lucide-react\\n`,__yarnCommand__:`yarn add lucide-react\\n`,__pnpmCommand__:`pnpm add lucide-react\\n`,__bunCommand__:`bun add lucide-react\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" lucide-react\\"})]})})})}),(0,e.jsx)(c,{children:\\"Copy and paste the following code into your project.\\"}),(0,e.jsx)(r,{name:\\"image\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport { Loader2 } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nconst ImageContext = React.createContext<{\\n  error: boolean;\\n} | null>(null);\\n\\nconst useImageContext = () => {\\n  const context = React.useContext(ImageContext);\\n  if (!context) {\\n    throw new Error(\\n      \\"\\\\`useImageContext\\\\` must be used within an \\\\`Image\\\\` component\\"\\n    );\\n  }\\n  return context;\\n};\\n\\nconst ImageFallback = ({ children }: React.ComponentProps<\\"span\\">) => {\\n  const { error } = useImageContext();\\n  return error && <span data-slot=\\"image-fallback\\">{children}</span>;\\n};\\n\\nconst DelayLoad = ({\\n  children,\\n  loadAfter = 300,\\n}: {\\n  children: React.ReactNode;\\n  loadAfter?: number;\\n}) => {\\n  const [show, setShow] = React.useState(false);\\n\\n  React.useEffect(() => {\\n    const timer = setTimeout(() => setShow(true), loadAfter);\\n    return () => clearTimeout(timer);\\n  }, [loadAfter]);\\n\\n  return show ? <>{children}</> : null;\\n};\\n\\nconst Image = ({\\n  src,\\n  alt,\\n  showLoadingIndicator,\\n  className,\\n  children,\\n  onLoad,\\n  onError,\\n  ...props\\n}: React.ComponentProps<\\"img\\"> & {\\n  showLoadingIndicator?: boolean;\\n}) => {\\n  const [loading, setLoading] = React.useState(true);\\n  const [error, setError] = React.useState(false);\\n\\n  React.useEffect(() => {\\n    setLoading(true);\\n  }, [setLoading]);\\n\\n  React.useEffect(() => {\\n    if (!src) {\\n      setError(true);\\n      setLoading(false);\\n    }\\n  }, [src]);\\n\\n  return (\\n    <ImageContext.Provider value={{ error }}>\\n      <div data-slot=\\"image-container\\" className=\\"relative\\">\\n        {showLoadingIndicator && loading && (\\n          <DelayLoad>\\n            <div className=\\"absolute inset-0 flex items-center justify-center\\">\\n              <Loader2 className=\\"h-6 w-6 animate-spin text-muted\\" />\\n            </div>\\n          </DelayLoad>\\n        )}\\n        {!error && (\\n          <img\\n            data-slot=\\"image\\"\\n            src={src}\\n            alt={alt}\\n            loading=\\"lazy\\"\\n            decoding=\\"async\\"\\n            onLoad={(event) =>

1 {\\n              setLoading(false);\\n              onLoad?.(event);\\n            }}\\n            onError={(event) => {\\n              setError(true);\\n              setLoading(false);\\n              onError?.(event);\\n            }}\\n            className={cn(\\"object-contain\\", className)}\\n            {...props}\\n          />\\n        )}\\n        {children}\\n      </div>\\n    </ImageContext.Provider>\\n  );\\n};\\n\\nexport { Image, ImageFallback };\\n`,__src__:\\"registry/default/ui/image.tsx\\",__style__:\\"default\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Loader2 } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" ImageContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"createContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  error\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"|\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useImageContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" context\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(ImageContext);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"context) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"`useImageContext` must be used within an `Image` component\\"\'})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" context;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" ImageFallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({ \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"children\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"span\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"error\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useImageContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" error \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"span\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"image-fallback\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">{children}</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"span\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" DelayLoad\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  loadAfter \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 300\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  children\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ReactNode\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  loadAfter\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"show\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setShow\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useEffect\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" timer\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setTimeout\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setShow\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"), loadAfter);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" clearTimeout\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(timer);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [loadAfter]);\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" show \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <>{children}</> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Image\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  src,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  alt,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  showLoadingIndicator,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  onLoad,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  onError,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECB

1FF\\"},children:\'\\"img\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  showLoadingIndicator\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"loading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setLoading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"error\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setError\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useEffect\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setLoading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [setLoading]);\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useEffect\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"src) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      setError\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"}

1,children:\\"      setLoading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [src]);\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ImageContext.Provider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{ error }}>\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"image-container\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"relative\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {showLoadingIndicator \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" loading \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DelayLoad\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"absolute inset-0 flex items-center justify-center\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Loader2\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h-6 w-6 animate-spin text-muted\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"DelayLoad\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"error \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"img\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"image\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            src\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{src}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            alt\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{alt}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            loading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"lazy\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            decoding\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"async\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            onLoad\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"event\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"}

1,children:\\"              setLoading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"              onLoad\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(event);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            }}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            onError\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"event\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"              setError\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"              setLoading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"              onError\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(event);\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            }}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"object-contain\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          />\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {children}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ImageContext.Provider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Image, ImageFallback };\\"})]})]})})})}),(0,e.jsx)(c,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"usage\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Image } from \\"<path-to-ui-components>/image\\";\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Image } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/image\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<Image\\n  showLoadingIndicator={true}\\n  src=\\"https://picsum.photos/200/300\\"\\n  alt=\\"Example\\"\\n  width={256}\\n  height={256}\\n>

1\\n  <ImageFallback>\\n    <div className=\\"w-full p-2 h-full flex items-center justify-center bg-gray-200 text-gray-500\\">\\n      Failed to load image\\n    </div>\\n  </ImageFallback>\\n</Image>\\n`,children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Image\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  showLoadingIndicator\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  src\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://picsum.photos/200/300\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  alt\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Example\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  width\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"256\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  height\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"256\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ImageFallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-full p-2 h-full flex items-center justify-center bg-gray-200 text-gray-500\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Failed to load image\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ImageFallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Image\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"props\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:\\"Name\\"}),(0,e.jsx)(l.th,{children:\\"Type\\"}),(0,e.jsx)(l.th,{children:\\"Description\\"})]})}),(0,e.jsx)(l.tbody,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"showLoadingIndicator\\"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:\\"boolean\\"})}),(0,e.jsx)(l.td,{children:\\"Checks if the loading indicator should be displayed.\\"})]})})]})]})}function u(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(F,{...n})}):F(n)}function a(n,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return I(w);})();\\n;return Component;"},"_id":"docs/components/image.mdx","_raw":{"sourceFilePath":"docs/components/image.mdx","sourceFileName":"image.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/image"},"type":"Doc","slug":"/docs/components/image","slugAsParams":"components/image"},{"title":"Infinite Scroll","description":"A component which virtualize large element lists","published":true,"links":{"doc":"https://tanstack.com/virtual/latest/docs/introduction","api":"https://tanstack.com/virtual/latest/docs/api/virtualizer","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"infinite-scroll-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/infinite-scroll.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install @tanstack/react-virtual\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"infinite-scroll\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  InfiniteScroll,\\n  InfiniteScrollList,\\n} from \\"<path-to-ui-components>/infinite-scroll\\";\\n```\\n\\n```tsx\\nreturn (\\n    <InfiniteScroll\\n      count={count}\\n      estimatedHeight={100}\\n      overScan={10}\\n      gap={gap}\\n    >\\n       <InfiniteScrollList>\\n        {(index) => {\\n          return <div>{sentences[index]}</div>;\\n        }}\\n    </InfiniteScroll>\\n```\\n\\n## Props\\n\\n| Name              | Type                  | Description                                                                                                                                                                         |\\n| ----------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\\n| count             | `number`              | The total number of items to virtualize.                                                                                                                                            |\\n| estimatedHeight   | `number`              | Estimated height of each virtual item.                                                                                                                                              |\\n| lanes             | `number`              | The number of lanes the list is divided into.                                                                                                                                       |\\n| overScan          | `number`              | The number of items rendered above and below the visible area. A higher number reduces the chance of blank items during slow rendering but increases the virtualizer\'s render time. |\\n| gap               | number                | Set\'s the spacing between items in the virtualized list.                                                                                                                            |\\n| header            | `ReactNode`           | Component which is at the top of a virtual list. Including it inside the infinite scroll helps to accurately calculate the scroll restoration position.                             |\\n| hasNextPage       | `boolean`             | Determines there is a next page to be fetched in paginated query.                                                                                                                   |\\n| loading           | `boolean`             | Signals if a queried data is loading.                                                                                                                                               |\\n| loadingIndicator  | `ReactNode`           | Component used to represent loading data.                                                                                                                                           |\\n| scrollElementType | `window` or `element` | Type of scroll element for the virtualizer, determining whether it\'s element-based or window-based.                                                                                 |\\n| onLoadMore        | `() => void`          | Callback to load more data.                                                                                                                                                         |\\n\\n<Callout>\\n\\nThe default value of `scrollElementType` is `window`\\n\\n</Callout>\\n\\n## Scroll Restoration\\n\\n### Usage\\n\\n```tsx\\nimport {\\n  InfiniteScroll,\\n  InfiniteScrollList,\\n  ScrollRestoration,\\n} from \\"<path-to-ui-components>/infinite-scroll\\";\\n```\\n\\n```tsx\\nreturn (\\n    <InfiniteScroll\\n      count={count}\\n      estimatedHeight={100}\\n      overScan={10}\\n      gap={gap}\\n    >\\n      <ScrollRestoration>\\n       <InfiniteScrollList>\\n        {(index) => {\\n          return <div>{sentences[index]}</div>;\\n        }}\\n      </ScrollRestoration>\\n    </InfiniteScroll>\\n```\\n\\n### Props\\n\\n| Name                     | Type     | Description                                                                                                      |\\n| ------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------- |\\n| scrollConfigStorageKey   | `string` | Key used to store scroll restoration configuration.                                                              |\\n| lastScrollRestorationKey | `string` | Last scroll restoration prevents scroll restoration unless the user navigates back to the last key they visited. |\\n\\n## Examples\\n\\n### Element based scroll\\n\\n<ComponentPreview name=\\"infinite-scroll-element-demo\\" />\\n","code":"var Component=(()=>{var f=Object.create;var i=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var x=(e,l)=>()=>

1(l||e((l={exports:{}}).exports,l),l.exports),I=(e,l)=>{for(var s in l)i(e,s,{get:l[s],enumerable:!0})},y=(e,l,s,a)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let c of g(l))!S.call(e,c)&&c!==s&&i(e,c,{get:()=>l[c],enumerable:!(a=B(l,c))||a.enumerable});return e};var C=(e,l,s)=>(s=e!=null?f(v(e)):{},y(l||!e||!e.__esModule?i(s,\\"default\\",{value:e,enumerable:!0}):s,e)),b=e=>y(i({},\\"__esModule\\",{value:!0}),e);var F=x((_,m)=>{m.exports=_jsx_runtime});var w={};I(w,{default:()=>N,frontmatter:()=>R});var n=C(F()),R={title:\\"Infinite Scroll\\",description:\\"A component which virtualize large element lists\\",component:!0,links:{doc:\\"https://tanstack.com/virtual/latest/docs/introduction\\",api:\\"https://tanstack.com/virtual/latest/docs/api/virtualizer\\"}};function u(e){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...e.components},{Callout:s,ComponentPreview:a,ComponentSource:c,Step:o,Steps:h,Tabs:p,TabsContent:t,TabsList:E,TabsTrigger:d}=l;return s||r(\\"Callout\\",!0),a||r(\\"ComponentPreview\\",!0),c||r(\\"ComponentSource\\",!0),o||r(\\"Step\\",!0),h||r(\\"Steps\\",!0),p||r(\\"Tabs\\",!0),t||r(\\"TabsContent\\",!0),E||r(\\"TabsList\\",!0),d||r(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{name:\\"infinite-scroll-demo\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { faker } from \\"@faker-js/faker\\";\\n\\nimport {\\n  InfiniteScroll,\\n  InfiniteScrollList,\\n} from \\"@/components/ui/infinite-scroll\\";\\n\\nconst randomNumber = (min: number, max: number) =>\\n  faker.number.int({ min, max });\\n\\nconst sentences = new Array(100)\\n  .fill(true)\\n  .map(() => faker.lorem.sentence(randomNumber(20, 70)));\\n\\nexport function InfiniteScrollDemo() {\\n  return (\\n    <InfiniteScroll\\n      count={sentences.length}\\n      estimatedHeight={350}\\n      overScan={5}\\n      gap={10}\\n    >\\n      <InfiniteScrollList>\\n        {(index) => {\\n          return <div>{sentences[index]}</div>;\\n        }}\\n      </InfiniteScrollList>\\n    </InfiniteScroll>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/infinite-scroll-demo.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { faker } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@faker-js/faker\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InfiniteScroll,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InfiniteScrollList,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/infinite-scroll\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" randomNumber\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"min\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"max\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  faker.number.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"int\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ min, max });\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" sentences\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Array\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"100\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  .\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"fill\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  .\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"map\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" faker.lorem.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"sentence\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"randomNumber\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"20\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"70\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")));\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" InfiniteScrollDemo\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScroll\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      count\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{sentences.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      estimatedHeight\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"350\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      overScan\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"5\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      gap\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"10\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScrollList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"index\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">{sentences[index]}</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScrollList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScroll\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"installation\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(E,{children:[(0,n.jsx)(d,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(d,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(t,{value:\\"cli\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/infinite-scroll.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/infinite-scroll.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/infinite-scroll.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/infinite-scroll.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/infinite-scroll.json\\"\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/infinite-scroll.json\\"\'})]})})})})}),(0,n.jsx)(t,{value:\\"manual\\",children:(0,n.jsxs)(h,{children:[(0,n.jsx)(o,{children:\\"Install the following dependencies:\\"}),(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install @tanstack/react-virtual\\n`,__npmCommand__:`npm install @tanstack/react-virtual\\n`,__yarnCommand__:`yarn add @tanstack/react-virtual\\n`,__pnpmCommand__:`pnpm add @tanstack/react-virtual\\n`,__bunCommand__:`bun add @tanstack/react-virtual\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" @tanstack/react-virtual\\"})]})})})}),(0,n.jsx)(o,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(c,{name:\\"infinite-scroll\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport {\\n  measureElement,\\n  useVirtualizer,\\n  useWindowVirtualizer,\\n  Virtualizer,\\n} from \\"@tanstack/react-virtual\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { useIsMobile } from \\"@/components/hooks/use-mobile\\";\\nimport {\\n  getHeaderHeight,\\n  getInitialMeasurementsCache,\\n  useScrollRestoration,\\n} from \\"@/components/hooks/use-scroll-restoration\\";\\n\\nconst InfiniteScrollContext = React.createContext<{\\n  gap?: number;\\n  loading?: boolean;\\n  hasNextPage?: boolean;\\n  virtualizer:\\n    | Virtualizer<Window, Element>\\n    | Virtualizer<HTMLDivElement, Element>;\\n  count: number;\\n  overScan: number;\\n  headerRef: React.RefObject<HTMLDivElement | null>;\\n  loadingIndicator?: React.ReactNode;\\n} | null>(null);\\n\\nconst useInfiniteScrollContext = () => {\\n  const context = React.useContext(InfiniteScrollContext);\\n  if (!context) {\\n    throw new Error(\\n      \\"\\\\`useInfiniteScrollContext\\\\` must be used within \\\\`InfiniteScroll\\\\`\\"\\n    );\\n  }\\n  return context;\\n};\\n\\nconst InfiniteScroll = ({\\n  count,\\n  estimatedHeight,\\n  lanes,\\n  overScan = 5,\\n  gap,\\n  header,\\n  hasNextPage,\\n  loading,\\n  loadingIndicator,\\n  scrollElementType = \\"window\\",\\n  className,\\n  children,\\n  onLoadMore,\\n  ...props\\n}: React.ComponentProps<\\"div\\"> & {\\n  count: number;\\n  estimatedHeight: number;\\n  lanes?: number;\\n  overScan?: number;\\n  gap?: number;\\n  header?: React.ReactNode;\\n  hasNextPage?: boolean;\\n  loading?: boolean;\\n  loadingIndicator?: React.ReactNode;\\n  scrollElementType?: \\"window\\" | \\"element\\";\\n  onLoadMore?: () => void;\\n}) => {\\n  const parentRef = React.useRef<HTMLDivElement>(null);\\n  const parentOffsetRef = React.useRef(0);\\n  const headerRef = React.useRef<HTMLDivElement>(null);\\n  const isMobile = useIsMobile();\\n\\n  React.useLayoutEffect(() => {\\n    parentOffsetRef.current = parentRef.current?.offsetTop ?? 0;\\n  }, [parentRef.current?.offsetTop]);\\n\\n  const commonOptions = {\\n    count,\\n    lanes,\\n    overscan: overScan,\\n    gap,\\n    scrollMargin: parentOffsetRef.current,\\n    measureElement: isMobile\\n      ? (\\n          element: any,\\n          entry: ResizeObserverEntry | undefined,\\n          instance: Virtualizer<any, any>\\n        ) => {\\n          const dataIndex = instance.indexFromElement(element);\\n          if (\\n            instance.scrollDirection === \\"backward\\" &&\\n            instance.measurementsCache?.[dataIndex]\\n          ) {\\n            return instance.measurementsCache[dataIndex].size;\\n          }\\n          return measureElement(element, entry, instance);\\n        }\\n      : measureElement,\\n    estimateSize: () => estimatedHeight,\\n  };\\n\\n  const windowVirtualizer = useWindowVirtualizer(commonOptions);\\n\\n  const elementVirtualizer = useVirtualizer({\\n    ...commonOptions,\\n    getScrollElement: () => parentRef.current,\\n  });\\n\\n  const virtualizer =\\n    scrollElementType === \\"window\\" ? windowVirtualizer : elementVirtualizer;\\n\\n  const virtualItems = virtualizer.getVirtualItems();\\n  const totalSize = virtualizer.getTotalSize();\\n\\n  const minHeight =\\n    virtualizer.isScrolling && loading && hasNextPage\\n      ? totalSize + overScan * estimatedHeight\\n      : totalSize;\\n\\n  React.useEffect(() => {\\n    if (!hasNextPage || loading) return;\\n\\n    const lastItem = virtualItems[virtualItems.length - 1];\\n    if (lastItem && lastItem.index >= count - 1) {\\n      onLoadMore?.();\\n    }\\n  }, [hasNextPage, count, loading, virtualItems, onLoadMore]);\\n\\n  return (\\n    <>\\n      {header && <div ref={headerRef}>{header}</div>}\\n      <div\\n        ref={parentRef}\\n        data-slot=\\"infinite-scroll-container\\"\\n        className={cn(\\n          \\"w-full\\",\\n          scrollElementType === \\"element\\" && \\"overflow-y-auto h-100\\"\\n        )}\\n      >\\n        <div\\n          data-slot=\\"infinite-scroll\\"\\n          className={cn(\\"relative w-full\\", className)}

1\\n          style={{\\n            minHeight: \\\\`\\\\${minHeight}px\\\\`,\\n          }}\\n          {...props}\\n        >\\n          <InfiniteScrollContext.Provider\\n            value={{\\n              gap,\\n              loading,\\n              hasNextPage,\\n              virtualizer,\\n              count,\\n              overScan,\\n              loadingIndicator,\\n              headerRef,\\n            }}\\n          >\\n            {children}\\n          </InfiniteScrollContext.Provider>\\n        </div>\\n      </div>\\n    </>\\n  );\\n};\\n\\nconst InfiniteScrollList = ({\\n  className,\\n  children,\\n  ...props\\n}: Omit<React.ComponentProps<\\"div\\">, \\"children\\"> & {\\n  children: (index: number) => React.ReactElement<any>;\\n}) => {\\n  const { gap, loading, hasNextPage, virtualizer, loadingIndicator } =\\n    useInfiniteScrollContext();\\n\\n  const virtualItems = virtualizer.getVirtualItems();\\n  const listOffset = virtualItems?.[0]?.start\\n    ? virtualItems[0].start - virtualizer.options.scrollMargin\\n    : 0;\\n\\n  return (\\n    <div\\n      data-slot=\\"infinite-scroll-list\\"\\n      data-offset={listOffset}\\n      className={cn(\\"flex flex-col absolute w-full top-0 left-0\\", className)}\\n      style={{\\n        transform: \\\\`translateY(\\\\${listOffset}px)\\\\`,\\n        gap: \\\\`\\\\${gap}px\\\\`,\\n      }}\\n      {...props}\\n    >\\n      {virtualItems.map((virtualItem) => {\\n        return (\\n          <div\\n            key={virtualItem.key}\\n            ref={virtualizer.measureElement}\\n            data-index={virtualItem.index}\\n          >\\n            {children(virtualItem.index)}\\n          </div>\\n        );\\n      })}\\n      {loading && hasNextPage && virtualItems.length > 0 && loadingIndicator}\\n    </div>\\n  );\\n};\\n\\nconst isWindowVirtualizer = (\\n  virtualizer: Virtualizer<any, Element>\\n): virtualizer is Virtualizer<Window, Element> =>\\n  virtualizer.scrollElement instanceof Window;\\n\\nconst WindowScrollRestoration = ({\\n  scrollConfigStorageKey = \\"storage-key\\",\\n  lastScrollRestorationKey = \\"\\",\\n  virtualizer,\\n  children,\\n}: React.PropsWithChildren<{\\n  scrollConfigStorageKey?: string;\\n  lastScrollRestorationKey?: string;\\n  virtualizer: Virtualizer<Window, Element>;\\n}>) => {\\n  const { count, overScan, headerRef } = useInfiniteScrollContext();\\n\\n  React.useEffect(() => {\\n    if (isWindowVirtualizer(virtualizer)) {\\n      virtualizer.setOptions({\\n        ...virtualizer.options,\\n        initialMeasurementsCache: getInitialMeasurementsCache({\\n          scrollConfigStorageKey,\\n        }),\\n      });\\n    }\\n  }, [scrollConfigStorageKey, virtualizer]);\\n\\n  React.useLayoutEffect(() => {\\n    const headerHeight = getHeaderHeight({\\n      scrollConfigStorageKey,\\n      lastScrollRestorationKey,\\n    });\\n    if (headerHeight)\\n      headerRef.current?.setAttribute(\\n        \\"className\\",\\n        \\\\`\\\\${headerRef.current.className} min-h-[\\\\${headerHeight}px]\\\\`\\n      );\\n  }, [headerRef, lastScrollRestorationKey, scrollConfigStorageKey]);\\n\\n  useScrollRestoration({\\n    virtualizer,\\n    count,\\n    overScan,\\n    scrollConfigStorageKey,\\n    offsetAttribute: \\"data-offset\\",\\n    lastScrollRestorationKey,\\n    headerRef,\\n  });\\n  return <>{children}</>;\\n};\\n\\nconst ScrollRestoration = ({\\n  children,\\n  ...props\\n}: React.PropsWithChildren<{\\n  scrollConfigStorageKey?: string;\\n  lastScrollRestorationKey?: string;\\n}>) => {\\n  const { virtualizer } = useInfiniteScrollContext();\\n\\n  if (isWindowVirtualizer(virtualizer))\\n    return (\\n      <WindowScrollRestoration virtualizer={virtualizer} {...props}>\\n        {children}\\n      </WindowScrollRestoration>\\n    );\\n\\n  if (virtualizer.scrollElement) {\\n    throw new Error(\\n      \\"Scroll restoration is currently only supported when the scroll element is the window.\\"\\n    );\\n  }\\n};\\n\\nexport { InfiniteScroll, InfiniteScrollList, ScrollRestoration };\\n`,__src__:\\"registry/default/ui/infinite-scroll.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  measureElement,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  useVirtualizer,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  useWindowVirtualizer,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Virtualizer,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@tanstack/react-virtual\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useIsMobile } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/hooks/use-mobile\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  getHeaderHeight,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  getInitialMeasurementsCache,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  useScrollRestoration,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/hooks/use-scroll-restoration\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" InfiniteScrollContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"createContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  gap\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  hasNextPage\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"Window\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"Element\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLDivElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"Element\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  count\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  overScan\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  headerRef\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"RefObject\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLDivElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  loadingIndicator\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ReactNode\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"|\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useInfiniteScrollContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" context\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(InfiniteScrollContext);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"context) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"`useInfiniteScrollContext` must be used within `InfiniteScroll`\\"\'})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" context;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" InfiniteScroll\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  count,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  estimatedHeight,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  lanes,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},c

1hildren:\\"  overScan \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 5\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  gap,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  header,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  hasNextPage,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  loading,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  loadingIndicator,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  scrollElementType \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"window\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  onLoadMore,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  count\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  estimatedHeight\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  lanes\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  overScan\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  gap\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  header\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ReactNode\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  hasNextPage\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  loadingIndicator\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ReactNode\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  scrollElementType\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"window\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"element\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  onLoadMore\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" void\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" parentRef\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useRef\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLDivElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" parentOffsetRef\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useRef\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"0\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" headerRef\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useRef\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLDivElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" isMobile\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useIsMobile\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useLayoutEffect\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    parentOffsetRef.current \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" parentRef.current?.offsetTop \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"??\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [parentRef.current?.offsetTop]);\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" commonOptions\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    count,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    lanes,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    overscan: overScan,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    gap,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    scrollMargin: parentOffsetRef.current,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    measureElement: isMobile\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"      ?\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          element: any,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          entry: ResizeObserverEntry \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"|\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" undefined\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          instance: Virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"any, any\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        ) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" dataIndex\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" instance.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"indexFromElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(element);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            instance.scrollDirection \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"backward\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            instance.measurementsCache?.[dataIndex]\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          ) {\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"            return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" instance.measurementsCache[dataIndex].size;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" measureElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(element, entry, instance);\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"      :\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" measureElement,\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    estimateSize\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": () \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" estimatedHeight,\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  cons

1t\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" windowVirtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useWindowVirtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(commonOptions);\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" elementVirtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useVirtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"commonOptions,\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    getScrollElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": () \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" parentRef.current,\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  });\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    scrollElementType \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"window\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" ?\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" windowVirtualizer \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" elementVirtualizer;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" virtualItems\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" virtualizer.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"getVirtualItems\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" totalSize\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" virtualizer.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"getTotalSize\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" minHeight\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    virtualizer.isScrolling \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" loading \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" hasNextPage\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"      ?\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" totalSize \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"+\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" overScan \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"*\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" estimatedHeight\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"      :\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" totalSize;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useEffect\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"hasNextPage \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" loading) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" lastItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" virtualItems[virtualItems.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" -\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 1\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"];\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (lastItem \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" lastItem.index \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\">=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" count \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"-\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 1\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      onLoadMore\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [hasNextPage, count, loading, virtualItems, onLoadMore]);\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <>\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {header \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" ref\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{headerRef}>{header}</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        ref\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{parentRef}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"infinite-scroll-container\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"w-full\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          scrollElementType \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"element\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"overflow-y-auto h-100\\"\'})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"infinite-scroll\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"relative w-full\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          style\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            minHeight: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"`${\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"minHeight\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}px`\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScrollContext.Provider\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              gap,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              loading,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              hasNextPage,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              virtualizer,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              count,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              overScan,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              loadingIndicator,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              headerRef,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            }}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          >\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            {children}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScrollContext.Provider\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </>\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"

1line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" InfiniteScrollList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Omit\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">, \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"children\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  children\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"index\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ReactElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"any\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"gap\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"hasNextPage\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"loadingIndicator\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    useInfiniteScrollContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" virtualItems\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" virtualizer.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"getVirtualItems\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" listOffset\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" virtualItems?.[\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"0\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"]?.start\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    ?\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" virtualItems[\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"0\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"].start \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"-\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" virtualizer.options.scrollMargin\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    :\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"infinite-scroll-list\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-offset\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{listOffset}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-col absolute w-full top-0 left-0\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      style\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        transform: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"`translateY(${\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"listOffset\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}px)`\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        gap: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"`${\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"gap\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}px`\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {virtualItems.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"map\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"virtualItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"        return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            key\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{virtualItem.key}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            ref\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{virtualizer.measureElement}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            data-index\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{virtualItem.index}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"children\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(virtualItem.index)}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      })}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {loading \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" hasNextPage \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" virtualItems.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" >\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" loadingIndicator}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" isWindowVirtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"any\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"Element\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\" virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" is\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"Window\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"Element\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  virtualizer.scrollElement \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"instanceof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Window\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" WindowScrollRestoration\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  scrollConfigStorageKey \\"}),

1(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"storage-key\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  lastScrollRestorationKey \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  virtualizer,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"PropsWithChildren\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  scrollConfigStorageKey\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  lastScrollRestorationKey\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"Window\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"Element\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}>) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"count\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"overScan\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"headerRef\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useInfiniteScrollContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useEffect\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"isWindowVirtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(virtualizer)) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      virtualizer.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"setOptions\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"        ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"virtualizer.options,\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        initialMeasurementsCache: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"getInitialMeasurementsCache\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          scrollConfigStorageKey,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }),\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      });\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }

1, [scrollConfigStorageKey, virtualizer]);\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useLayoutEffect\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" headerHeight\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" getHeaderHeight\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      scrollConfigStorageKey,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      lastScrollRestorationKey,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    });\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (headerHeight)\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      headerRef.current?.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"setAttribute\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"className\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"        `${\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"headerRef\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"current\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"} min-h-[${\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"headerHeight\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}px]`\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [headerRef, lastScrollRestorationKey, scrollConfigStorageKey]);\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  useScrollRestoration\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    virtualizer,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    count,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    overScan,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    scrollConfigStorageKey,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    offsetAttribute: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"data-offset\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    lastScrollRestorationKey,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    headerRef,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  });\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <>{children}</>;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" ScrollRestoration\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"PropsWithChildren\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  scrollConfigStorageKey\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  lastScrollRestorationKey\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}>) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useInfiniteScrollContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"isWindowVirtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(virtualizer))\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"WindowScrollRestoration\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" virtualizer\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{virtualizer} {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}>\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {children}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"WindowScrollRestoration\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (virtualizer.scrollElement) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"Scroll restoration is currently only supported when the scroll element is the window.\\"\'})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { InfiniteScroll, InfiniteScrollList, ScrollRestoration };\\"})]})]})})})}),(0,n.jsx)(o,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"usage\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  InfiniteScroll,\\n  InfiniteScrollList,\\n} from \\"<path-to-ui-components>/infinite-scroll\\";\\n`,children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InfiniteScroll,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InfiniteScrollList,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/infinite-scroll\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`return (\\n    <InfiniteScroll\\n      count={count}\\n      estimatedHeight={100}\\n      overScan={10}\\n      gap={gap}\\n    >\\n       <InfiniteScrollList>\\n        {(index) => {\\n          return <div>{sentences[index]}</div>;\\n        }}\\n    </InfiniteScroll>\\n`,children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScroll\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      count\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{count}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      estimatedHeight\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"100\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      overScan\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"10\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      gap\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{gap}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"       <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScrollList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"index\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">{sentences[index]}</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScr

1oll\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"props\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:\\"Name\\"}),(0,n.jsx)(l.th,{children:\\"Type\\"}),(0,n.jsx)(l.th,{children:\\"Description\\"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"count\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"number\\"})}),(0,n.jsx)(l.td,{children:\\"The total number of items to virtualize.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"estimatedHeight\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"number\\"})}),(0,n.jsx)(l.td,{children:\\"Estimated height of each virtual item.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"lanes\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"number\\"})}),(0,n.jsx)(l.td,{children:\\"The number of lanes the list is divided into.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"overScan\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"number\\"})}),(0,n.jsx)(l.td,{children:\\"The number of items rendered above and below the visible area. A higher number reduces the chance of blank items during slow rendering but increases the virtualizer\'s render time.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"gap\\"}),(0,n.jsx)(l.td,{children:\\"number\\"}),(0,n.jsx)(l.td,{children:\\"Set\'s the spacing between items in the virtualized list.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"header\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"ReactNode\\"})}),(0,n.jsx)(l.td,{children:\\"Component which is at the top of a virtual list. Including it inside the infinite scroll helps to accurately calculate the scroll restoration position.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"hasNextPage\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"boolean\\"})}),(0,n.jsx)(l.td,{children:\\"Determines there is a next page to be fetched in paginated query.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"loading\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"boolean\\"})}),(0,n.jsx)(l.td,{children:\\"Signals if a queried data is loading.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"loadingIndicator\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"ReactNode\\"})}),(0,n.jsx)(l.td,{children:\\"Component used to represent loading data.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"scrollElementType\\"}),(0,n.jsxs)(l.td,{children:[(0,n.jsx)(l.code,{children:\\"window\\"}),\\" or \\",(0,n.jsx)(l.code,{children:\\"element\\"})]}),(0,n.jsx)(l.td,{children:\\"Type of scroll element for the virtualizer, determining whether it\'s element-based or window-based.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"onLoadMore\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"() => void\\"})}),(0,n.jsx)(l.td,{children:\\"Callback to load more data.\\"})]})]})]}),`\\n`,(0,n.jsx)(s,{children:(0,n.jsxs)(l.p,{children:[\\"The default value of \\",(0,n.jsx)(l.code,{children:\\"scrollElementType\\"}),\\" is \\",(0,n.jsx)(l.code,{children:\\"window\\"})]})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"scroll-restoration\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#scroll-restoration\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Scroll Restoration\\"]}),`\\n`,(0,n.jsxs)(l.h3,{id:\\"usage-1\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage-1\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  InfiniteScroll,\\n  InfiniteScrollList,\\n  ScrollRestoration,\\n} from \\"<path-to-ui-components>/infinite-scroll\\";\\n`,children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InfiniteScroll,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InfiniteScrollList,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ScrollRestoration,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/infinite-scroll\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`return (\\n    <InfiniteScroll\\n      count={count}\\n      estimatedHeight={100}\\n      overScan={10}\\n      gap={gap}\\n    >\\n      <ScrollRestoration>\\n       <InfiniteScrollList>\\n        {(index) => {\\n          return <div>{sentences[index]}</div>;\\n        }}\\n      </ScrollRestoration>\\n    </InfiniteScroll>\\n`,children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScroll\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      count\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{count}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      estimatedHeight\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"100\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      overScan\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"10\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      gap\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{gap}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ScrollRestoration\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"       <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScrollList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"index\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">{sentences[index]}</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ScrollRestoration\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScroll\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,n.jsxs)(l.h3,{id:\\"props-1\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props-1\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:\\"Name\\"}),(0,n.jsx)(l.th,{children:\\"Type\\"}),(0,n.jsx)(l.th,{children:\\"Description\\"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"scrollC

1onfigStorageKey\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"string\\"})}),(0,n.jsx)(l.td,{children:\\"Key used to store scroll restoration configuration.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"lastScrollRestorationKey\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"string\\"})}),(0,n.jsx)(l.td,{children:\\"Last scroll restoration prevents scroll restoration unless the user navigates back to the last key they visited.\\"})]})]})]}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"examples\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,n.jsxs)(l.h3,{id:\\"element-based-scroll\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#element-based-scroll\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Element based scroll\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"infinite-scroll-element-demo\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { faker } from \\"@faker-js/faker\\";\\nimport {\\n  QueryClient,\\n  QueryClientProvider,\\n  useInfiniteQuery,\\n} from \\"@tanstack/react-query\\";\\n\\nimport {\\n  InfiniteScroll,\\n  InfiniteScrollList,\\n} from \\"@/components/ui/infinite-scroll\\";\\n\\nconst queryClient = new QueryClient();\\n\\nconst randomNumber = (min: number, max: number) =>\\n  faker.number.int({ min, max });\\n\\nasync function fetchServerPage(\\n  limit: number,\\n  offset: number = 0\\n): Promise<{ rows: Array<string>; nextOffset: number }> {\\n  const rows = new Array(limit)\\n    .fill(0)\\n    .map(() => faker.lorem.sentence(randomNumber(20, 70)));\\n\\n  await new Promise((r) => setTimeout(r, 500));\\n\\n  return { rows, nextOffset: offset + 1 };\\n}\\n\\nfunction InfiniteScrollElement() {\\n  const {\\n    status,\\n    data,\\n    error,\\n    isFetchingNextPage,\\n    fetchNextPage,\\n    hasNextPage,\\n  } = useInfiniteQuery({\\n    queryKey: [\\"projects\\"],\\n    queryFn: (ctx) => fetchServerPage(10, ctx.pageParam),\\n    getNextPageParam: (lastGroup) => lastGroup.nextOffset,\\n    initialPageParam: 0,\\n  });\\n\\n  const allRows = data ? data.pages.flatMap((d) => d.rows) : [];\\n\\n  return (\\n    <div className=\\"**:data-[slot=infinite-scroll-container]:h-[400px] w-full\\">\\n      {status === \\"pending\\" ? (\\n        <p>Loading...</p>\\n      ) : status === \\"error\\" ? (\\n        <span>Error: {error.message}</span>\\n      ) : (\\n        <InfiniteScroll\\n          count={allRows.length}\\n          estimatedHeight={50}\\n          overScan={5}\\n          gap={10}\\n          loading={isFetchingNextPage}\\n          hasNextPage={hasNextPage}\\n          onLoadMore={() => {\\n            fetchNextPage();\\n          }}\\n          loadingIndicator=\\"Loading ...\\"\\n          scrollElementType=\\"element\\"\\n        >\\n          <InfiniteScrollList>\\n            {(index) => {\\n              return <div>{allRows[index]}</div>;\\n            }}\\n          </InfiniteScrollList>\\n        </InfiniteScroll>\\n      )}\\n    </div>\\n  );\\n}\\n\\nexport function InfiniteScrollElementDemo() {\\n  return (\\n    <QueryClientProvider client={queryClient}>\\n      <InfiniteScrollElement />\\n    </QueryClientProvider>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/infinite-scroll-element-demo.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { faker } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@faker-js/faker\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  QueryClient,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  QueryClientProvider,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  useInfiniteQuery,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@tanstack/react-query\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InfiniteScroll,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InfiniteScrollList,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/infinite-scroll\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" queryClient\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" QueryClient\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" randomNumber\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"min\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"max\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  faker.number.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"int\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ min, max });\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"async\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" fetchServerPage\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  limit\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  offset\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Promise\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{ \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"rows\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Array\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">; \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"nextOffset\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }> {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" rows\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Array\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(limit)\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    .\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"fill\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"0\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    .\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"map\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" faker.lorem.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"sentence\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"randomNumber\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"20\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"70\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")));\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  await\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" Promise\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"r\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setTimeout\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(r, \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"500\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"));\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { rows, nextOffset: offset \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"+\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 1\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" };\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" InfiniteScrollElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"    status\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"    data\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"    error\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"    isFetchingNextPage\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"    fetchNextPage\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"    hasNextPage\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useInfiniteQuery\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    queryKey: [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"projects\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"],\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    queryFn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": (

1\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"ctx\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" fetchServerPage\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"10\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", ctx.pageParam),\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    getNextPageParam\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\": (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"lastGroup\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" lastGroup.nextOffset,\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    initialPageParam: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"0\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  });\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" allRows\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" data \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" data.pages.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"flatMap\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"d\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" d.rows) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [];\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"**:data-[slot=infinite-scroll-container]:h-[400px] w-full\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {status \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"pending\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" ?\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Loading...</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"p\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      ) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" status \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"error\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" ?\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"span\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Error: {error.message}</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"span\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      ) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScroll\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          count\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{allRows.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          estimatedHeight\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"50\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          overScan\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"5\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          gap\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"10\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          loading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{isFetchingNextPage}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          hasNextPage\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{hasNextPage}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          onLoadMore\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            fetchNextPage\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          loadingIndicator\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Loading ...\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          scrollElementType\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"element\\"\'})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScrollList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            {(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"index\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"              return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">{allRows[index]}</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScrollList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScroll\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" InfiniteScrollElementDemo\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"QueryClientProvider\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" client\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{queryClient}>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"InfiniteScrollElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"QueryClientProvider\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function N(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}function r(e,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(w);})();\\n;return Component;"},"_id":"docs/components/infinite-scroll.mdx","_raw":{"sourceFilePath":"docs/components/infinite-scroll.mdx","sourceFileName":"infinite-scroll.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/infinite-scroll"},"type":"Doc","slug":"/docs/components/infinite-scroll","slugAsParams":"components/infinite-scroll"},{"title":"Inline Notification","description":"Displays an inline callout for user attention.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/

1alert","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Alert component customized by adding variants.\\n\\n<ComponentPreview name=\\"inline-notification-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/inline-notification.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install lucide-react\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"inline-notification\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  InlineNotification,\\n  InlineNotificationDescription,\\n  InlineNotificationTitle,\\n} from \\"<path-to-ui-components>/alert\\";\\n```\\n\\n```tsx\\n<InlineNotification>\\n  <InlineNotificationTitle>Alert title</InlineNotificationTitle>\\n  <InlineNotificationDescription>\\n    You can add components and dependencies to your app using the cli.\\n  </InlineNotificationDescription>\\n</InlineNotification>\\n```\\n\\n## Props\\n\\n| Name    | Type                               | Description         |\\n| ------- | ---------------------------------- | ------------------- |\\n| variant | `info`, `success` or `destructive` | Component variants. |\\n\\n<Callout>\\n\\nThe **default** value of `variant` is `info`.\\n\\n</Callout>\\n\\n## Examples\\n\\n### Info\\n\\n<ComponentPreview name=\\"inline-notification-info\\" />\\n\\n### Success\\n\\n<ComponentPreview name=\\"inline-notification-success\\" />\\n\\n### Destructive\\n\\n<ComponentPreview name=\\"inline-notification-destructive\\" />\\n","code":"var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var v=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),C=(e,n)=>{for(var i in n)r(e,i,{get:n[i],enumerable:!0})},y=(e,n,i,c)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let a of B(n))!_.call(e,a)&&a!==i&&r(e,a,{get:()=>n[a],enumerable:!(c=g(n,a))||c.enumerable});return e};var x=(e,n,i)=>(i=e!=null?u(I(e)):{},y(n||!e||!e.__esModule?r(i,\\"default\\",{value:e,enumerable:!0}):i,e)),T=e=>y(r({},\\"__esModule\\",{value:!0}),e);var N=v((S,m)=>{m.exports=_jsx_runtime});var D={};C(D,{default:()=>f,frontmatter:()=>b});var l=x(N()),b={title:\\"Inline Notification\\",description:\\"Displays an inline callout for user attention.\\",component:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/alert\\"}};function F(e){let n={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",strong:\\"strong\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...e.components},{Callout:i,ComponentPreview:c,ComponentSource:a,Step:o,Steps:p,Tabs:h,TabsContent:t,TabsList:E,TabsTrigger:d}=n;return i||s(\\"Callout\\",!0),c||s(\\"ComponentPreview\\",!0),a||s(\\"ComponentSource\\",!0),o||s(\\"Step\\",!0),p||s(\\"Steps\\",!0),h||s(\\"Tabs\\",!0),t||s(\\"TabsContent\\",!0),E||s(\\"TabsList\\",!0),d||s(\\"TabsTrigger\\",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.p,{children:\\"A ShadCN Alert component customized by adding variants.\\"}),`\\n`,(0,l.jsx)(c,{name:\\"inline-notification-demo\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  InlineNotification,\\n  InlineNotificationDescription,\\n  InlineNotificationTitle,\\n} from \\"@/components/ui/inline-notification\\";\\n\\nexport function InlineNotificationDemo() {\\n  return (\\n    <InlineNotification>\\n      <InlineNotificationTitle>Heads up!</InlineNotificationTitle>\\n      <InlineNotificationDescription>\\n        You can add components and dependencies to your app using the cli.\\n      </InlineNotificationDescription>\\n    </InlineNotification>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/inline-notification-demo.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotification,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationDescription,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationTitle,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/inline-notification\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" InlineNotificationDemo\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotification\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationTitle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Heads up!</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationTitle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationDescription\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        You can add components and dependencies to your app using the cli.\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationDescription\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotification\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(n.h2,{id:\\"installation\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,l.jsxs)(h,{defaultValue:\\"cli\\",children:[(0,l.jsxs)(E,{children:[(0,l.jsx)(d,{value:\\"cli\\",children:\\"CLI\\"}),(0,l.jsx)(d,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,l.jsx)(t,{value:\\"cli\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/inline-notification.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/inline-notification.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/inline-notification.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/inline-notification.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/inline-notification.json\\"\\n`,children:(0,l.jsx)(n.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/inline-notification.json\\"\'})]})})})})}),(0,l.jsx)(t,{value:\\"manual\\",children:(0,l.jsxs)(p,{children:[(0,l.jsx)(o,{children:\\"Install the following dependencies:\\"}),(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install lucide-react\\n`,__npmCommand__:`npm install lucide-react\\n`,__yarnCommand__:`yarn add lucide-react\\n`,__pnpmCommand__:`pnpm add lucide-react\\n`,__bunCommand__:`bun add lucide-react\\n`,children:(0,l.jsx)(n.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" lucide-react\\"})]})})})}),(0,l.jsx)(o,{children:\\"Copy and paste the following code into your project.\\"}),(0,l.jsx)(a,{name:\\"inline-notification\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { cva, type VariantProps } from \\"class-variance-authority\\";\\nimport { CircleAlert, CircleCheck, CircleX, Trash2 } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { typographyVariants } from \\"@/components/ui/typography\\";\\n\\nconst inlineNotificationVariants = cva(\\n  \\"relative bg-background text-foreground w-full rounded-lg border px-4 py-3 grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5\\",\\n  {\\n    variants: {\\n      variant: {\\n        info: \\"\\",\\n        success: \\"\\",\\n        destructive: \\"\\",\\n        delete: \\"\\",\\n      },\\n    },\\n    defaultVariants: {\\n      variant: \\"info\\",\\n    },\\n  }\\n);\\n\\nconst variantToIconMap = {\\n  info: <CircleAlert size={16} className=\\"text-primary\\" />,\\n  success: <CircleCheck size={16} className=\\"text-success\\" />,\\n  destructive: <CircleX size={16} className=\\"text-destructive\\" />,\\n  delete: <Trash2 size={16} className=\\"text-destructive\\" />,\\n};\\n\\nconst InlineNotification = ({\\n  className,\\n  variant = \\"info\\",\\n  children,\\n  ...props\\n}: React.ComponentProps<\\"div\\"> &\\n  VariantProps<typeof inlineNotificationVariants>) => (\\n  <div\\n    data-slot=\\"inline-notification\\"\\n    role=\\"alert\\"\\n    className={cn(inlineNotificationVariants({ variant }), className)}\\n    {...props}\\n  >\\n    {variant && variantToIconMap[variant]}\\n    {children}\\n  </div>\\n);\\n\\nconst InlineNotificationTitle = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"h5\\">) => (\\n  <h5\\n    data-slot=\\"inline-notification-title\\"\\n    className={cn(\\n      \\"col-start-2 line-clamp-1 min-h-4\\",\\n      typographyVariants({ variant: \\"sm\\" }),\\n      \\"font-bold\\",\\n      className\\n    )}\\n    {...props}\\n  >\\n    {props.children}

1\\n  </h5>\\n);\\n\\nconst InlineNotificationDescription = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"div\\">) => (\\n  <div\\n    data-slot=\\"inline-notification-description\\"\\n    className={cn(\\n      \\"col-start-2 grid justify-items-start gap-1\\",\\n      typographyVariants({ variant: \\"sm\\" }),\\n      className\\n    )}\\n    {...props}\\n  />\\n);\\n\\nexport {\\n  InlineNotification,\\n  InlineNotificationTitle,\\n  InlineNotificationDescription,\\n};\\n`,__src__:\\"registry/default/ui/inline-notification.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cva, \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" VariantProps } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"class-variance-authority\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CircleAlert, CircleCheck, CircleX, Trash2 } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { typographyVariants } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" inlineNotificationVariants\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" cva\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'  \\"relative bg-background text-foreground w-full rounded-lg border px-4 py-3 grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  {\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    variants: {\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      variant: {\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        info: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        success: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        destructive: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        delete: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      },\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    defaultVariants: {\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      variant: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"info\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" variantToIconMap\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  info: <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleAlert\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-primary\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  success: <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleCheck\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-success\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  destructive: <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleX\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-destructive\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  delete: <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Trash2\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"16\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-destructive\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" InlineNotification\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  variant \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"info\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"  VariantProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" inlineNotificationVariants>) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    data-slot\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"inline-notification\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    role\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"alert\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"inlineNotificationVariants\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ variant }), className)}\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {variant \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" variantToIconMap[variant]}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {children}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" InlineNotificationTitle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,

1l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h5\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"h5\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    data-slot\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"inline-notification-title\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"col-start-2 line-clamp-1 min-h-4\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      typographyVariants\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ variant: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sm\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" }),\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"font-bold\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      className\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    )}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  >\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {props.children}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"h5\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" InlineNotificationDescription\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    data-slot\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"inline-notification-description\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"col-start-2 grid justify-items-start gap-1\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      typographyVariants\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ variant: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sm\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" }),\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      className\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    )}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  />\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotification,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationTitle,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationDescription,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})})]})})})}),(0,l.jsx)(o,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,l.jsxs)(n.h2,{id:\\"usage\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  InlineNotification,\\n  InlineNotificationDescription,\\n  InlineNotificationTitle,\\n} from \\"<path-to-ui-components>/alert\\";\\n`,children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotification,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationDescription,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationTitle,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/alert\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<InlineNotification>\\n  <InlineNotificationTitle>Alert title</InlineNotificationTitle>\\n  <InlineNotificationDescription>\\n    You can add components and dependencies to your app using the cli.\\n  </InlineNotificationDescription>\\n</InlineNotification>\\n`,children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotification\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationTitle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Alert title</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationTitle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationDescription\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    You can add components and dependencies to your app using the cli.\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationDescription\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotification\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,l.jsxs)(n.h2,{id:\\"props\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:\\"Name\\"}),(0,l.jsx)(n.th,{children:\\"Type\\"}),(0,l.jsx)(n.th,{children:\\"Description\\"})]})}),(0,l.jsx)(n.tbody,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:\\"variant\\"}),(0,l.jsxs)(n.td,{children:[(0,l.jsx)(n.code,{children:\\"info\\"}),\\", \\",(0,l.jsx)(n.code,{children:\\"success\\"}),\\" or \\",(0,l.jsx)(n.code,{children:\\"destructive\\"})]}),(0,l.jsx)(n.td,{children:\\"Component variants.\\"})]})})]}),`\\n`,(0,l.jsx)(i,{children:(0,l.jsxs)(n.p,{children:[\\"The \\",(0,l.jsx)(n.strong,{children:\\"default\\"}),\\" value of \\",(0,l.jsx)(n.code,{children:\\"variant\\"}),\\" is \\",(0,l.jsx)(n.code,{children:\\"info\\"}),\\".\\"]})}),`\\n`,(0,l.jsxs)(n.h2,{id:\\"examples\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,l.jsxs)(n.h3,{id:\\"info\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#info\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Info\\"]}),`\\n`,(0,l.jsx)(c,{name:\\"inline-notification-info\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  InlineNotification,\\n  InlineNotificationDescription,\\n  InlineNotificationTitle,\\n} from \\"@/components/ui/inline-notification\\";\\n\\nexport function InlineNotificationInfo() {\\n  return (\\n    <InlineNotification variant=\\"info\\">\\n      <InlineNotificationTitle>Heads up!</InlineNotificationTitle>\\n      <InlineNotificationDescription>\\n        You can add components and dependencies to your app using the cli.\\n      </InlineNotificationDescription>\\n    </InlineNotification>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/inline-notification-info.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotification,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationDescription,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationTitle,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/inline-notification\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" InlineNotificationInfo\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotification\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"info\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:

1\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationTitle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Heads up!</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationTitle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationDescription\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        You can add components and dependencies to your app using the cli.\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationDescription\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotification\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(n.h3,{id:\\"success\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#success\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Success\\"]}),`\\n`,(0,l.jsx)(c,{name:\\"inline-notification-success\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  InlineNotification,\\n  InlineNotificationDescription,\\n  InlineNotificationTitle,\\n} from \\"@/components/ui/inline-notification\\";\\n\\nexport function InlineNotificationSuccess() {\\n  return (\\n    <InlineNotification variant=\\"success\\">\\n      <InlineNotificationTitle>Heads up!</InlineNotificationTitle>\\n      <InlineNotificationDescription>\\n        You can add components and dependencies to your app using the cli.\\n      </InlineNotificationDescription>\\n    </InlineNotification>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/inline-notification-success.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotification,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationDescription,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationTitle,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/inline-notification\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" InlineNotificationSuccess\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotification\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"success\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationTitle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Heads up!</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationTitle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationDescription\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        You can add components and dependencies to your app using the cli.\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationDescription\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotification\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}

1),`\\n`,(0,l.jsxs)(n.h3,{id:\\"destructive\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#destructive\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Destructive\\"]}),`\\n`,(0,l.jsx)(c,{name:\\"inline-notification-destructive\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  InlineNotification,\\n  InlineNotificationDescription,\\n  InlineNotificationTitle,\\n} from \\"@/components/ui/inline-notification\\";\\n\\nexport function InlineNotificationError() {\\n  return (\\n    <InlineNotification variant=\\"destructive\\">\\n      <InlineNotificationTitle>Heads up!</InlineNotificationTitle>\\n      <InlineNotificationDescription>\\n        You can add components and dependencies to your app using the cli.\\n      </InlineNotificationDescription>\\n    </InlineNotification>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/inline-notification-destructive.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotification,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationDescription,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  InlineNotificationTitle,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/inline-notification\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" InlineNotificationError\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotification\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"destructive\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationTitle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">Heads up!</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationTitle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationDescription\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        You can add components and dependencies to your app using the cli.\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotificationDescription\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"InlineNotification\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function f(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(F,{...e})}):F(e)}function s(e,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return T(D);})();\\n;return Component;"},"_id":"docs/components/inline-notification.mdx","_raw":{"sourceFilePath":"docs/components/inline-notification.mdx","sourceFileName":"inline-notification.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/inline-notification"},"type":"Doc","slug":"/docs/components/inline-notification","slugAsParams":"components/inline-notification"},{"title":"Input","description":"Displays a form input field or a component that looks like an input field.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/input","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Input component customized by adding an optional search icon and adjusting colors, shadow and color transition.\\n\\n<ComponentPreview name=\\"input-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/input.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"input\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Examples\\n\\n### Search input\\n\\n<ComponentPreview name=\\"input-search-demo\\" description=\\"A search input\\" />\\n","code":"var Component=(()=>{var f=Object.create;var o=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var b=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),C=(l,e)=>{for(var s in e)o(l,s,{get:e[s],enumerable:!0})},E=(l,e,s,a)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let r of B(e))!v.call(l,r)&&r!==s&&o(l,r,{get:()=>e[r],enumerable:!(a=N(e,r))||a.enumerable});return l};var x=(l,e,s)=>(s=l!=null?f(g(l)):{},E(e||!l||!l.__esModule?o(s,\\"default\\",{value:l,enumerable:!0}):s,l)),_=l=>E(o({},\\"__esModule\\",{value:!0}),l);var u=b((w,y)=>{y.exports=_jsx_runtime});var R={};C(R,{default:()=>F,frontmatter:()=>S});var n=x(u()),S={title:\\"Input\\",description:\\"Displays a form input field or a component that looks like an input field.\\",component:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/input\\"}};function m(l){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...l.components},{ComponentPreview:s,ComponentSource:a,Step:r,Steps:d,Tabs:p,TabsContent:t,TabsList:h,TabsTrigger:i}=e;return s||c(\\"ComponentPreview\\",!0),a||c(\\"ComponentSource\\",!0),r||c(\\"Step\\",!0),d||c(\\"Steps\\",!0),p||c(\\"Tabs\\",!0),t||c(\\"TabsContent\\",!0),h||c(\\"TabsList\\",!0),i||c(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\\"A ShadCN Input component customized by adding an optional search icon and adjusting colors, shadow and color transition.\\"}),`\\n`,(0,n.jsx)(s,{name:\\"input-demo\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Input } from \\"@/components/ui/input\\";\\n\\nexport function InputDemo() {\\n  return (\\n    <div>\\n      <Input type=\\"email\\" placeholder=\\"Email\\" />\\n    </div>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/input-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Input } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/input\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" InputDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Input\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" type\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"email\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" placeholder\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Email\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"installation\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(t,{value:\\"cli\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/input.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/input.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/input.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/input.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/input.json\\"\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/input.json\\"\'})]})})})})}),(0,n.jsx)(t,{value:\\"manual\\",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(r,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(a,{name:\\"input\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport Color from \\"colorjs.io\\";\\nimport CssFilterConverter from \\"css-filter-converter\\";\\nimport { Search } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nfunction Input({ className, type, ...props }: React.ComponentProps<\\"input\\">) {\\n  const inputRef = React.useRef<HTMLInputElement>(null);\\n  const styleRef = React.useRef<HTMLStyleElement | null>(null);\\n\\n  React.useEffect(() => {\\n    if (!inputRef.current || type !== \\"search\\") return;\\n\\n    const updateSearchButtonStyle = () => {\\n      try {\\n        const primaryColor = getComputedStyle(\\n          inputRef.current!\\n        ).getPropertyValue(\\"--primary\\");\\n        const color = new Color(primaryColor);\\n        const hex = color.to(\\"srgb\\").toString({ format: \\"hex\\" });\\n        const filter = CssFilterConverter.hexToFilter(hex);\\n\\n        if (!styleRef.current) {\\n          styleRef.current = document.createElement(\\"style\\");\\n          document.head.appendChild(styleRef.current);\\n        }\\n\\n        styleRef.current.textContent = \\\\`\\n          input[type=\\"search\\"]::-webkit-search-cancel-button {\\n            filter: \\\\${filter.color};\\n          }\\n        \\\\`;\\n      } catch (error) {\\n        console.error(\\"Failed to update search button style:\\", error);\\n      }\\n    };\\n\\n    updateSearchButtonStyle();\\n\\n    const observer = new MutationObserver((mutations) => {\\n      mutations.forEach(() => {\\n        updateSearchButtonStyle();\\n      });\\n    });\\n\\n    // Observe the root element for style changes\\n    observer.observe(document.documentElement, {\\n      attributes: true,\\n      attributeFilter: [\\"style\\"],\\n    });\\n\\n    return () => {\\n      observer.disconnect();\\n      if (styleRef.current) {\\n        document.head.removeChild(styleRef.current);\\n        styleRef.current = null;\\n      }\\n    };\\n  }, [type]);\\n\\n  const isSearch = type === \\"search\\";\\n  return (\\n    <div data-slot=\\"input-container\\" className=\\"relative w-full\\">\\n      <input\\n        ref={inputRef}\\n        type={type}\\n        data-slot=\\"input\\"\\n        className={cn(\\n          \\"peer border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive flex h-10 w-full min-w-0 rounded-md border bg-card pr-3 py-1 text-base shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-[3px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4\\",\\n          isSearch ? \\"pl-10\\" : \\"pl-3\\",\\n          className\\n        )}\\n        {...props}\\n      />\\n      {isSearch && (\\n        <Search\\n          size={20}\\n          className=\\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground bg-card peer-focus:text-foreground\\"\\n        />\\n      )}\\n    </div>\\n  );\\n}\\n\\nexport { Input };\\n`,__src__:\\"registry/default/ui/input.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" Color \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"colorjs.io\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" CssFilterConverter \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"css-filter-converter\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Search } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Input\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"type\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"input\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">) {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" inputRef\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"useRef\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLInputElement\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" styleRef\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"useRef\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLStyleElement\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  React.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"useEffect\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"inputRef.current \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" type \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"!==\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"search\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" updateSearchButtonStyle\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"      try\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"        const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" primaryColor\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" getComputedStyle\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          inputRef.current\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"!\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        ).\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"getPropertyValue\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"--primary\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"        const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" color\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Color\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(primaryColor);\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"        const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" hex\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" color.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"to\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"srgb\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\").\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"toString\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ format: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"hex\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" });\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"        const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" filter\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" CssFilterConverter.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"hexToFilter\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(hex);\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"        if\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"styleRef.current) {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          styleRef.current \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" document.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"createElement\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E

18\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"style\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          document.head.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"appendChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(styleRef.current);\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        styleRef.current.textContent \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" `\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          input[type=\\"search\\"]::-webkit-search-cancel-button {\'})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"            filter: ${\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"filter\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\".\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"color\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"};\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"          }\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"        `\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"catch\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (error) {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        console.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"error\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Failed to update search button style:\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", error);\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    };\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"    updateSearchButtonStyle\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" observer\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" MutationObserver\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"mutations\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      mutations.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"forEach\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        updateSearchButtonStyle\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      });\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    });\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#6A737D\\"},children:\\"    // Observe the root element for style changes\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    observer.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"observe\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(document.documentElement, {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      attributes: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      attributeFilter: [\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"style\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"],\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    });\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"    return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      observer.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"disconnect\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"      if\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (styleRef.current) {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        document.head.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"removeChild\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(styleRef.current);\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        styleRef.current \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    };\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [type]);\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" isSearch\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" type \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"search\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"input-container\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"relative w-full\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"input\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        ref\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{inputRef}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        type\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{type}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"input\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"peer border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive flex h-10 w-full min-w-0 rounded-md border bg-card pr-3 py-1 text-base shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-[3px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          isSearch \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"pl-10\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" :\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"pl-3\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          className\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      />\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {isSearch \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Search\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          size\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"20\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground bg-card peer-focus:text-foreground\\"\'})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Input };\\"})]})]})})})}),(0,n.jsx)(r,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"examples\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"search-input\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#search-input\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Search input\\"]}),`\\n`,(0,n.jsx)(s,{name:\\"input-search-demo\\",description:\\"A search input\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Input } from \\"@/components/ui/input\\";\\n\\nexport function Inpu

1tSearchDemo() {\\n  return (\\n    <div>\\n      <Input type=\\"search\\" placeholder=\\"Search...\\" />\\n    </div>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/input-search-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Input } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/input\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" InputSearchDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Input\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" type\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"search\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" placeholder\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Search...\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function F(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(m,{...l})}):m(l)}function c(l,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+l+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return _(R);})();\\n;return Component;"},"_id":"docs/components/input.mdx","_raw":{"sourceFilePath":"docs/components/input.mdx","sourceFileName":"input.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/input"},"type":"Doc","slug":"/docs/components/input","slugAsParams":"components/input"},{"title":"Profile Avatar Button","description":"A profile element which contains profile avatar, profile name and profile DID.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"profile-avatar-button-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar-button.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Add the following custom icons.</Step>\\n\\n<ComponentSource name=\\"did-key\\" />\\n\\n<ComponentSource name=\\"ethereum\\" />\\n\\n<ComponentSource name=\\"no-eth\\" />\\n\\n<ComponentSource name=\\"solana\\" />\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"profile-avatar-button\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  ProfileAvatarButton,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n  ProfileDidField,\\n  ProfileName,\\n} from \\"<path-to-ui-components>/profile-avatar-button\\";\\n```\\n\\n```tsx\\n<ProfileAvatarButton profileDID=\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\">\\n  <ProfileAvatarButtonAvatar>\\n    <ProfileAvatarButtonAvatarImage\\n      src=\\"https://github.com/akashaorg.png\\"\\n      alt=\\"@akashaorg\\"\\n    />\\n    <ProfileAvatarButtonAvatarFallback />\\n  </ProfileAvatarButtonAvatar>\\n  <ProfileName>coffeelover</ProfileName>\\n  <ProfileDidField />\\n</ProfileAvatarButton>\\n```\\n\\n## Props\\n\\n| Name       | Type                | Description                                                                                    |\\n| ---------- | ------------------- | ---------------------------------------------------------------------------------------------- |\\n| profileDID | `string`            | DID of a profile.                                                                              |\\n| size       | `sm`, `md`, or `lg` | Component sizes.                                                                               |\\n| nsfw       | `boolean`           | Not safe for work.                                                                             |\\n| nsfwLabel  | `string`            | Not safe for work label.                                                                       |\\n| vertical   | `boolean`           | Positions the profile avatar above other components, applicable only when the `size` is large. |\\n| metadata   | `ReactNode`         | Metadata element.                                                                              |\\n\\n## Examples\\n\\n### Large vertical\\n\\n<ComponentPreview name=\\"profile-avatar-button-large-vertical\\" />\\n\\n### Large horizontal\\n\\n<ComponentPreview name=\\"profile-avatar-button-large-horizontal\\" />\\n\\n### Medium\\n\\n<ComponentPreview name=\\"profile-avatar-button-medium\\" />\\n\\n### Small\\n\\n<ComponentPreview name=\\"profile-avatar-button-small\\" />\\n\\n### Metadata\\n\\n<ComponentPreview name=\\"profile-avatar-button-metadata\\" />\\n\\n### Not safe for work(NSFW)\\n\\n<ComponentPreview name=\\"profile-avatar-button-nsfw\\" />\\n","code":"var Component=(()=>{var f=Object.create;var o=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var A=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),P=(e,n)=>{for(var s in n)o(e,s,{get:n[s],enumerable:!0})},E=(e,n,s,a)=>{if(n&&typeof n==\\"object\\"||typeof n==\\"function\\")for(let r of u(n))!g.call(e,r)&&r!==s&&o(e,r,{get:()=>n[r],enumerable:!(a=N(n,r))||a.enumerable});return e};var C=(e,n,s)=>(s=e!=null?f(v(e)):{},E(n||!e||!e.__esModule?o(s,\\"default\\",{value:e,enumerable:!0}):s,e)),b=e=>E(o({},\\"__esModule\\",{value:!0}),e);var F=A((_,y)=>{y.exports=_jsx_runtime});var x={};P(x,{default:()=>B,frontmatter:()=>D});var l=C(F()),D={title:\\"Profile Avatar Button\\",description:\\"A profile element which contains profile avatar, profile name and profile DID.\\",component:!0};function m(e){let n={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...e.components},{ComponentPreview:s,ComponentSource:a,Step:r,Steps:d,Tabs:p,TabsContent:i,TabsList:h,TabsTrigger:t}=n;return s||c(\\"ComponentPreview\\",!0),a||c(\\"ComponentSource\\",!0),r||c(\\"Step\\",!0),d||c(\\"Steps\\",!0),p||c(\\"Tabs\\",!0),i||c(\\"TabsContent\\",!0),h||c(\\"TabsList\\",!0),t||c(\\"TabsTrigger\\",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s,{name:\\"profile-avatar-button-demo\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatarButton,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n  ProfileDidField,\\n  ProfileName,\\n} from \\"@/components/ui/profile-avatar-button\\";\\n\\nexport function ProfileAvatarButtonDemo() {\\n  return (\\n    <ProfileAvatarButton profileDID=\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\">\\n      <ProfileAvatarButtonAvatar>\\n        <ProfileAvatarButtonAvatarImage\\n          src=\\"https://github.com/akashaorg.png\\"\\n          alt=\\"@akashaorg\\"\\n        />\\n        <ProfileAvatarButtonAvatarFallback />\\n      </ProfileAvatarButtonAvatar>\\n      <ProfileName>CoffeeLover</ProfileName>\\n      <ProfileDidField />\\n    </ProfileAvatarButton>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/profile-avatar-button-demo.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatar,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarImage,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileName,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar-button\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarButtonDemo\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarImage\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          src\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          alt\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarFallback\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">CoffeeLover</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileDidField\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(n.h2,{id:\\"installation\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,l.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,l.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,l.jsx)(i,{value:\\"cli\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar-button.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar-button.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar-button.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar-button.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar-button.json\\"\\n`,children:(0,l.jsx)(n.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar-button.json\\"\'})]})})})})}),(0,l.jsx)(i,{value:\\"manual\\",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(r,{children:\\"Add the following custom icons.\\"}),(0,l.jsx)(a,{name:\\"did-key\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import React from \\"react\\";\\nimport { LucideProps } from \\"lucide-react\\";\\n\\nexport const DidKey = (props: LucideProps) => (\\n  <svg\\n    xmlns=\\"http://www.w3.org/2000/svg\\"\\n    width=\\"24\\"\\n    height=\\"24\\"\\n    viewBox=\\"0 0 24 24\\"\\n    fill=\\"none\\"\\n    stroke=\\"currentColor\\"\\n    strokeWidth=\\"2\\"\\n    strokeLinecap=\\"round\\"\\n    strokeLinejoin=\\"round\\"\\n    {...props}\\n  >\\n    <path d=\\"M16.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z\\" />\\n    <path d=\\"M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4l-6.814 6.814Z\\" />\\n    <path d=\\"M16.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z\\" />\\n  </svg>\\n);\\n`,__src__:\\"registry/default/custom-icons/did-key.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { LucideProps } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" DidKey\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" LucideProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"svg\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    xmlns\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"http://www.w3.org/2000/svg\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    width\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    height\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"}

1,children:\\"    viewBox\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"0 0 24 24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    fill\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"none\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    stroke\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"currentColor\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeWidth\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"2\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeLinecap\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeLinejoin\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"path\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" d\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"M16.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"path\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" d\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4l-6.814 6.814Z\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"path\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" d\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"M16.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"svg\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})})]})})})}),(0,l.jsx)(a,{name:\\"ethereum\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import React from \\"react\\";\\nimport { LucideProps } from \\"lucide-react\\";\\n\\nexport const Ethereum = (props: LucideProps) =>

1 (\\n  <svg\\n    xmlns=\\"http://www.w3.org/2000/svg\\"\\n    width=\\"24\\"\\n    height=\\"24\\"\\n    viewBox=\\"0 0 24 24\\"\\n    fill=\\"none\\"\\n    strokeWidth=\\"2\\"\\n    strokeLinecap=\\"round\\"\\n    strokeLinejoin=\\"round\\"\\n    {...props}\\n  >\\n    <path\\n      d=\\"M11.9999 16.4904V1.6001L5.5 12.606L11.9999 16.4904Z\\"\\n      fill=\\"#FFE644\\"\\n    />\\n    <path\\n      d=\\"M11.9999 1.6001L18.5 12.606L11.9999 16.4904V1.6001Z\\"\\n      fill=\\"#EC7463\\"\\n    />\\n    <path d=\\"M5.5 13.4421L11.9999 17.3263V22.3507\\" fill=\\"#009ECB\\" />\\n    <path d=\\"M18.5 13.4421L11.9999 17.3263V22.3507\\" fill=\\"#4D68AE\\" />\\n    <path\\n      d=\\"M11.9999 8.72216L5.5 12.606L11.9999 16.4904V8.72216Z\\"\\n      fill=\\"#57A759\\"\\n    />\\n    <path\\n      d=\\"M11.9999 8.72216L18.5 12.606L11.9999 16.4904V8.72216Z\\"\\n      fill=\\"#8E5298\\"\\n    />\\n  </svg>\\n);\\n`,__src__:\\"registry/default/custom-icons/ethereum.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { LucideProps } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" Ethereum\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" LucideProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"svg\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    xmlns\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"http://www.w3.org/2000/svg\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    width\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    height\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    viewBox\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"0 0 24 24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    fill\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"none\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeWidth\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"2\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeLinecap\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeLinejoin\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"path\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      d\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"M11.9999 16.4904V1.6001L5.5 12.606L11.9999 16.4904Z\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      fill\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"#FFE644\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"path\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      d\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"M11.9999 1.6001L18.5 12.606L11.9999 16.4904V1.6001Z\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      fill\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"#EC7463\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"path\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" d\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"M5.5 13.4421L11.9999 17.3263V22.3507\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" fill\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"#009ECB\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"path\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" d\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"M18.5 13.4421L11.9999 17.3263V22.3507\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" fill\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"#4D68AE\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"path\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      d\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"M11.9999 8.72216L5.5 12.606L11.9999 16.4904V8.72216Z\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      fill\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"#57A759\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"path\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      d\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"M11.9999 8.72216L18.5 12.606L11.9999 16.4904V8.72216Z\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      fill\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"#8E5298\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"svg\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})})]})})})}),(0,l.jsx)(a,{name:\\"no-eth\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import React from \\"react\\";\\nimport { LucideProps } from \\"lucide-react\\";\\n\\nexport const NoEth = (props: LucideProps) =>

1 (\\n  <svg\\n    xmlns=\\"http://www.w3.org/2000/svg\\"\\n    width=\\"24\\"\\n    height=\\"24\\"\\n    viewBox=\\"0 0 24 24\\"\\n    fill=\\"none\\"\\n    stroke=\\"currentColor\\"\\n    strokeWidth=\\"2\\"\\n    strokeLinecap=\\"round\\"\\n    strokeLinejoin=\\"round\\"\\n    {...props}\\n  >\\n    <path d=\\"M17.849 6.19c2.01-.37 3.49-.21 3.98.573 1.01 1.616-2.57 5.27-7.998 8.163-5.428 2.892-10.65 3.927-11.66 2.31-.533-.852.21-2.27 1.829-3.846M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z\\" />\\n  </svg>\\n);\\n`,__src__:\\"registry/default/custom-icons/no-eth.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { LucideProps } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" NoEth\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" LucideProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"svg\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    xmlns\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"http://www.w3.org/2000/svg\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    width\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    height\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    viewBox\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"0 0 24 24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    fill\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"none\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    stroke\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"currentColor\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeWidth\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"2\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeLinecap\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeLinejoin\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"path\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" d\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"M17.849 6.19c2.01-.37 3.49-.21 3.98.573 1.01 1.616-2.57 5.27-7.998 8.163-5.428 2.892-10.65 3.927-11.66 2.31-.533-.852.21-2.27 1.829-3.846M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"svg\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})})]})})})}),(0,l.jsx)(a,{name:\\"solana\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import React from \\"react\\";\\nimport { LucideProps } from \\"lucide-react\\";\\n\\nexport const Solana = (props: LucideProps) =>

1 (\\n  <svg\\n    xmlns=\\"http://www.w3.org/2000/svg\\"\\n    width=\\"24\\"\\n    height=\\"24\\"\\n    viewBox=\\"0 0 24 24\\"\\n    fill=\\"none\\"\\n    stroke=\\"currentColor\\"\\n    strokeWidth=\\"2\\"\\n    strokeLinecap=\\"round\\"\\n    strokeLinejoin=\\"round\\"\\n    {...props}\\n  >\\n    <path d=\\"m22 14-5 5H2l5-5m15 0H7m15 0-5-5M7 14 2 9m0 0h15M2 9l5-5h15l-5 5\\" />\\n  </svg>\\n);\\n`,__src__:\\"registry/default/custom-icons/solana.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { LucideProps } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" Solana\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" LucideProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"svg\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    xmlns\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"http://www.w3.org/2000/svg\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    width\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    height\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    viewBox\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"0 0 24 24\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    fill\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"none\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    stroke\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"currentColor\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeWidth\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"2\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeLinecap\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    strokeLinejoin\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"round\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"path\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" d\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"m22 14-5 5H2l5-5m15 0H7m15 0-5-5M7 14 2 9m0 0h15M2 9l5-5h15l-5 5\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"svg\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})})]})})})}),(0,l.jsx)(r,{children:\\"Copy and paste the following code into your project.\\"}),(0,l.jsx)(a,{name:\\"profile-avatar-button\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport { z } from \\"zod\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { DidKey } from \\"@/components/custom-icons/did-key\\";\\nimport { Ethereum } from \\"@/components/custom-icons/ethereum\\";\\nimport { NoEth } from \\"@/components/custom-icons/no-eth\\";\\nimport { Solana } from \\"@/components/custom-icons/solana\\";\\nimport { IconContainer } from \\"@/components/ui/icon-container\\";\\nimport {\\n  ProfileAvatarFallback,\\n  ProfileAvatarImage,\\n  ProfileAvatar as ProfileAvatarRoot,\\n} from \\"@/components/ui/profile-avatar\\";\\nimport { Stack } from \\"@/components/ui/stack\\";\\nimport { Typography } from \\"@/components/ui/typography\\";\\n\\ntype ProfileAvatarButtonSize = \\"sm\\" | \\"lg\\" | \\"md\\";

1\\n\\nconst DID_SCHEMA = z\\n  .string()\\n  .min(5)\\n  .refine((x: string) => x.startsWith(\\"did:\\"));\\n\\nconst ProfileAvatarButtonContext = React.createContext<{\\n  profileDID: string;\\n  size: ProfileAvatarButtonSize;\\n  nsfw: boolean;\\n  nsfwLabel: string;\\n  metadata: React.ReactNode;\\n  vertical: boolean;\\n} | null>(null);\\n\\nconst useProfileAvatarButtonContext = () => {\\n  const context = React.useContext(ProfileAvatarButtonContext);\\n  if (!context) {\\n    throw new Error(\\n      \\"\\\\`useProfileAvatarButtonContext\\\\` must be used within \\\\`ProfileAvatarButton\\\\`\\"\\n    );\\n  }\\n  return context;\\n};\\n\\nconst truncateMiddle = (str: string, startChars = 6, endChars = 4) =>\\n  str\\n    ? \\\\`\\\\${str.substring(0, startChars)}...\\\\${str.substring(\\n        str.length - endChars\\n      )}\\\\`\\n    : \\"\\";\\n\\nconst truncateDid = (didKey: string, type = \\"ethereum\\") => {\\n  if (!didKey) return \\"\\";\\n  if (didKey.length <= 12) return didKey;\\n  const address = didKey.split(\\":\\").pop() || \\"\\";\\n  return truncateMiddle(\\n    address,\\n    type === \\"ethereum\\" || type === \\"solana\\" ? 6 : 5,\\n    6\\n  );\\n};\\n\\nconst getDidFieldIconType = (didKey: string) => {\\n  if (didKey.includes(\\"eip155\\")) return \\"ethereum\\";\\n  return didKey.includes(\\"solana\\") ? \\"solana\\" : \\"did\\";\\n};\\n\\nconst ProfileAvatarButton = ({\\n  profileDID = \\"\\",\\n  nsfw = false,\\n  nsfwLabel = \\"\\",\\n  metadata,\\n  children,\\n  size = \\"md\\",\\n  vertical = false,\\n  className,\\n  ...props\\n}: {\\n  profileDID?: string;\\n  nsfw?: boolean;\\n  nsfwLabel?: string;\\n  metadata?: React.ReactNode;\\n} & (\\n  | { size?: Exclude<ProfileAvatarButtonSize, \\"lg\\">; vertical?: false }\\n  | {\\n      size?: \\"lg\\";\\n      vertical?: true;\\n    }\\n) &\\n  React.ComponentProps<\\"div\\">) => {\\n  const childrenArray = React.Children.toArray(children);\\n  const childCount = childrenArray.length;\\n  return (\\n    <ProfileAvatarButtonContext.Provider\\n      value={{ profileDID, nsfw, nsfwLabel, size, metadata, vertical }}\\n    >\\n      <div\\n        data-slot=\\"profile-avatar-button\\"\\n        className={cn(\\n          \\"group flex items-center gap-x-2 gap-y-1 group/profile-avatar-button\\",\\n          childCount > 2 && {\\n            \\"flex flex-col items-center\\": size === \\"lg\\" && vertical,\\n            \\"grid grid-cols-[auto_1fr]\\":\\n              (size === \\"md\\" || size === \\"lg\\") && !vertical,\\n            \\"flex items-center\\": size === \\"sm\\",\\n          },\\n          className\\n        )}\\n        {...props}\\n      >\\n        {children}\\n      </div>\\n    </ProfileAvatarButtonContext.Provider>\\n  );\\n};\\n\\nconst sizeMap = { lg: \\"xl\\", md: \\"lg\\", sm: \\"xs\\" } as const;\\n\\nconst ProfileAvatar = ({\\n  className,\\n  ...props\\n}: Omit<React.ComponentProps<typeof ProfileAvatarRoot>, \\"size\\">) => {\\n  const { profileDID, size, nsfw, vertical } = useProfileAvatarButtonContext();\\n  return (\\n    <ProfileAvatarRoot\\n      data-slot=\\"profile-avatar\\"\\n      profileDID={profileDID}\\n      size={sizeMap[size]}\\n      nsfw={nsfw}\\n      className={cn(\\n        {\\n          \\"self-center row-span-2\\":\\n            size === \\"md\\" || (size === \\"lg\\" && !vertical),\\n        },\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst ProfileName = ({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<\\"div\\">) => {\\n  const { size, vertical, nsfw, nsfwLabel, metadata } =\\n    useProfileAvatarButtonContext();\\n  return (\\n    size && (\\n      <Stack\\n        data-slot=\\"profile-name\\"\\n        direction=\\"row\\"\\n        alignItems=\\"center\\"\\n        spacing={1}\\n        className={cn({\\n          \\"self-end\\": size === \\"lg\\" && !vertical,\\n          \\"justify-self-start\\": size === \\"md\\" || (size === \\"lg\\" && !vertical),\\n        })}\\n        {...props}\\n      >\\n        <Typography\\n          variant={size === \\"sm\\" ? \\"xs\\" : \\"sm\\"}\\n          bold={size !== \\"sm\\"}\\n          className={\\\\`group-hover/profile-avatar-button:underline group-hover/profile-avatar-button:decoration-black dark:group-hover/profile-avatar-button:decoration-white \\\\${className}\\\\`}\\n        >\\n          {children}\\n        </Typography>\\n        {nsfw && size !== \\"sm\\" && (\\n          <Typography\\n            data-slot=\\"nsfw-label\\"\\n            variant=\\"xs\\"\\n            bold={true}\\n            className=\\"text-destructive\\"\\n          >\\n            {nsfwLabel}\\n          </Typography>\\n        )}\\n        {metadata}\\n      </Stack>\\n    )\\n  );\\n};\\n\\nconst didNetworkIconMapping = {\\n  ethereum: <Ethereum />,\\n  solana: <Solana />,\\n  did: <DidKey />,\\n};\\n\\nconst ProfileDidField = ({ className }: React.ComponentProps<\\"div\\">) => {\\n  const { profileDID, size, vertical } = useProfileAvatarButtonContext();\\n  const networkType = getDidFieldIconType(profileDID);\\n  const { success: isValidDID } = DID_SCHEMA.safeParse(profileDID);\\n\\n  return (\\n    <Stack\\n      data-slot=\\"profile-did-field\\"\\n      direction=\\"row\\"\\n      spacing={1.5}\\n      alignItems=\\"center\\"\\n      className={cn(\\n        \\"h-4\\",\\n        {\\n          \\"col-start-2\\": size === \\"md\\" || (size === \\"lg\\" && !vertical),\\n        },\\n        className\\n      )}\\n    >\\n      <IconContainer size=\\"xs\\" className=\\"text-secondary-foreground\\">\\n        {isValidDID || profileDID.startsWith(\\"k\\") ? (\\n          didNetworkIconMapping[networkType]\\n        ) : (\\n          <NoEth />

1\\n        )}\\n      </IconContainer>\\n      <Typography variant=\\"xs\\" className=\\"text-secondary-foreground\\">\\n        {isValidDID || profileDID.startsWith(\\"k\\")\\n          ? truncateDid(profileDID, networkType)\\n          : \\"Invalid DID\\"}{\\" \\"}\\n      </Typography>\\n    </Stack>\\n  );\\n};\\n\\nconst ProfileAvatarButtonAvatar = ProfileAvatar;\\nconst ProfileAvatarButtonAvatarFallback = ProfileAvatarFallback;\\nconst ProfileAvatarButtonAvatarImage = ProfileAvatarImage;\\n\\nexport {\\n  ProfileAvatarButton,\\n  ProfileName,\\n  ProfileDidField,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n};\\n`,__src__:\\"registry/default/ui/profile-avatar-button.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { z } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"zod\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { DidKey } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/custom-icons/did-key\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Ethereum } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/custom-icons/ethereum\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { NoEth } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/custom-icons/no-eth\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Solana } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/custom-icons/solana\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { IconContainer } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/icon-container\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarImage,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatar \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ProfileAvatarRoot,\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stack } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/stack\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarButtonSize\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sm\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lg\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"md\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" DID_SCHEMA\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" z\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  .\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"()\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  .\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"min\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"5\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\")\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  .\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"refine\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"x\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" x.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"startsWith\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"));\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" ProfileAvatarButtonContext\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"createContext\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarButtonSize\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  nsfw\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  nsfwLabel\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  metadata\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ReactNode\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  vertical\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"|\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" useProfileAvatarButtonContext\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" context\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(ProfileAvatarButtonContext);\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"context) {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"`useProfileAvatarButtonContext` must be used within `ProfileAvatarButton`\\"\'})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" context;\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" truncateMiddle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"str\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"startChars\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" 6\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"endChars\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" 4\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"})

1,(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  str\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    ?\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"str\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"substring\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"0\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"startChars\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\")\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}...${\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"str\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"substring\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        str\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" -\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" endChars\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"      )\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}`\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"    :\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" truncateDid\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"didKey\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"type\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"ethereum\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"didKey) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (didKey.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" <=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" 12\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" didKey;\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" address\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" didKey.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"split\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\":\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\").\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"pop\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" truncateMiddle\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    address,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    type \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"ethereum\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" ||\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" type \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"solana\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" ?\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" 6\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" :\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" 5\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"    6\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" getDidFieldIconType\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"didKey\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (didKey.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"includes\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"eip155\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\")) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"ethereum\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" didKey.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"includes\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"solana\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"solana\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" :\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"did\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  profileDID \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  nsfw \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  nsfwLabel \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  metadata,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"md\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  vertical \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  nsfw\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  nsfwLabel\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"  metadata\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ReactNode\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  |\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" Exclude\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ProfileAvatarButtonSize\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"lg\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">; \\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"vertical\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  |\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"      size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lg\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"      vertical\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" true\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},childre

1n:\\"  React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" childrenArray\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.Children.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"toArray\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(children);\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" childCount\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" childrenArray.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonContext.Provider\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      value\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{ profileDID, nsfw, nsfwLabel, size, metadata, vertical }}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"profile-avatar-button\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"group flex items-center gap-x-2 gap-y-1 group/profile-avatar-button\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          childCount \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\">\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" 2\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"flex flex-col items-center\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\": size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lg\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" vertical,\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"grid grid-cols-[auto_1fr]\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\":\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"              (size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"md\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" ||\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lg\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" !\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"vertical,\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"flex items-center\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\": size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sm\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          },\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          className\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {children}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonContext.Provider\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" sizeMap\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { lg: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xl\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", md: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"lg\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", sm: \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" Omit\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ProfileAvatarRoot>, \\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"nsfw\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"vertical\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" useProfileAvatarButtonContext\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarRoot\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"profile-avatar\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{profileDID}\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{sizeMap[size]}\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      nsfw\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{nsfw}\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"self-center row-span-2\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\":\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"md\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" ||\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lg\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" !\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"vertical),\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        },\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",child

1ren:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"vertical\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"nsfw\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"nsfwLabel\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"metadata\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"    useProfileAvatarButtonContext\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"profile-name\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        direction\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"row\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        alignItems\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"center\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        spacing\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"1\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"self-end\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\": size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lg\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" !\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"vertical,\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"justify-self-start\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\": size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"md\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" ||\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lg\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" !\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"vertical),\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        })}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          variant\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sm\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" ?\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"xs\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" :\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sm\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          bold\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"!==\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sm\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"`group-hover/profile-avatar-button:underline group-hover/profile-avatar-button:decoration-black dark:group-hover/profile-avatar-button:decoration-white ${\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\\"}`\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          {children}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {nsfw \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"!==\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sm\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"            data-slot\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"nsfw-label\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"            variant\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"            bold\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"            className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-destructive\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          >\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"            {nsfwLabel}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {metadata}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    )\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" didNetworkIconMapping\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ethereum: <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Ethereum\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  solana: <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Solana\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  did: <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"DidKey\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileDidField\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({ \\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"vertical\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" useProfileAvatarButtonContext\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" networkType\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" getDidFieldIconType\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(profileDID);\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,l.jsx)(n.span,{style:{color:\\"#FFAB70\\"},children:\\"success\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\": \\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\

1\"isValidDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" DID_SCHEMA\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"safeParse\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(profileDID);\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"profile-did-field\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      direction\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"row\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      spacing\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"1.5\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      alignItems\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"center\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"h-4\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"col-start-2\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\": size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"md\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" ||\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (size \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lg\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" !\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"vertical),\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        },\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-secondary-foreground\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {isValidDID \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" profileDID.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"startsWith\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"k\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          didNetworkIconMapping[networkType]\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        ) \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"NoEth\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"IconContainer\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-secondary-foreground\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {isValidDID \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" profileDID.\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"startsWith\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"k\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\")\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"          ?\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" truncateDid\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"(profileDID, networkType)\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"          :\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"Invalid DID\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}{\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\" \\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ProfileAvatar;\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" ProfileAvatarButtonAvatarFallback\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ProfileAvatarFallback;\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\" ProfileAvatarButtonAvatarImage\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" ProfileAvatarImage;\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileName,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatar,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarImage,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})})]})})})}),(0,l.jsx)(r,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,l.jsxs)(n.h2,{id:\\"usage\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatarButton,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n  ProfileDidField,\\n  ProfileName,\\n} from \\"<path-to-ui-components>/profile-avatar-button\\";\\n`,children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatar,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarImage,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileName,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/profile-avatar-button\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<ProfileAvatarButton profileDID=\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\">\\n  <ProfileAvatarButtonAvatar>\\n    <ProfileAvatarButtonAvatarImage\\n      src=\\"https://github.com/akashaorg.png\\"\\n      alt=\\"@akashaorg\\"\\n    />\\n    <ProfileAvatarButtonAvatarFallback />\\n  </ProfileAvatarButtonAvatar>\\n  <ProfileName>coffeelover</ProfileName>\\n  <ProfileDidField />\\n</ProfileAvatarButton>

1\\n`,children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarImage\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      src\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      alt\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarFallback\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">coffeelover</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileDidField\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,l.jsxs)(n.h2,{id:\\"props\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:\\"Name\\"}),(0,l.jsx)(n.th,{children:\\"Type\\"}),(0,l.jsx)(n.th,{children:\\"Description\\"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:\\"profileDID\\"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:\\"string\\"})}),(0,l.jsx)(n.td,{children:\\"DID of a profile.\\"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:\\"size\\"}),(0,l.jsxs)(n.td,{children:[(0,l.jsx)(n.code,{children:\\"sm\\"}),\\", \\",(0,l.jsx)(n.code,{children:\\"md\\"}),\\", or \\",(0,l.jsx)(n.code,{children:\\"lg\\"})]}),(0,l.jsx)(n.td,{children:\\"Component sizes.\\"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:\\"nsfw\\"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:\\"boolean\\"})}),(0,l.jsx)(n.td,{children:\\"Not safe for work.\\"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:\\"nsfwLabel\\"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:\\"string\\"})}),(0,l.jsx)(n.td,{children:\\"Not safe for work label.\\"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:\\"vertical\\"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:\\"boolean\\"})}),(0,l.jsxs)(n.td,{children:[\\"Positions the profile avatar above other components, applicable only when the \\",(0,l.jsx)(n.code,{children:\\"size\\"}),\\" is large.\\"]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:\\"metadata\\"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:\\"ReactNode\\"})}),(0,l.jsx)(n.td,{children:\\"Metadata element.\\"})]})]})]}),`\\n`,(0,l.jsxs)(n.h2,{id:\\"examples\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,l.jsxs)(n.h3,{id:\\"large-vertical\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#large-vertical\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Large vertical\\"]}),`\\n`,(0,l.jsx)(s,{name:\\"profile-avatar-button-large-vertical\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatarButton,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n  ProfileDidField,\\n  ProfileName,\\n} from \\"@/components/ui/profile-avatar-button\\";\\n\\nexport function ProfileAvatarButtonLargeVertical() {\\n  return (\\n    <ProfileAvatarButton\\n      size=\\"lg\\"\\n      profileDID=\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\\n      vertical\\n    >\\n      <ProfileAvatarButtonAvatar>\\n        <ProfileAvatarButtonAvatarImage\\n          src=\\"https://github.com/akashaorg.png\\"\\n          alt=\\"@akashaorg\\"\\n        />\\n        <ProfileAvatarButtonAvatarFallback />\\n      </ProfileAvatarButtonAvatar>\\n      <ProfileName>CoffeeLover</ProfileName>\\n      <ProfileDidField />\\n    </ProfileAvatarButton>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/profile-avatar-button-large-vertical.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatar,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarImage,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileName,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar-button\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarButtonLargeVertical\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"lg\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      vertical\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarImage\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          src\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          alt\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarFallback\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">CoffeeLover</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileDidField\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(n.h3,{id:\\"large-horizontal\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#large-horizontal\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Large horizontal\\"]}),`\\n`,(0,l.jsx)(s,{name:\\"profile-avatar-button-large-horizontal\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatarButton,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n  ProfileDidField,\\n  ProfileName,\\n} from \\"@/components/ui/profile-avatar-button\\";\\n\\nexport function ProfileAvatarButtonLargeHorizontal() {\\n  return (\\n    <ProfileAvatarButton\\n      size=\\"lg\\"\\n      profileDID=\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\\n    >\\n      <ProfileAvatarButtonAvatar>\\n        <ProfileAvatarButtonAvatarImage\\n          src=\\"https://github.com/akashaorg.png\\"\\n          alt=\\"@akashaorg\\"\\n        />\\n        <ProfileAvatarButtonAvatarFallback />\\n      </ProfileAvatarButtonAvatar>\\n      <ProfileName>CoffeeLover</ProfileName>\\n      <ProfileDidField />\\n    </ProfileAvatarButton>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/profile-avatar-button-large-horizontal.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatar,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarImage,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileName,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar-button\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarButtonLargeHorizontal\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"lg\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarImage\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          src\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          alt\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarFallback\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">CoffeeLover</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileDidField\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(n.h3,{id:\\"medium\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#medium\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Medium\\"]}

1),`\\n`,(0,l.jsx)(s,{name:\\"profile-avatar-button-medium\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatarButton,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n  ProfileDidField,\\n  ProfileName,\\n} from \\"@/components/ui/profile-avatar-button\\";\\n\\nexport function ProfileAvatarButtonMedium() {\\n  return (\\n    <ProfileAvatarButton\\n      profileDID=\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\\n      size=\\"md\\"\\n    >\\n      <ProfileAvatarButtonAvatar>\\n        <ProfileAvatarButtonAvatarImage\\n          src=\\"https://github.com/akashaorg.png\\"\\n          alt=\\"@akashaorg\\"\\n        />\\n        <ProfileAvatarButtonAvatarFallback />\\n      </ProfileAvatarButtonAvatar>\\n      <ProfileName>CoffeeLover</ProfileName>\\n      <ProfileDidField />\\n    </ProfileAvatarButton>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/profile-avatar-button-medium.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatar,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarImage,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileName,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar-button\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarButtonMedium\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"md\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarImage\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          src\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          alt\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarFallback\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">CoffeeLover</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileDidField\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(n.h3,{id:\\"small\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#small\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Small\\"]}),`\\n`,(0,l.jsx)(s,{name:\\"profile-avatar-button-small\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatarButton,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n  ProfileDidField,\\n  ProfileName,\\n} from \\"@/components/ui/profile-avatar-button\\";\\n\\nexport function ProfileAvatarButtonSmall() {\\n  return (\\n    <ProfileAvatarButton\\n      profileDID=\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\\n      size=\\"sm\\"\\n    >\\n      <ProfileAvatarButtonAvatar>\\n        <ProfileAvatarButtonAvatarImage\\n          src=\\"https://github.com/akashaorg.png\\"\\n          alt=\\"@akashaorg\\"\\n        />\\n        <ProfileAvatarButtonAvatarFallback />\\n      </ProfileAvatarButtonAvatar>\\n      <ProfileName>CoffeeLover</ProfileName>\\n      <ProfileDidField />\\n    </ProfileAvatarButton>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/profile-avatar-button-small.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatar,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarImage,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileName,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar-button\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarButtonSmall\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sm\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarImage\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          src\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          alt\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarFallback\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">CoffeeLover</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileDidField\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(n.h3,{id:\\"metadata\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#metadata\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Metadata\\"]}),`\\n`,(0,l.jsx)(s,{name:\\"profile-avatar-button-metadata\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatarButton,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n  ProfileDidField,\\n  ProfileName,\\n} from \\"@/components/ui/profile-avatar-button\\";\\nimport { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function ProfileAvatarButtonMetadata() {\\n  return (\\n    <ProfileAvatarButton\\n      size=\\"md\\"\\n      profileDID=\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\\n      metadata={\\n        <Typography variant=\\"xs\\" className=\\"text-muted-foreground\\">\\n          \\\\xB7 5 mins ago\\n        </Typography>\\n      }\\n    >\\n      <ProfileAvatarButtonAvatar>\\n        <ProfileAvatarButtonAvatarImage\\n          src=\\"https://github.com/akashaorg.png\\"\\n          alt=\\"@akashaorg\\"\\n        />\\n        <ProfileAvatarButtonAvatarFallback />\\n      </ProfileAvatarButtonAvatar>\\n      <ProfileName>CoffeeLover</ProfileName>\\n      <ProfileDidField />\\n    </ProfileAvatarButton>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/profile-avatar-button-metadata.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatar,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarImage,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileName,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar-button\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarButtonMetadata\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"md\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      metadata\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-muted-foreground\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"          \\\\xB7 5 mins ago\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarImage\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          src\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          alt\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarFallback\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">CoffeeLover</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileDidField\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(n.h3,{id:\\"not-safe-for-worknsfw\\",children:[(0,l.jsx)(n.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#not-safe-for-worknsfw\\",children:(0,l.jsx)(n.span,{className:\\"icon icon-link\\"})}),\\"Not safe for work(NSFW)\\"]}),`\\n`,(0,l.jsx)(s,{name:\\"profile-avatar-button-nsfw\\",children:(0,l.jsx)(n.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(n.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatarButton,\\n  ProfileAvatarButtonAvatar,\\n  ProfileAvatarButtonAvatarFallback,\\n  ProfileAvatarButtonAvatarImage,\\n  ProfileDidField,\\n  ProfileName,\\n} from \\"@/components/ui/profile-avatar-button\\";\\n\\nexport function ProfileAvatarButtonNsfw() {\\n  return (\\n    <ProfileAvatarButton\\n      profileDID=\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\\n      size=\\"md\\"\\n      nsfwLabel=\\"NSFW\\"\\n      nsfw\\n    >\\n      <ProfileAvatarButtonAvatar>\\n        <ProfileAvatarButtonAvatarImage\\n          src=\\"https://github.com/akashaorg.png\\"\\n          alt=\\"@akashaorg\\"\\n        />\\n        <ProfileAvatarButtonAvatarFallback />\\n      </ProfileAvatarButtonAvatar>\\n      <ProfileName>CoffeeLover</ProfileName>\\n      <ProfileDidField />\\n    </ProfileAvatarButton>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/profile-avatar-button-nsfw.tsx\\",children:(0,l.jsxs)(n.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButton,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatar,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarFallback,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarButtonAvatarImage,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileDidField,\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileName,\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar-button\\"\'}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarButtonNsfw\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      profileDID\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"did:pkh:eip155:11155111:0x8a022905463998860516390fb27548479a098b95\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      size\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"md\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      nsfwLabel\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"NSFW\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"      nsfw\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarImage\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          src\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#B392F0\\"},children:\\"          alt\\"}),(0,l.jsx)(n.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(n.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatarFallback\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButtonAvatar\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">CoffeeLover</\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileName\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileDidField\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(n.span,{className:\\"line\\",children:[(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(n.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarButton\\"}),(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(n.span,{className:\\"line\\",children:(0,l.jsx)(n.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function B(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(m,{...e})}):m(e)}function c(e,n){throw new Error(\\"Expected \\"+(n?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(x);})();\\n;return Component;"},"_id":"docs/components/profile-avatar-button.mdx","_raw":{"sourceFilePath":"docs/components/profile-avatar-button.mdx","sourceFileName":"profile-avatar-button.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/profile-avatar-button"},"type":"Doc","slug":"/docs/components/profile-avatar-button","slugAsParams":"components/profile-avatar-button"},{"title":"Profile Avatar","description":"A profile image component with size variants, nsfw avatars and a fallback image.","published":true,"links":{"doc":"https://www.radix-ui.com/docs/primitives/components/

1avatar","api":"https://www.radix-ui.com/docs/primitives/components/avatar#api-reference","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"profile-avatar-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Add the following images to your project</Step>\\n\\n1. https://akasha-ui.pages.dev/images/avatar-1-min.webp\\n2. https://akasha-ui.pages.dev/images/avatar-2-min.webp\\n3. https://akasha-ui.pages.dev/images/avatar-3-min.webp\\n4. https://akasha-ui.pages.dev/images/avatar-4-min.webp\\n5. https://akasha-ui.pages.dev/images/avatar-5-min.webp\\n6. https://akasha-ui.pages.dev/images/avatar-6-min.webp\\n7. https://akasha-ui.pages.dev/images/avatar-7-min.webp\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install @radix-ui/react-avatar lucide-react\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"profile-avatar\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  ProfileAvatar,\\n  ProfileAvatarFallback,\\n  ProfileAvatarImage,\\n} from \\"<path-to-ui-components>/profile-avatar\\";\\n```\\n\\n```tsx\\n<ProfileAvatar>\\n  <ProfileAvatarImage src=\\"https://github.com/akashaorg.png\\" />\\n  <ProfileAvatarFallback />\\n</ProfileAvatar>\\n```\\n\\n## Props\\n\\n| Name          | Type                           | Description                  |\\n| ------------- | ------------------------------ | ---------------------------- |\\n| size          | `xs`, `sm`, `md`, `lg` or `xl` | Component sizes.             |\\n| nsfw          | `boolean`                      | Not safe for work.           |\\n| publicImgPath | `string`                       | Path to public image folder. |\\n\\n## Examples\\n\\n### Not safe for work(NSFW)\\n\\n<ComponentPreview name=\\"profile-avatar-nsfw\\" />\\n\\n### Size\\n\\n<ComponentPreview name=\\"profile-avatar-size\\" />\\n","code":"var Component=(()=>{var v=Object.create;var o=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var b=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),P=(n,l)=>{for(var a in l)o(n,a,{get:l[a],enumerable:!0})},E=(n,l,a,c)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let s of u(l))!B.call(n,s)&&s!==a&&o(n,s,{get:()=>l[s],enumerable:!(c=N(l,s))||c.enumerable});return n};var A=(n,l,a)=>(a=n!=null?v(g(n)):{},E(l||!n||!n.__esModule?o(a,\\"default\\",{value:n,enumerable:!0}):a,n)),_=n=>E(o({},\\"__esModule\\",{value:!0}),n);var m=b((w,y)=>{y.exports=_jsx_runtime});var C={};P(C,{default:()=>f,frontmatter:()=>x});var e=A(m()),x={title:\\"Profile Avatar\\",description:\\"A profile image component with size variants, nsfw avatars and a fallback image.\\",component:!0,links:{doc:\\"https://www.radix-ui.com/docs/primitives/components/avatar\\",api:\\"https://www.radix-ui.com/docs/primitives/components/avatar#api-reference\\"}};function F(n){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",li:\\"li\\",ol:\\"ol\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...n.components},{ComponentPreview:a,ComponentSource:c,Step:s,Steps:d,Tabs:p,TabsContent:i,TabsList:h,TabsTrigger:t}=l;return a||r(\\"ComponentPreview\\",!0),c||r(\\"ComponentSource\\",!0),s||r(\\"Step\\",!0),d||r(\\"Steps\\",!0),p||r(\\"Tabs\\",!0),i||r(\\"TabsContent\\",!0),h||r(\\"TabsList\\",!0),t||r(\\"TabsTrigger\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a,{name:\\"profile-avatar-demo\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatar,\\n  ProfileAvatarFallback,\\n  ProfileAvatarImage,\\n} from \\"@/components/ui/profile-avatar\\";\\n\\nexport function ProfileAvatarDemo() {\\n  return (\\n    <ProfileAvatar>\\n      <ProfileAvatarImage\\n        src=\\"https://github.com/akashaorg.png\\"\\n        alt=\\"@akashaorg\\"\\n      />\\n      <ProfileAvatarFallback />\\n    </ProfileAvatar>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/profile-avatar-demo.tsx\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatar,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarImage,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarDemo\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarImage\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        src\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        alt\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      />\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarFallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"installation\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,e.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,e.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,e.jsx)(i,{value:\\"cli\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar.json\\"\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/profile-avatar.json\\"\'})]})})})})}),(0,e.jsx)(i,{value:\\"manual\\",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(s,{children:\\"Add the following images to your project\\"}),(0,e.jsxs)(l.ol,{children:[`\\n`,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:\\"https://akasha-ui.pages.dev/images/avatar-1-min.webp\\",children:\\"https://akasha-ui.pages.dev/images/avatar-1-min.webp\\"})}),`\\n`,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:\\"https://akasha-ui.pages.dev/images/avatar-2-min.webp\\",children:\\"https://akasha-ui.pages.dev/images/avatar-2-min.webp\\"})}),`\\n`,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:\\"https://akasha-ui.pages.dev/images/avatar-3-min.webp\\",children:\\"https://akasha-ui.pages.dev/images/avatar-3-min.webp\\"})}),`\\n`,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:\\"https://akasha-ui.pages.dev/images/avatar-4-min.webp\\",children:\\"https://akasha-ui.pages.dev/images/avatar-4-min.webp\\"})}),`\\n`,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:\\"https://akasha-ui.pages.dev/images/avatar-5-min.webp\\",children:\\"https://akasha-ui.pages.dev/images/avatar-5-min.webp\\"})}),`\\n`,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:\\"https://akasha-ui.pages.dev/images/avatar-6-min.webp\\",children:\\"https://akasha-ui.pages.dev/images/avatar-6-min.webp\\"})}),`\\n`,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:\\"https://akasha-ui.pages.dev/images/avatar-7-min.webp\\",children:\\"https://akasha-ui.pages.dev/images/avatar-7-min.webp\\"})}),`\\n`]}),(0,e.jsx)(s,{children:\\"Install the following dependencies:\\"}),(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install @radix-ui/react-avatar lucide-react\\n`,__npmCommand__:`npm install @radix-ui/react-avatar lucide-react\\n`,__yarnCommand__:`yarn add @radix-ui/react-avatar lucide-react\\n`,__pnpmCommand__:`pnpm add @radix-ui/react-avatar lucide-react\\n`,__bunCommand__:`bun add @radix-ui/react-avatar lucide-react\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" @radix-ui/react-avatar\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" lucide-react\\"})]})})})}),(0,e.jsx)(s,{children:\\"Copy and paste the following code into your project.\\"}),(0,e.jsx)(c,{name:\\"profile-avatar\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport * as AvatarPrimitive from \\"@radix-ui/react-avatar\\";\\nimport { cva, type VariantProps } from \\"class-variance-authority\\";\\nimport { EyeOff } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { getImageFromSeed } from \\"@/components/lib/get-image-from-seed\\";\\n\\nconst profileAvatarVariants = cva(\\n  \\"relative flex shrink-0 justify-center items-center overflow-hidden rounded-full\\",\\n  {\\n    variants: {\\n      size: {\\n        xl: \\"size-20 [&_svg]:size-8\\",\\n        lg: \\"size-10 [&_svg]:size-4\\",\\n        md: \\"size-8 [&_svg]:size-3\\",\\n        sm: \\"size-6 [&_svg]:size-3\\",\\n        xs: \\"size-4 [&_svg]:size-3\\",\\n      },\\n    },\\n    defaultVariants: {\\n      size: \\"lg\\",\\n    },\\n  }\\n);\\n\\nconst ProfileAvatarContext = React.createContext<{\\n  profileDID: string;\\n  publicImgPath: string;\\n  nsfw: boolean;\\n} | null>(null);\\n\\nconst useAvatarContext = () => {\\n  const context = React.useContext(ProfileAvatarContext);\\n  if (!context) {\\n    throw new Error(\\n      \\"\\\\`useAvatarContext\\\\` must be used within an \\\\`ProfileAvatar\\\\` component\\"\\n    );\\n  }\\n  return context;\\n};\\n\\nconst ProfileAvatar = ({\\n  profileDID = \\"\\",\\n  publicImgPath = \\"/images\\",\\n  nsfw = false,\\n  size,\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AvatarPrimitive.Root> &\\n  VariantProps<typeof profileAvatarVariants> & {\\n    profileDID?: string;\\n    publicImgPath?: string;\\n    nsfw?: boolean;\\n  }) => {\\n  return (\\n    <ProfileAvatarContext.Provider value={{ nsfw, profileDID, publicImgPath }}>\\n      <AvatarPrimitive.Root\\n        data-slot=\\"profile-avatar\\"\\n        className={cn(\\n          profileAvatarVariants({\\n            size,\\n            className,\\n          }),\\n          nsfw && \\"bg-muted\\"\\n        )}\\n        {...props}\\n      />\\n    </ProfileAvatarContext.Provider>\\n  );\\n};\\n\\nconst ProfileAvatarImage = ({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AvatarPrimitive.Image> & {\\n  nsfw?: boolean;\\n}) => {\\n  const { nsfw } = useAvatarContext();\\n  return nsfw ? (\\n    <EyeOff className={cn(\\"text-destructive\\", className)} />\\n  ) : (\\n    <AvatarPrimitive.Image\\n      data-slot=\\"profile-avatar-image\\"\\n      className={cn(\\"aspect-square h-full w-full\\", className)}

1\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst ProfileAvatarFallback = ({\\n  children,\\n  alternativeSrc,\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback> & {\\n  alternativeSrc?: string[];\\n}) => {\\n  const { profileDID, publicImgPath, nsfw } = useAvatarContext();\\n\\n  const seed = getImageFromSeed(profileDID, 7);\\n  const avatarFallback = \\\\`\\\\${publicImgPath}/avatar-\\\\${seed}-min.webp\\\\`;\\n  const fallbackUi = !nsfw && (\\n    <AvatarPrimitive.Fallback\\n      data-slot=\\"profile-avatar-fallback\\"\\n      className={cn(\\n        \\"flex h-full w-full items-center justify-center rounded-full bg-muted\\",\\n        className\\n      )}\\n      {...props}\\n    >\\n      {React.Children.count(children) ? (\\n        children\\n      ) : (\\n        <img\\n          data-slot=\\"image\\"\\n          loading=\\"lazy\\"\\n          decoding=\\"async\\"\\n          src={avatarFallback}\\n          alt=\\"fallback\\"\\n          className=\\"object-contain\\"\\n        />\\n      )}\\n    </AvatarPrimitive.Fallback>\\n  );\\n\\n  return alternativeSrc ? (\\n    <picture>\\n      <source srcSet={alternativeSrc.filter(Boolean).join(\\", \\")} />\\n      {fallbackUi}\\n    </picture>\\n  ) : (\\n    fallbackUi\\n  );\\n};\\n\\nexport {\\n  ProfileAvatar,\\n  ProfileAvatarImage,\\n  ProfileAvatarFallback,\\n  profileAvatarVariants,\\n};\\n`,__src__:\\"registry/default/ui/profile-avatar.tsx\\",__style__:\\"default\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" AvatarPrimitive \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-avatar\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cva, \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" VariantProps } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"class-variance-authority\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { EyeOff } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { getImageFromSeed } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/lib/get-image-from-seed\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" profileAvatarVariants\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" cva\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'  \\"relative flex shrink-0 justify-center items-center overflow-hidden rounded-full\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  {\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    variants: {\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      size: {\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        xl: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-20 [&_svg]:size-8\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        lg: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-10 [&_svg]:size-4\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        md: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-8 [&_svg]:size-3\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        sm: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-6 [&_svg]:size-3\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        xs: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-4 [&_svg]:size-3\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      },\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    defaultVariants: {\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      size: \\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"lg\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" ProfileAvatarContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"createContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<{\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  profileDID\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  publicImgPath\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  nsfw\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"|\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useAvatarContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" context\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(ProfileAvatarContext);\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"context) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'      \\"`useAvatarContext` must be used within an `ProfileAvatar` component\\"\'})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" context;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatar\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  profileDID \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  publicImgPath \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"/images\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  nsfw \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" false\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  size,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" AvatarPrimitive.Root> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  VariantProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" profileAvatarVariants> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"    profileDID\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:

1\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"    publicImgPath\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"    nsfw\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarContext.Provider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{ nsfw, profileDID, publicImgPath }}>\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AvatarPrimitive.Root\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"profile-avatar\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          profileAvatarVariants\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            size,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            className,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }),\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          nsfw \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"bg-muted\\"\'})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      />\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarContext.Provider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarImage\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" AvatarPrimitive.Image> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  nsfw\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"nsfw\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useAvatarContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" nsfw \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"EyeOff\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-destructive\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)} />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AvatarPrimitive.Image\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"profile-avatar-image\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"aspect-square h-full w-full\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarFallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  alternativeSrc,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" AvatarPrimitive.Fallback> \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  alternativeSrc\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"[];\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"profileDID\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"publicImgPath\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"nsfw\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useAvatarContext\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" seed\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" getImageFromSeed\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(profileDID, \\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"7\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" avatarFallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" `${\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"publicImgPath\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}/avatar-${\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"seed\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}

1-min.webp`\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" fallbackUi\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" !\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"nsfw \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AvatarPrimitive.Fallback\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"profile-avatar-fallback\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"flex h-full w-full items-center justify-center rounded-full bg-muted\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {React.Children.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"count\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(children) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        children\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      ) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"img\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"image\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          loading\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"lazy\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          decoding\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"async\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          src\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{avatarFallback}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          alt\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"fallback\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"object-contain\\"\'})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AvatarPrimitive.Fallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" alternativeSrc \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"picture\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"source\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" srcSet\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{alternativeSrc.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"filter\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(Boolean).\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"join\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\", \\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")} />\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {fallbackUi}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"picture\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ) \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    fallbackUi\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatar,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarImage,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  profileAvatarVariants,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})})]})})})}),(0,e.jsx)(s,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"usage\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatar,\\n  ProfileAvatarFallback,\\n  ProfileAvatarImage,\\n} from \\"<path-to-ui-components>/profile-avatar\\";\\n`,children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatar,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarImage,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/profile-avatar\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<ProfileAvatar>\\n  <ProfileAvatarImage src=\\"https://github.com/akashaorg.png\\" />\\n  <ProfileAvatarFallback />\\n</ProfileAvatar>\\n`,children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarImage\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" src\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarFallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"props\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:\\"Name\\"}),(0,e.jsx)(l.th,{children:\\"Type\\"}),(0,e.jsx)(l.th,{children:\\"Description\\"})]})}),(0,e.jsxs)(l.tbody,{children:[(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"size\\"}),(0,e.jsxs)(l.td,{children:[(0,e.jsx)(l.code,{children:\\"xs\\"}),\\", \\",(0,e.jsx)(l.code,{children:\\"sm\\"}),\\", \\",(0,e.jsx)(l.code,{children:\\"md\\"}),\\", \\",(0,e.jsx)(l.code,{children:\\"lg\\"}),\\" or \\",(0,e.jsx)(l.code,{children:\\"xl\\"})]}),(0,e.jsx)(l.td,{children:\\"Component sizes.\\"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"nsfw\\"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:\\"boolean\\"})}),(0,e.jsx)(l.td,{children:\\"Not safe for work.\\"})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:\\"publicImgPath\\"}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:\\"string\\"})}),(0,e.jsx)(l.td,{children:\\"Path to public image folder.\\"})]})]})]}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"examples\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,e.jsxs)(l.h3,{id:\\"not-safe-for-worknsfw\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#not-safe-for-worknsfw\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Not safe for work(NSFW)\\"]}),`\\n`,(0,e.jsx)(a,{name:\\"profile-avatar-nsfw\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatar,\\n  ProfileAvatarFallback,\\n  ProfileAvatarImage,\\n} from \\"@/components/ui/profile-avatar\\";\\n\\nexport function ProfileAvatarNSFW() {\\n  return (\\n    <ProfileAvatar nsfw>\\n      <ProfileAvatarImage\\n        src=\\"https://github.com/akashaorg.png\\"\\n        alt=\\"@akashaorg\\"\\n      />\\n      <ProfileAvatarFallback />\\n    </ProfileAvatar>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/profile-avatar-nsfw.tsx\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatar,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarImage,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,

1{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarNSFW\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" nsfw\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarImage\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        src\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        alt\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      />\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarFallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,e.jsxs)(l.h3,{id:\\"size\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#size\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Size\\"]}),`\\n`,(0,e.jsx)(a,{name:\\"profile-avatar-size\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatar,\\n  ProfileAvatarFallback,\\n  ProfileAvatarImage,\\n} from \\"@/components/ui/profile-avatar\\";\\n\\nexport function ProfileAvatarExtraLarge() {\\n  return (\\n    <ProfileAvatar size=\\"xl\\">\\n      <ProfileAvatarImage\\n        src=\\"https://github.com/akashaorg.png\\"\\n        alt=\\"@akashaorg\\"\\n      />\\n      <ProfileAvatarFallback />\\n    </ProfileAvatar>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/profile-avatar-size.tsx\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatar,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarFallback,\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarImage,\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" ProfileAvatarExtraLarge\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xl\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarImage\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        src\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        alt\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      />\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarFallback\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function f(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(F,{...n})}):F(n)}function r(n,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return _(C);})();\\n;return Component;"},"_id":"docs/components/profile-avatar.mdx","_raw":{"sourceFilePath":"docs/components/profile-avatar.mdx","sourceFileName":"profile-avatar.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/profile-avatar"},"type":"Doc","slug":"/docs/components/profile-avatar","slugAsParams":"components/profile-avatar"},{"title":"Select","description":"Displays a list of options for the user to pick fromâtriggered by a button.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/select","type":"LinksProperties","_raw":{}},"featured":true,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Select component customized by restyling.\\n\\n<ComponentPreview name=\\"select-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/select.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install @radix-ui/react-select\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"select\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\"@/components/ui/select\\";\\n```\\n\\n```tsx\\n<Select>\\n  <SelectTrigger className=\\"w-[180px]\\">\\n    <SelectValue placeholder=\\"Theme\\" />\\n  </SelectTrigger>\\n  <SelectContent>\\n    <SelectItem value=\\"light\\">Light</SelectItem>\\n    <SelectItem value=\\"dark\\">Dark</SelectItem>\\n    <SelectItem value=\\"system\\">System</SelectItem>\\n  </SelectContent>\\n</Select>\\n```\\n","code":"var Component=(()=>{var N=Object.create;var o=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),C=(n,e)=>{for(var s in e)o(n,s,{get:e[s],enumerable:!0})},E=(n,e,s,a)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let c of B(e))!f.call(n,c)&&c!==s&&o(n,c,{get:()=>e[c],enumerable:!(a=S(e,c))||a.enumerable});return n};var x=(n,e,s)=>(s=n!=null?N(g(n)):{},E(e||!n||!n.__esModule?o(s,\\"default\\",{value:n,enumerable:!0}):s,n)),b=n=>E(o({},\\"__esModule\\",{value:!0}),n);var m=v((w,y)=>{y.exports=_jsx_runtime});var _={};C(_,{default:()=>u,frontmatter:()=>P});var l=x(m()),P={title:\\"Select\\",description:\\"Displays a list of options for the user to pick from\\\\u2014triggered by a button.\\",component:!0,featured:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/select\\"}};function F(n){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...n.components},{ComponentPreview:s,ComponentSource:a,Step:c,Steps:p,Tabs:d,TabsContent:t,TabsList:h,TabsTrigger:i}=e;return s||r(\\"ComponentPreview\\",!0),a||r(\\"ComponentSource\\",!0),c||r(\\"Step\\",!0),p||r(\\"Steps\\",!0),d||r(\\"Tabs\\",!0),t||r(\\"TabsContent\\",!0),h||r(\\"TabsList\\",!0),i||r(\\"TabsTrigger\\",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.p,{children:\\"A ShadCN Select component customized by restyling.\\"}),`\\n`,(0,l.jsx)(s,{name:\\"select-demo\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectGroup,\\n  SelectItem,\\n  SelectLabel,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\"@/components/ui/select\\";\\n\\nexport function SelectDemo() {\\n  return (\\n    <Select>\\n      <SelectTrigger className=\\"w-[180px]\\">\\n        <SelectValue placeholder=\\"Select a fruit\\" />\\n      </SelectTrigger>\\n      <SelectContent>\\n        <SelectGroup>\\n          <SelectLabel>Fruits</SelectLabel>\\n          <SelectItem value=\\"apple\\">Apple</SelectItem>\\n          <SelectItem value=\\"banana\\">Banana</SelectItem>\\n          <SelectItem value=\\"blueberry\\">Blueberry</SelectItem>\\n          <SelectItem value=\\"grapes\\">Grapes</SelectItem>\\n          <SelectItem value=\\"pineapple\\">Pineapple</SelectItem>\\n        </SelectGroup>\\n      </SelectContent>\\n    </Select>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/select-demo.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Select,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectContent,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectGroup,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectItem,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectLabel,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectTrigger,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectValue,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/select\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SelectDemo\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Select\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectTrigger\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-[180px]\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectValue\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" placeholder\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Select a fruit\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectTrigger\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectContent\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectGroup\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectLabel\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Fruits</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectLabel\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"apple\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Apple</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"banana\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Banana</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"blueberry\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Blueberry</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"grapes\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Grapes</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"pineapple\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Pineapple</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectGroup\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectContent\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Select\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"installation\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,l.jsxs)(d,{defaultValue:\\"cli\\",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,l.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,l.jsx)(t,{value:\\"cli\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/select.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/select.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/select.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/select.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/select.json\\"\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/select.json\\"\'})]})})})})}),(0,l.jsx)(t,{value:\\"manual\\",children:(0,l.jsxs)(p,{children:[(0,l.jsx)(c,{children:\\"Install the following dependencies:\\"}),(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install @radix-ui/react-select\\n`,__npmCommand__:`npm install @radix-ui/react-select\\n`,__yarnCommand__:`yarn add @radix-ui/react-select\\n`,__pnpmCommand__:`pnpm add @radix-ui/react-select\\n`,__bunCommand__:`bun add @radix-ui/react-select\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" @radix-ui/react-select\\"})]})})})}),(0,l.jsx)(c,{children:\\"Copy and paste the following code into your project.\\"}),(0,l.jsx)(a,{name:\\"select\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport * as SelectPrimitive from \\"@radix-ui/react-select\\";\\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nfunction Select({\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\\n  return <SelectPrimitive.Root data-slot=\\"select\\" {...props} />;\\n}\\n\\nfunction SelectGroup({\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\\n  return <SelectPrimitive.Group data-slot=\\"select-group\\" {...props} />;\\n}\\n\\nfunction SelectValue({\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\\n  return <SelectPrimitive.Value data-slot=\\"select-value\\" {...props} />;\\n}\\n\\nfunction SelectTrigger({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {\\n  return (\\n    <SelectPrimitive.Trigger\\n      data-slot=\\"select-trigger\\"\\n      className={cn(\\n        \\"border-input data-[placeholder]:text-muted-foreground aria-invalid:border-destructive ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex h-10 w-full items-center justify-between rounded-md border bg-card px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-0 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&>span]:line-clamp-1\\",\\n        className\\n      )}\\n      {...props}\\n    >\\n      {children}\\n      <SelectPrimitive.Icon asChild>\\n        <ChevronDownIcon className=\\"size-4 text-primary\\" />\\n      </SelectPrimitive.Icon>\\n    </SelectPrimitive.Trigger>\\n  );\\n}\\n\\nfunction SelectContent({\\n  className,\\n  children,\\n  position = \\"popper\\",\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\\n  return (\\n    <SelectPrimitive.Portal>\\n      <SelectPrimitive.Content\\n        data-slot=\\"select-content\\"\\n        className={cn(\\n          \\"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:sli

1de-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md\\",\\n          position === \\"popper\\" &&\\n            \\"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\\",\\n          className\\n        )}\\n        position={position}\\n        {...props}\\n      >\\n        <SelectScrollUpButton />\\n        <SelectPrimitive.Viewport\\n          className={cn(\\n            \\"p-1\\",\\n            position === \\"popper\\" &&\\n              \\"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\\"\\n          )}\\n        >\\n          {children}\\n        </SelectPrimitive.Viewport>\\n        <SelectScrollDownButton />\\n      </SelectPrimitive.Content>\\n    </SelectPrimitive.Portal>\\n  );\\n}\\n\\nfunction SelectLabel({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\\n  return (\\n    <SelectPrimitive.Label\\n      data-slot=\\"select-label\\"\\n      className={cn(\\"px-2 py-1.5 text-sm font-semibold\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction SelectItem({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\\n  return (\\n    <SelectPrimitive.Item\\n      data-slot=\\"select-item\\"\\n      className={cn(\\n        \\"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\\",\\n        className\\n      )}\\n      {...props}\\n    >\\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\\n      <span className=\\"absolute right-2 flex size-3.5 items-center justify-center\\">\\n        <SelectPrimitive.ItemIndicator>\\n          <CheckIcon className=\\"size-4 focus:text-accent-foreground\\" />\\n        </SelectPrimitive.ItemIndicator>\\n      </span>\\n    </SelectPrimitive.Item>\\n  );\\n}\\n\\nfunction SelectSeparator({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\\n  return (\\n    <SelectPrimitive.Separator\\n      data-slot=\\"select-separator\\"\\n      className={cn(\\"bg-border pointer-events-none -mx-1 my-1 h-px\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction SelectScrollUpButton({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\\n  return (\\n    <SelectPrimitive.ScrollUpButton\\n      data-slot=\\"select-scroll-up-button\\"\\n      className={cn(\\n        \\"flex cursor-default items-center justify-center py-1\\",\\n        className\\n      )}\\n      {...props}\\n    >\\n      <ChevronUpIcon className=\\"size-4\\" />\\n    </SelectPrimitive.ScrollUpButton>

1\\n  );\\n}\\n\\nfunction SelectScrollDownButton({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\\n  return (\\n    <SelectPrimitive.ScrollDownButton\\n      data-slot=\\"select-scroll-down-button\\"\\n      className={cn(\\n        \\"flex cursor-default items-center justify-center py-1\\",\\n        className\\n      )}\\n      {...props}\\n    >\\n      <ChevronDownIcon className=\\"size-4\\" />\\n    </SelectPrimitive.ScrollDownButton>\\n  );\\n}\\n\\nexport {\\n  Select,\\n  SelectContent,\\n  SelectGroup,\\n  SelectItem,\\n  SelectLabel,\\n  SelectScrollDownButton,\\n  SelectScrollUpButton,\\n  SelectSeparator,\\n  SelectTrigger,\\n  SelectValue,\\n};\\n`,__src__:\\"registry/default/ui/select.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" SelectPrimitive \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-select\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CheckIcon, ChevronDownIcon, ChevronUpIcon } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Select\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" SelectPrimitive.Root>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Root\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"select\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props} />;\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SelectGroup\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" SelectPrimitive.Group>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Group\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"select-group\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props} />;\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SelectValue\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" SelectPrimitive.Value>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Value\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"select-value\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props} />;\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SelectTrigger\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  children\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" SelectPrimitive.Trigger>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Trigger\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"select-trigger\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:`        \\"border-input data-[placeholder]:text-muted-foreground aria-invalid:border-destructive ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex h-10 w-full items-center justify-between rounded-md border bg-card px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] focu

1s-visible:ring-4 focus-visible:outline-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-0 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&>span]:line-clamp-1\\"`}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {children}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Icon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" asChild\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ChevronDownIcon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-4 text-primary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Icon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Trigger\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SelectContent\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  children\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  position\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"popper\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" SelectPrimitive.Content>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Portal\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Content\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"select-content\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:sli

1de-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          position \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"popper\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          className\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        position\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{position}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectScrollUpButton\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Viewport\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"p-1\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            position \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"popper\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'              \\"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\\"\'})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          )}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          {children}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Viewport\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectScrollDownButton\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Content\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Portal\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SelectLabel\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" SelectPrimitive.Label>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Label\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"select-label\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"px-2 py-1.5 text-sm font-semibold\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  children\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" SelectPrimitive.Item>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Item\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"select-item\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:`        \\"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\\"`}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.ItemText\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">{children}</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.ItemText\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"span\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"absolute right-2 flex size-3.5 items-center justify-center\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.ItemIndicator\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CheckIcon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-4 focus:text-accent-foreground\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.ItemIndicator\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"span\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Item\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SelectSeparator\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.s

1pan,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" SelectPrimitive.Separator>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.Separator\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"select-separator\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"bg-border pointer-events-none -mx-1 my-1 h-px\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SelectScrollUpButton\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" SelectPrimitive.ScrollUpButton>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.ScrollUpButton\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"select-scroll-up-button\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"flex cursor-default items-center justify-center py-1\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ChevronUpIcon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-4\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.ScrollUpButton\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SelectScrollDownButton\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" SelectPrimitive.ScrollDownButton>) {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.ScrollDownButton\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"select-scroll-down-button\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"flex cursor-default items-center justify-center py-1\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"ChevronDownIcon\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-4\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectPrimitive.ScrollDownButton\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Select,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectContent,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectGroup,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectItem,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectLabel,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectScrollDownButton,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectScrollUpButton,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectSeparator,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectTrigger,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectValue,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})})]})})})}),(0,l.jsx)(c,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"usage\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\"@/components/ui/select\\";\\n`,children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Select,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectContent,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectItem,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectTrigger,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  SelectValue,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/select\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<Select>\\n  <SelectTrigger className=\\"w-[180px]\\">\\n    <SelectValue placeholder=\\"Theme\\" />\\n  </SelectTrigger>\\n  <SelectContent>\\n    <SelectItem value=\\"light\\">Light</SelectItem>\\n    <SelectItem value=\\"dark\\">Dark</SelectItem>\\n    <SelectItem value=\\"system\\">System</SelectItem>\\n  </SelectContent>\\n</Select>\\n`,children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Select\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectTrigger\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-[180px]\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectValue\\"}),(

10,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" placeholder\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Theme\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectTrigger\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectContent\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"light\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Light</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"dark\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Dark</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"system\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">System</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectItem\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"SelectContent\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Select\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(F,{...n})}):F(n)}function r(n,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return b(_);})();\\n;return Component;"},"_id":"docs/components/select.mdx","_raw":{"sourceFilePath":"docs/components/select.mdx","sourceFileName":"select.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/select"},"type":"Doc","slug":"/docs/components/select","slugAsParams":"components/select"},{"title":"Slider","description":"An input where the user selects a value from within a given range.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/slider","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Slider component customized by and adjusting colors.\\n\\n<ComponentPreview name=\\"slider-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/slider.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"slider\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { Slider } from \\"<path-to-ui-components>/slider\\";\\n```\\n\\n```tsx\\n<Slider defaultValue={[33]} max={100} min={0} step={1} />\\n``` \\n","code":"var Component=(()=>{var f=Object.create;var i=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var _=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),x=(n,l)=>{for(var s in l)i(n,s,{get:l[s],enumerable:!0})},E=(n,l,s,c)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let a of v(l))!g.call(n,a)&&a!==s&&i(n,a,{get:()=>l[a],enumerable:!(c=N(l,a))||c.enumerable});return n};var b=(n,l,s)=>(s=n!=null?f(B(n)):{},E(l||!n||!n.__esModule?i(s,\\"default\\",{value:n,enumerable:!0}):s,n)),S=n=>E(i({},\\"__esModule\\",{value:!0}),n);var m=_((A,y)=>{y.exports=_jsx_runtime});var w={};x(w,{default:()=>F,frontmatter:()=>C});var e=b(m()),C={title:\\"Slider\\",description:\\"An input where the user selects a value from within a given range.\\",component:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/slider\\"}};function u(n){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...n.components},{ComponentPreview:s,ComponentSource:c,Step:a,Steps:d,Tabs:h,TabsContent:o,TabsList:p,TabsTrigger:t}=l;return s||r(\\"ComponentPreview\\",!0),c||r(\\"ComponentSource\\",!0),a||r(\\"Step\\",!0),d||r(\\"Steps\\",!0),h||r(\\"Tabs\\",!0),o||r(\\"TabsContent\\",!0),p||r(\\"TabsList\\",!0),t||r(\\"TabsTrigger\\",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.p,{children:\\"A ShadCN Slider component customized by and adjusting colors.\\"}),`\\n`,(0,e.jsx)(s,{name:\\"slider-demo\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Slider } from \\"../ui/slider\\";\\n\\nexport function SliderDemo() {\\n  return <Slider defaultValue={[33]} max={100} min={0} step={1} />;\\n}\\n`,__src__:\\"registry/default/examples/slider-demo.tsx\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Slider } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"../ui/slider\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" SliderDemo\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Slider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" defaultValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{[\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"33\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"]} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"max\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"100\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"min\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"0\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"step\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"1\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />;\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"installation\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,e.jsxs)(h,{defaultValue:\\"cli\\",children:[(0,e.jsxs)(p,{children:[(0,e.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,e.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,e.jsx)(o,{value:\\"cli\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/slider.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/slider.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/slider.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/slider.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/slider.json\\"\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/slider.json\\"\'})]})})})})}),(0,e.jsx)(o,{value:\\"manual\\",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(a,{children:\\"Copy and paste the following code into your project.\\"}),(0,e.jsx)(c,{name:\\"slider\\",children:(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport * as SliderPrimitive from \\"@radix-ui/react-slider\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nfunction Slider({\\n  className,\\n  defaultValue,\\n  value,\\n  min = 0,\\n  max = 100,\\n  ...props\\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\\n  const _values = React.useMemo(\\n    () =>\\n      Array.isArray(value)\\n        ? value\\n        : Array.isArray(defaultValue)\\n          ? defaultValue\\n          : [min, max],\\n    [value, defaultValue, min, max]\\n  );\\n\\n  return (\\n    <SliderPrimitive.Root\\n      data-slot=\\"slider\\"\\n      defaultValue={defaultValue}\\n      value={value}\\n      min={min}\\n      max={max}\\n      className={cn(\\n        \\"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\\",\\n        className\\n      )}\\n      {...props}\\n    >\\n      <SliderPrimitive.Track\\n        data-slot=\\"slider-track\\"\\n        className={cn(\\n          \\"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\\"\\n        )}\\n      >\\n        <SliderPrimitive.Range\\n          data-slot=\\"slider-range\\"\\n          className={cn(\\n            \\"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\\"\\n          )}\\n        />\\n      </SliderPrimitive.Track>\\n      {Array.from({ length: _values.length }, (_, index) => (\\n        <SliderPrimitive.Thumb\\n          data-slot=\\"slider-thumb\\"\\n          key={index}\\n          className=\\"border-primary bg-muted ring-ring/20 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\\"\\n        />\\n      ))}\\n    </SliderPrimitive.Root>\\n  );\\n}\\n\\nexport { Slider };\\n`,__src__:\\"registry/default/ui/slider.tsx\\",__style__:\\"default\\",children:(0,e.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" SliderPrimitive \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-slider\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Slider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  defaultValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  min\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 0\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  max\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 100\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" SliderPrimitive.Root>) {\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" _values\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useMemo\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    () \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Array.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"isArray\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(value)\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"        ?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" value\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"        :\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Array.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"isArray\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(defaultValue)\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          ?\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" defaultValue\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"          :\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [min, max],\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    [value, defaultValue, min, max]\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SliderPrimitive.Root\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"slider\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      defaultValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{defaultValue}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      value\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{value}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      min\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{min}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      max\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{max}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SliderPrimitive.Track\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"slider-track\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\\"\'})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SliderPrimitive.Range\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"slider-range\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\\"\'})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          )}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4

1E8\\"},children:\\"        />\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SliderPrimitive.Track\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {Array.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ length: _values.\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }, (\\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"_\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,e.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"index\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SliderPrimitive.Thumb\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          data-slot\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"slider-thumb\\"\'})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          key\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{index}\\"})]}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"border-primary bg-muted ring-ring/20 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\\"\'})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      ))}\\"})}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"SliderPrimitive.Root\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,e.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Slider };\\"})]})]})})})}),(0,e.jsx)(a,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,e.jsxs)(l.h2,{id:\\"usage\\",children:[(0,e.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,e.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Slider } from \\"<path-to-ui-components>/slider\\";\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Slider } \\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,e.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/slider\\"\'}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,e.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,e.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<Slider defaultValue={[33]} max={100} min={0} step={1} />\\n`,children:(0,e.jsx)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,e.jsxs)(l.span,{className:\\"line\\",children:[(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Slider\\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" defaultValue\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{[\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"33\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"]} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"max\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"100\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"min\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"0\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,e.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"step\\"}),(0,e.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,e.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"1\\"}),(0,e.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]})})})})]})}function F(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(u,{...n})}):u(n)}function r(n,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return S(w);})();\\n;return Component;"},"_id":"docs/components/slider.mdx","_raw":{"sourceFilePath":"docs/components/slider.mdx","sourceFileName":"slider.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/slider"},"type":"Doc","slug":"/docs/components/slider","slugAsParams":"components/slider"},{"title":"Sonner","description":"A succinct message that is displayed temporarily.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/sonner","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Toast component customized by adding icons to each sonner type.\\n\\n<ComponentPreview name=\\"sonner-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n<Steps>\\n\\n<Step>Run the following command:</Step>\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/sonner.json\\"\\n```\\n\\n<Step>Add the Toaster component</Step>\\n\\n```tsx title=\\"app/layout.tsx\\" {1,9}\\nimport { Toaster } from \\"@/components/ui/toaster\\";\\n\\nexport default function RootLayout({ children }) {\\n  return (\\n    <html lang=\\"en\\">\\n      <head />\\n      <body>\\n        <main>{children}</main>\\n        <Toaster />\\n      </body>\\n    </html>\\n  );\\n}\\n```\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install sonner next-themes\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n`sonner.tsx`\\n\\n<ComponentSource name=\\"sonner\\" />\\n\\n`toaster.tsx`\\n\\n<ComponentSource name=\\"sonner\\" fileName=\\"toaster\\" />\\n\\n`use-sonner.tsx`\\n\\n<ComponentSource name=\\"sonner\\" fileName=\\"use-sonner\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n<Step>Add the Toaster component</Step>\\n\\n```tsx title=\\"app/layout.tsx\\" {1,9}\\nimport { Toaster } from \\"@/components/ui/toaster\\";\\n\\nexport default function RootLayout({ children }) {\\n  return (\\n    <html lang=\\"en\\">\\n      <head />\\n      <body>\\n        <main>{children}</main>\\n        <Toaster />\\n      </body>\\n    </html>\\n  );\\n}\\n```\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\nThe `useToast` hook returns a `sonner` function that you can use to display a sonner.\\n\\n```tsx\\nimport { useToast } from \\"@/hooks/use-sonner\\";\\n```\\n\\n```tsx {2,7-10}\\nexport const ToastDemo = () => {\\n  const { sonner } = useToast();\\n\\n  return (\\n    <Button\\n      onClick={() => {\\n        sonner({\\n          title: \\"Scheduled: Catch up\\",\\n          description: \\"Friday, February 10, 2023 at 5:57 PM\\",\\n        });\\n      }}\\n    >\\n      Show Toast\\n    </Button>\\n  );\\n};\\n```\\n\\n## Examples\\n\\n### Info\\n\\n<ComponentPreview name=\\"sonner-info\\" />\\n\\n### Success\\n\\nUse `sonner.success(\\"message\\")` to display a warning sonner.\\n\\n<ComponentPreview name=\\"sonner-success\\" />\\n\\n### Warning\\n\\nUse `sonner.warning(\\"warning\\")` to display a warning sonner.\\n\\n<ComponentPreview name=\\"sonner-warning\\" />\\n\\n### Error\\n\\nUse `sonner.error(\\"message\\")` to display a destructive sonner.\\n\\n<ComponentPreview name=\\"sonner-error\\" />\\n","code":"var Component=(()=>{var N=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var _=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),x=(l,e)=>{for(var s in e)a(l,s,{get:e[s],enumerable:!0})},E=(l,e,s,o)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let r of B(e))!C.call(l,r)&&r!==s&&a(l,r,{get:()=>e[r],enumerable:!(o=g(e,r))||o.enumerable});return l};var b=(l,e,s)=>(s=l!=null?N(f(l)):{},E(e||!l||!l.__esModule?a(s,\\"default\\",{value:l,enumerable:!0}):s,l)),T=l=>E(a({},\\"__esModule\\",{value:!0}),l);var m=_((v,y)=>{y.exports=_jsx_runtime});var S={};x(S,{default:()=>u,frontmatter:()=>k});var n=b(m()),k={title:\\"Sonner\\",description:\\"A succinct message that is displayed temporarily.\\",component:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/sonner\\"}};function F(l){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...l.components},{ComponentPreview:s,ComponentSource:o,Step:r,Steps:t,Tabs:p,TabsContent:i,TabsList:h,TabsTrigger:d}=e;return s||c(\\"ComponentPreview\\",!0),o||c(\\"ComponentSource\\",!0),r||c(\\"Step\\",!0),t||c(\\"Steps\\",!0),p||c(\\"Tabs\\",!0),i||c(\\"TabsContent\\",!0),h||c(\\"TabsList\\",!0),d||c(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\\"A ShadCN Toast component customized by adding icons to each sonner type.\\"}),`\\n`,(0,n.jsx)(s,{name:\\"sonner-demo\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { toast } from \\"sonner\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\n\\nexport function SonnerDemo() {\\n  return (\\n    <Button\\n      variant=\\"outline\\"\\n      onClick={() =>\\n        toast.info(\\"Event has been created\\", {\\n          description: \\"Sunday, December 03, 2023 at 9:00 AM\\",\\n          action: {\\n            label: \\"Undo\\",\\n            onClick: () => console.log(\\"Undo\\"),\\n          },\\n        })\\n      }\\n    >\\n      Show Toast\\n    </Button>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/sonner-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { toast } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sonner\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SonnerDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      onClick\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        toast.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"info\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Event has been created\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          description: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Sunday, December 03, 2023 at 9:00 AM\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          action: {\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            label: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Undo\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"            onClick\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": () \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" console.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"log\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Undo\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"),\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        })\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Show Toast\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"installation\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(d,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(d,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(i,{value:\\"cli\\",children:(0,n.jsxs)(t,{children:[(0,n.jsx)(r,{children:\\"Run the following command:\\"}),(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/sonner.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/sonner.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/sonner.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/sonner.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/sonner.json\\"\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/sonner.json\\"\'})]})})})}),(0,n.jsx)(r,{children:\\"Add the Toaster component\\"}),(0,n.jsxs)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:[(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-title\\":\\"\\",\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:\\"app/layout.tsx\\"}),(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__withMeta__:!0,__rawString__:`import { Toaster } from \\"@/components/ui/toaster\\";\\n\\nexport default function RootLayout({ children }) {\\n  return (\\n    <html lang=\\"en\\">\\n      <head />\\n      <body>\\n        <main>{children}</main>\\n        <Toaster />\\n      </body>\\n    </html>\\n  );\\n}\\n`,children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line line--highlighted\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Toaster } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/toaster\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" default\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" RootLayout\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"children\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"html\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" lang\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"en\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"head\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"body\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"main\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">{children}</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"main\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line line--highlighted\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Toaster\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"body\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"html\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})]})]})}),(0,n.jsx)(i,{value:\\"manual\\",children:(0,n.jsxs)(t,{children:[(0,n.jsx)(r,{children:\\"Install the following dependencies:\\"}),(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install sonner next-themes\\n`,__npmCommand__:`npm install sonner next-themes\\n`,__yarnCommand__:`yarn add sonner next-themes\\n`,__pnpmCommand__:`pnpm add sonner next-themes\\n`,__bunCommand__:`bun add sonner next-themes\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" sonner\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" next-themes\\"})]})})})}),(0,n.jsx)(r,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.code,{children:\\"sonner.tsx\\"})}),(0,n.jsx)(o,{name:\\"sonner\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport { CircleAlert, CircleCheck, CircleX, TriangleAlert } from \\"lucide-react\\";\\nimport { useTheme } from \\"next-themes\\";\\nimport { Toaster as Sonner } from \\"sonner\\";\\n\\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\\n\\nconst Toaster = ({ ...props }: ToasterProps) => {\\n  const { theme = \\"system\\" } = useTheme();\\n\\n  return (\\n    <Sonner\\n      theme={theme as ToasterProps[\\"theme\\"]}\\n      className=\\"toaster group\\"\\n      toastOptions={{\\n        classNames: {\\n          toast:\\n            \\"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg [&_svg]:size-4\\",\\n          description: \\"group-[.toast]:text-muted-foreground\\",\\n          icon: \\"self-start\\",\\n          content: \\"-mt-1\\",\\n          actionButton:\\n            \\"group-[.toast]:bg-primary group-[.toast]:text-primary h-10\\",\\n          cancelButton:\\n            \\"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground h-10\\",\\n        },\\n      }}\\n      icons={{\\n        info: <CircleAlert className=\\"text-primary\\" />,\\n        success: <CircleCheck className=\\"text-success\\" />,\\n        warning: <TriangleAlert className=\\"text-warning\\" />,\\n        error: <CircleX className=\\"text-destructive\\" />,\\n      }}\\n      {...props}\\n    />\\n  );\\n};\\n\\nexport { Toaster };\\n`,__src__:\\"registry/default/ui/sonner.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CircleAlert, CircleCheck, CircleX, TriangleAlert } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useTheme } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"next-themes\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Toaster \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" Sonner } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sonner\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ToasterProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" Sonner>;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Toaster\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({ \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ToasterProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"theme\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"system\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" useTheme\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Sonner\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      theme\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{theme \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ToasterProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"[\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"theme\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"]}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"toaster group\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      toastOptions\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        classNames: {\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          toast:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg [&_svg]:size-4\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          description: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"group-[.toast]:text-muted-foreground\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          icon: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"self-start\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          content: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"-mt-1\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          actionButton:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"group-[.toast]:bg-primary group-[.toast]:text-primary h-10\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          cancelButton:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground h-10\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      icons\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        info: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleAlert\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-primary\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        success: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleCheck\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-success\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        warning: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"TriangleAlert\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-warning\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        error: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleX\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-destructive\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Toaster };\\"})]})]})})})}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.code,{children:\\"toaster.t

1sx\\"})}),(0,n.jsx)(o,{name:\\"sonner\\",fileName:\\"toaster\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport { CircleAlert, CircleCheck, CircleX, TriangleAlert } from \\"lucide-react\\";\\nimport { useTheme } from \\"next-themes\\";\\nimport { Toaster as Sonner } from \\"sonner\\";\\n\\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\\n\\nconst Toaster = ({ ...props }: ToasterProps) => {\\n  const { theme = \\"system\\" } = useTheme();\\n\\n  return (\\n    <Sonner\\n      theme={theme as ToasterProps[\\"theme\\"]}\\n      className=\\"toaster group\\"\\n      toastOptions={{\\n        classNames: {\\n          toast:\\n            \\"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg [&_svg]:size-4\\",\\n          description: \\"group-[.toast]:text-muted-foreground\\",\\n          icon: \\"self-start\\",\\n          content: \\"-mt-1\\",\\n          actionButton:\\n            \\"group-[.toast]:bg-primary group-[.toast]:text-primary h-10\\",\\n          cancelButton:\\n            \\"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground h-10\\",\\n        },\\n      }}\\n      icons={{\\n        info: <CircleAlert className=\\"text-primary\\" />,\\n        success: <CircleCheck className=\\"text-success\\" />,\\n        warning: <TriangleAlert className=\\"text-warning\\" />,\\n        error: <CircleX className=\\"text-destructive\\" />,\\n      }}\\n      {...props}\\n    />\\n  );\\n};\\n\\nexport { Toaster };\\n`,__src__:\\"registry/default/ui/sonner.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CircleAlert, CircleCheck, CircleX, TriangleAlert } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useTheme } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"next-themes\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Toaster \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" Sonner } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sonner\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ToasterProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" Sonner>;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Toaster\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({ \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ToasterProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"theme\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"system\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" useTheme\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Sonner\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      theme\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{theme \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ToasterProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"[\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"theme\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"]}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"toaster group\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      toastOptions\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        classNames: {\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          toast:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg [&_svg]:size-4\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          description: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"group-[.toast]:text-muted-foreground\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          icon: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"self-start\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          content: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"-mt-1\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          actionButton:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"group-[.toast]:bg-primary group-[.toast]:text-primary h-10\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          cancelButton:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground h-10\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      icons\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        info: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleAlert\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-primary\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        success: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleCheck\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-success\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        warning: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"TriangleAlert\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-warning\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        error: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleX\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-destructive\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Toaster };\\"})]})]})})})}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.code,{children:\\"use-sonner.tsx\\"})}),(0,n.jsx)(o,{name:\\"sonner\\",fileName:\\"use-sonner\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport { CircleAlert, CircleCheck, CircleX, TriangleAlert } from \\"lucide-react\\";\\nimport { useTheme } from \\"next-themes\\";\\nimport { Toaster as Sonner } from \\"sonner\\";\\n\\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\\n\\nconst Toaster = ({ ...props }: ToasterProps) => {\\n  const { theme = \\"system\\" } = useTheme();\\n\\n  return (\\n    <Sonner\\n      theme={theme as ToasterProps[\\"theme\\"]}\\n      className=\\"toaster group\\"\\n      toastOptions={{\\n        classNames: {\\n          toast:\\n            \\"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg [&_svg]:size-4\\",\\n          description: \\"group-[.toast]:text-muted-foreground\\",\\n          icon: \\"self-start\\",\\n          content: \\"-mt-1\\",\\n          actionButton:\\n            \\"group-[.toast]:bg-primary group-[.toast]:text-primary h-10\\",\\n          cancelButton:\\n            \\"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground h-10\\",\\n        },\\n      }}\\n      icons={{\\n        info: <CircleAlert className=\\"text-primary\\" />,\\n        success: <CircleCheck className=\\"text-success\\" />,\\n        warning: <TriangleAlert className=\\"text-warning\\" />,\\n        error: <CircleX className=\\"text-destructive\\" />,\\n      }}\\n      {...props}\\n    />\\n  );\\n};\\n\\nexport { Toaster };\\n`,__src__:\\"registry/default/ui/sonner.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CircleAlert, CircleCheck, CircleX, TriangleAlert } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useTheme } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children

1:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"next-themes\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Toaster \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" Sonner } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sonner\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ToasterProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" Sonner>;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Toaster\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({ \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" }\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ToasterProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"theme\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"system\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" useTheme\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Sonner\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      theme\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{theme \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ToasterProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"[\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"theme\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"]}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"toaster group\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      toastOptions\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        classNames: {\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          toast:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg [&_svg]:size-4\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          description: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"group-[.toast]:text-muted-foreground\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          icon: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"self-start\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          content: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"-mt-1\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          actionButton:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"group-[.toast]:bg-primary group-[.toast]:text-primary h-10\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          cancelButton:\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'            \\"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground h-10\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      icons\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        info: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleAlert\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-primary\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        success: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleCheck\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-success\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        warning: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"TriangleAlert\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-warning\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        error: <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CircleX\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-destructive\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />,\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Toaster };\\"})]})]})})})}),(0,n.jsx)(r,{children:\\"Update the import paths to match your project setup.\\"}),(0,n.jsx)(r,{children:\\"Add the Toaster component\\"}),(0,n.jsxs)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:[(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-title\\":\\"\\",\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:\\"app/layout.tsx\\"}),(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__withMeta__:!0,__rawString__:`import { Toaster } from \\"@/components/ui/toaster\\";\\n\\nexport default function RootLayout({ children }) {\\n  return (\\n    <html lang=\\"en\\">\\n      <head />\\n      <body>\\n        <main>{children}</main>

1\\n        <Toaster />\\n      </body>\\n    </html>\\n  );\\n}\\n`,children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line line--highlighted\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Toaster } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/toaster\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" default\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" RootLayout\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ \\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"children\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"html\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" lang\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"en\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"head\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"body\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"main\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">{children}</\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"main\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line line--highlighted\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Toaster\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"body\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"html\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})]})]})})]}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"usage\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,n.jsxs)(e.p,{children:[\\"The \\",(0,n.jsx)(e.code,{children:\\"useToast\\"}),\\" hook returns a \\",(0,n.jsx)(e.code,{children:\\"sonner\\"}),\\" function that you can use to display a sonner.\\"]}),`\\n`,(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { useToast } from \\"@/hooks/use-sonner\\";\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useToast } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/hooks/use-sonner\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`export const ToastDemo = () => {\\n  const { sonner } = useToast();\\n\\n  return (\\n    <Button\\n      onClick={() => {\\n        sonner({\\n          title: \\"Scheduled: Catch up\\",\\n          description: \\"Friday, February 10, 2023 at 5:57 PM\\",\\n        });\\n      }}\\n    >\\n      Show Toast\\n    </Button>

1\\n  );\\n};\\n`,children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" ToastDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" () \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line line--highlighted\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"sonner\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" useToast\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      onClick\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line line--highlighted\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        sonner\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line line--highlighted\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          title: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Scheduled: Catch up\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line line--highlighted\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          description: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Friday, February 10, 2023 at 5:57 PM\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line line--highlighted\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        });\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }}\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Show Toast\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})})]})})}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"examples\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"info\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#info\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Info\\"]}),`\\n`,(0,n.jsx)(s,{name:\\"sonner-info\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { toast } from \\"sonner\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\n\\nexport function SonnerInfo() {\\n  return (\\n    <Button\\n      variant=\\"outline\\"\\n      onClick={() =>\\n        toast.info(\\"Info text\\", {\\n          description: \\"Some important information will appear here\\",\\n          action: {\\n            label: \\"ok\\",\\n            onClick: () => console.log(\\"ok\\"),\\n          },\\n        })\\n      }\\n    >\\n      Show Toast\\n    </Button>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/sonner-info.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { toast } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sonner\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SonnerInfo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      onClick\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        toast.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"info\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Info text\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          description: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Some important information will appear here\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          action: {\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            label: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ok\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"            onClick\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": () \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" console.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"log\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ok\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"),\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        })\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Show Toast\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"success\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#success\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Success\\"]}),`\\n`,(0,n.jsxs)(e.p,{children:[\\"Use \\",(0,n.jsx)(e.code,{children:\'sonner.success(\\"message\\")\'}),\\" to display a warning sonner.\\"]}),`\\n`,(0,n.jsx)(s,{name:\\"sonner-success\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { toast } from \\"sonner\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\n\\nexport function SonnerSuccess() {\\n  return (\\n    <Button\\n      variant=\\"outline\\"\\n      onClick={() =>\\n        toast.success(\\"Success text\\", {\\n          description: \\"Some important information will appear here\\",\\n          action: {\\n            label: \\"ok\\",\\n            onClick: () => console.log(\\"ok\\"),\\n          },\\n        })\\n      }\\n    >\\n      Show Toast\\n    </Button>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/sonner-success.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { toast } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sonner\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SonnerSuccess\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      onClick\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        toast.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"success\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Success text\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          description: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Some important information will appear here\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          action: {\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            label: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ok\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"            onClick\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": () \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" console.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"log\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ok\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"),\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        })\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Show Toast\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"warning\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#warning\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Warning\\"]}),`\\n`,(0,n.jsxs)(e.p,{children:[\\"Use \\",(0,n.jsx)(e.code,{children:\'sonner.warning(\\"warning\\")\'}),\\" to display a warning sonner.\\"]}),`\\n`,(0,n.jsx)(s,{name:\\"sonner-warning\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { toast } from \\"sonner\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\n\\nexport function SonnerWarning() {\\n  return (\\n    <Button\\n      variant=\\"outline\\"\\n      onClick={() =>\\n        toast.warning(\\"\\", {\\n          description: \\"Some important information will appear here\\",\\n          action: {\\n            label: \\"ok\\",\\n            onClick: () => console.log(\\"ok\\"),\\n          },\\n        })\\n      }\\n    >\\n      Show Toast\\n    </Button>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/sonner-warning.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { toast } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sonner\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SonnerWarning\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      onClick\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        toast.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"warning\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          description: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Some important information will appear here\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          action: {\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            label: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ok\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"            onClick\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": () \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" console.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"log\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ok\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"),\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        })\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Show Toast\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h3,{id:\\"error\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#error\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Error\\"]}),`\\n`,(0,n.jsxs)(e.p,{children:[\\"Use \\",(0,n.jsx)(e.code,{children:\'sonner.error(\\"message\\")\'}),\\" to display a destructive sonner.\\"]}),`\\n`,(0,n.jsx)(s,{name:\\"sonner-error\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { toast } from \\"sonner\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\n\\nexport function SonnerError() {\\n  return (\\n    <Button\\n      variant=\\"outline\\"\\n      onClick={() =>\\n        toast.error(\\"\\", {\\n          description: \\"Some important information will appear here\\",\\n          action: {\\n            label: \\"ok\\",\\n            onClick: () => console.log(\\"ok\\"),\\n          },\\n        })\\n      }\\n    >\\n      Show Toast\\n    </Button>

1\\n  );\\n}\\n`,__src__:\\"registry/default/examples/sonner-error.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { toast } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sonner\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" SonnerError\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      variant\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      onClick\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        toast.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"error\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          description: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Some important information will appear here\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          action: {\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            label: \\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ok\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"            onClick\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": () \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" console.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"log\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ok\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"),\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          },\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        })\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      }\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Show Toast\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function u(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(F,{...l})}):F(l)}function c(l,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+l+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return T(S);})();\\n;return Component;"},"_id":"docs/components/sonner.mdx","_raw":{"sourceFilePath":"docs/components/sonner.mdx","sourceFileName":"sonner.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/sonner"},"type":"Doc","slug":"/docs/components/sonner","slugAsParams":"components/sonner"},{"title":"Stack","description":"A container component for arranging elements vertically or horizontally.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"stack-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stack.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"stack\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { Stack } from \\"<path-to-ui-components>/stack\\";\\n```\\n\\n```tsx\\n<Stack>\\n  <div>Item 1</div>\\n  <div>Item 2</div>\\n  <div>Item 3</div>\\n</Stack>\\n```\\n\\n## Props\\n\\n| Name           | Type                                                                 | Description                                                                                                                                                                                      |\\n| -------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\\n| justifyContent | `start`, `center`, `end`, `between`, `evenly`, `around` or `stretch` | Determines the alignment of flex items along the container\'s main axis. For more details on Tailwind utilities for each value, refer to the [doc](https://tailwindcss.com/docs/justify-content). |\\n| alignItems     | `start`, `center`, `end`, `baseline` or `stretch`                    | Defines the alignment of flex items along the container\'s cross axis. For more details on Tailwind utilities for each value, refer to the [doc](https://tailwindcss.com/docs/align-items).       |\\n| direction      | `row`, `rowReverse`, `column` or `columnReverse`                     | Determines the direction of flex items. For more details on Tailwind utilities for each value, refer to the [doc](https://tailwindcss.com/docs/flex-direction).                                  |\\n| divider        | `boolean`                                                            | Add borders between items. For detailed information about the associated Tailwind utilities, please refer to the [doc](https://tailwindcss.com/docs/border-width#between-children).              |\\n\\n<Callout>\\n\\nThe **default** value of `direction` is `column`.\\n\\n</Callout>\\n\\n## Examples\\n\\n### Align Items\\n\\n<ComponentPreview name=\\"stack-align-items\\" />\\n\\n### Direction\\n\\n<ComponentPreview name=\\"stack-direction\\" />\\n\\n### Divider\\n\\n<ComponentPreview name=\\"stack-divider\\" />\\n\\n### Justify Content\\n\\n<ComponentPreview name=\\"stack-justify-content\\" />\\n","code":"var Component=(()=>{var N=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var w=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),b=(n,e)=>{for(var s in e)o(n,s,{get:e[s],enumerable:!0})},y=(n,e,s,c)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let r of v(e))!k.call(n,r)&&r!==s&&o(n,r,{get:()=>e[r],enumerable:!(c=f(e,r))||c.enumerable});return n};var x=(n,e,s)=>(s=n!=null?N(B(n)):{},y(e||!n||!n.__esModule?o(s,\\"default\\",{value:n,enumerable:!0}):s,n)),C=n=>y(o({},\\"__esModule\\",{value:!0}),n);var F=w((j,m)=>{m.exports=_jsx_runtime});var S={};b(S,{default:()=>g,frontmatter:()=>_});var l=x(F()),_={title:\\"Stack\\",description:\\"A container component for arranging elements vertically or horizontally.\\",component:!0};function u(n){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",strong:\\"strong\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...n.components},{Callout:s,ComponentPreview:c,ComponentSource:r,Step:i,Steps:h,Tabs:p,TabsContent:t,TabsList:E,TabsTrigger:d}=e;return s||a(\\"Callout\\",!0),c||a(\\"ComponentPreview\\",!0),r||a(\\"ComponentSource\\",!0),i||a(\\"Step\\",!0),h||a(\\"Steps\\",!0),p||a(\\"Tabs\\",!0),t||a(\\"TabsContent\\",!0),E||a(\\"TabsList\\",!0),d||a(\\"TabsTrigger\\",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(c,{name:\\"stack-demo\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Stack } from \\"@/components/ui/stack\\";\\n\\nexport function StackDemo() {\\n  return (\\n    <Stack\\n      spacing={4}\\n      alignItems=\\"center\\"\\n      className=\\"text-white text-center w-full\\"\\n    >\\n      <div className=\\"p-4 rounded-lg shadow-lg bg-cyan-500\\">01</div>\\n      <div className=\\"p-4 rounded-lg shadow-lg bg-cyan-500\\">

102</div>\\n      <div className=\\"p-4 rounded-lg shadow-lg bg-cyan-500\\">03</div>\\n      <div className=\\"p-4 rounded-lg shadow-lg bg-cyan-500\\">04</div>\\n    </Stack>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/stack-demo.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stack } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/stack\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" StackDemo\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      spacing\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"4\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      alignItems\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"center\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-white text-center w-full\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-4 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">01</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-4 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">02</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-4 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">03</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-4 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">04</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"installation\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,l.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,l.jsxs)(E,{children:[(0,l.jsx)(d,{value:\\"cli\\",children:\\"CLI\\"}),(0,l.jsx)(d,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,l.jsx)(t,{value:\\"cli\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stack.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stack.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stack.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stack.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stack.json\\"\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/stack.json\\"\'})]})})})})}),(0,l.jsx)(t,{value:\\"manual\\",children:(0,l.jsxs)(h,{children:[(0,l.jsx)(i,{children:\\"Copy and paste the following code into your project.\\"}),(0,l.jsx)(r,{name:\\"stack\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { cva, type VariantProps } from \\"class-variance-authority\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nconst stackVariants = cva(\\"flex divide-accent\\", {\\n  variants: {\\n    justifyContent: {\\n      start: \\"justify-start\\",\\n      center: \\"justify-center\\",\\n      end: \\"justify-end\\",\\n      between: \\"justify-between\\",\\n      evenly: \\"justify-evenly\\",\\n      around: \\"justify-around\\",\\n      stretch: \\"justify-stretch\\",\\n    },\\n    alignItems: {\\n      start: \\"items-start\\",\\n      center: \\"items-center\\",\\n      end: \\"items-end\\",\\n      baseline: \\"items-baseline\\",\\n      stretch: \\"items-stretch\\",\\n    },\\n    direction: {\\n      row: \\"flex-row\\",\\n      rowReverse: \\"flex-row-reverse\\",\\n      column: \\"flex-col\\",\\n      columnReverse: \\"flex-col-reverse\\",\\n    },\\n  },\\n  defaultVariants: {\\n    direction: \\"column\\",\\n  },\\n});\\n\\nconst Stack = ({\\n  className,\\n  justifyContent,\\n  alignItems,\\n  direction = \\"column\\",\\n  divider,\\n  spacing,\\n  ...props\\n}: React.ComponentProps<\\"div\\"> &\\n  VariantProps<typeof stackVariants> & {\\n    spacing?: number;\\n    divider?: boolean;\\n  }) => {\\n  return (\\n    <div\\n      data-slot=\\"stack\\"\\n      className={cn(\\n        stackVariants({\\n          justifyContent,\\n          alignItems,\\n          direction,\\n          className,\\n        }),\\n        spacing && \\\\`gap-\\\\${spacing}\\\\`,\\n        divider && {\\n          \\"divide-y\\": direction === \\"column\\" || direction === \\"columnReverse\\",\\n          \\"divide-x\\": direction === \\"row\\" || direction === \\"rowReverse\\",\\n        }\\n      )}\\n      {...props}\\n    />\\n  );\\n};\\n\\nexport { Stack, stackVariants };\\n`,__src__:\\"registry/default/ui/stack.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cva, \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" VariantProps } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"}

1,children:\' \\"class-variance-authority\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" stackVariants\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" cva\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex divide-accent\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", {\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  variants: {\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    justifyContent: {\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      start: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"justify-start\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      center: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"justify-center\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      end: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"justify-end\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      between: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"justify-between\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      evenly: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"justify-evenly\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      around: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"justify-around\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      stretch: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"justify-stretch\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    alignItems: {\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      start: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"items-start\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      center: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"items-center\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      end: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"items-end\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      baseline: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"items-baseline\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      stretch: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"items-stretch\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    direction: {\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      row: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex-row\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      rowReverse: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex-row-reverse\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      column: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex-col\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      columnReverse: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex-col-reverse\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  },\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  defaultVariants: {\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    direction: \\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"column\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  },\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"});\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  justifyContent,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  alignItems,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  direction \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"column\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  divider,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  spacing,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"  VariantProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" stackVariants> \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"    spacing\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"    divider\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }) \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"stack\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        stackVariants\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          justifyContent,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          alignItems,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          direction,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          className,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }),\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        spacing \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" `gap-${\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"spacing\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"}`\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        divider \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"divide-y\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": direction \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"column\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" ||\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" direction \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"columnReverse\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"divide-x\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\": direction \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"row\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" ||\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" direction \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"rowReverse\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.j

1sx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stack, stackVariants };\\"})]})]})})})}),(0,l.jsx)(i,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"usage\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Stack } from \\"<path-to-ui-components>/stack\\";\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stack } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/stack\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<Stack>\\n  <div>Item 1</div>\\n  <div>Item 2</div>\\n  <div>Item 3</div>\\n</Stack>\\n`,children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Item 1</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Item 2</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">Item 3</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"props\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.th,{children:\\"Name\\"}),(0,l.jsx)(e.th,{children:\\"Type\\"}),(0,l.jsx)(e.th,{children:\\"Description\\"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:\\"justifyContent\\"}),(0,l.jsxs)(e.td,{children:[(0,l.jsx)(e.code,{children:\\"start\\"}),\\", \\",(0,l.jsx)(e.code,{children:\\"center\\"}),\\", \\",(0,l.jsx)(e.code,{children:\\"end\\"}),\\", \\",(0,l.jsx)(e.code,{children:\\"between\\"}),\\", \\",(0,l.jsx)(e.code,{children:\\"evenly\\"}),\\", \\",(0,l.jsx)(e.code,{children:\\"around\\"}),\\" or \\",(0,l.jsx)(e.code,{children:\\"stretch\\"})]}),(0,l.jsxs)(e.td,{children:[\\"Determines the alignment of flex items along the container\'s main axis. For more details on Tailwind utilities for each value, refer to the \\",(0,l.jsx)(e.a,{href:\\"https://tailwindcss.com/docs/justify-content\\",children:\\"doc\\"}),\\".\\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:\\"alignItems\\"}),(0,l.jsxs)(e.td,{children:[(0,l.jsx)(e.code,{children:\\"start\\"}),\\", \\",(0,l.jsx)(e.code,{children:\\"center\\"}),\\", \\",(0,l.jsx)(e.code,{children:\\"end\\"}),\\", \\",(0,l.jsx)(e.code,{children:\\"baseline\\"}),\\" or \\",(0,l.jsx)(e.code,{children:\\"stretch\\"})]}),(0,l.jsxs)(e.td,{children:[\\"Defines the alignment of flex items along the container\'s cross axis. For more details on Tailwind utilities for each value, refer to the \\",(0,l.jsx)(e.a,{href:\\"https://tailwindcss.com/docs/align-items\\",children:\\"doc\\"}),\\".\\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:\\"direction\\"}),(0,l.jsxs)(e.td,{children:[(0,l.jsx)(e.code,{children:\\"row\\"}),\\", \\",(0,l.jsx)(e.code,{children:\\"rowReverse\\"}),\\", \\",(0,l.jsx)(e.code,{children:\\"column\\"}),\\" or \\",(0,l.jsx)(e.code,{children:\\"columnReverse\\"})]}),(0,l.jsxs)(e.td,{children:[\\"Determines the direction of flex items. For more details on Tailwind utilities for each value, refer to the \\",(0,l.jsx)(e.a,{href:\\"https://tailwindcss.com/docs/flex-direction\\",children:\\"doc\\"}),\\".\\"]})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:\\"divider\\"}),(0,l.jsx)(e.td,{children:(0,l.jsx)(e.code,{children:\\"boolean\\"})}),(0,l.jsxs)(e.td,{children:[\\"Add borders between items. For detailed information about the associated Tailwind utilities, please refer to the \\",(0,l.jsx)(e.a,{href:\\"https://tailwindcss.com/docs/border-width#between-children\\",children:\\"doc\\"}),\\".\\"]})]})]})]}),`\\n`,(0,l.jsx)(s,{children:(0,l.jsxs)(e.p,{children:[\\"The \\",(0,l.jsx)(e.strong,{children:\\"default\\"}),\\" value of \\",(0,l.jsx)(e.code,{children:\\"direction\\"}),\\" is \\",(0,l.jsx)(e.code,{children:\\"column\\"}),\\".\\"]})}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"examples\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,l.jsxs)(e.h3,{id:\\"align-items\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#align-items\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Align Items\\"]}),`\\n`,(0,l.jsx)(c,{name:\\"stack-align-items\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Stack } from \\"@/components/ui/stack\\";\\n\\nexport function StackAlignItems() {\\n  return (\\n    <Stack\\n      spacing={4}\\n      alignItems=\\"center\\"\\n      direction=\\"row\\"\\n      className=\\"text-white text-center w-full\\"\\n    >\\n      <div className=\\"p-4 flex-1 rounded-lg shadow-lg bg-cyan-500\\">01</div>\\n      <div className=\\"p-12 flex-1 rounded-lg shadow-lg bg-cyan-500\\">

102</div>\\n      <div className=\\"p-8 flex-1 rounded-lg shadow-lg bg-cyan-500\\">03</div>\\n    </Stack>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/stack-align-items.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stack } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/stack\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" StackAlignItems\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      spacing\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"4\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      alignItems\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"center\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      direction\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"row\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-white text-center w-full\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-4 flex-1 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">01</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-12 flex-1 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">02</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-8 flex-1 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">03</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(e.h3,{id:\\"direction\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#direction\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Direction\\"]}),`\\n`,(0,l.jsx)(c,{name:\\"stack-direction\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Stack } from \\"@/components/ui/stack\\";\\n\\nexport function StackDirection() {\\n  return (\\n    <Stack\\n      direction=\\"row\\"\\n      spacing={4}\\n      className=\\"text-white text-center w-full\\"\\n    >

1\\n      <div className=\\"w-14 rounded-lg shadow-lg bg-cyan-500\\">01</div>\\n      <div className=\\"w-14 rounded-lg shadow-lg bg-cyan-500\\">02</div>\\n      <div className=\\"w-14 rounded-lg shadow-lg bg-cyan-500\\">03</div>\\n    </Stack>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/stack-direction.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stack } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/stack\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" StackDirection\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      direction\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"row\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      spacing\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"4\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-white text-center w-full\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-14 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">01</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-14 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">02</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"}

1,children:\'\\"w-14 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">03</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(e.h3,{id:\\"divider\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#divider\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Divider\\"]}),`\\n`,(0,l.jsx)(c,{name:\\"stack-divider\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Stack } from \\"@/components/ui/stack\\";\\n\\nexport function StackDivider() {\\n  return (\\n    <Stack\\n      divider\\n      className=\\"text-black dark:text-white text-center rounded-lg shadow-sm overflow-auto border w-full\\"\\n    >\\n      <div className=\\"p-4 bg-white dark:bg-black\\">01</div>\\n      <div className=\\"p-4 bg-white dark:bg-black\\">

102</div>\\n      <div className=\\"p-4 bg-white dark:bg-black\\">03</div>\\n    </Stack>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/stack-divider.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stack } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/stack\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" StackDivider\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      divider\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-black dark:text-white text-center rounded-lg shadow-sm overflow-auto border w-full\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-4 bg-white dark:bg-black\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">01</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-4 bg-white dark:bg-black\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">02</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p-4 bg-white dark:bg-black\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">03</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(e.h3,{id:\\"justify-content\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#justify-content\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Justify Content\\"]}),`\\n`,(0,l.jsx)(c,{name:\\"stack-justify-content\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Stack } from \\"@/components/ui/stack\\";\\n\\nexport function StackJustifyContent() {\\n  return (\\n    <Stack\\n      spacing={4}\\n      justifyContent=\\"center\\"\\n      direction=\\"row\\"\\n      className=\\"text-white text-center w-full\\"\\n    >

1\\n      <div className=\\"w-14 rounded-lg shadow-lg bg-cyan-500\\">01</div>\\n      <div className=\\"w-14 rounded-lg shadow-lg bg-cyan-500\\">02</div>\\n      <div className=\\"w-14 rounded-lg shadow-lg bg-cyan-500\\">03</div>\\n    </Stack>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/stack-justify-content.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stack } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/stack\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" StackJustifyContent\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      spacing\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"4\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      justifyContent\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"center\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      direction\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"row\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-white text-center w-full\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-14 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">01</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-14 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">02</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"}

1,children:\'\\"w-14 rounded-lg shadow-lg bg-cyan-500\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">03</\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stack\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function g(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(u,{...n})}):u(n)}function a(n,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return C(S);})();\\n;return Component;"},"_id":"docs/components/stack.mdx","_raw":{"sourceFilePath":"docs/components/stack.mdx","sourceFileName":"stack.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/stack"},"type":"Doc","slug":"/docs/components/stack","slugAsParams":"components/stack"},{"title":"Stacked avatar","description":"Stacked avatar.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"stacked-avatar-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stacked-avatar.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"stacked-avatar\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { StackedAvatar } from \\"<path-to-ui-components>/stacked-avatar\\";\\n```\\n\\n```tsx\\nconst avatars = [\\n  { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n  { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n  { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n  { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n];\\nreturn (\\n  <StackedAvatar size={avatars.length}>\\n    {(index) => (\\n      <ProfileAvatar>\\n        <ProfileAvatarImage src={avatars[index].src} alt={avatars[index].alt} />\\n        <ProfileAvatarFallback />\\n      </ProfileAvatar>\\n    )}\\n  </StackedAvatar>\\n);\\n```\\n\\n## Props\\n\\n| Name | Type     | Description              |\\n| ---- | -------- | ------------------------ |\\n| size | `number` | Total number of avatars. |\\n","code":"var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var B=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),b=(e,l)=>{for(var a in l)o(e,a,{get:l[a],enumerable:!0})},E=(e,l,a,c)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let s of f(l))!k.call(e,s)&&s!==a&&o(e,s,{get:()=>l[s],enumerable:!(c=v(l,s))||c.enumerable});return e};var x=(e,l,a)=>(a=e!=null?g(N(e)):{},E(l||!e||!e.__esModule?o(a,\\"default\\",{value:e,enumerable:!0}):a,e)),_=e=>E(o({},\\"__esModule\\",{value:!0}),e);var m=B((P,y)=>{y.exports=_jsx_runtime});var A={};b(A,{default:()=>u,frontmatter:()=>C});var n=x(m()),C={title:\\"Stacked avatar\\",description:\\"Stacked avatar.\\",component:!0};function F(e){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...e.components},{ComponentPreview:a,ComponentSource:c,Step:s,Steps:d,Tabs:h,TabsContent:t,TabsList:p,TabsTrigger:i}=l;return a||r(\\"ComponentPreview\\",!0),c||r(\\"ComponentSource\\",!0),s||r(\\"Step\\",!0),d||r(\\"Steps\\",!0),h||r(\\"Tabs\\",!0),t||r(\\"TabsContent\\",!0),p||r(\\"TabsList\\",!0),i||r(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{name:\\"stacked-avatar-demo\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  ProfileAvatar,\\n  ProfileAvatarFallback,\\n  ProfileAvatarImage,\\n} from \\"@/components/ui/profile-avatar\\";\\nimport { StackedAvatar } from \\"@/components/ui/stacked-avatar\\";\\n\\nexport function StackedAvatarDemo() {\\n  const avatars = [\\n    { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n    { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n    { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n    { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n  ];\\n  return (\\n    <StackedAvatar count={avatars.length}>\\n      {(index) => (\\n        <ProfileAvatar>\\n          <ProfileAvatarImage\\n            src={avatars[index].src}\\n            alt={avatars[index].alt}\\n          />\\n          <ProfileAvatarFallback />\\n        </ProfileAvatar>\\n      )}\\n    </StackedAvatar>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/stacked-avatar-demo.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatar,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarFallback,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ProfileAvatarImage,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/profile-avatar\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { StackedAvatar } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/stacked-avatar\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" StackedAvatarDemo\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" avatars\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    { src: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", alt: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    { src: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", alt: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    { src: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", alt: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    { src: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", alt: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ];\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"StackedAvatar\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" count\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{avatars.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"index\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarImage\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            src\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{avatars[index].src}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            alt\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{avatars[index].alt}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          />\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarFallback\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"StackedAvatar\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"installation\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(h,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(p,{children:[(0,n.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(t,{value:\\"cli\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stacked-avatar.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stacked-avatar.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stacked-avatar.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stacked-avatar.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stacked-avatar.json\\"\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/stacked-avatar.json\\"\'})]})})})})}),(0,n.jsx)(t,{value:\\"manual\\",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(s,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(c,{name:\\"stacked-avatar\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nconst StackedAvatar = ({\\n  className,\\n  count,\\n  children,\\n  ...props\\n}: Omit<React.ComponentProps<\\"div\\">, \\"children\\"> & {\\n  count: number;\\n  children: (index: number) => React.ReactNode;\\n}) => {\\n  const safeCount = Math.max(0, Math.floor(count));\\n\\n  return (\\n    <div\\n      data-slot=\\"stacked-avatar\\"\\n      className={cn(\\"flex flex-row\\", className)}\\n      {...props}\\n    >\\n      {Array.from({ length: safeCount }, (_, index) => (\\n        <div\\n          key={index}\\n          className={cn(\\"rounded-full border border-border\\")}\\n          style={{ transform: \\\\`translateX(-\\\\${index * 50}%)\\\\` }}\\n        >\\n          {children(index)}\\n        </div>\\n      ))}\\n    </div>\\n  );\\n};\\n\\nexport { StackedAvatar };\\n`,__src__:\\"registry/default/ui/stacked-avatar.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" StackedAvatar\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  count,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Omit\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">, \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"children\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  count\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  children\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"index\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ReactNode\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" safeCount\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Math.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"max\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"0\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", Math.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"floor\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(count));\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"stacked-avatar\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-row\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {Array.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ length: safeCount }, (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"_\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"index\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          key\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{index}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"rounded-full border border-border\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          style\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{ transform: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"`translateX(-${\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"index\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" 50\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\"}%)`\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"children\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(index)}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      ))}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { StackedAvatar };\\"})]})]})})})}),(0,n.jsx)(s,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"usage\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { StackedAvatar } from \\"<path-to-ui-components>/stacked-avatar\\";\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { StackedAvatar } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/stacked-avatar\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`const avatars = [\\n  { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n  { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n  { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n  { src: \\"https://github.com/akashaorg.png\\", alt: \\"@akashaorg\\" },\\n];

1\\nreturn (\\n  <StackedAvatar size={avatars.length}>\\n    {(index) => (\\n      <ProfileAvatar>\\n        <ProfileAvatarImage src={avatars[index].src} alt={avatars[index].alt} />\\n        <ProfileAvatarFallback />\\n      </ProfileAvatar>\\n    )}\\n  </StackedAvatar>\\n);\\n`,children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" avatars\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { src: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", alt: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { src: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", alt: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { src: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", alt: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { src: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"https://github.com/akashaorg.png\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", alt: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"@akashaorg\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"];\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"StackedAvatar\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" size\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{avatars.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"index\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarImage\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" src\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{avatars[index].src} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"alt\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{avatars[index].alt} />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatarFallback\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"ProfileAvatar\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"StackedAvatar\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})})]})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"props\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:\\"Name\\"}),(0,n.jsx)(l.th,{children:\\"Type\\"}),(0,n.jsx)(l.th,{children:\\"Description\\"})]})}),(0,n.jsx)(l.tbody,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"size\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"number\\"})}),(0,n.jsx)(l.td,{children:\\"Total number of avatars.\\"})]})})]})]})}function u(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(F,{...e})}):F(e)}function r(e,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return _(A);})();\\n;return Component;"},"_id":"docs/components/stacked-avatar.mdx","_raw":{"sourceFilePath":"docs/components/stacked-avatar.mdx","sourceFileName":"stacked-avatar.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/stacked-avatar"},"type":"Doc","slug":"/docs/components/stacked-avatar","slugAsParams":"components/stacked-avatar"},{"title":"Stepper","description":"A component that displays progress through steps.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"stepper-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stepper.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install lucide-react\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"stepper\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { Stepper } from \\"<path-to-ui-components>/stepper\\";\\n```\\n\\n```tsx\\n<Stepper currentStep={1} numberOfSteps={5} />\\n```\\n\\n## Props\\n\\n| Name          | Type     | Description            |\\n| ------------- | -------- | ---------------------- |\\n| currentStep   | `number` | Current step.          |\\n| numberOfSteps | `number` | Total number of steps. |\\n","code":"var Component=(()=>{var N=Object.create;var o=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var C=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var s in e)o(n,s,{get:e[s],enumerable:!0})},E=(n,e,s,a)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let r of f(e))!S.call(n,r)&&r!==s&&o(n,r,{get:()=>e[r],enumerable:!(a=B(e,r))||a.enumerable});return n};var _=(n,e,s)=>(s=n!=null?N(b(n)):{},E(e||!n||!n.__esModule?o(s,\\"default\\",{value:n,enumerable:!0}):s,n)),x=n=>E(o({},\\"__esModule\\",{value:!0}),n);var m=C((j,y)=>{y.exports=_jsx_runtime});var k={};g(k,{default:()=>u,frontmatter:()=>v});var l=_(m()),v={title:\\"Stepper\\",description:\\"A component that displays progress through steps.\\",component:!0};function F(n){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...n.components},{ComponentPreview:s,ComponentSource:a,Step:r,Steps:p,Tabs:d,TabsContent:t,TabsList:h,TabsTrigger:i}=e;return s||c(\\"ComponentPreview\\",!0),a||c(\\"ComponentSource\\",!0),r||c(\\"Step\\",!0),p||c(\\"Steps\\",!0),d||c(\\"Tabs\\",!0),t||c(\\"TabsContent\\",!0),h||c(\\"TabsList\\",!0),i||c(\\"TabsTrigger\\",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s,{name:\\"stepper-demo\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport React from \\"react\\";\\n\\nimport { Button } from \\"@/components/ui/button\\";\\nimport { Stepper } from \\"@/components/ui/stepper\\";\\n\\nexport function StepperDemo() {\\n  const [currentStep, setCurrentStep] = React.useState(1);\\n  const numberOfSteps = 5;\\n  return (\\n    <div className=\\"w-full flex flex-col gap-10 justify-center\\">\\n      <Stepper currentStep={currentStep} numberOfSteps={numberOfSteps} />\\n      <div className=\\"flex gap-2 justify-center\\">\\n        <Button\\n          variant=\\"outline\\"\\n          onClick={() => setCurrentStep(currentStep - 1)}\\n          disabled={currentStep === 1}\\n        >\\n          Previous\\n        </Button>\\n        <Button\\n          variant=\\"outline\\"\\n          onClick={() => setCurrentStep(currentStep + 1)}\\n          disabled={currentStep === numberOfSteps + 1}\\n        >\\n          Next\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/stepper-demo.tsx\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Button } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/button\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stepper } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/stepper\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" StepperDemo\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"currentStep\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"setCurrentStep\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"1\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" numberOfSteps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 5\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-full flex flex-col gap-10 justify-center\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stepper\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" currentStep\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{currentStep} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"numberOfSteps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{numberOfSteps} />\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex gap-2 justify-center\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          onClick\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" setCurrentStep\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(currentStep \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"-\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 1\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\")}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          disabled\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{currentStep \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 1\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          Previous\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          variant\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          onClick\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" setCurrentStep\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(currentStep \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"+\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 1\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\")}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          disabled\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{currentStep \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" numberOfSteps \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"+\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 1\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        >\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          Next\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Button\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"installation\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,l.jsxs)(d,{defaultValue:\\"cli\\",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,l.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,l.jsx)(t,{value:\\"cli\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stepper.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stepper.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stepper.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stepper.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/stepper.json\\"\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/stepper.json\\"\'})]})})})})}),(0,l.jsx)(t,{value:\\"manual\\",children:(0,l.jsxs)(p,{children:[(0,l.jsx)(r,{children:\\"Install the following dependencies:\\"}),(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install lucide-react\\n`,__npmCommand__:`npm install lucide-react\\n`,__yarnCommand__:`yarn add lucide-react\\n`,__pnpmCommand__:`pnpm add lucide-react\\n`,__bunCommand__:`bun add lucide-react\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" lucide-react\\"})]})})})}),(0,l.jsx)(r,{children:\\"Copy and paste the following code into your project.\\"}),(0,l.jsx)(a,{name:\\"stepper\\",children:(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { Check, Dot } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nconst Stepper = ({\\n  currentStep,\\n  numberOfSteps,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"nav\\"> & {\\n  currentStep: number;\\n  numberOfSteps: number;\\n}) => {\\n  return (\\n    <nav\\n      data-slot=\\"stepper\\"\\n      className={cn(\\"w-full\\", className)}\\n      {...props}\\n      aria-label=\\"Progress\\"\\n    >\\n      <ol className=\\"flex items-center justify-between\\">\\n        {[...Array(numberOfSteps)].map((_, index) => {\\n          const stepNumber = index + 1;\\n          const isActive = stepNumber === currentStep;\\n          const isCompleted = stepNumber < currentStep;\\n          const isLast = index === numberOfSteps - 1;\\n\\n          const completedStyle = isCompleted\\n            ? \\"border-primary bg-primary\\"\\n            : \\"border-muted bg-transparent\\";\\n\\n          return (\\n            <li\\n              key={stepNumber}\\n              className={cn(\\"relative\\", !isLast && \\"flex-1\\")}\\n              aria-current={isActive ? \\"step\\" : undefined}\\n            >\\n              {!isLast && (\\n                <div\\n                  className={cn(\\n                    \\"absolute left-8 top-1/2 h-0.5 w-[calc(100%-32px)] -translate-y-1/2 transition-colors duration-300\\",\\n                    isCompleted ? \\"bg-primary\\" : \\"bg-muted\\"\\n                  )}\\n                  aria-hidden=\\"true\\"\\n                />\\n              )}\\n              <div\\n                className={cn(\\n                  \\"relative flex h-8 w-8 items-center justify-center rounded-full border-2 transition-all duration-300\\",\\n                  isActive ? \\"border-primary bg-transparent\\" : completedStyle\\n                )}\\n                aria-label={\\\\`Step \\\\${stepNumber}\\\\`}\\n              >\\n                {isCompleted ? (\\n                  <Check\\n                    size={20}\\n                    className=\\"text-primary-foreground transition-colors duration-300\\"\\n                  />\\n                ) : (\\n                  <Dot\\n                    size={20}\\n                    strokeWidth={8}\\n                    className={cn(\\n                      isActive ? \\"text-primary\\" : \\"text-muted\\",\\n                      \\"transition-colors duration-300\\"\\n                    )}\\n                  />\\n                )}\\n              </div>\\n            </li>\\n          );\\n        })}\\n      </ol>\\n    </nav>\\n  );\\n};\\n\\nexport { Stepper };

1\\n`,__src__:\\"registry/default/ui/stepper.tsx\\",__style__:\\"default\\",children:(0,l.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Check, Dot } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Stepper\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  currentStep,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  numberOfSteps,\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"nav\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  currentStep\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  numberOfSteps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"nav\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"stepper\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-full\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"      aria-label\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Progress\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"ol\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex items-center justify-between\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {[\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"Array\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(numberOfSteps)].\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"map\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"_\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"index\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"          const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" stepNumber\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" index \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"+\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 1\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"          const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" isActive\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" stepNumber \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" currentStep;\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"          const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" isCompleted\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" stepNumber \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" currentStep;\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"          const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" isLast\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" index \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" numberOfSteps \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"-\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 1\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"          const\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" completedStyle\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" isCompleted\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"            ?\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"border-primary bg-primary\\"\'})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"            :\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"border-muted bg-transparent\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"          return\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"li\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"              key\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{stepNumber}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"              className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"relative\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"isLast \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"flex-1\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\")}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"              aria-current\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{isActive \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"step\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" :\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" undefined\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"              {\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"isLast \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"                  className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'                    \\"absolute left-8 top-1/2 h-0.5 w-[calc(100%-32px)] -translate-y-1/2 transition-colors duration-300\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                    isCompleted \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"bg-primary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" :\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"bg-muted\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  )}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"                  aria-hidden\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"true\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                />\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"              )}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"              <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"                className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'                  \\"relative flex h-8 w-8 i

1tems-center justify-center rounded-full border-2 transition-all duration-300\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  isActive \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"border-primary bg-transparent\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" :\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" completedStyle\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                )}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"                aria-label\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"`Step ${\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"stepNumber\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\"}`\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"              >\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                {isCompleted \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Check\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"                    size\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"20\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"                    className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-primary-foreground transition-colors duration-300\\"\'})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  />\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                ) \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  <\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Dot\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"                    size\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"20\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"                    strokeWidth\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"8\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"                    className\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                      isActive \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"text-primary\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" :\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"text-muted\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'                      \\"transition-colors duration-300\\"\'})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                    )}\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  />\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"                )}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"              </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"            </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"li\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        })}\\"})}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"ol\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,l.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"nav\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,l.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stepper };\\"})]})]})})})}),(0,l.jsx)(r,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"usage\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Stepper } from \\"<path-to-ui-components>/stepper\\";\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Stepper } \\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,l.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/stepper\\"\'}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,l.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,l.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<Stepper currentStep={1} numberOfSteps={5} />\\n`,children:(0,l.jsx)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,l.jsxs)(e.span,{className:\\"line\\",children:[(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Stepper\\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" currentStep\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"1\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,l.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"numberOfSteps\\"}),(0,l.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,l.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"5\\"}),(0,l.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"} />\\"})]})})})}),`\\n`,(0,l.jsxs)(e.h2,{id:\\"props\\",children:[(0,l.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,l.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.th,{children:\\"Name\\"}),(0,l.jsx)(e.th,{children:\\"Type\\"}),(0,l.jsx)(e.th,{children:\\"Description\\"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:\\"currentStep\\"}),(0,l.jsx)(e.td,{children:(0,l.jsx)(e.code,{children:\\"number\\"})}),(0,l.jsx)(e.td,{children:\\"Current step.\\"})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:\\"numberOfSteps\\"}),(0,l.jsx)(e.td,{children:(0,l.jsx)(e.code,{children:\\"number\\"})}),(0,l.jsx)(e.td,{children:\\"Total number of steps.\\"})]})]})]})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(F,{...n})}):F(n)}function c(n,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+n+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return x(k);})();\\n;return Component;"},"_id":"docs/components/stepper.mdx","_raw":{"sourceFilePath":"docs/components/stepper.mdx","sourceFileName":"stepper.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/stepper"},"type":"Doc","slug":"/docs/components/stepper","slugAsParams":"components/stepper"}

1,{"title":"Tabs","description":"A set of layered sections of contentâknown as tab panelsâthat are displayed one at a time.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/tabs","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Select component customized by restyling.\\n\\n<ComponentPreview name=\\"tabs-demo\\" />\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tabs.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install @radix-ui/react-tabs\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"tabs\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \\"@/components/ui/tabs\\";\\n```\\n\\n```tsx\\n<Tabs defaultValue=\\"followers\\" className=\\"w-[400px]\\">\\n  <TabsList className=\\"grid w-full grid-cols-2\\">\\n    <TabsTrigger value=\\"followers\\">Followers</TabsTrigger>\\n    <TabsTrigger value=\\"following\\">Following</TabsTrigger>\\n  </TabsList>\\n  <TabsContent value=\\"followers\\">Followers list</TabsContent>\\n  <TabsContent value=\\"following\\">Following list</TabsContent>\\n</Tabs>\\n```\\n","code":"var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var B=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),C=(e,l)=>{for(var s in l)o(e,s,{get:l[s],enumerable:!0})},E=(e,l,s,c)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let a of f(l))!N.call(e,a)&&a!==s&&o(e,a,{get:()=>l[a],enumerable:!(c=b(l,a))||c.enumerable});return e};var v=(e,l,s)=>(s=e!=null?u(T(e)):{},E(l||!e||!e.__esModule?o(s,\\"default\\",{value:e,enumerable:!0}):s,e)),_=e=>E(o({},\\"__esModule\\",{value:!0}),e);var m=B((L,y)=>{y.exports=_jsx_runtime});var x={};C(x,{default:()=>g,frontmatter:()=>w});var n=v(m()),w={title:\\"Tabs\\",description:\\"A set of layered sections of content\\\\u2014known as tab panels\\\\u2014that are displayed one at a time.\\",component:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/tabs\\"}};function F(e){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...e.components},{ComponentPreview:s,ComponentSource:c,Step:a,Steps:d,Tabs:p,TabsContent:i,TabsList:h,TabsTrigger:t}=l;return s||r(\\"ComponentPreview\\",!0),c||r(\\"ComponentSource\\",!0),a||r(\\"Step\\",!0),d||r(\\"Steps\\",!0),p||r(\\"Tabs\\",!0),i||r(\\"TabsContent\\",!0),h||r(\\"TabsList\\",!0),t||r(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l.p,{children:\\"A ShadCN Select component customized by restyling.\\"}),`\\n`,(0,n.jsx)(s,{name:\\"tabs-demo\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\"@/components/ui/tabs\\";\\n\\nexport function TabsDemo() {\\n  return (\\n    <Tabs defaultValue=\\"followers\\" className=\\"w-[400px]\\">\\n      <TabsList className=\\"grid w-full grid-cols-2\\">\\n        <TabsTrigger value=\\"followers\\">Followers</TabsTrigger>\\n        <TabsTrigger value=\\"following\\">Following</TabsTrigger>\\n      </TabsList>\\n      <TabsContent value=\\"followers\\">Followers list</TabsContent>\\n      <TabsContent value=\\"following\\">Following list</TabsContent>\\n    </Tabs>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/tabs-demo.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Tabs,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TabsContent,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TabsList,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TabsTrigger,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/tabs\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TabsDemo\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Tabs\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" defaultValue\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"followers\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-[400px]\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"grid w-full grid-cols-2\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"followers\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Followers</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"following\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Following</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"followers\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Followers list</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"following\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Following list</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Tabs\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"installation\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(t,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(t,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(i,{value:\\"cli\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tabs.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tabs.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tabs.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tabs.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tabs.json\\"\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/tabs.json\\"\'})]})})})})}),(0,n.jsx)(i,{value:\\"manual\\",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(a,{children:\\"Install the following dependencies:\\"}),(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install @radix-ui/react-tabs\\n`,__npmCommand__:`npm install @radix-ui/react-tabs\\n`,__yarnCommand__:`yarn add @radix-ui/react-tabs\\n`,__pnpmCommand__:`pnpm add @radix-ui/react-tabs\\n`,__bunCommand__:`bun add @radix-ui/react-tabs\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" @radix-ui/react-tabs\\"})]})})})}),(0,n.jsx)(a,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(c,{name:\\"tabs\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport * as TabsPrimitive from \\"@radix-ui/react-tabs\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nfunction Tabs({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\\n  return (\\n    <TabsPrimitive.Root\\n      data-slot=\\"tabs\\"\\n      className={cn(\\"flex flex-col gap-2\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction TabsList({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\\n  return (\\n    <TabsPrimitive.List\\n      data-slot=\\"tabs-list\\"\\n      className={cn(\\n        \\"bg-muted text-muted-foreground inline-flex h-10 w-fit items-center justify-center rounded-lg p-1\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction TabsTrigger({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\\n  return (\\n    <TabsPrimitive.Trigger\\n      data-slot=\\"tabs-trigger\\"\\n      className={cn(\\n        \\"data-[state=active]:bg-card data-[state=active]:text-primary ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 inline-flex items-center justify-center gap-2 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-invalid:focus-visible:ring-0 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction TabsContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\\n  return (\\n    <TabsPrimitive.Content\\n      data-slot=\\"tabs-content\\"\\n      className={cn(\\n        \\"ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 flex-1 transition-[color,box-shadow] focu

1s-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0\\",\\n        className\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\\n`,__src__:\\"registry/default/ui/tabs.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" TabsPrimitive \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-tabs\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Tabs\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" TabsPrimitive.Root>) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsPrimitive.Root\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"tabs\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-col gap-2\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TabsList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" TabsPrimitive.List>) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsPrimitive.List\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"tabs-list\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"bg-muted text-muted-foreground inline-flex h-10 w-fit items-center justify-center rounded-lg p-1\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TabsTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" TabsPrimitive.Trigger>) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsPrimitive.Trigger\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"tabs-trigger\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:`        \\"data-[state=active]:bg-card data-[state=active]:text-primary ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 inline-flex items-center justify-center gap-2 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focu

1s-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-invalid:focus-visible:ring-0 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4\\"`}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TabsContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" TabsPrimitive.Content>) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsPrimitive.Content\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"tabs-content\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'        \\"ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 flex-1 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        className\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Tabs, TabsList, TabsTrigger, TabsContent };\\"})]})]})})})}),(0,n.jsx)(a,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"usage\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Tabs, TabsContent, TabsList, TabsTrigger } from \\"@/components/ui/tabs\\";\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Tabs, TabsContent, TabsList, TabsTrigger } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/tabs\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<Tabs defaultValue=\\"followers\\" className=\\"w-[400px]\\">\\n  <TabsList className=\\"grid w-full grid-cols-2\\">\\n    <TabsTrigger value=\\"followers\\">Followers</TabsTrigger>\\n    <TabsTrigger value=\\"following\\">Following</TabsTrigger>\\n  </TabsList>\\n  <TabsContent value=\\"followers\\">Followers list</TabsContent>\\n  <TabsContent value=\\"following\\">Following list</TabsContent>\\n</Tabs>\\n`,children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Tabs\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" defaultValue\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"followers\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-[400px]\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"grid w-full grid-cols-2\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"followers\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Followers</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"following\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Following</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"followers\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Followers list</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"following\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Following list</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TabsContent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Tabs\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})})]})}function g(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(F,{...e})}):F(e)}function r(e,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return _(x);})();\\n;return Component;"},"_id":"docs/components/tabs.mdx","_raw":{"sourceFilePath":"docs/components/tabs.mdx","sourceFileName":"tabs.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/tabs"},"type":"Doc","slug":"/docs/components/tabs","slugAsParams":"components/tabs"},{"title":"Tags Input","description":"Tags input renders an input followed by tags.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"tags-input-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tags-input.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install lucide-react\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"tags-input\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport {\\n  TagsInput,\\n  TagsInputItem,\\n  TagsInputList,\\n} from \\"<path-to-ui-components>/tags-input\\";\\n```\\n\\n```tsx\\n<TagsInput\\n  onTagsChange={(tags) => setInterests([...tags])}\\n  placeholder=\\"Interests\\"\\n  className=\\"w-100\\"\\n>\\n  <TagsInputList>\\n    {interests.map((interest) => (\\n      <TagsInputItem key={interest} tag={interest} />\\n    ))}\\n  </TagsInputList>\\n</TagsInput>\\n```\\n\\n## Props\\n\\n| Name         | Type                          | Description                                  |\\n| ------------ | ----------------------------- | -------------------------------------------- |\\n| separators   | \'Enter\' or \'Space\' or \'Comma\' | List of separators.                          |\\n| onTagsChange | `(tags: Set<string>) => void` | Handler function invoked when a tags change. |\\n\\n### TagsInputItem\\n\\n#### Props\\n\\n| Name | Type     | Description |\\n| ---- | -------- | ----------- |\\n| tag  | `string` | Tag value.  |\\n\\n## Examples\\n\\n### Autocomplete\\n\\n<ComponentPreview\\n  name=\\"tags-input-autocomplete\\"\\n  description=\\"Tags input with autocomplete \\"\\n/>\\n","code":"var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var C=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),I=(e,l)=>{for(var s in l)o(e,s,{get:l[s],enumerable:!0})},E=(e,l,s,a)=>{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let c of B(l))!T.call(e,c)&&c!==s&&o(e,c,{get:()=>l[c],enumerable:!(a=N(l,c))||a.enumerable});return e};var v=(e,l,s)=>(s=e!=null?g(f(e)):{},E(l||!e||!e.__esModule?o(s,\\"default\\",{value:e,enumerable:!0}):s,e)),x=e=>E(o({},\\"__esModule\\",{value:!0}),e);var F=C((S,y)=>{y.exports=_jsx_runtime});var w={};I(w,{default:()=>u,frontmatter:()=>b});var n=v(F()),b={title:\\"Tags Input\\",description:\\"Tags input renders an input followed by tags.\\",component:!0};function m(e){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",h3:\\"h3\\",h4:\\"h4\\",pre:\\"pre\\",span:\\"span\\",table:\\"table\\",tbody:\\"tbody\\",td:\\"td\\",th:\\"th\\",thead:\\"thead\\",tr:\\"tr\\",...e.components},{ComponentPreview:s,ComponentSource:a,Step:c,Steps:p,Tabs:d,TabsContent:t,TabsList:h,TabsTrigger:i}=l;return s||r(\\"ComponentPreview\\",!0),a||r(\\"ComponentSource\\",!0),c||r(\\"Step\\",!0),p||r(\\"Steps\\",!0),d||r(\\"Tabs\\",!0),t||r(\\"TabsContent\\",!0),h||r(\\"TabsList\\",!0),i||r(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s,{name:\\"tags-input-demo\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport {\\n  TagsInput,\\n  TagsInputItem,\\n  TagsInputList,\\n} from \\"@/components/ui/tags-input\\";\\n\\nconst INTERESTS = [\\"akasha\\", \\"ipfs\\", \\"ethereum\\", \\"web3\\"];\\n\\nexport function TagsInputDemo() {\\n  const [interests, setInterests] = React.useState(INTERESTS);\\n\\n  return (\\n    <TagsInput\\n      onTagsChange={(tags) => setInterests([...tags])}\\n      placeholder=\\"Interests\\"\\n      className=\\"w-100\\"\\n    >\\n      <TagsInputList>\\n        {interests.map((interest) => (\\n          <TagsInputItem key={interest} tag={interest} />

1\\n        ))}\\n      </TagsInputList>\\n    </TagsInput>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/tags-input-demo.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TagsInput,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TagsInputItem,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TagsInputList,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/tags-input\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" INTERESTS\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"akasha\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ipfs\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"ethereum\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"web3\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"];\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TagsInputDemo\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"interests\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setInterests\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"INTERESTS\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInput\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      onTagsChange\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"tags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setInterests\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"([\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"tags])}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      placeholder\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Interests\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-100\\"\'})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"}

1,children:\\"TagsInputList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {interests.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"map\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"interest\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInputItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" key\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{interest} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"tag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{interest} />\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        ))}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInputList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInput\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"installation\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(d,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(t,{value:\\"cli\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tags-input.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tags-input.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tags-input.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tags-input.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/tags-input.json\\"\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/tags-input.json\\"\'})]})})})})}),(0,n.jsx)(t,{value:\\"manual\\",children:(0,n.jsxs)(p,{children:[(0,n.jsx)(c,{children:\\"Install the following dependencies:\\"}),(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install lucide-react\\n`,__npmCommand__:`npm install lucide-react\\n`,__yarnCommand__:`yarn add lucide-react\\n`,__pnpmCommand__:`pnpm add lucide-react\\n`,__bunCommand__:`bun add lucide-react\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" lucide-react\\"})]})})})}),(0,n.jsx)(c,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(a,{name:\\"tags-input\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { X } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { Badge } from \\"@/components/ui/badge\\";\\nimport { Input } from \\"@/components/ui/input\\";\\n\\ntype Separator = \\"Space\\" | \\"Enter\\" | \\"Comma\\";\\n\\ninterface TagsInputContextProps {\\n  tags: Set<string>;\\n  registerTag: (tag: string) => void;\\n  handleRemove: (tag: string) => void;\\n}\\n\\nconst TagsInputContext = React.createContext<TagsInputContextProps | null>(\\n  null\\n);\\n\\nfunction useTagsInputContext() {\\n  const context = React.useContext(TagsInputContext);\\n  if (!context) {\\n    throw new Error(\\"\\\\`useTagsInputContext\\\\` must be used within \\\\`TagsInput\\\\`\\");\\n  }\\n  return context;\\n}\\n\\nfunction isSeparator(code: string, separators: Separator[]): code is Separator {\\n  return !!separators.find((separator) => separator === code);\\n}\\n\\nconst TagsInputList = ({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<\\"div\\">) => {\\n  const { tags, handleRemove } = useTagsInputContext();\\n\\n  //remove unmounted TagsInputItem\'s from local state\\n  React.useEffect(() => {\\n    const childrenArray = React.Children.toArray(children).filter(\\n      (\\n        child\\n      ): child is React.ReactElement<\\n        React.ComponentProps<typeof TagsInputItem>\\n      > => React.isValidElement(child) && child.type === TagsInputItem\\n    );\\n\\n    const currentTags = new Set(childrenArray.map((child) => child.props.tag));\\n\\n    if (currentTags.size < tags.size) {\\n      const removedTags = tags.difference(currentTags);\\n      removedTags.forEach(handleRemove);\\n    }\\n  }, [children, handleRemove, tags]);\\n\\n  return (\\n    <div\\n      data-slot=\\"tags-input-list\\"\\n      className={cn(\\"w-full flex items-center gap-2 flex-wrap\\", className)}\\n      {...props}\\n    >\\n      {children}\\n    </div>\\n  );\\n};\\n\\nconst TagsInputItem = ({\\n  tag,\\n  children,\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof Badge> & { tag: string }) => {\\n  const { tags, registerTag, handleRemove } = useTagsInputContext();\\n\\n  React.useEffect(() => {\\n    if (!tags.has(tag)) {\\n      registerTag(tag);\\n    }\\n  }, [tag, registerTag, tags]);\\n\\n  return (\\n    <Badge\\n      data-slot=\\"tags-input-item\\"\\n      variant=\\"outline\\"\\n      className={cn(\\"rounded-full\\", className)}\\n      {...props}\\n    >\\n      {React.Children.count(children) ? children : tag}\\n      <button type=\\"button\\" onClick={() => handleRemove(tag)}>\\n        <X className=\\"size-4\\" />\\n      </button>\\n    </Badge>\\n  );\\n};\\n\\nconst TagsInput = ({\\n  ref,\\n  separators = [\\"Enter\\"],\\n  className,\\n  children,\\n  onTagsChange,\\n  onChange,\\n  onKeyDown,\\n  ...props\\n}: React.ComponentProps<typeof Input> & {\\n  separators?: Separator[];\\n  onTagsChange?: (tags: Set<string>) => void;\\n}) => {\\n  const [tags, setTags] = React.useState<Set<string>>(new Set());\\n  const [inputValue, setInputValue] = React.useState(\\"\\");\\n  const inputRef = React.useRef<HTMLInputElement>(null);\\n\\n  const registerTag = (tag: string) => {\\n    setTags((prevTags) => new Set([...prevTags, tag]));\\n  };\\n\\n  const handleRemove = (tag: string) => {\\n    const newTags = new Set(tags);\\n    newTags.delete(tag);\\n    setTags(newTags);\\n    onTagsChange?.(newTags);\\n  };\\n\\n  return (\\n    <TagsInputContext.Provider value={{ tags, registerTag, handleRemove }}>\\n      <div\\n        data-slot=\\"tags-input\\"\\n        className={cn(\\"flex flex-col gap-3\\", className)}

1\\n      >\\n        <Input\\n          ref={(node) => {\\n            inputRef.current = node;\\n            if (typeof ref === \\"function\\") {\\n              ref(node);\\n            } else if (ref) {\\n              ref.current = node;\\n            }\\n          }}\\n          data-slot=\\"tags-input-field\\"\\n          type=\\"search\\"\\n          value={inputValue}\\n          onChange={(event) => {\\n            setInputValue(event.target.value);\\n            onChange?.(event);\\n          }}\\n          onKeyDown={(event) => {\\n            if (isSeparator(event.code, separators) && inputValue.trim()) {\\n              if (event.key === \\",\\" && separators.includes(\\"Comma\\")) {\\n                event.preventDefault();\\n              }\\n\\n              registerTag(inputValue);\\n              onTagsChange?.(new Set([...tags, inputValue]));\\n\\n              // Clear controlled input via native setter to propagate change event.\\n              const input = event.target as HTMLInputElement;\\n              Object.getOwnPropertyDescriptor(\\n                HTMLInputElement.prototype,\\n                \\"value\\"\\n              )?.set?.call(input, \\"\\");\\n\\n              input.dispatchEvent(new Event(\\"change\\", { bubbles: true }));\\n              inputRef.current?.blur();\\n            }\\n\\n            onKeyDown?.(event);\\n          }}\\n          {...props}\\n        />\\n        {children}\\n      </div>\\n    </TagsInputContext.Provider>\\n  );\\n};\\n\\nexport { TagsInput, TagsInputList, TagsInputItem };\\n`,__src__:\\"registry/default/ui/tags-input.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { X } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"lucide-react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Badge } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/badge\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Input } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/input\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Separator\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"Space\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"Enter\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"Comma\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"interface\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TagsInputContextProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  tags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Set\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  registerTag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"tag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" void\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  handleRemove\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"tag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" void\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" TagsInputContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"createContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"TagsInputContextProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"  null\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useTagsInputContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" context\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(TagsInputContext);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"context) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    throw\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Error\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"`useTagsInputContext` must be used within `TagsInput`\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" context;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" isSeparator\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"code\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"separators\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Separator\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"[])\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\" code\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" is\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Separator\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" !!\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"separators.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"find\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"separator\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" separator \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" code);\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"}

1,children:\\" TagsInputList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"tags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"handleRemove\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useTagsInputContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#6A737D\\"},children:\\"  //remove unmounted TagsInputItem\'s from local state\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useEffect\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" childrenArray\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.Children.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"toArray\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(children).\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"filter\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      (\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        child\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      ): child is React.ReactElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"<\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        React.ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"<typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" TagsInputItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"      >\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"isValidElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(child) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" child.type \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" TagsInputItem\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" currentTags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Set\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(childrenArray.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"map\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"child\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" child.props.tag));\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (currentTags.size \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" tags.size) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"      const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" removedTags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" tags.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"difference\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(currentTags);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      removedTags.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"forEach\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(handleRemove);\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [children, handleRemove, tags]);\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"tags-input-list\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-full flex items-center gap-2 flex-wrap\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {children}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TagsInputItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  tag,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Badge> \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"tag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"tags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"registerTag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"handleRemove\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useTagsInputContext\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useEffect\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"tags.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"has\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(tag)) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      registerTag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(tag);\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    }\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  }, [tag, registerTag, tags]);\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"tags-input-item\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"outline\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"rounded-full\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {React.Children.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},childre

1n:\\"count\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(children) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" children \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" tag}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"button\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" type\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"button\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" onClick\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{() \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleRemove\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(tag)}>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"X\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"size-4\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" />\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"button\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Badge\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TagsInput\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ref,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  separators \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Enter\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"],\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  children,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  onTagsChange,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  onChange,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  onKeyDown,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Input> \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  separators\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Separator\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"[];\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  onTagsChange\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"tags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Set\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" void\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"tags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setTags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"Set\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">>(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Set\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"());\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"inputValue\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setInputValue\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" inputRef\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"useRef\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLInputElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"null\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" registerTag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"tag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setTags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"prevTags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Set\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"([\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"prevTags, tag]));\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleRemove\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"tag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"    const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" newTags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Set\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(tags);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    newTags.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"delete\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(tag);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setTags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(newTags);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    onTagsChange\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(newTags);\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInputContext.Provider\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{{ tags, registerTag, handleRemove }}>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"tags-input\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-col gap-3\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", className)}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Input\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          ref\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"node\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            inputRef.current \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" node;\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"            if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ref \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},childre

1n:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"function\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"              ref\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(node);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"else\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (ref) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              ref.current \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" node;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            }\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"tags-input-field\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          type\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"search\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{inputValue}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          onChange\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"event\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            setInputValue\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(event.target.value);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            onChange\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(event);\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"          onKeyDown\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"event\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"            if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"isSeparator\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(event.code, separators) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" inputValue.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"trim\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"()) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"              if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (event.key \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\",\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" separators.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"includes\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Comma\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")) {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                event.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"preventDefault\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              }\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"              registerTag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(inputValue);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"              onTagsChange\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Set\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"([\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"tags, inputValue]));\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#6A737D\\"},children:\\"              // Clear controlled input via native setter to propagate change event.\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"              const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" input\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" event.target \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" HTMLInputElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              Object.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"getOwnPropertyDescriptor\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"                HTMLInputElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"prototype\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'                \\"value\\"\'})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              )?.set?.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"call\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(input, \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              input.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"dispatchEvent\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"new\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Event\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"change\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", { bubbles: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"true\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" }));\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              inputRef.current?.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"blur\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"();\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            }\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            onKeyDown\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(event);\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {children}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInputContext.Provider\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"}

1,children:\\" { TagsInput, TagsInputList, TagsInputItem };\\"})]})]})})})}),(0,n.jsx)(c,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"usage\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import {\\n  TagsInput,\\n  TagsInputItem,\\n  TagsInputList,\\n} from \\"<path-to-ui-components>/tags-input\\";\\n`,children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TagsInput,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TagsInputItem,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TagsInputList,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/tags-input\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})]})})}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<TagsInput\\n  onTagsChange={(tags) => setInterests([...tags])}\\n  placeholder=\\"Interests\\"\\n  className=\\"w-100\\"\\n>\\n  <TagsInputList>\\n    {interests.map((interest) => (\\n      <TagsInputItem key={interest} tag={interest} />\\n    ))}\\n  </TagsInputList>\\n</TagsInput>\\n`,children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInput\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  onTagsChange\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"tags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setInterests\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"([\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"tags])}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  placeholder\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Interests\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"  className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-100\\"\'})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"}

1,children:\\"TagsInputList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    {interests.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"map\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"interest\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInputItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" key\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{interest} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"tag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{interest} />\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    ))}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInputList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInput\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})]})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"props\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:\\"Name\\"}),(0,n.jsx)(l.th,{children:\\"Type\\"}),(0,n.jsx)(l.th,{children:\\"Description\\"})]})}),(0,n.jsxs)(l.tbody,{children:[(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"separators\\"}),(0,n.jsx)(l.td,{children:\\"\'Enter\' or \'Space\' or \'Comma\'\\"}),(0,n.jsx)(l.td,{children:\\"List of separators.\\"})]}),(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"onTagsChange\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"(tags: Set<string>) => void\\"})}),(0,n.jsx)(l.td,{children:\\"Handler function invoked when a tags change.\\"})]})]})]}),`\\n`,(0,n.jsxs)(l.h3,{id:\\"tagsinputitem\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#tagsinputitem\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"TagsInputItem\\"]}),`\\n`,(0,n.jsxs)(l.h4,{id:\\"props-1\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#props-1\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Props\\"]}),`\\n`,(0,n.jsxs)(l.table,{children:[(0,n.jsx)(l.thead,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.th,{children:\\"Name\\"}),(0,n.jsx)(l.th,{children:\\"Type\\"}),(0,n.jsx)(l.th,{children:\\"Description\\"})]})}),(0,n.jsx)(l.tbody,{children:(0,n.jsxs)(l.tr,{children:[(0,n.jsx)(l.td,{children:\\"tag\\"}),(0,n.jsx)(l.td,{children:(0,n.jsx)(l.code,{children:\\"string\\"})}),(0,n.jsx)(l.td,{children:\\"Tag value.\\"})]})})]}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"examples\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#examples\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Examples\\"]}),`\\n`,(0,n.jsxs)(l.h3,{id:\\"autocomplete\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#autocomplete\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Autocomplete\\"]}),`\\n`,(0,n.jsx)(s,{name:\\"tags-input-autocomplete\\",description:\\"Tags input with autocomplete \\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`\\"use client\\";

1\\n\\nimport { useState } from \\"react\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompleteTrigger,\\n} from \\"@/components/ui/autocomplete\\";\\nimport {\\n  TagsInput,\\n  TagsInputItem,\\n  TagsInputList,\\n} from \\"@/components/ui/tags-input\\";\\n\\nconst frameworks = [\\n  { value: \\"next\\", label: \\"Next.js\\" },\\n  { value: \\"sveltekit\\", label: \\"SvelteKit\\" },\\n  { value: \\"nuxt\\", label: \\"Nuxt.js\\" },\\n  { value: \\"remix\\", label: \\"Remix\\" },\\n  { value: \\"astro\\", label: \\"Astro\\" },\\n  { value: \\"wordpress\\", label: \\"WordPress\\" },\\n  { value: \\"express\\", label: \\"Express.js\\" },\\n  { value: \\"nest\\", label: \\"Nest.js\\" },\\n];\\n\\nexport function TagsInputAutocomplete() {\\n  const [value, setValue] = useState(\\"\\");\\n  const [selectedValues, setSelectedValues] = useState<string[]>([\\n    \\"next\\",\\n    \\"remix\\",\\n    \\"astro\\",\\n    \\"nest\\",\\n  ]);\\n\\n  const handleValueChange = (value: string[]) => {\\n    setSelectedValues(value);\\n  };\\n\\n  return (\\n    <div className=\\"flex flex-col gap-2 items-center w-full\\">\\n      <Autocomplete\\n        multiple\\n        value={selectedValues}\\n        onValueChange={handleValueChange}\\n        className=\\"w-100\\"\\n      >\\n        <AutocompleteTrigger asChild>\\n          <TagsInput\\n            value={value}\\n            separators={[\\"Enter\\", \\"Space\\"]}\\n            onChange={(event) => setValue(event.target.value)}\\n            onTagsChange={(tags) => {\\n              setSelectedValues([...tags]);\\n            }}\\n            placeholder=\\"Interests\\"\\n          >\\n            <TagsInputList>\\n              {selectedValues.map((interest) => (\\n                <TagsInputItem key={interest} tag={interest}>\\n                  {frameworks.find((framework) => framework.value === interest)\\n                    ?.label ?? interest}\\n                </TagsInputItem>\\n              ))}\\n            </TagsInputList>\\n          </TagsInput>\\n        </AutocompleteTrigger>\\n        <AutocompleteList>\\n          {frameworks.map((framework) => (\\n            <AutocompleteItem key={framework.value} value={framework.value}>\\n              {framework.label}\\n            </AutocompleteItem>\\n          ))}\\n        </AutocompleteList>\\n      </Autocomplete>\\n    </div>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/tags-input-autocomplete.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"use client\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { useState } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  Autocomplete,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteItem,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteList,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  AutocompleteTrigger,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/autocomplete\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TagsInput,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  TagsInputItem,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"}

1,children:\\"  TagsInputList,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/tags-input\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" frameworks\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"next\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Next.js\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sveltekit\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"SvelteKit\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"nuxt\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Nuxt.js\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"remix\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Remix\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"astro\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Astro\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"wordpress\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"WordPress\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"express\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Express.js\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  { value: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"nest\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", label: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Nest.js\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" },\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"];\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TagsInputAutocomplete\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setValue\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useState\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"selectedValues\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"setSelectedValues\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" useState\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"[]>([\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'    \\"next\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'    \\"remix\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'    \\"astro\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'    \\"nest\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  ]);\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" handleValueChange\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" string\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"[]) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    setSelectedValues\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(value);\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  };\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"flex flex-col gap-2 items-center w-full\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Autocomplete\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        multiple\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{selectedValues}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        onValueChange\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{handleValueChange}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"w-100\\"\'})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" asChild\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInput\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{value}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            separators\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{[\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Enter\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Space\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"]}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            onChange\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"event\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" setValue\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(event.target.value)}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            onTagsChange\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"tags\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"              setSelectedValues\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"([\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"tags]);\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            }}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"            placeholder\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Interests\\"\'})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          >\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"}

1,children:\\"TagsInputList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              {selectedValues.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"map\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"interest\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInputItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" key\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{interest} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"tag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{interest}>\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                  {frameworks.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"find\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"framework\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" framework.value \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" interest)\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                    ?.label \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"??\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" interest}\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"                </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInputItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              ))}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInputList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"TagsInput\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteTrigger\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          {frameworks.\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"map\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"((\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"framework\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" key\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{framework.value} \\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"value\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{framework.value}>\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"              {framework.label}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"            </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteItem\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"          ))}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"AutocompleteList\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Autocomplete\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function u(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}function r(e,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return x(w);})();\\n;return Component;"},"_id":"docs/components/tags-input.mdx","_raw":{"sourceFilePath":"docs/components/tags-input.mdx","sourceFileName":"tags-input.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/tags-input"},"type":"Doc","slug":"/docs/components/tags-input","slugAsParams":"components/tags-input"},{"title":"Textarea","description":"Displays a form textarea or a component that looks like a textarea.","published":true,"links":{"doc":"https://ui.shadcn.com/docs/components/textarea","type":"LinksProperties","_raw":{}},"featured":false,"component":true,"toc":true,"body":{"raw":"\\nA ShadCN Textarea component customized by adjusting background color and adding a circular progress component.\\n\\n<ComponentPreview name=\\"textarea-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/textarea.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"textarea\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n","code":"var Component=(()=>{var g=Object.create;var t=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var b=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),B=(l,e)=>{for(var a in e)t(l,a,{get:e[a],enumerable:!0})},E=(l,e,a,c)=>{if(e&&typeof e==\\"object\\"||typeof e==\\"function\\")for(let r of v(e))!N.call(l,r)&&r!==a&&t(l,r,{get:()=>e[r],enumerable:!(c=x(e,r))||c.enumerable});return l};var C=(l,e,a)=>(a=l!=null?g(f(l)):{},E(e||!l||!l.__esModule?t(a,\\"default\\",{value:l,enumerable:!0}):a,l)),_=l=>E(t({},\\"__esModule\\",{value:!0}),l);var m=b((L,y)=>{y.exports=_jsx_runtime});var w={};B(w,{default:()=>F,frontmatter:()=>k});var n=C(m()),k={title:\\"Textarea\\",description:\\"Displays a form textarea or a component that looks like a textarea.\\",component:!0,links:{doc:\\"https://ui.shadcn.com/docs/components/textarea\\"}};function u(l){let e={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",p:\\"p\\",pre:\\"pre\\",span:\\"span\\",...l.components},{ComponentPreview:a,ComponentSource:c,Step:r,Steps:d,Tabs:p,TabsContent:o,TabsList:h,TabsTrigger:i}=e;return a||s(\\"ComponentPreview\\",!0),c||s(\\"ComponentSource\\",!0),r||s(\\"Step\\",!0),d||s(\\"Steps\\",!0),p||s(\\"Tabs\\",!0),o||s(\\"TabsContent\\",!0),h||s(\\"TabsList\\",!0),i||s(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:\\"A ShadCN Textarea component customized by adjusting background color and adding a circular progress component.\\"}),`\\n`,(0,n.jsx)(a,{name:\\"textarea-demo\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { Textarea } from \\"@/components/ui/textarea\\";\\n\\nexport function TextareaDemo() {\\n  return <Textarea placeholder=\\"Type your message here.\\" />;\\n}\\n`,__src__:\\"registry/default/examples/textarea-demo.tsx\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Textarea } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/textarea\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" TextareaDemo\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"Textarea\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" placeholder\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"Type your message here.\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" />;\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(e.h2,{id:\\"installation\\",children:[(0,n.jsx)(e.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(e.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(p,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(o,{value:\\"cli\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/textarea.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/textarea.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/textarea.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/textarea.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/textarea.json\\"\\n`,children:(0,n.jsx)(e.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/textarea.json\\"\'})]})})})})}),(0,n.jsx)(o,{value:\\"manual\\",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(r,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(c,{name:\\"textarea\\",children:(0,n.jsx)(e.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(e.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\nimport { CircularProgress } from \\"@/components/ui/circular-progress\\";\\n\\nfunction Textarea({\\n  maxLength = 280,\\n  onChange,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\"textarea\\"> & { maxLength?: number }) {\\n  const [letterCount, setLetterCount] = React.useState(\\n    props.value?.toString().length || 0\\n  );\\n\\n  const progressValue = Math.min(\\n    Math.floor((letterCount / maxLength) * 100),\\n    100\\n  );\\n\\n  return (\\n    <div className=\\"relative w-full max-w-full\\">\\n      <textarea\\n        data-slot=\\"textarea\\"\\n        maxLength={maxLength}\\n        className={cn(\\n          \\"border-input placeholder:text-muted-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/50 wrap-anywhere flex field-sizing-content min-h-16 w-full rounded-md border bg-card pr-10 pl-3 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-[3px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4\\",\\n          className\\n        )}\\n        onChange={(event) => {\\n          setLetterCount(event.target.value.length);\\n          onChange?.(event);\\n        }}\\n        {...props}\\n      />\\n      <CircularProgress\\n        value={progressValue}\\n        className=\\"absolute bottom-2 right-2 pointer-events-none\\"\\n      />\\n    </div>\\n  );\\n}\\n\\nexport { Textarea };\\n`,__src__:\\"registry/default/ui/textarea.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(e.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { CircularProgress } \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/circular-progress\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" Textarea\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"({\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  maxLength\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 280\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  onChange\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"  className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"ComponentProps\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"textarea\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"> \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"&\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { \\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"maxLength\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" number\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" }) {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" [\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"letterCount\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"setLetterCount\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"] \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" React.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"useState\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    props.value?.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"toString\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"().\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" ||\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 0\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" progressValue\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" Math.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"min\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    Math.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"floor\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"((letterCount \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"/\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" maxLength) \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"*\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\" 100\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"),\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"    100\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\" className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"relative w-full max-w-full\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"textarea\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        data-slot\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"textarea\\"\'})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        maxLength\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{maxLength}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'          \\"border-input placeholder:text-muted-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/50 wrap-anywhere flex field-sizing-content min-h-16 w-full rounded-md border bg-card pr-10 pl-3 py-2 text-base shadow-xs transition-[color,box-shadow] focu

1s-visible:ring-4 focus-visible:outline-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-[3px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4\\"\'}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"          className\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        )}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        onChange\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{(\\"}),(0,n.jsx)(e.span,{style:{color:\\"#FFAB70\\"},children:\\"event\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          setLetterCount\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"(event.target.value.\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"length\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\");\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"          onChange\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"?.(event);\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        }}\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"        {\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      />\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      <\\"}),(0,n.jsx)(e.span,{style:{color:\\"#79B8FF\\"},children:\\"CircularProgress\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        value\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"{progressValue}\\"})]}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#B392F0\\"},children:\\"        className\\"}),(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(e.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"absolute bottom-2 right-2 pointer-events-none\\"\'})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"      />\\"})}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(e.span,{style:{color:\\"#85E89D\\"},children:\\"div\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(e.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(e.span,{className:\\"line\\",children:[(0,n.jsx)(e.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(e.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Textarea };\\"})]})]})})})}),(0,n.jsx)(r,{children:\\"Update the import paths to match your project setup.\\"})]})})]})]})}function F(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(u,{...l})}):u(l)}function s(l,e){throw new Error(\\"Expected \\"+(e?\\"component\\":\\"object\\")+\\" `\\"+l+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return _(w);})();\\n;return Component;"},"_id":"docs/components/textarea.mdx","_raw":{"sourceFilePath":"docs/components/textarea.mdx","sourceFileName":"textarea.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/textarea"},"type":"Doc","slug":"/docs/components/textarea","slugAsParams":"components/textarea"},{"title":"Typography","description":"Styles for text content.","published":true,"featured":false,"component":true,"toc":true,"body":{"raw":"\\n<ComponentPreview name=\\"typography-demo\\" />

1\\n\\n## Installation\\n\\n<Tabs defaultValue=\\"cli\\">\\n\\n<TabsList>\\n  <TabsTrigger value=\\"cli\\">CLI</TabsTrigger>\\n  <TabsTrigger value=\\"manual\\">Manual</TabsTrigger>\\n</TabsList>\\n<TabsContent value=\\"cli\\">\\n\\n```bash\\nnpx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/typography.json\\"\\n```\\n\\n</TabsContent>\\n\\n<TabsContent value=\\"manual\\">\\n\\n<Steps>\\n\\n<Step>Install the following dependencies:</Step>\\n\\n```bash\\nnpm install @radix-ui/react-slot\\n```\\n\\n<Step>Copy and paste the following code into your project.</Step>\\n\\n<ComponentSource name=\\"typography\\" />\\n\\n<Step>Update the import paths to match your project setup.</Step>\\n\\n</Steps>\\n\\n</TabsContent>\\n\\n</Tabs>\\n\\n## Usage\\n\\n```tsx\\nimport { Typography } from \\"<path-to-ui-components>/typography\\";\\n```\\n\\n```tsx\\n<Typography>Almost before we knew it, we had left the ground.</Typography>\\n```\\n\\n## h1\\n\\n<ComponentPreview name=\\"typography-h1\\" />\\n\\n## h2\\n\\n<ComponentPreview name=\\"typography-h2\\" />\\n\\n## h3\\n\\n<ComponentPreview name=\\"typography-h3\\" />\\n\\n## h4\\n\\n<ComponentPreview name=\\"typography-h4\\" />\\n\\n## h5\\n\\n<ComponentPreview name=\\"typography-h5\\" />\\n\\n## h6\\n\\n<ComponentPreview name=\\"typography-h6\\" />\\n\\n## p\\n\\n<ComponentPreview name=\\"typography-p\\" />\\n\\n## Small\\n\\n<ComponentPreview name=\\"typography-small\\" />\\n\\n## Small bold\\n\\n<ComponentPreview name=\\"typography-small-bold\\" />\\n\\n## Extra small\\n\\n<ComponentPreview name=\\"typography-extra-small\\" />\\n\\n## Extra small bold\\n\\n<ComponentPreview name=\\"typography-extra-small-bold\\" />\\n","code":"var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var _=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),T=(e,l)=>{for(var a in l)c(e,a,{get:l[a],enumerable:!0})},y=(e,l,a,o)=>

1{if(l&&typeof l==\\"object\\"||typeof l==\\"function\\")for(let r of N(l))!B.call(e,r)&&r!==a&&c(e,r,{get:()=>l[r],enumerable:!(o=f(l,r))||o.enumerable});return e};var b=(e,l,a)=>(a=e!=null?u(x(e)):{},y(l||!e||!e.__esModule?c(a,\\"default\\",{value:e,enumerable:!0}):a,e)),v=e=>y(c({},\\"__esModule\\",{value:!0}),e);var m=_((k,E)=>{E.exports=_jsx_runtime});var w={};T(w,{default:()=>g,frontmatter:()=>C});var n=b(m()),C={title:\\"Typography\\",description:\\"Styles for text content.\\",component:!0};function F(e){let l={a:\\"a\\",code:\\"code\\",div:\\"div\\",h2:\\"h2\\",pre:\\"pre\\",span:\\"span\\",...e.components},{ComponentPreview:a,ComponentSource:o,Step:r,Steps:p,Tabs:h,TabsContent:t,TabsList:d,TabsTrigger:i}=l;return a||s(\\"ComponentPreview\\",!0),o||s(\\"ComponentSource\\",!0),r||s(\\"Step\\",!0),p||s(\\"Steps\\",!0),h||s(\\"Tabs\\",!0),t||s(\\"TabsContent\\",!0),d||s(\\"TabsList\\",!0),i||s(\\"TabsTrigger\\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a,{name:\\"typography-demo\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographyDemo() {\\n  return <Typography>Typography</Typography>;\\n}\\n`,__src__:\\"registry/default/examples/typography-demo.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyDemo\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Typography</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"installation\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#installation\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Installation\\"]}),`\\n`,(0,n.jsxs)(h,{defaultValue:\\"cli\\",children:[(0,n.jsxs)(d,{children:[(0,n.jsx)(i,{value:\\"cli\\",children:\\"CLI\\"}),(0,n.jsx)(i,{value:\\"manual\\",children:\\"Manual\\"})]}),(0,n.jsx)(t,{value:\\"cli\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/typography.json\\"\\n`,__npmCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/typography.json\\"\\n`,__yarnCommand__:`npx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/typography.json\\"\\n`,__pnpmCommand__:`pnpm dlx shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/typography.json\\"\\n`,__bunCommand__:`bunx --bun shadcn@latest add \\"https://akasha-ui.pages.dev/r/styles/default/typography.json\\"\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"bas

1h\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npx\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" shadcn@latest\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" add\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"https://akasha-ui.pages.dev/r/styles/default/typography.json\\"\'})]})})})})}),(0,n.jsx)(t,{value:\\"manual\\",children:(0,n.jsxs)(p,{children:[(0,n.jsx)(r,{children:\\"Install the following dependencies:\\"}),(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",__rawString__:`npm install @radix-ui/react-slot\\n`,__npmCommand__:`npm install @radix-ui/react-slot\\n`,__yarnCommand__:`yarn add @radix-ui/react-slot\\n`,__pnpmCommand__:`pnpm add @radix-ui/react-slot\\n`,__bunCommand__:`bun add @radix-ui/react-slot\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"bash\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"npm\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" install\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\\" @radix-ui/react-slot\\"})]})})})}),(0,n.jsx)(r,{children:\\"Copy and paste the following code into your project.\\"}),(0,n.jsx)(o,{name:\\"typography\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import * as React from \\"react\\";\\nimport { Slot } from \\"@radix-ui/react-slot\\";\\nimport { cva, type VariantProps } from \\"class-variance-authority\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nconst typographyVariants = cva(\\"text-foreground\\", {\\n  variants: {\\n    variant: {\\n      h1: \\"scroll-m-20 text-5xl\\tfont-bold\\",\\n      h2: \\"scroll-m-20 text-4xl\\tfont-bold\\",\\n      h3: \\"scroll-m-20 text-3xl\\tfont-bold\\",\\n      h4: \\"scroll-m-20 text-2xl\\tfont-bold\\",\\n      h5: \\"scroll-m-20 text-xl font-bold\\",\\n      h6: \\"scroll-m-20 text-lg font-bold\\",\\n      p: \\"text-base\\",\\n      sm: \\"text-sm\\",\\n      xs: \\"text-xs\\",\\n    },\\n  },\\n  defaultVariants: {\\n    variant: \\"p\\",\\n  },\\n});\\n\\ntype Variant = VariantProps<typeof typographyVariants>[\\"variant\\"];\\n\\ntype Heading = \\"h1\\" | \\"h2\\" | \\"h3\\" | \\"h4\\" | \\"h5\\" | \\"h6\\";\\n\\nfunction isHeading(variant: Variant): variant is Heading {\\n  return (\\n    variant !== null &&\\n    variant !== undefined &&\\n    [\\"h1\\", \\"h2\\", \\"h3\\", \\"h4\\", \\"h5\\", \\"h6\\"].includes(variant)\\n  );\\n}\\n\\nfunction getTag(variant: Variant) {\\n  if (isHeading(variant) || variant === \\"p\\") return variant;\\n  if (variant === \\"sm\\" || variant === \\"xs\\") return \\"small\\";\\n  return \\"div\\";\\n}\\n\\ninterface TypographyProps\\n  extends React.HtmlHTMLAttributes<HTMLHeadingElement | HTMLParagraphElement>,\\n    VariantProps<typeof typographyVariants> {\\n  asChild?: boolean;\\n  bold?: boolean;\\n}\\n\\nconst Typography = ({\\n  className,\\n  variant,\\n  bold,\\n  asChild,\\n  ...props\\n}: TypographyProps) => {\\n  const tag = getTag(variant);\\n  const Comp = asChild ? Slot : tag;\\n\\n  return (\\n    <Comp\\n      data-slot=\\"typography\\"\\n      className={cn(\\n        typographyVariants({ variant, className }),\\n        bold && \\"font-bold\\"\\n      )}\\n      {...props}\\n    />\\n  );\\n};\\n\\nexport { Typography, typographyVariants };\\n`,__src__:\\"registry/default/ui/typography.tsx\\",__style__:\\"default\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" *\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" as\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" React \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"react\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Slot } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@radix-ui/react-slot\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cva, \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" VariantProps } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"}

1,children:\' \\"class-variance-authority\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { cn } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/lib/utils\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" typographyVariants\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" cva\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-foreground\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", {\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  variants: {\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    variant: {\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      h1: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"scroll-m-20 text-5xl\\tfont-bold\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      h2: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"scroll-m-20 text-4xl\\tfont-bold\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      h3: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"scroll-m-20 text-3xl\\tfont-bold\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      h4: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"scroll-m-20 text-2xl\\tfont-bold\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      h5: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"scroll-m-20 text-xl font-bold\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      h6: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"scroll-m-20 text-lg font-bold\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      p: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-base\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      sm: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-sm\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      xs: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"text-xs\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    },\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  },\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  defaultVariants: {\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    variant: \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\",\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  },\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"});\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" VariantProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" typographyVariants>[\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"variant\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"];\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"type\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Heading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"h1\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"h2\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"h3\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"h4\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"h5\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"h6\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" isHeading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\")\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" is\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Heading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    variant \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!==\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" null\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    variant \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"!==\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" undefined\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" &&\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    [\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h1\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h2\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h3\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h4\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h5\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\", \\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h6\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"].\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"includes\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(variant)\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" getTag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"}),(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"isHeading\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(variant) \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"||\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" variant \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"p\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" variant;\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  if\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (variant \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"sm\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" ||\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" variant \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"===\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"xs\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"small\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"div\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"interface\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyProps\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  extends\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" React\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\".\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"HtmlHTMLAttributes\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"HTMLHeadingElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" |\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" HTMLParagraphElement\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">,\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"    VariantProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"typeof\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" typographyVariants> {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  asChild\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#FFAB70\\"},children:\\"  bold\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?:\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" boolean\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" ({\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  className,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  variant,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  bold,\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  asChild,\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  ...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyProps\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\") \\"}),(0,n.jsx)(l.spa

1n,{style:{color:\\"#F97583\\"},children:\\"=>\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" tag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" getTag\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(variant);\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  const\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\" Comp\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" =\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" asChild \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"?\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" Slot \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\":\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" tag;\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Comp\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      data-slot\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"typography\\"\'})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"      className\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"{\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"cn\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"(\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\"        typographyVariants\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"({ variant, className }),\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"        bold \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"&&\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"font-bold\\"\'})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      )}\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      {\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"...\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"props}\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    />\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"};\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography, typographyVariants };\\"})]})]})})})}),(0,n.jsx)(r,{children:\\"Update the import paths to match your project setup.\\"})]})})]}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"usage\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#usage\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Usage\\"]}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"<path-to-ui-components>/typography\\";\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"<path-to-ui-components>/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]})})})}),`\\n`,(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`<Typography>Almost before we knew it, we had left the ground.</Typography>\\n`,children:(0,n.jsx)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"<\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">Almost before we knew it, we had left the ground.</\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"h1\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#h1\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"h1\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"typography-h1\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographyH1() {\\n  return (\\n    <Typography variant=\\"h1\\">\\n      The primary headline for a page or section, designed to grab attention\\n      with maximum prominence.\\n    </Typography>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/typography-h1.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyH1\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h1\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      The primary headline for a page or section, designed to grab attention\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      with maximum prominence.\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"h2\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#h2\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"h2\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"typography-h2\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographyH2() {\\n  return (\\n    <Typography variant=\\"h2\\">\\n      A secondary heading, used to organize and introduce main sections.\\n    </Typography>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/typography-h2.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyH2\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h2\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      A secondary heading, used to organize and introduce main sections.\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"h3\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#h3\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"h3\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"typography-h3\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographyH3() {\\n  return (\\n    <Typography variant=\\"h3\\">\\n      A subheading to structure content under H2, offering a clear hierarchy.\\n    </Typography>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/typography-h3.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyH3\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h3\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      A subheading to structure content under H2, offering a clear hierarchy.\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"h4\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#h4\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"h4\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"typography-h4\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographyH4() {\\n  return (\\n    <Typography variant=\\"h4\\">\\n      A less prominent title for subsections or smaller sections within the\\n      text.\\n    </Typography>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/typography-h4.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{colo

1r:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyH4\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h4\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      A less prominent title for subsections or smaller sections within the\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      text.\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"h5\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#h5\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"h5\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"typography-h5\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographyH5() {\\n  return (\\n    <Typography variant=\\"h5\\">\\n      The smallest heading, suitable for page headings.\\n    </Typography>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/typography-h5.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyH5\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h5\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      The smallest heading, suitable for page headings.\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"h6\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#h6\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"h6\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"typography-h6\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographyRegularBOld() {\\n  return (\\n    <Typography variant=\\"h6\\">\\n      A lightweight heading style used for supporting information, metadata, or\\n      minor section titles. Ideal for low-priority headers in UI or content\\n      hierarchy.\\n    </Typography>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/typography-h6.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyRegularBOld\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"h6\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      A lightweight heading style used for supporting information, metadata, or\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      minor section titles. Ideal for low-priority headers in UI or content\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      hierarchy.\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"p\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#p\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"p\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"typography-p\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographyParagraph() {\\n  return (\\n    <Typography variant=\\"p\\">\\n      Standard body text for posts, comments & general written content.\\n    </Typography>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/typography-p.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyParagraph\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"p\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Standard body text for posts, comments & general written content.\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"small\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#small\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Small\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"typography-small\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographySmall() {\\n  return (\\n    <Typography variant=\\"sm\\">\\n      Used for explanatory text and supporting details. Used in input &\\n      tooltips.\\n    </Typography>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/typography-small.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographySmall\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sm\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Used for explanatory text and supporting details. Used in input &\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      tooltips.\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"small-bold\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#small-bold\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Small bold\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"typography-small-bold\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographySmallBold() {\\n  return (\\n    <Typography variant=\\"sm\\" bold>

1\\n      Compact bold text for subtitles, Buttons & Links.\\n    </Typography>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/typography-small-bold.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographySmallBold\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"sm\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" bold\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Compact bold text for subtitles, Buttons & Links.\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"extra-small\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#extra-small\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Extra small\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"typography-extra-small\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographyExtraSmall() {\\n  return (\\n    <Typography variant=\\"xs\\">\\n      Minimal text for metadata, footnotes, or other supportive content.\\n    </Typography>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/typography-extra-small.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyExtraSmall\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Minimal text for metadata, footnotes, or other supportive content.\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})}),`\\n`,(0,n.jsxs)(l.h2,{id:\\"extra-small-bold\\",children:[(0,n.jsx)(l.a,{className:\\"subheading-anchor\\",\\"aria-label\\":\\"Link to section\\",href:\\"#extra-small-bold\\",children:(0,n.jsx)(l.span,{className:\\"icon icon-link\\"})}),\\"Extra small bold\\"]}),`\\n`,(0,n.jsx)(a,{name:\\"typography-extra-small-bold\\",children:(0,n.jsx)(l.div,{\\"data-rehype-pretty-code-fragment\\":\\"\\",children:(0,n.jsx)(l.pre,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",__rawString__:`import { Typography } from \\"@/components/ui/typography\\";\\n\\nexport function TypographyExtraSmallBold() {\\n  return (\\n    <Typography variant=\\"xs\\" bold>

1\\n      Bold text for elements in tight spaces, buttons & Links\\n    </Typography>\\n  );\\n}\\n`,__src__:\\"registry/default/examples/typography-extra-small-bold.tsx\\",children:(0,n.jsxs)(l.code,{\\"data-language\\":\\"tsx\\",\\"data-theme\\":\\"default\\",children:[(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"import\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" { Typography } \\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"from\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\' \\"@/components/ui/typography\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\";\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:\\" \\"}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"export\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\" function\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" TypographyExtraSmallBold\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"() {\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"  return\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\" (\\"})]}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    <\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" variant\\"}),(0,n.jsx)(l.span,{style:{color:\\"#F97583\\"},children:\\"=\\"}),(0,n.jsx)(l.span,{style:{color:\\"#9ECBFF\\"},children:\'\\"xs\\"\'}),(0,n.jsx)(l.span,{style:{color:\\"#B392F0\\"},children:\\" bold\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"      Bold text for elements in tight spaces, buttons & Links\\"})}),`\\n`,(0,n.jsxs)(l.span,{className:\\"line\\",children:[(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"    </\\"}),(0,n.jsx)(l.span,{style:{color:\\"#79B8FF\\"},children:\\"Typography\\"}),(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\">\\"})]}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"  );\\"})}),`\\n`,(0,n.jsx)(l.span,{className:\\"line\\",children:(0,n.jsx)(l.span,{style:{color:\\"#E1E4E8\\"},children:\\"}\\"})})]})})})})]})}function g(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(F,{...e})}):F(e)}function s(e,l){throw new Error(\\"Expected \\"+(l?\\"component\\":\\"object\\")+\\" `\\"+e+\\"` to be defined: you likely forgot to import, pass, or provide it.\\")}return v(w);})();\\n;return Component;"},"_id":"docs/components/typography.mdx","_raw":{"sourceFilePath":"docs/components/typography.mdx","sourceFileName":"typography.mdx","sourceFileDir":"docs/components","contentType":"mdx","flattenedPath":"docs/components/typography"},"type":"Doc","slug":"/docs/components/typography","slugAsParams":"components/typography"},{"title":"Installation","description":"How to install dependencies and structure your app.","published":true,"featured":false,"component":false,"toc":true,"body":{"raw":"\\n**AKASHA UI** is built on top of [shadcn/ui](https://ui.shadcn.com), and you can follow the official [installation](https://ui.shadcn.com/docs/installation) guide to get started.\\n\\nFor projects using Tailwind version 4 or later, refer to this [guide](https://ui.shadcn.com/docs/tailwind-v4) to set up the necessary dependencies.\\n","code":"var Component=(()=>{var u=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var x=(n,t)=>()=>(t||n((t={exports:{}}).exports,t),t.exports),_=(n,t)=>{for(var o in t)r(n,o,{get:t[o],enumerable:!0})},a=(n,t,o,i)=>{if(t&&typeof t==\\"object\\"||typeof t==\\"function\\")for(let s of f(t))!g.call(n,s)&&s!==o&&r(n,s,{get:()=>t[s],enumerable:!(i=p(t,s))||i.enumerable});return n};var j=(n,t,o)=>(o=n!=null?u(m(n)):{},a(t||!n||!n.__esModule?r(o,\\"default\\",{value:n,enumerable:!0}):o,n)),w=n=>a(r({}

1,\\"__esModule\\",{value:!0}),n);var d=x((M,c)=>{c.exports=_jsx_runtime});var A={};_(A,{default:()=>h,frontmatter:()=>y});var e=j(d()),y={title:\\"Installation\\",description:\\"How to install dependencies and structure your app.\\"};function l(n){let t={a:\\"a\\",p:\\"p\\",strong:\\"strong\\",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(t.p,{children:[(0,e.jsx)(t.strong,{children:\\"AKASHA UI\\"}),\\" is built on top of \\",(0,e.jsx)(t.a,{href:\\"https://ui.shadcn.com\\",children:\\"shadcn/ui\\"}),\\", and you can follow the official \\",(0,e.jsx)(t.a,{href:\\"https://ui.shadcn.com/docs/installation\\",children:\\"installation\\"}),\\" guide to get started.\\"]}),`\\n`,(0,e.jsxs)(t.p,{children:[\\"For projects using Tailwind version 4 or later, refer to this \\",(0,e.jsx)(t.a,{href:\\"https://ui.shadcn.com/docs/tailwind-v4\\",children:\\"guide\\"}),\\" to set up the necessary dependencies.\\"]})]})}function h(n={}){let{wrapper:t}=n.components||{};return t?(0,e.jsx)(t,{...n,children:(0,e.jsx)(l,{...n})}):l(n)}return w(A);})();\\n;return Component;"},"_id":"docs/installation/index.mdx","_raw":{"sourceFilePath":"docs/installation/index.mdx","sourceFileName":"index.mdx","sourceFileDir":"docs/installation","contentType":"mdx","flattenedPath":"docs/installation"},"type":"Doc","slug":"/docs/installation","slugAsParams":"installation"}]');function z(e){let{...n}=e,l=R.find(e=>e.slug==="/docs/installation/".concat(n.data));return l?(0,s.jsx)(W,{code:l.body.code}):null}function V(e){let{styleName:n,children:l}=e,[r]=(0,x.U)();return n&&r.style!==n?null:(0,s.jsx)(s.Fragment,{children:l})}[...R];var O=l(69816),M=l(24753),U=r.forwardRef((e,n)=>{let{ratio:l=1,style:r,...a}=e;return(0,s.jsx)("div",{style:{position:"relative",width:"100%",paddingBottom:`${100/l}%`},"data-radix-aspect-ratio-wrapper":"",children:(0,s.jsx)(M.sG.div,{...a,ref:n,style:{...r,position:"absolute",top:0,right:0,bottom:0,left:0}})})});U.displayName="AspectRatio";let H={Accordion:O.Accordion,AccordionContent:O.AccordionContent,AccordionItem:O.AccordionItem,AccordionTrigger:O.AccordionTrigger,Alert:j,AlertTitle:y,AlertDescription:m,h1:e=>{let{className:n,...l}=e;return(0,s.jsx)("h1",{className:(0,h.cn)("font-heading mt-2 scroll-m-20 text-4xl font-bold",n),...l})},h2:e=>{let{className:n,...l}=e;return(0,s.jsx)("h2",{className:(0,h.cn)("font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0",n),...l})},h3:e=>{let{className:n,...l}=e;return(0,s.jsx)("h3",{className:(0,h.cn)("font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",n),...l})},h4:e=>{let{className:n,...l}=e;return(0,s.jsx)("h4",{className:(0,h.cn)("font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight",n),...l})},h5:e=>{let{className:n,...l}=e;return(0,s.jsx)("h5",{className:(0,h.cn)("mt-8 scroll-m-20 text-lg font-semibold tracking-tight",n),...l})},h6:e=>{let{className:n,...l}=e;return(0,s.jsx)("h6",{className:(0,h.cn)("mt-8 scroll-m-20 text-base font-semibold tracking-tight",n),...l})},a:e=>{let{className:n,...l}=e;return(0,s.jsx)("a",{className:(0,h.cn)("text-primary font-medium underline underline-offset-4",n),...l})},p:e=>{let{className:n,...l}=e;return(0,s.jsx)("p",{className:(0,h.cn)("leading-7 [&:not(:first-child)]:mt-6",n),...l})},ul:e=>{let{className:n,...l}=e;return(0,s.jsx)("ul",{className:(0,h.cn)("my-6 ml-6 list-disc",n),...l})},ol:e=>{let{className:n,...l}=e;return(0,s.jsx)("ol",{className:(0,h.cn)("my-6 ml-6 list-decimal",n),...l})},li:e=>{let{className:n,...l}=e;return(0,s.jsx)("li",{className:(0,h.cn)("mt-2",n),...l})},blockquote:e=>{let{className:n,...l}=e;return(0,s.jsx)("blockquote",{className:(0,h.cn)("mt-6 border-l-2 pl-6 italic",n),...l})},img:e=>{let{className:n,alt:l,...r}=e;return(0,s.jsx)("img",{className:(0,h.cn)("rounded-md",n),alt:l,...r})},hr:e=>{let{...n}=e;return(0,s.jsx)("hr",{className:"my-4 md:my-8",...n})},table:e=>{let{className:n,...l}=e;return(0,s.jsx)("div",{className:"my-6 w-full overflow-y-auto",children:(0,s.jsx)("table",{className:(0,h.cn)("relative w-full overflow-hidden border-none text-sm",n),...l})})},tr:e=>{let{className:n,...l}=e;return(0,s.jsx)("tr",{className:(0,h.cn)("last:border-b-none m-0 border-b",n),...l})},th:e=>{let{className:n,...l}=e;return(0,s.jsx)("th",{className:(0,h.cn)("px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",n),...l})},td:e=>{let{className:n,...l}=e;return(0,s.jsx)("td",{className:(0,h.cn)("px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",n),...l})},pre:e=>{let{className:n,__rawString__:l,__npmCommand__:r,__yarnCommand__:a,__pn

1pmCommand__:c,__bunCommand__:o,__withMeta__:t,__src__:i,__style__:d,...p}=e;return r&&a&&c&&o?(0,s.jsx)(C,{__npmCommand__:r,__yarnCommand__:a,__pnpmCommand__:c,__bunCommand__:o}):(0,s.jsxs)(V,{styleName:d,children:[(0,s.jsx)("pre",{className:(0,h.cn)("mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-xl bg-zinc-950 py-4 dark:bg-zinc-900",n),...p}),l&&(0,s.jsx)(B,{value:l,src:i,className:(0,h.cn)("absolute right-4 top-4",t&&"top-16")})]})},code:e=>{let{className:n,...l}=e;return(0,s.jsx)("code",{className:(0,h.cn)("relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm",n),...l})},Image:a.default,Callout:function(e){let{title:n,children:l,icon:r,className:a,...c}=e;return(0,s.jsxs)(j,{className:(0,h.cn)("bg-muted/50",a),...c,children:[r&&(0,s.jsx)("span",{className:"mr-4 text-2xl",children:r}),n&&(0,s.jsx)(y,{children:n}),(0,s.jsx)(m,{children:l})]})},ComponentPreview:function(e){let{name:n,type:l,children:c,className:o,align:t="center",hideCode:i=!1,...d}=e,[p]=(0,x.U)(),E=S.findIndex(e=>e.name===p.style),j=r.Children.toArray(c)[E],y=r.useMemo(()=>{var e;let l=null===(e=T[p.style][n])||void 0===e?void 0:e.component;return l?(0,s.jsx)(l,{}):(0,s.jsxs)("p",{className:"text-sm text-muted-foreground",children:["Component"," ",(0,s.jsx)("code",{className:"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm",children:n})," ","not found in registry."]})},[n,p.style]),m=r.useMemo(()=>{if(void 0!==(null==j?void 0:j.props["data-rehype-pretty-code-fragment"])){var e,n;let[l]=r.Children.toArray(j.props.children);return(null==l?void 0:null===(e=l.props)||void 0===e?void 0:e.value)||(null==l?void 0:null===(n=l.props)||void 0===n?void 0:n.__rawString__)||null}},[j]);return"block"===l?(0,s.jsxs)("div",{className:"relative aspect-[4/2.5] w-full overflow-hidden rounded-md border",children:[(0,s.jsx)(a.default,{src:"/r/styles/".concat(p.style,"/").concat(n,"-light.png"),alt:n,width:1440,height:900,className:"absolute left-0 top-0 z-20 w-[970px] max-w-none bg-background dark:hidden sm:w-[1280px] md:hidden md:dark:hidden"}),(0,s.jsx)(a.default,{src:"/r/styles/".concat(p.style,"/").concat(n,"-dark.png"),alt:n,width:1440,height:900,className:"absolute left-0 top-0 z-20 hidden w-[970px] max-w-none bg-background dark:block sm:w-[1280px] md:hidden md:dark:hidden"}),(0,s.jsx)("div",{className:"absolute inset-0 hidden w-[1600px] bg-background md:block",children:(0,s.jsx)("iframe",{src:"/view/styles/".concat(p.style,"/").concat(n),className:"size-full"})})]}):(0,s.jsx)("div",{className:(0,h.cn)("group relative my-4 flex flex-col space-y-2",o),...d,children:(0,s.jsxs)(b.Tabs,{defaultValue:"preview",className:"relative mr-auto w-full",children:[(0,s.jsx)("div",{className:"flex items-center justify-between pb-3",children:!i&&(0,s.jsxs)(b.TabsList,{className:"w-full justify-start rounded-none border-b bg-transparent p-0",children:[(0,s.jsx)(b.TabsTrigger,{value:"preview",className:"relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none",children:"Preview"}),(0,s.jsx)(b.TabsTrigger,{value:"code",className:"relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none",children:"Code"})]})}),(0,s.jsxs)(b.TabsContent,{value:"preview",className:"relative rounded-md border",children:[(0,s.jsxs)("div",{className:"flex items-center justify-between p-4",children:[(0,s.jsx)(P,{}),(0,s.jsxs)("div",{className:"flex items-center gap-2",children:[(0,s.jsx)(D.U,{url:"".concat(L,"/styles/default/").concat(n,".json")}),(0,s.jsx)(B,{value:m,variant:"outline",className:"h-7 w-7 text-foreground opacity-100 hover:bg-muted hover:text-foreground [&_svg]:h-3.5 [&_svg]:w-3.5"})]})]}),(0,s.jsx)(I,{defaultTheme:"zinc",children:(0,s.jsx)("div",{className:(0,h.cn)("preview flex min-h-[350px] w-full justify-center p-10",{"items-center":"center"===t,"items-start":"start"===t,"items-end":"end"===t}),children:(0,s.jsx)(r.Suspense,{fallback:(0,s.jsxs)("div",{className:"flex w-full items-center justify-center text-sm text-muted-foreground",children:[(0,s.jsx)(k.F.spinner,{className:"mr-2 h-4 w-4 animate-spin"}),"Loading..."]}),children:y})})})]}),(0,s.jsx)(b.TabsContent,{value:"code",children:(0,s.jsx)("div",{className:"flex flex-col space-y-4",children:(0,s.jsx)("div",{className:"w-full rounded-md [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto",children:j})})})]})})},ComponentExample:function(e){let{children:n,className:l,extractedClassNames:a,align:c="center",...o}=e,[t,i,...d]=r.Children.toArray(n),p=r.useMemo(()=>

1{if(void 0!==(null==i?void 0:i.props["data-rehype-pretty-code-fragment"])){var e,n;let[,l]=r.Children.toArray(i.props.children);return(null==l?void 0:null===(e=l.props)||void 0===e?void 0:e.value)||(null==l?void 0:null===(n=l.props)||void 0===n?void 0:n.__rawString__)||null}},[i]);return(0,s.jsx)("div",{className:(0,h.cn)("group relative my-4 flex flex-col space-y-2",l),...o,children:(0,s.jsxs)(b.Tabs,{defaultValue:"preview",className:"relative mr-auto w-full",children:[(0,s.jsxs)("div",{className:"flex items-center justify-between pb-3",children:[(0,s.jsxs)(b.TabsList,{className:"w-full justify-start rounded-none border-b bg-transparent p-0",children:[(0,s.jsx)(b.TabsTrigger,{value:"preview",className:"relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none",children:"Preview"}),(0,s.jsx)(b.TabsTrigger,{value:"code",className:"relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none",children:"Code"})]}),a?(0,s.jsx)(v,{value:p,classNames:a,className:"absolute right-4 top-20"}):p&&(0,s.jsx)(B,{value:p,className:"absolute right-4 top-20"})]}),(0,s.jsx)(b.TabsContent,{value:"preview",className:"rounded-md border",children:(0,s.jsx)("div",{className:(0,h.cn)("flex min-h-[350px] justify-center p-10",{"items-center":"center"===c,"items-start":"start"===c,"items-end":"end"===c}),children:t})}),(0,s.jsx)(b.TabsContent,{value:"code",children:(0,s.jsxs)("div",{className:"flex flex-col space-y-4",children:[(0,s.jsx)("div",{className:"w-full rounded-md [&_button]:hidden [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto",children:i}),(null==d?void 0:d.length)?(0,s.jsx)("div",{className:"rounded-md [&_button]:hidden [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto",children:d}):null]})})]})})},ComponentSource:function(e){let{children:n,className:l,...r}=e;return(0,s.jsx)(w,{expandButtonTitle:"Expand",className:(0,h.cn)("my-6 overflow-hidden rounded-md",l),...r,children:n})},AspectRatio:function(e){let{...n}=e;return(0,s.jsx)(U,{"data-slot":"aspect-ratio",...n})},CodeBlockWrapper:e=>{let{...n}=e;return(0,s.jsx)(w,{className:"rounded-md border",...n})},Step:e=>{let{className:n,...l}=e;return(0,s.jsx)("h3",{className:(0,h.cn)("font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",n),...l})},Steps:e=>{let{...n}=e;return(0,s.jsx)("div",{className:"[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]",...n})},Tabs:e=>{let{className:n,...l}=e;return(0,s.jsx)(b.Tabs,{className:(0,h.cn)("relative mt-6 w-full",n),...l})},TabsList:e=>{let{className:n,...l}=e;return(0,s.jsx)(b.TabsList,{className:(0,h.cn)("w-full justify-start rounded-none border-b bg-transparent p-0",n),...l})},TabsTrigger:e=>{let{className:n,...l}=e;return(0,s.jsx)(b.TabsTrigger,{className:(0,h.cn)("relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none",n),...l})},TabsContent:e=>{let{className:n,...l}=e;return(0,s.jsx)(b.TabsContent,{className:(0,h.cn)("relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold",n),...l})},FrameworkDocs:e=>{let{className:n,...l}=e;return(0,s.jsx)(z,{className:(0,h.cn)(n),...l})},Link:e=>{let{className:n,...l}=e;return(0,s.jsx)(o(),{className:(0,h.cn)("text-primary font-medium underline underline-offset-4",n),...l})},LinkedCard:e=>{let{className:n,...l}=e;return(0,s.jsx)(o(),{className:(0,h.cn)("flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10",n),...l})}};function W(e){let{code:n}=e,[l]=(0,x.U)(),r=p(n,{style:l.style});return(0,s.jsx)("div",{className:"mdx",children:(0,s.jsx)(r,{components:H})})}},23702:(e,n,l)=>{"use strict";l.d(n,{DashboardTableOfContents:()=>c});

1var s=l(22613),r=l(83153),a=l(85722);function c(e){var n;let{toc:l}=e,a=function(e){let[n,l]=r.useState(null);return r.useEffect(()=>{let n=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&l(e.target.id)})},{rootMargin:"0% 0% -80% 0%"});return null==e||e.forEach(e=>{let l=document.getElementById(e);l&&n.observe(l)}),()=>{null==e||e.forEach(e=>{let l=document.getElementById(e);l&&n.unobserve(l)})}},[e]),n}(r.useMemo(()=>l.items?l.items.flatMap(e=>{var n;return[e.url,null==e?void 0:null===(n=e.items)||void 0===n?void 0:n.map(e=>e.url)]}).flat().filter(Boolean).map(e=>null==e?void 0:e.split("#")[1]):[],[l]));return(null==l?void 0:null===(n=l.items)||void 0===n?void 0:n.length)?(0,s.jsxs)("div",{className:"space-y-2",children:[(0,s.jsx)("p",{className:"font-medium",children:"On This Page"}),(0,s.jsx)(o,{tree:l,activeItem:a})]}):null}function o(e){var n;let{tree:l,level:r=1,activeItem:c}=e;return(null==l?void 0:null===(n=l.items)||void 0===n?void 0:n.length)&&r<3?(0,s.jsx)("ul",{className:(0,a.cn)("m-0 list-none",{"pl-4":1!==r}),children:l.items.map((e,n)=>{var l;return(0,s.jsxs)("li",{className:(0,a.cn)("mt-0 pt-2"),children:[(0,s.jsx)("a",{href:e.url,className:(0,a.cn)("inline-block no-underline transition-colors hover:text-foreground",e.url==="#".concat(c)?"font-medium text-foreground":"text-muted-foreground"),children:e.title}),(null===(l=e.items)||void 0===l?void 0:l.length)?(0,s.jsx)(o,{tree:e,level:r+1,activeItem:c}):null]},n)})}):null}},54887:(e,n,l)=>{"use strict";l.d(n,{U:()=>c});var s=l(22613);l(83153);var r=l(85722),a=l(25854);function c(e){let{url:n}=e;return(0,s.jsx)(a.Button,{"aria-label":"Open in v0",className:"h-8 gap-1 rounded-[6px] bg-black text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black",asChild:!0,children:(0,s.jsxs)("a",{href:"https://v0.dev/chat/api/open?url=".concat(n),target:"_blank",rel:"noreferrer",className:"px-3",children:["Open in ",(0,s.jsx)(o,{})]})})}function o(e){let{className:n,...l}=e;return(0,s.jsxs)("svg",{viewBox:"0 0 40 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:(0,r.cn)("h-5 w-5 text-current",n),...l,children:[(0,s.jsx)("path",{d:"M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z",fill:"currentColor"}),(0,s.jsx)("path",{d:"M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z",fill:"currentColor"})]})}},6792:(e,n,l)=>{"use strict";l.d(n,{U:()=>a});var s=l(56826);let r=(0,l(34944).tG)("config",{style:"default",theme:"zinc",radius:.5,packageManager:"pnpm"});function a(){return(0,s.fp)(r)}},45628:(e,n,l)=>{"use strict";l.d(n,{default:()=>h});var s=l(83153),r="undefined"==typeof window?s.useEffect:s.useLayoutEffect,a="__wrap_b",c="__wrap_n",o="__wrap_o",t=(e,n,l)=>{let s=null==(l=l||document.querySelector('[data-br="'.concat(e,'"]')))?void 0:l.parentElement;if(!s)return;let r=e=>l.style.maxWidth=e+"px";l.style.maxWidth="";let a=s.clientWidth,c=s.clientHeight,o=a/2-.25,t=a+.5,i;if(a){for(r(o),o=Math.max(l.scrollWidth,o);o+1<t;)r(i=Math.round((o+t)/2)),s.clientHeight===c?t=i:o=i;r(t*n+a*(1-n))}l.__wrap_o||"undefined"!=typeof ResizeObserver&&(l.__wrap_o=new ResizeObserver(()=>{self.__wrap_b(0,+l.dataset.brr,l)})).observe(s)},i=t.toString(),d=function(e,n){let l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return l&&(l="self.".concat(c,"!=1&&").concat(l)),s.createElement("script",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:(e?"":"self.".concat(c,"=self.").concat(c,"||").concat('(self.CSS&&CSS.supports("text-wrap","balance")?1:2)',";self.").concat(a,"=").concat(i,";"))+l},nonce:n})},p=s.createContext({preferNative:!0,hasProvider:!1}),h=s.forwardRef((e,n)=>{let{ratio:l=1,preferNative:i,nonce:h,children:x,as:E,...j}=e,y=s.useMemo(()=>s.useId,[])(),m=s.useRef(),F=s.useContext(p),u=null!=i?i:F.preferNative;return s.useImperativeHandle(n,()=>m.current,[]),r(()=>{u&&1===self[c]||m.current&&(self[a]=t)(0,l,m.current)},[x,u,l]),r(()=>{if(!(u&&1===self[c]))return()=>{if(!m.current)return;let e=m.current[o];e&&(e.disconnect(),delete m.current[o])}},[u]),s.createElement(s.Fragment,null,s.createElement(E||"span",{...j,"data-br":y,"data-brr":l,ref:m,style:{display:"inline-block",verticalAlign:"top",textDecoration:"inherit",textWrap:u?"balance":"initial"},suppressHydrationWarning:!0}

1,x),d(F.hasProvider,h,"self.".concat(a,'("').concat(y,'",').concat(l,")")))})},19090:(e,n,l)=>{"use strict";l.d(n,{Ke:()=>o,Nt:()=>a,R6:()=>c});var s=l(22613),r=l(18160);function a(e){let{...n}=e;return(0,s.jsx)(r.bL,{"data-slot":"collapsible",...n})}function c(e){let{...n}=e;return(0,s.jsx)(r.R6,{"data-slot":"collapsible-trigger",...n})}function o(e){let{...n}=e;return(0,s.jsx)(r.Ke,{"data-slot":"collapsible-content",...n})}},67487:(e,n,l)=>{"use strict";function s(e){let{src:n,width:l,quality:s}=e;return"https://akasha-ui.pages.dev".concat(n,"?w=").concat(l,"&q=").concat(s||75)}l.r(n),l.d(n,{default:()=>s})},57140:()=>{},592:(e,n,l)=>{let s=l(22613);e.exports.c=s}},e=>{var n=n=>e(e.s=n);e.O(0,[7681,5454,1747,8658,6210,9387,4188,4207,2153,845,6006,2127,7358],()=>n(61628)),_N_E=e.O()}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.