(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[912],{83596:function(e,n,l){(window.__NEXT_P=window.__NEXT_P||[]).push(["/icons",function(){return l(44837)}])},94752:function(e,n,l){"use strict";l.d(n,{a:function(){return i}});var o=l(52676),s=l(2606);let i=e=>(0,o.jsx)(s.Heading,{weight:"regular",size:{initial:"8",xs:"9"},...e,style:{"--heading-font-family":"'Adobe Text Pro', serif","--heading-font-size-adjust":"1.1",...e.style}})},44837:function(e,n,l){"use strict";l.r(n),l.d(n,{default:function(){return Y}});var o=l(52676),s=l(28518);let i=e=>(0,o.jsx)(s.h,{gitHubLink:"https://github.com/radix-ui/icons",...e});var r=l(48101),t=l(36614),a=l(75271),c=l(8635),x=l(2606),d=l(42350),h=l.n(d),j=l(94752);let u=()=>(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(x.Box,{style:{position:"absolute",top:0,left:0,right:0,height:480,opacity:.6,background:"linear-gradient(to bottom, var(--mint-a2), transparent)"}}),(0,o.jsx)(x.Box,{className:h().IconsHeroLinesContainer,children:(0,o.jsxs)(x.Box,{className:h().IconsHeroLines,children:[(0,o.jsx)(p,{color:"var(--pink-a5)",angle:"0deg",offset:"0, 0.467em"}),(0,o.jsx)(p,{color:"var(--pink-a5)",angle:"0deg",offset:"0, 0.533em"}),(0,o.jsx)(p,{color:"var(--pink-a5)",angle:"45deg",offset:"-0.288em, 0"}),(0,o.jsx)(p,{color:"var(--pink-a5)",angle:"45deg",offset:"-0.288em, 0.090em"}),(0,o.jsx)(p,{color:"var(--pink-a5)",angle:"-45deg",offset:"0.622em, 0"}),(0,o.jsx)(p,{color:"var(--pink-a5)",angle:"-45deg",offset:"0.622em, 0.090em"}),(0,o.jsx)(p,{color:"var(--pink-a5)",angle:"45deg",offset:"0.242em, 0"}),(0,o.jsx)(p,{color:"var(--pink-a5)",angle:"-45deg",offset:"0.242em, 1em"}),(0,o.jsx)(p,{color:"var(--mint-a5)",angle:"0deg",offset:"0, 0"}),(0,o.jsx)(p,{color:"var(--mint-a5)",angle:"0deg",offset:"0, 1em"}),(0,o.jsx)(p,{color:"var(--mint-a5)",angle:"90deg",offset:"0, 0"}),(0,o.jsx)(p,{color:"var(--mint-a5)",angle:"90deg",offset:"1em, 0"}),(0,o.jsx)(c.ArrowLeftIcon,{style:{position:"relative",width:"1em",height:"1em"}})]})}),(0,o.jsx)(x.Box,{position:"relative",children:(0,o.jsx)(x.Section,{size:{initial:"2",md:"4"},children:(0,o.jsxs)(x.Container,{mx:{initial:"5",xs:"6",sm:"7",md:"9"},children:[(0,o.jsx)(x.Box,{mb:"6",children:(0,o.jsxs)(j.a,{children:["A crisp set",(0,o.jsx)("br",{}),"of 15\xd715 icons"]})}),(0,o.jsxs)(x.Flex,{align:"stretch",gap:"4",direction:{initial:"column",sm:"row"},children:[(0,o.jsx)(x.Button,{asChild:!0,size:{initial:"3",xs:"4"},color:"gray",highContrast:!0,children:(0,o.jsxs)("a",{target:"_blank",href:"https://www.figma.com/file/9Df5CaFUEomVzn20gRpaX3/Radix-Icons",children:[(0,o.jsx)(c.FigmaLogoIcon,{width:"20",height:"20",style:{marginLeft:-6,marginRight:-2}}),"Open in Figma"]})}),(0,o.jsx)("input",{readOnly:!0,onClick:e=>e.currentTarget.select(),value:"npm i @radix-ui/react-icons",style:{textAlign:"center",minHeight:40,minWidth:"27ch",boxSizing:"content-box",fontFamily:"var(--code-font-family)",fontSize:"var(--font-size-3)",backgroundColor:"var(--color-panel-solid)",borderRadius:"var(--radius-3)",border:0,appearance:"none",paddingLeft:"var(--space-4)",paddingRight:"var(--space-4)",margin:0,outline:0,boxShadow:"0 0 0 1px var(--gray-a6)"}})]})]})})})]}),p=e=>{let{angle:n="0deg",offset:l="0px, 0px",color:s}=e;return(0,o.jsx)(x.Box,{style:{position:"absolute",top:0,left:0,width:"calc(200vw + 200vh)",height:"1px",transform:`translate(${l}) rotate(${n}) translate(-50%, -50%)`,transformOrigin:"top left",backgroundColor:s}})};var b=l(95870),g=l(14137),I=l.n(g);let m=a.createContext(null),f=e=>{let{children:n}=e,[l,s]=a.useState(!1),[i,r]=a.useState(""),t=a.useRef();return(0,o.jsx)(m.Provider,{value:{showCopyToast:a.useCallback(e=>{r(e),s(!0),clearTimeout(t.current),t.current=setTimeout(()=>s(!1),3e3)},[])},children:(0,o.jsxs)(b.zt,{children:[n,(0,o.jsx)(x.Theme,{className:"radix-themes-custom-fonts",asChild:!0,children:(0,o.jsx)(b.fC,{className:I().Toast,open:l,onOpenChange:s,duration:1/0,children:(0,o.jsx)(b.Dx,{asChild:!0,children:(0,o.jsxs)(x.Text,{size:"2",style:{color:"var(--gray-1)",display:"flex",alignItems:"center"},children:["SVG copied to clipboard",(0,o.jsx)("span",{dangerouslySetInnerHTML:{__html:i},style:{display:"inline-flex",marginLeft:"0.75em",verticalAlign:"top",justifyContent:"center"}})]})})})}),(0,o.jsx)(x.Flex,{className:I().ToastViewport,m:"5",justify:"center",asChild:!0,children:(0,o.jsx)(b.l_,{})})]})})},C=()=>{let e=a.useContext(m);if(!e)throw TypeError("`useCopyToast` must be called from within an `CopyToastProvider`");return e};var y=l(94735),w=l.n(y),k=l(39585);let S=a.memo(()=>(0,o.jsx)(k.pn,{disableHoverableContent:!0,children:(0,o.jsxs)(x.Grid,{className:w().IconsContainer,children:[(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(P,{}),(0,o.jsx)(_,{}),(0,o.jsx)(T,{}),(0,o.jsx)(F,{})]}),(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(A,{}),(0,o.jsx)(D,{})]}),(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(z,{}),(0,o.jsx)(R,{}),(0,o.jsx)(H,{}),(0,o.jsx)(B,{})]})]})})),L=e=>{let{children:n}=e;return(0,o.jsx)(x.Grid,{className:w().GroupGrid,px:"2",mb:{sm:"3"},children:n})},v=e=>{let{children:n,label:l}=e,{showCopyToast:s}=C();return(0,o.jsx)(x.Tooltip,{className:"radix-themes-custom-fonts",content:l,side:"top",sideOffset:5,children:(0,o.jsx)(x.IconButton,{highContrast:!0,variant:"ghost",size:"4",onClick:e=>{let n=e.currentTarget.querySelector("svg"),l=n?n.outerHTML:null;if(l){document.activeElement instanceof HTMLButtonElement&&document.activeElement.blur();let e=document.createElement("textarea");e.value=l.toString(),e.setAttribute("readonly",""),e.style.position="absolute",e.style.left="-9999px",document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),s(l)}},children:n})})},T=()=>(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(x.Flex,{py:"6",children:(0,o.jsx)(x.Heading,{as:"h3",size:"1",children:"Abstract"})}),(0,o.jsxs)(L,{children:[(0,o.jsx)(v,{label:"Hamburger Menu",children:(0,o.jsx)(c.HamburgerMenuIcon,{})}),(0,o.jsx)(v,{label:"Cross 1",children:(0,o.jsx)(c.Cross1Icon,{})}),(0,o.jsx)(v,{label:"Dots Horizontal",children:(0,o.jsx)(c.DotsHorizontalIcon,{})}),(0,o.jsx)(v,{label:"Dots Vertical",children:(0,o.jsx)(c.DotsVerticalIcon,{})}),(0,o.jsx)(v,{label:"Plus",children:(0,o.jsx)(c.PlusIcon,{})}),(0,o.jsx)(v,{label:"Minus",children:(0,o.jsx)(c.MinusIcon,{})}),(0,o.jsx)(v,{label:"Check",children:(0,o.jsx)(c.CheckIcon,{})}),(0,o.jsx)(v,{label:"Cross 2",children:(0,o.jsx)(c.Cross2Icon,{})}),(0,o.jsx)(v,{label:"Check Circled",children:(0,o.jsx)(c.CheckCircledIcon,{})}),(0,o.jsx)(v,{label:"Cross Circled",children:(0,o.jsx)(c.CrossCircledIcon,{})}),(0,o.jsx)(v,{label:"Plus Circled",children:(0,o.jsx)(c.PlusCircledIcon,{})}),(0,o.jsx)(v,{label:"Minus Circled",children:(0,o.jsx)(c.MinusCircledIcon,{})}),(0,o.jsx)(v,{label:"Question Mark",children:(0,o.jsx)(c.QuestionMarkIcon,{})}),(0,o.jsx)(v,{label:"Question Mark Circled",children:(0,o.jsx)(c.QuestionMarkCircledIcon,{})}),(0,o.jsx)(v,{label:"Info Circled",children:(0,o.jsx)(c.InfoCircledIcon,{})}),(0,o.jsx)(v,{label:"Accessibility",children:(0,o.jsx)(c.AccessibilityIcon,{})}),(0,o.jsx)(v,{label:"Exclamation Triangle",children:(0,o.jsx)(c.ExclamationTriangleIcon,{})}),(0,o.jsx)(v,{label:"Share 1",children:(0,o.jsx)(c.Share1Icon,{})}),(0,o.jsx)(v,{label:"Share 2",children:(0,o.jsx)(c.Share2Icon,{})}),(0,o.jsx)(v,{label:"External Link",children:(0,o.jsx)(c.ExternalLinkIcon,{})}),(0,o.jsx)(v,{label:"Open In New Window",children:(0,o.jsx)(c.OpenInNewWindowIcon,{})}),(0,o.jsx)(v,{label:"Enter",children:(0,o.jsx)(c.EnterIcon,{})}),(0,o.jsx)(v,{label:"Exit",children:(0,o.jsx)(c.ExitIcon,{})}),(0,o.jsx)(v,{label:"Download",children:(0,o.jsx)(c.DownloadIcon,{})}),(0,o.jsx)(v,{label:"Upload",children:(0,o.jsx)(c.UploadIcon,{})}),(0,o.jsx)(v,{label:"Reset",children:(0,o.jsx)(c.ResetIcon,{})}),(0,o.jsx)(v,{label:"Reload",children:(0,o.jsx)(c.ReloadIcon,{})}),(0,o.jsx)(v,{label:"Update",children:(0,o.jsx)(c.UpdateIcon,{})}),(0,o.jsx)(v,{label:"Enter Full Screen",children:(0,o.jsx)(c.EnterFullScreenIcon,{})}),(0,o.jsx)(v,{label:"Exit Full Screen",children:(0,o.jsx)(c.ExitFullScreenIcon,{})}),(0,o.jsx)(v,{label:"Drag Handle Vertical",children:(0,o.jsx)(c.DragHandleVerticalIcon,{})}),(0,o.jsx)(v,{label:"Drag Handle Horizontal",children:(0,o.jsx)(c.DragHandleHorizontalIcon,{})}),(0,o.jsx)(v,{label:"Drag Handle Dots  1",children:(0,o.jsx)(c.DragHandleDots1Icon,{})}),(0,o.jsx)(v,{label:"Drag Handle Dots  2",children:(0,o.jsx)(c.DragHandleDots2Icon,{})}),(0,o.jsx)(v,{label:"Dot",children:(0,o.jsx)(c.DotIcon,{})}),(0,o.jsx)(v,{label:"Dot Filled",children:(0,o.jsx)(c.DotFilledIcon,{})}),(0,o.jsx)(v,{label:"Commit",children:(0,o.jsx)(c.CommitIcon,{})}),(0,o.jsx)(v,{label:"Slash",children:(0,o.jsx)(c.SlashIcon,{})}),(0,o.jsx)(v,{label:"Circle",children:(0,o.jsx)(c.CircleIcon,{})}),(0,o.jsx)(v,{label:"Circle Backslash",children:(0,o.jsx)(c.CircleBackslashIcon,{})}),(0,o.jsx)(v,{label:"Half 1",children:(0,o.jsx)(c.Half1Icon,{})}),(0,o.jsx)(v,{label:"Half 2",children:(0,o.jsx)(c.Half2Icon,{})}),(0,o.jsx)(v,{label:"View Vertical",children:(0,o.jsx)(c.ViewVerticalIcon,{})}),(0,o.jsx)(v,{label:"View Horizontal",children:(0,o.jsx)(c.ViewHorizontalIcon,{})}),(0,o.jsx)(v,{label:"View Grid",children:(0,o.jsx)(c.ViewGridIcon,{})}),(0,o.jsx)(v,{label:"View None",children:(0,o.jsx)(c.ViewNoneIcon,{})}),(0,o.jsx)(v,{label:"Square",children:(0,o.jsx)(c.SquareIcon,{})}),(0,o.jsx)(v,{label:"Copy",children:(0,o.jsx)(c.CopyIcon,{})})]})]}),B=()=>(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(x.Flex,{pt:"6",pb:"6",children:(0,o.jsx)(x.Heading,{as:"h3",size:"1",children:"Alignment"})}),(0,o.jsxs)(L,{children:[(0,o.jsx)(v,{label:"Align Top",children:(0,o.jsx)(c.AlignTopIcon,{})}),(0,o.jsx)(v,{label:"Align Center Vertically",children:(0,o.jsx)(c.AlignCenterVerticallyIcon,{})}),(0,o.jsx)(v,{label:"Align Bottom",children:(0,o.jsx)(c.AlignBottomIcon,{})}),(0,o.jsx)(v,{label:"Stretch Vertically",children:(0,o.jsx)(c.StretchVerticallyIcon,{})}),(0,o.jsx)(v,{label:"Align Left",children:(0,o.jsx)(c.AlignLeftIcon,{})}),(0,o.jsx)(v,{label:"Align Center Horizontally",children:(0,o.jsx)(c.AlignCenterHorizontallyIcon,{})}),(0,o.jsx)(v,{label:"Align Right",children:(0,o.jsx)(c.AlignRightIcon,{})}),(0,o.jsx)(v,{label:"Stretch Horizontally",children:(0,o.jsx)(c.StretchHorizontallyIcon,{})}),(0,o.jsx)(v,{label:"Space Between Horizontally",children:(0,o.jsx)(c.SpaceBetweenHorizontallyIcon,{})}),(0,o.jsx)(v,{label:"Space Evenly Horizontally",children:(0,o.jsx)(c.SpaceEvenlyHorizontallyIcon,{})}),(0,o.jsx)(v,{label:"Space Between Vertically",children:(0,o.jsx)(c.SpaceBetweenVerticallyIcon,{})}),(0,o.jsx)(v,{label:"Space Evenly Vertically",children:(0,o.jsx)(c.SpaceEvenlyVerticallyIcon,{})}),(0,o.jsx)(v,{label:"Pin Left",children:(0,o.jsx)(c.PinLeftIcon,{})}),(0,o.jsx)(v,{label:"Pin Right",children:(0,o.jsx)(c.PinRightIcon,{})}),(0,o.jsx)(v,{label:"Pin Top",children:(0,o.jsx)(c.PinTopIcon,{})}),(0,o.jsx)(v,{label:"Pin Bottom",children:(0,o.jsx)(c.PinBottomIcon,{})})]})]}),A=()=>(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(x.Flex,{pt:"6",pb:"6",children:(0,o.jsx)(x.Heading,{as:"h3",size:"1",children:"Arrows"})}),(0,o.jsxs)(L,{children:[(0,o.jsx)(v,{label:"Arrow Left",children:(0,o.jsx)(c.ArrowLeftIcon,{})}),(0,o.jsx)(v,{label:"Arrow Right",children:(0,o.jsx)(c.ArrowRightIcon,{})}),(0,o.jsx)(v,{label:"Arrow Up",children:(0,o.jsx)(c.ArrowUpIcon,{})}),(0,o.jsx)(v,{label:"Arrow Down",children:(0,o.jsx)(c.ArrowDownIcon,{})}),(0,o.jsx)(v,{label:"Arrow Top Left",children:(0,o.jsx)(c.ArrowTopLeftIcon,{})}),(0,o.jsx)(v,{label:"Arrow Top Right",children:(0,o.jsx)(c.ArrowTopRightIcon,{})}),(0,o.jsx)(v,{label:"Arrow Bottom Left",children:(0,o.jsx)(c.ArrowBottomLeftIcon,{})}),(0,o.jsx)(v,{label:"Arrow Bottom Right",children:(0,o.jsx)(c.ArrowBottomRightIcon,{})}),(0,o.jsx)(v,{label:"Chevron Down",children:(0,o.jsx)(c.ChevronDownIcon,{})}),(0,o.jsx)(v,{label:"Chevron Left",children:(0,o.jsx)(c.ChevronLeftIcon,{})}),(0,o.jsx)(v,{label:"Chevron Right",children:(0,o.jsx)(c.ChevronRightIcon,{})}),(0,o.jsx)(v,{label:"Chevron Up",children:(0,o.jsx)(c.ChevronUpIcon,{})}),(0,o.jsx)(v,{label:"Double Arrow Down",children:(0,o.jsx)(c.DoubleArrowDownIcon,{})}),(0,o.jsx)(v,{label:"Double Arrow Left",children:(0,o.jsx)(c.DoubleArrowLeftIcon,{})}),(0,o.jsx)(v,{label:"Double Arrow Right",children:(0,o.jsx)(c.DoubleArrowRightIcon,{})}),(0,o.jsx)(v,{label:"Double Arrow Up",children:(0,o.jsx)(c.DoubleArrowUpIcon,{})}),(0,o.jsx)(v,{label:"Thick Arrow Left",children:(0,o.jsx)(c.ThickArrowLeftIcon,{})}),(0,o.jsx)(v,{label:"Thick Arrow Right",children:(0,o.jsx)(c.ThickArrowRightIcon,{})}),(0,o.jsx)(v,{label:"Thick Arrow Up",children:(0,o.jsx)(c.ThickArrowUpIcon,{})}),(0,o.jsx)(v,{label:"Thick Arrow Down",children:(0,o.jsx)(c.ThickArrowDownIcon,{})}),(0,o.jsx)(v,{label:"Triangle Left",children:(0,o.jsx)(c.TriangleLeftIcon,{})}),(0,o.jsx)(v,{label:"Triangle Right",children:(0,o.jsx)(c.TriangleRightIcon,{})}),(0,o.jsx)(v,{label:"Triangle Up",children:(0,o.jsx)(c.TriangleUpIcon,{})}),(0,o.jsx)(v,{label:"Triangle Down",children:(0,o.jsx)(c.TriangleDownIcon,{})}),(0,o.jsx)(v,{label:"Caret Left",children:(0,o.jsx)(c.CaretLeftIcon,{})}),(0,o.jsx)(v,{label:"Caret Right",children:(0,o.jsx)(c.CaretRightIcon,{})}),(0,o.jsx)(v,{label:"Caret Up",children:(0,o.jsx)(c.CaretUpIcon,{})}),(0,o.jsx)(v,{label:"Caret Down",children:(0,o.jsx)(c.CaretDownIcon,{})}),(0,o.jsx)(v,{label:"Caret Sort",children:(0,o.jsx)(c.CaretSortIcon,{})}),(0,o.jsx)(v,{label:"Width",children:(0,o.jsx)(c.WidthIcon,{})}),(0,o.jsx)(v,{label:"Height",children:(0,o.jsx)(c.HeightIcon,{})}),(0,o.jsx)(v,{label:"Size",children:(0,o.jsx)(c.SizeIcon,{})}),(0,o.jsx)(v,{label:"Move",children:(0,o.jsx)(c.MoveIcon,{})}),(0,o.jsx)(v,{label:"All Sides",children:(0,o.jsx)(c.AllSidesIcon,{})})]})]}),H=()=>(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(x.Flex,{pt:"6",pb:"6",children:(0,o.jsx)(x.Heading,{as:"h3",size:"1",children:"Borders and corners"})}),(0,o.jsxs)(L,{children:[(0,o.jsx)(v,{label:"Border All",children:(0,o.jsx)(c.BorderAllIcon,{})}),(0,o.jsx)(v,{label:"Border Split",children:(0,o.jsx)(c.BorderSplitIcon,{})}),(0,o.jsx)(v,{label:"Border None",children:(0,o.jsx)(c.BorderNoneIcon,{})}),(0,o.jsx)(v,{label:"Border Left",children:(0,o.jsx)(c.BorderLeftIcon,{})}),(0,o.jsx)(v,{label:"Border Right",children:(0,o.jsx)(c.BorderRightIcon,{})}),(0,o.jsx)(v,{label:"Border Top",children:(0,o.jsx)(c.BorderTopIcon,{})}),(0,o.jsx)(v,{label:"Border Bottom",children:(0,o.jsx)(c.BorderBottomIcon,{})}),(0,o.jsx)(v,{label:"Corners",children:(0,o.jsx)(c.CornersIcon,{})}),(0,o.jsx)(v,{label:"Corner Top Left",children:(0,o.jsx)(c.CornerTopLeftIcon,{})}),(0,o.jsx)(v,{label:"Corner Top Right",children:(0,o.jsx)(c.CornerTopRightIcon,{})}),(0,o.jsx)(v,{label:"Corner Bottom Left",children:(0,o.jsx)(c.CornerBottomLeftIcon,{})}),(0,o.jsx)(v,{label:"Corner Bottom Right",children:(0,o.jsx)(c.CornerBottomRightIcon,{})}),(0,o.jsx)(v,{label:"Border Style",children:(0,o.jsx)(c.BorderStyleIcon,{})}),(0,o.jsx)(v,{label:"Border Solid",children:(0,o.jsx)(c.BorderSolidIcon,{})}),(0,o.jsx)(v,{label:"Border Dashed",children:(0,o.jsx)(c.BorderDashedIcon,{})}),(0,o.jsx)(v,{label:"Border Dotted",children:(0,o.jsx)(c.BorderDottedIcon,{})})]})]}),R=()=>(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(x.Flex,{pt:"6",pb:"6",children:(0,o.jsx)(x.Heading,{as:"h3",size:"1",children:"Components"})}),(0,o.jsxs)(L,{children:[(0,o.jsx)(v,{label:"Box",children:(0,o.jsx)(c.BoxIcon,{})}),(0,o.jsx)(v,{label:"Aspect Ratio",children:(0,o.jsx)(c.AspectRatioIcon,{})}),(0,o.jsx)(v,{label:"Container",children:(0,o.jsx)(c.ContainerIcon,{})}),(0,o.jsx)(v,{label:"Section",children:(0,o.jsx)(c.SectionIcon,{})}),(0,o.jsx)(v,{label:"Layout",children:(0,o.jsx)(c.LayoutIcon,{})}),(0,o.jsx)(v,{label:"Grid",children:(0,o.jsx)(c.GridIcon,{})}),(0,o.jsx)(v,{label:"Table",children:(0,o.jsx)(c.TableIcon,{})}),(0,o.jsx)(v,{label:"Image",children:(0,o.jsx)(c.ImageIcon,{})}),(0,o.jsx)(v,{label:"Switch",children:(0,o.jsx)(c.SwitchIcon,{})}),(0,o.jsx)(v,{label:"Checkbox",children:(0,o.jsx)(c.CheckboxIcon,{})}),(0,o.jsx)(v,{label:"Radiobutton",children:(0,o.jsx)(c.RadiobuttonIcon,{})}),(0,o.jsx)(v,{label:"Avatar",children:(0,o.jsx)(c.AvatarIcon,{})}),(0,o.jsx)(v,{label:"Button",children:(0,o.jsx)(c.ButtonIcon,{})}),(0,o.jsx)(v,{label:"Badge",children:(0,o.jsx)(c.BadgeIcon,{})}),(0,o.jsx)(v,{label:"Input",children:(0,o.jsx)(c.InputIcon,{})}),(0,o.jsx)(v,{label:"Slider",children:(0,o.jsx)(c.SliderIcon,{})}),(0,o.jsx)(v,{label:"Quote",children:(0,o.jsx)(c.QuoteIcon,{})}),(0,o.jsx)(v,{label:"Code",children:(0,o.jsx)(c.CodeIcon,{})}),(0,o.jsx)(v,{label:"List Bullet",children:(0,o.jsx)(c.ListBulletIcon,{})}),(0,o.jsx)(v,{label:"Dropdown Menu",children:(0,o.jsx)(c.DropdownMenuIcon,{})}),(0,o.jsx)(v,{label:"Video",children:(0,o.jsx)(c.VideoIcon,{})}),(0,o.jsx)(v,{label:"Pie Chart",children:(0,o.jsx)(c.PieChartIcon,{})}),(0,o.jsx)(v,{label:"Calendar",children:(0,o.jsx)(c.CalendarIcon,{})}),(0,o.jsx)(v,{label:"Dashboard",children:(0,o.jsx)(c.DashboardIcon,{})}),(0,o.jsx)(v,{label:"Activity Log",children:(0,o.jsx)(c.ActivityLogIcon,{})}),(0,o.jsx)(v,{label:"Bar Chart",children:(0,o.jsx)(c.BarChartIcon,{})}),(0,o.jsx)(v,{label:"Divider Vertical",children:(0,o.jsx)(c.DividerVerticalIcon,{})}),(0,o.jsx)(v,{label:"Divider Horizontal",children:(0,o.jsx)(c.DividerHorizontalIcon,{})})]})]}),z=()=>(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(x.Flex,{pt:"6",pb:"6",children:(0,o.jsx)(x.Heading,{as:"h3",size:"1",children:"Design"})}),(0,o.jsxs)(L,{children:[(0,o.jsx)(v,{label:"Frame",children:(0,o.jsx)(c.FrameIcon,{})}),(0,o.jsx)(v,{label:"Crop",children:(0,o.jsx)(c.CropIcon,{})}),(0,o.jsx)(v,{label:"Layers",children:(0,o.jsx)(c.LayersIcon,{})}),(0,o.jsx)(v,{label:"Stack",children:(0,o.jsx)(c.StackIcon,{})}),(0,o.jsx)(v,{label:"Tokens",children:(0,o.jsx)(c.TokensIcon,{})}),(0,o.jsx)(v,{label:"Component 1",children:(0,o.jsx)(c.Component1Icon,{})}),(0,o.jsx)(v,{label:"Component 2",children:(0,o.jsx)(c.Component2Icon,{})}),(0,o.jsx)(v,{label:"Symbol",children:(0,o.jsx)(c.SymbolIcon,{})}),(0,o.jsx)(v,{label:"Component Instance",children:(0,o.jsx)(c.ComponentInstanceIcon,{})}),(0,o.jsx)(v,{label:"Component None",children:(0,o.jsx)(c.ComponentNoneIcon,{})}),(0,o.jsx)(v,{label:"Component Boolean",children:(0,o.jsx)(c.ComponentBooleanIcon,{})}),(0,o.jsx)(v,{label:"Component Placeholder",children:(0,o.jsx)(c.ComponentPlaceholderIcon,{})}),(0,o.jsx)(v,{label:"Opacity",children:(0,o.jsx)(c.OpacityIcon,{})}),(0,o.jsx)(v,{label:"Blending Mode",children:(0,o.jsx)(c.BlendingModeIcon,{})}),(0,o.jsx)(v,{label:"Mask On",children:(0,o.jsx)(c.MaskOnIcon,{})}),(0,o.jsx)(v,{label:"Mask Off",children:(0,o.jsx)(c.MaskOffIcon,{})}),(0,o.jsx)(v,{label:"Color Wheel",children:(0,o.jsx)(c.ColorWheelIcon,{})}),(0,o.jsx)(v,{label:"Shadow",children:(0,o.jsx)(c.ShadowIcon,{})}),(0,o.jsx)(v,{label:"Shadow None",children:(0,o.jsx)(c.ShadowNoneIcon,{})}),(0,o.jsx)(v,{label:"Shadow Inner",children:(0,o.jsx)(c.ShadowInnerIcon,{})}),(0,o.jsx)(v,{label:"Shadow Outer",children:(0,o.jsx)(c.ShadowOuterIcon,{})}),(0,o.jsx)(v,{label:"Value",children:(0,o.jsx)(c.ValueIcon,{})}),(0,o.jsx)(v,{label:"Value None",children:(0,o.jsx)(c.ValueNoneIcon,{})}),(0,o.jsx)(v,{label:"Zoom In",children:(0,o.jsx)(c.ZoomInIcon,{})}),(0,o.jsx)(v,{label:"Zoom Out",children:(0,o.jsx)(c.ZoomOutIcon,{})}),(0,o.jsx)(v,{label:"Transparency Grid",children:(0,o.jsx)(c.TransparencyGridIcon,{})}),(0,o.jsx)(v,{label:"Group",children:(0,o.jsx)(c.GroupIcon,{})}),(0,o.jsx)(v,{label:"Dimensions",children:(0,o.jsx)(c.DimensionsIcon,{})}),(0,o.jsx)(v,{label:"Rotate Counter-Clockwise",children:(0,o.jsx)(c.RotateCounterClockwiseIcon,{})}),(0,o.jsx)(v,{label:"Columns",children:(0,o.jsx)(c.ColumnsIcon,{})}),(0,o.jsx)(v,{label:"Rows",children:(0,o.jsx)(c.RowsIcon,{})}),(0,o.jsx)(v,{label:"Transform",children:(0,o.jsx)(c.TransformIcon,{})}),(0,o.jsx)(v,{label:"Box Model",children:(0,o.jsx)(c.BoxModelIcon,{})}),(0,o.jsx)(v,{label:"Padding",children:(0,o.jsx)(c.PaddingIcon,{})}),(0,o.jsx)(v,{label:"Margin",children:(0,o.jsx)(c.MarginIcon,{})}),(0,o.jsx)(v,{label:"Angle",children:(0,o.jsx)(c.AngleIcon,{})}),(0,o.jsx)(v,{label:"Cursor Arrow",children:(0,o.jsx)(c.CursorArrowIcon,{})}),(0,o.jsx)(v,{label:"Cursor Text",children:(0,o.jsx)(c.CursorTextIcon,{})}),(0,o.jsx)(v,{label:"Column Spacing",children:(0,o.jsx)(c.ColumnSpacingIcon,{})}),(0,o.jsx)(v,{label:"Row Spacing",children:(0,o.jsx)(c.RowSpacingIcon,{})})]})]}),F=()=>(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(x.Flex,{pt:"6",pb:"6",children:(0,o.jsx)(x.Heading,{as:"h3",size:"1",children:"Logos"})}),(0,o.jsxs)(L,{children:[(0,o.jsx)(v,{label:"Modulz Logo",children:(0,o.jsx)(c.ModulzLogoIcon,{})}),(0,o.jsx)(v,{label:"Stitches Logo",children:(0,o.jsx)(c.StitchesLogoIcon,{})}),(0,o.jsx)(v,{label:"Figma Logo",children:(0,o.jsx)(c.FigmaLogoIcon,{})}),(0,o.jsx)(v,{label:"Framer Logo",children:(0,o.jsx)(c.FramerLogoIcon,{})}),(0,o.jsx)(v,{label:"Sketch Logo",children:(0,o.jsx)(c.SketchLogoIcon,{})}),(0,o.jsx)(v,{label:"Twitter Logo",children:(0,o.jsx)(c.TwitterLogoIcon,{})}),(0,o.jsx)(v,{label:"IconJar Logo",children:(0,o.jsx)(c.IconJarLogoIcon,{})}),(0,o.jsx)(v,{label:"GitHub Logo",children:(0,o.jsx)(c.GitHubLogoIcon,{})}),(0,o.jsx)(v,{label:"Vercel Logo",children:(0,o.jsx)(c.VercelLogoIcon,{})}),(0,o.jsx)(v,{label:"CodeSandbox Logo",children:(0,o.jsx)(c.CodeSandboxLogoIcon,{})}),(0,o.jsx)(v,{label:"Notion Logo",children:(0,o.jsx)(c.NotionLogoIcon,{})}),(0,o.jsx)(v,{label:"Discord Logo",children:(0,o.jsx)(c.DiscordLogoIcon,{})}),(0,o.jsx)(v,{label:"Instagram Logo",children:(0,o.jsx)(c.InstagramLogoIcon,{})}),(0,o.jsx)(v,{label:"LinkedIn Logo",children:(0,o.jsx)(c.LinkedInLogoIcon,{})})]})]}),_=()=>(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(x.Flex,{pt:"6",pb:"6",children:(0,o.jsx)(x.Heading,{as:"h3",size:"1",children:"Music"})}),(0,o.jsxs)(L,{children:[(0,o.jsx)(v,{label:"Play",children:(0,o.jsx)(c.PlayIcon,{})}),(0,o.jsx)(v,{label:"Resume",children:(0,o.jsx)(c.ResumeIcon,{})}),(0,o.jsx)(v,{label:"Pause",children:(0,o.jsx)(c.PauseIcon,{})}),(0,o.jsx)(v,{label:"Stop",children:(0,o.jsx)(c.StopIcon,{})}),(0,o.jsx)(v,{label:"Track Previous",children:(0,o.jsx)(c.TrackPreviousIcon,{})}),(0,o.jsx)(v,{label:"Track Next",children:(0,o.jsx)(c.TrackNextIcon,{})}),(0,o.jsx)(v,{label:"Loop",children:(0,o.jsx)(c.LoopIcon,{})}),(0,o.jsx)(v,{label:"Shuffle",children:(0,o.jsx)(c.ShuffleIcon,{})}),(0,o.jsx)(v,{label:"Speaker Loud",children:(0,o.jsx)(c.SpeakerLoudIcon,{})}),(0,o.jsx)(v,{label:"Speaker Moderate",children:(0,o.jsx)(c.SpeakerModerateIcon,{})}),(0,o.jsx)(v,{label:"Speaker Quiet",children:(0,o.jsx)(c.SpeakerQuietIcon,{})}),(0,o.jsx)(v,{label:"Speaker Off",children:(0,o.jsx)(c.SpeakerOffIcon,{})})]})]}),D=()=>(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(x.Flex,{pt:"6",pb:"6",children:(0,o.jsx)(x.Heading,{as:"h3",size:"1",children:"Objects"})}),(0,o.jsxs)(L,{children:[(0,o.jsx)(v,{label:"Magnifying Glass",children:(0,o.jsx)(c.MagnifyingGlassIcon,{})}),(0,o.jsx)(v,{label:"Gear",children:(0,o.jsx)(c.GearIcon,{})}),(0,o.jsx)(v,{label:"Bell",children:(0,o.jsx)(c.BellIcon,{})}),(0,o.jsx)(v,{label:"Home",children:(0,o.jsx)(c.HomeIcon,{})}),(0,o.jsx)(v,{label:"Lock Closed",children:(0,o.jsx)(c.LockClosedIcon,{})}),(0,o.jsx)(v,{label:"Lock Open 1",children:(0,o.jsx)(c.LockOpen1Icon,{})}),(0,o.jsx)(v,{label:"Lock Open 2",children:(0,o.jsx)(c.LockOpen2Icon,{})}),(0,o.jsx)(v,{label:"Backpack",children:(0,o.jsx)(c.BackpackIcon,{})}),(0,o.jsx)(v,{label:"Camera",children:(0,o.jsx)(c.CameraIcon,{})}),(0,o.jsx)(v,{label:"Paper Plane",children:(0,o.jsx)(c.PaperPlaneIcon,{})}),(0,o.jsx)(v,{label:"Rocket",children:(0,o.jsx)(c.RocketIcon,{})}),(0,o.jsx)(v,{label:"Envelope Closed",children:(0,o.jsx)(c.EnvelopeClosedIcon,{})}),(0,o.jsx)(v,{label:"Envelope Open",children:(0,o.jsx)(c.EnvelopeOpenIcon,{})}),(0,o.jsx)(v,{label:"Chat Bubble",children:(0,o.jsx)(c.ChatBubbleIcon,{})}),(0,o.jsx)(v,{label:"Link 1",children:(0,o.jsx)(c.Link1Icon,{})}),(0,o.jsx)(v,{label:"Link None 1",children:(0,o.jsx)(c.LinkNone1Icon,{})}),(0,o.jsx)(v,{label:"Link Break 1",children:(0,o.jsx)(c.LinkBreak1Icon,{})}),(0,o.jsx)(v,{label:"Link 2",children:(0,o.jsx)(c.Link2Icon,{})}),(0,o.jsx)(v,{label:"Link None 2",children:(0,o.jsx)(c.LinkNone2Icon,{})}),(0,o.jsx)(v,{label:"Link Break 2",children:(0,o.jsx)(c.LinkBreak2Icon,{})}),(0,o.jsx)(v,{label:"Trash",children:(0,o.jsx)(c.TrashIcon,{})}),(0,o.jsx)(v,{label:"Pencil 1",children:(0,o.jsx)(c.Pencil1Icon,{})}),(0,o.jsx)(v,{label:"Pencil 2",children:(0,o.jsx)(c.Pencil2Icon,{})}),(0,o.jsx)(v,{label:"Bookmark",children:(0,o.jsx)(c.BookmarkIcon,{})}),(0,o.jsx)(v,{label:"Bookmark Filled",children:(0,o.jsx)(c.BookmarkFilledIcon,{})}),(0,o.jsx)(v,{label:"Drawing Pin",children:(0,o.jsx)(c.DrawingPinIcon,{})}),(0,o.jsx)(v,{label:"Drawing Pin Filled",children:(0,o.jsx)(c.DrawingPinFilledIcon,{})}),(0,o.jsx)(v,{label:"Sewing Pin",children:(0,o.jsx)(c.SewingPinIcon,{})}),(0,o.jsx)(v,{label:"Sewing Pin Filled",children:(0,o.jsx)(c.SewingPinFilledIcon,{})}),(0,o.jsx)(v,{label:"Cube",children:(0,o.jsx)(c.CubeIcon,{})}),(0,o.jsx)(v,{label:"Archive",children:(0,o.jsx)(c.ArchiveIcon,{})}),(0,o.jsx)(v,{label:"Crumpled Paper",children:(0,o.jsx)(c.CrumpledPaperIcon,{})}),(0,o.jsx)(v,{label:"Mix",children:(0,o.jsx)(c.MixIcon,{})}),(0,o.jsx)(v,{label:"Mixer Horizontal",children:(0,o.jsx)(c.MixerHorizontalIcon,{})}),(0,o.jsx)(v,{label:"Mixer Vertical",children:(0,o.jsx)(c.MixerVerticalIcon,{})}),(0,o.jsx)(v,{label:"File",children:(0,o.jsx)(c.FileIcon,{})}),(0,o.jsx)(v,{label:"File Text",children:(0,o.jsx)(c.FileTextIcon,{})}),(0,o.jsx)(v,{label:"File Plus",children:(0,o.jsx)(c.FilePlusIcon,{})}),(0,o.jsx)(v,{label:"File Minus",children:(0,o.jsx)(c.FileMinusIcon,{})}),(0,o.jsx)(v,{label:"Reader",children:(0,o.jsx)(c.ReaderIcon,{})}),(0,o.jsx)(v,{label:"Card Stack",children:(0,o.jsx)(c.CardStackIcon,{})}),(0,o.jsx)(v,{label:"Card Stack Plus",children:(0,o.jsx)(c.CardStackPlusIcon,{})}),(0,o.jsx)(v,{label:"Card Stack Minus",children:(0,o.jsx)(c.CardStackMinusIcon,{})}),(0,o.jsx)(v,{label:"Id Card",children:(0,o.jsx)(c.IdCardIcon,{})}),(0,o.jsx)(v,{label:"Crosshair 1",children:(0,o.jsx)(c.Crosshair1Icon,{})}),(0,o.jsx)(v,{label:"Crosshair 2",children:(0,o.jsx)(c.Crosshair2Icon,{})}),(0,o.jsx)(v,{label:"Target",children:(0,o.jsx)(c.TargetIcon,{})}),(0,o.jsx)(v,{label:"Disc",children:(0,o.jsx)(c.DiscIcon,{})}),(0,o.jsx)(v,{label:"Globe",children:(0,o.jsx)(c.GlobeIcon,{})}),(0,o.jsx)(v,{label:"Sun",children:(0,o.jsx)(c.SunIcon,{})}),(0,o.jsx)(v,{label:"Moon",children:(0,o.jsx)(c.MoonIcon,{})}),(0,o.jsx)(v,{label:"Clock",children:(0,o.jsx)(c.ClockIcon,{})}),(0,o.jsx)(v,{label:"Timer",children:(0,o.jsx)(c.TimerIcon,{})}),(0,o.jsx)(v,{label:"Counter-Clockwise Clock",children:(0,o.jsx)(c.CounterClockwiseClockIcon,{})}),(0,o.jsx)(v,{label:"Countdown Timer",children:(0,o.jsx)(c.CountdownTimerIcon,{})}),(0,o.jsx)(v,{label:"Stopwatch",children:(0,o.jsx)(c.StopwatchIcon,{})}),(0,o.jsx)(v,{label:"Lap Timer",children:(0,o.jsx)(c.LapTimerIcon,{})}),(0,o.jsx)(v,{label:"Lightning Bolt",children:(0,o.jsx)(c.LightningBoltIcon,{})}),(0,o.jsx)(v,{label:"Magic Wand",children:(0,o.jsx)(c.MagicWandIcon,{})}),(0,o.jsx)(v,{label:"Face",children:(0,o.jsx)(c.FaceIcon,{})}),(0,o.jsx)(v,{label:"Person",children:(0,o.jsx)(c.PersonIcon,{})}),(0,o.jsx)(v,{label:"Eye Open",children:(0,o.jsx)(c.EyeOpenIcon,{})}),(0,o.jsx)(v,{label:"Eye None",children:(0,o.jsx)(c.EyeNoneIcon,{})}),(0,o.jsx)(v,{label:"Eye Closed",children:(0,o.jsx)(c.EyeClosedIcon,{})}),(0,o.jsx)(v,{label:"Hand",children:(0,o.jsx)(c.HandIcon,{})}),(0,o.jsx)(v,{label:"Ruler Horizontal",children:(0,o.jsx)(c.RulerHorizontalIcon,{})}),(0,o.jsx)(v,{label:"Ruler Square",children:(0,o.jsx)(c.RulerSquareIcon,{})}),(0,o.jsx)(v,{label:"Clipboard",children:(0,o.jsx)(c.ClipboardIcon,{})}),(0,o.jsx)(v,{label:"Clipboard Copy",children:(0,o.jsx)(c.ClipboardCopyIcon,{})}),(0,o.jsx)(v,{label:"Desktop",children:(0,o.jsx)(c.DesktopIcon,{})}),(0,o.jsx)(v,{label:"Laptop",children:(0,o.jsx)(c.LaptopIcon,{})}),(0,o.jsx)(v,{label:"Mobile",children:(0,o.jsx)(c.MobileIcon,{})}),(0,o.jsx)(v,{label:"Keyboard",children:(0,o.jsx)(c.KeyboardIcon,{})}),(0,o.jsx)(v,{label:"Star",children:(0,o.jsx)(c.StarIcon,{})}),(0,o.jsx)(v,{label:"Star Filled",children:(0,o.jsx)(c.StarFilledIcon,{})}),(0,o.jsx)(v,{label:"Heart",children:(0,o.jsx)(c.HeartIcon,{})}),(0,o.jsx)(v,{label:"Heart Filled",children:(0,o.jsx)(c.HeartFilledIcon,{})}),(0,o.jsx)(v,{label:"Scissors",children:(0,o.jsx)(c.ScissorsIcon,{})}),(0,o.jsx)(v,{label:"Hobby Knife",children:(0,o.jsx)(c.HobbyKnifeIcon,{})}),(0,o.jsx)(v,{label:"Eraser",children:(0,o.jsx)(c.EraserIcon,{})}),(0,o.jsx)(v,{label:"Cookie",children:(0,o.jsx)(c.CookieIcon,{})})]})]}),P=()=>(0,o.jsxs)(x.Box,{children:[(0,o.jsx)(x.Flex,{pt:"6",pb:"6",children:(0,o.jsx)(x.Heading,{as:"h3",size:"1",children:"Typography"})}),(0,o.jsxs)(L,{children:[(0,o.jsx)(v,{label:"Font Style",children:(0,o.jsx)(c.FontStyleIcon,{})}),(0,o.jsx)(v,{label:"Font Italic",children:(0,o.jsx)(c.FontItalicIcon,{})}),(0,o.jsx)(v,{label:"Font Roman",children:(0,o.jsx)(c.FontRomanIcon,{})}),(0,o.jsx)(v,{label:"Font Bold",children:(0,o.jsx)(c.FontBoldIcon,{})}),(0,o.jsx)(v,{label:"Letter Case Uppercase",children:(0,o.jsx)(c.LetterCaseUppercaseIcon,{})}),(0,o.jsx)(v,{label:"Letter Case Capitalize",children:(0,o.jsx)(c.LetterCaseCapitalizeIcon,{})}),(0,o.jsx)(v,{label:"Letter Case Lowercase",children:(0,o.jsx)(c.LetterCaseLowercaseIcon,{})}),(0,o.jsx)(v,{label:"Letter Case Toggle",children:(0,o.jsx)(c.LetterCaseToggleIcon,{})}),(0,o.jsx)(v,{label:"Letter Spacing",children:(0,o.jsx)(c.LetterSpacingIcon,{})}),(0,o.jsx)(v,{label:"Align Baseline",children:(0,o.jsx)(c.AlignBaselineIcon,{})}),(0,o.jsx)(v,{label:"Font Size",children:(0,o.jsx)(c.FontSizeIcon,{})}),(0,o.jsx)(v,{label:"Font Family",children:(0,o.jsx)(c.FontFamilyIcon,{})}),(0,o.jsx)(v,{label:"Heading",children:(0,o.jsx)(c.HeadingIcon,{})}),(0,o.jsx)(v,{label:"Text",children:(0,o.jsx)(c.TextIcon,{})}),(0,o.jsx)(v,{label:"Text None",children:(0,o.jsx)(c.TextNoneIcon,{})}),(0,o.jsx)(v,{label:"Line Height",children:(0,o.jsx)(c.LineHeightIcon,{})}),(0,o.jsx)(v,{label:"Underline",children:(0,o.jsx)(c.UnderlineIcon,{})}),(0,o.jsx)(v,{label:"Strikethrough",children:(0,o.jsx)(c.StrikethroughIcon,{})}),(0,o.jsx)(v,{label:"Overline",children:(0,o.jsx)(c.OverlineIcon,{})}),(0,o.jsx)(v,{label:"Pilcrow",children:(0,o.jsx)(c.PilcrowIcon,{})}),(0,o.jsx)(v,{label:"Text Align Left",children:(0,o.jsx)(c.TextAlignLeftIcon,{})}),(0,o.jsx)(v,{label:"Text Align Center",children:(0,o.jsx)(c.TextAlignCenterIcon,{})}),(0,o.jsx)(v,{label:"Text Align Right",children:(0,o.jsx)(c.TextAlignRightIcon,{})}),(0,o.jsx)(v,{label:"Text Align Justify",children:(0,o.jsx)(c.TextAlignJustifyIcon,{})}),(0,o.jsx)(v,{label:"Text Align Top",children:(0,o.jsx)(c.TextAlignTopIcon,{})}),(0,o.jsx)(v,{label:"Text Align Middle",children:(0,o.jsx)(c.TextAlignMiddleIcon,{})}),(0,o.jsx)(v,{label:"Text Align Bottom",children:(0,o.jsx)(c.TextAlignBottomIcon,{})}),(0,o.jsx)(v,{label:"Dash",children:(0,o.jsx)(c.DashIcon,{})})]})]});var M=l(53579),E=l(42746),O=l.n(E);let V=e=>{let{value:n,onValueChange:l}=e,s=a.useRef(null);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(x.Flex,{align:"center",justify:"center",gap:"2",onClick:()=>{s.current?.focus(),s.current?.select()},children:[(0,o.jsx)(c.MagnifyingGlassIcon,{style:{color:"var(--gray-a11)",marginRight:"calc(-1 * var(--space-5))"}}),(0,o.jsx)(M.Z,{ref:s,autoComplete:"off",placeholder:"Search",name:"form-field-name",value:n,className:O().SearchBarInput,onChange:e=>l(e.target.value)})]}),(0,o.jsx)(x.Separator,{size:"4"})]})},N=Object.keys(c).map(e=>{switch(e){case"LinkedInLogoIcon":return"LinkedIn Logo";case"GitHubLogoIcon":return"GitHub Logo";case"IconJarLogoIcon":return"IconJar Logo";case"CodeSandboxLogoIcon":return"CodeSandbox Logo";case"CounterClockwiseClockIcon":return"Counter-Clockwise Clock";case"RotateCounterClockwiseIcon":return"Rotate Counter-Clockwise";default:return e.replace(/Icon$/,"").replace(/(.)([0-9A-Z])/g,"$1 $2")}}),W=e=>{let{value:n}=e,{showCopyToast:l}=C(),s=function(e){if("string"!=typeof e)throw TypeError("Expected a string");return e.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}(n.trim().replace(/\s/g," ")),i=N.filter(e=>RegExp(`\\b${s}`,"gi").test(e));return(0,o.jsxs)(o.Fragment,{children:[n&&i.length>0&&(0,o.jsx)(x.Grid,{flow:{initial:"row",sm:"column"},gapX:"6",gapY:"5",rows:{sm:`repeat(${Math.max(Math.ceil(i.length/2),3)}, auto)`,md:`repeat(${Math.max(Math.ceil(i.length/4),3)}, auto)`},columns:{initial:"1",sm:"repeat(2, 1fr)",md:"repeat(4, 1fr)"},py:{initial:"3",sm:"6"},px:{initial:"4",sm:"7"},children:i.map(e=>(0,o.jsxs)(x.Button,{style:{justifyContent:"flex-start"},variant:"ghost",highContrast:!0,size:"3",onClick:e=>{let n=e.currentTarget.querySelector("svg"),o=n?n.outerHTML:null;if(o){document.activeElement instanceof HTMLButtonElement&&document.activeElement.blur();let e=document.createElement("textarea");e.value=o.toString(),e.setAttribute("readonly",""),e.style.position="absolute",e.style.left="-9999px",document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),l(o)}},children:[a.createElement(Object.values(c)[N.indexOf(e)]),e]},e))}),!i.length&&(0,o.jsx)(x.Flex,{align:"center",justify:"center",py:"6",px:"6",style:{minHeight:300},children:(0,o.jsxs)(x.Text,{size:"2",style:{textAlign:"center"},children:["No icons for ",(0,o.jsx)(x.Text,{weight:"bold",children:n})]})})]})},G=()=>{let[e,n]=a.useState("");return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(V,{value:e,onValueChange:n}),(0,o.jsx)(W,{value:e}),(0,o.jsx)(x.Box,{px:{initial:"5",sm:"6"},pb:{initial:"6",sm:"7"},style:{display:e?"none":"block"},children:(0,o.jsx)(S,{})})]})};var U=l(57242),J=l.n(U),$=l(65203);let Q=()=>(0,o.jsx)(f,{children:(0,o.jsxs)(x.Box,{style:{borderRadius:"var(--radius-4)",minHeight:900,background:"var(--color-background)",position:"relative"},children:[(0,o.jsx)(x.Box,{position:"absolute",inset:"0",style:{pointerEvents:"none",borderRadius:"inherit",boxShadow:"var(--shadow-5)"}}),(0,o.jsx)(G,{}),(0,o.jsx)(x.Separator,{size:"4"}),(0,o.jsxs)(x.Box,{p:{initial:"5",sm:"6"},className:J().IconsPanelMainSection,children:[(0,o.jsxs)(x.Box,{mb:"5",style:{gridColumn:"3 / 4"},children:[(0,o.jsx)(x.Heading,{as:"h3",size:"5",children:"Assets"}),(0,o.jsxs)(x.Flex,{direction:"column",gap:"2",mt:"3",children:[(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",href:"https://www.figma.com/file/9Df5CaFUEomVzn20gRpaX3/Radix-Icons",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.FigmaLogoIcon,{}),"Open in Figma"]})}),(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",href:"https://raw.githubusercontent.com/radix-ui/icons/master/Radix-Icons.sketch",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.SketchLogoIcon,{}),"Download for Sketch"]})}),(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",href:"https://raw.githubusercontent.com/radix-ui/icons/master/Radix-Icons.iconjar.zip",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.IconJarLogoIcon,{}),"Download IconJar"]})}),(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",href:"https://raw.githubusercontent.com/radix-ui/icons/master/radix-icons.zip",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.DownloadIcon,{}),"Download SVG"]})}),(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",href:"https://www.npmjs.com/package/@radix-ui/react-icons",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.CubeIcon,{}),"Install with npm"]})}),(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",href:"https://github.com/radix-ui/icons",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.GitHubLogoIcon,{}),"View on GitHub"]})})]})]}),(0,o.jsxs)(x.Box,{mb:{initial:"5",sm:"0"},className:J().IconsPanelSectionContent,children:[(0,o.jsx)(x.Heading,{as:"h3",size:"5",children:"React components"}),(0,o.jsx)(x.Text,{as:"p",size:"3",mt:"3",children:"All icons are available as individual React components. Install Radix Icons from npm:"}),(0,o.jsx)($.d.Root,{mt:"3",children:(0,o.jsxs)($.d.Content,{children:[(0,o.jsx)($.d.Pre,{children:(0,o.jsx)($.d.Code,{language:"bash",children:"npm install @radix-ui/react-icons"})}),(0,o.jsx)($.d.CopyButton,{})]})}),(0,o.jsx)(x.Text,{as:"p",size:"3",mt:"4",children:"Import the icons into your React project:"}),(0,o.jsx)($.d.Root,{mt:"3",children:(0,o.jsx)($.d.Content,{children:(0,o.jsx)($.d.Pre,{children:(0,o.jsx)($.d.Code,{language:"jsx",children:`
import { FaceIcon, ImageIcon, SunIcon } from "@radix-ui/react-icons"

function MyComponent () {
	return (
		<div>
			<FaceIcon />
			<SunIcon />
			<ImageIcon />
		</div>
	y)
}
`.trim()})})})})]}),(0,o.jsxs)(x.Box,{style:{gridColumn:"3 / 4"},children:[(0,o.jsx)(x.Heading,{as:"h3",size:"5",children:"License"}),(0,o.jsxs)(x.Text,{as:"p",size:"2",mt:"2",children:["Licensed under the"," ",(0,o.jsx)(x.Link,{size:"2",href:"https://github.com/radix-ui/icons/blob/master/LICENSE",highContrast:!0,color:"gray",children:"MIT License"}),".",(0,o.jsx)("br",{}),"Copyright \xa9 2022–present WorkOS."]})]})]})]})}),Z=[{label:"Resources",pages:[{title:"Figma",slug:"https://www.figma.com/file/9Df5CaFUEomVzn20gRpaX3/Radix-Icons",icon:(0,o.jsx)(c.FigmaLogoIcon,{})},{title:"Sketch",slug:"https://raw.githubusercontent.com/radix-ui/icons/master/Radix-Icons.sketch",icon:(0,o.jsx)(c.SketchLogoIcon,{})},{title:"IconJar",slug:"https://raw.githubusercontent.com/radix-ui/icons/master/Radix-Icons.iconjar.zip",icon:(0,o.jsx)(c.IconJarLogoIcon,{})},{title:"SVG",slug:"https://raw.githubusercontent.com/radix-ui/icons/master/radix-icons.zip",icon:(0,o.jsx)(c.DownloadIcon,{})},{title:"npm",slug:"https://www.npmjs.com/package/@radix-ui/react-icons",icon:(0,o.jsx)(c.CubeIcon,{})},{title:"GitHub",slug:"https://github.com/radix-ui/icons",icon:(0,o.jsx)(c.GitHubLogoIcon,{})}]}],X=()=>(0,o.jsx)(x.Flex,{m:"6",justify:"end",display:{initial:"none",md:"inline-flex"},position:"fixed",right:"0",style:{top:"var(--space-6)"},children:(0,o.jsxs)(x.Flex,{align:"start",direction:"column",gap:"2",p:"4",style:{backgroundColor:"var(--color-panel-solid)",backgroundImage:"linear-gradient(to top, var(--accent-a4), var(--accent-a4))",borderRadius:"var(--radius-1)",boxShadow:"0 10px 40px -10px hsla(174, 100%, 30%, 0.05)",userSelect:"none"},children:[(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",underline:"hover",href:"https://www.figma.com/file/9Df5CaFUEomVzn20gRpaX3/Radix-Icons",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.FigmaLogoIcon,{}),"Open in Figma"]})}),(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",underline:"hover",href:"https://raw.githubusercontent.com/radix-ui/icons/master/Radix-Icons.sketch",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.SketchLogoIcon,{}),"Download for Sketch"]})}),(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",underline:"hover",href:"https://raw.githubusercontent.com/radix-ui/icons/master/Radix-Icons.iconjar.zip",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.IconJarLogoIcon,{}),"Download IconJar"]})}),(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",underline:"hover",href:"https://raw.githubusercontent.com/radix-ui/icons/master/radix-icons.zip",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.DownloadIcon,{}),"Download SVG"]})}),(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",underline:"hover",href:"https://www.npmjs.com/package/@radix-ui/react-icons",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.CubeIcon,{}),"Install with npm"]})}),(0,o.jsx)(x.Flex,{align:"center",gap:"2",asChild:!0,children:(0,o.jsxs)(x.Link,{size:"2",underline:"hover",href:"https://github.com/radix-ui/icons",target:"_blank",highContrast:!0,color:"gray",children:[(0,o.jsx)(c.GitHubLogoIcon,{}),"View on GitHub"]})})]})});var q=l(93669),K=l(72512);function Y(){return(0,o.jsxs)(r.AN,{children:[(0,o.jsxs)(r.nn,{children:[(0,o.jsx)(K.Y,{}),(0,o.jsx)(x.ScrollArea,{children:(0,o.jsx)(x.Box,{pt:"4",px:"3",pb:"9",children:(0,o.jsx)(q.C,{routes:[{pages:[{title:"Homepage",slug:"icons"},{title:"Blog",slug:"blog"}]},...Z]})})})]}),(0,o.jsx)(t.H,{title:"Radix Icons",description:"A crisp set of 15\xd715 icons designed by the WorkOS team.",image:"icons.png"}),(0,o.jsx)(i,{ghost:!0}),(0,o.jsx)(u,{}),(0,o.jsx)(X,{}),(0,o.jsx)(x.Container,{mx:{initial:"5",xs:"6",sm:"7",md:"9"},pb:"9",children:(0,o.jsx)(Q,{})})]})}},94735:function(e){e.exports={GroupGrid:"AllIcons_GroupGrid__OL6kh",IconsContainer:"AllIcons_IconsContainer__ABBTi"}},14137:function(e){e.exports={ToastViewport:"CopyToast_ToastViewport__l56ye",Toast:"CopyToast_Toast__cB3SA",scaleIn:"CopyToast_scaleIn__FsOXG",scaleOut:"CopyToast_scaleOut__jYQKF"}},42350:function(e){e.exports={IconsHeroLinesContainer:"IconsHero_IconsHeroLinesContainer__yMuWK",dark:"IconsHero_dark__ydZ9w","dark-theme":"IconsHero_dark-theme__jVZ_8",IconsHeroLines:"IconsHero_IconsHeroLines__1xvlG"}},57242:function(e){e.exports={IconsPanelMainSection:"IconsPanel_IconsPanelMainSection__TFDs_",IconsPanelSectionContent:"IconsPanel_IconsPanelSectionContent__aWLrx"}},42746:function(e){e.exports={SearchBarInput:"SearchBar_SearchBarInput__xAL_M"}},74049:function(e,n,l){"use strict";var o=l(36257);function s(){}function i(){}i.resetWarningCache=s,e.exports=function(){function e(e,n,l,s,i,r){if(r!==o){var t=Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw t.name="Invariant Violation",t}}function n(){return e}e.isRequired=e;var l={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,elementType:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:i,resetWarningCache:s};return l.PropTypes=l,l}},40507:function(e,n,l){e.exports=l(74049)()},36257:function(e){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},53579:function(e,n,l){"use strict";var o=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var l=arguments[n];for(var o in l)Object.prototype.hasOwnProperty.call(l,o)&&(e[o]=l[o])}return e},s=function(){function e(e,n){for(var l=0;l<n.length;l++){var o=n[l];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(n,l,o){return l&&e(n.prototype,l),o&&e(n,o),n}}(),i=l(75271),r=a(i),t=a(l(40507));function a(e){return e&&e.__esModule?e:{default:e}}var c={position:"absolute",top:0,left:0,visibility:"hidden",height:0,overflow:"scroll",whiteSpace:"pre"},x=["extraWidth","injectStyles","inputClassName","inputRef","inputStyle","minWidth","onAutosize","placeholderIsMinWidth"],d=function(e,n){n.style.fontSize=e.fontSize,n.style.fontFamily=e.fontFamily,n.style.fontWeight=e.fontWeight,n.style.fontStyle=e.fontStyle,n.style.letterSpacing=e.letterSpacing,n.style.textTransform=e.textTransform},h="undefined"!=typeof window&&!!window.navigator&&/MSIE |Trident\/|Edge\//.test(window.navigator.userAgent),j=function(){return h?"_"+Math.random().toString(36).substr(2,12):void 0},u=function(e){function n(e){!function(e,n){if(!(e instanceof n))throw TypeError("Cannot call a class as a function")}(this,n);var l=function(e,n){if(!e)throw ReferenceError("this hasn't been initialised - super() hasn't been called");return n&&("object"==typeof n||"function"==typeof n)?n:e}(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return l.inputRef=function(e){l.input=e,"function"==typeof l.props.inputRef&&l.props.inputRef(e)},l.placeHolderSizerRef=function(e){l.placeHolderSizer=e},l.sizerRef=function(e){l.sizer=e},l.state={inputWidth:e.minWidth,inputId:e.id||j(),prevId:e.id},l}return!function(e,n){if("function"!=typeof n&&null!==n)throw TypeError("Super expression must either be null or a function, not "+typeof n);e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(e,n):e.__proto__=n)}(n,e),s(n,null,[{key:"getDerivedStateFromProps",value:function(e,n){var l=e.id;return l!==n.prevId?{inputId:l||j(),prevId:l}:null}}]),s(n,[{key:"componentDidMount",value:function(){this.mounted=!0,this.copyInputStyles(),this.updateInputWidth()}},{key:"componentDidUpdate",value:function(e,n){n.inputWidth!==this.state.inputWidth&&"function"==typeof this.props.onAutosize&&this.props.onAutosize(this.state.inputWidth),this.updateInputWidth()}},{key:"componentWillUnmount",value:function(){this.mounted=!1}},{key:"copyInputStyles",value:function(){if(this.mounted&&window.getComputedStyle){var e=this.input&&window.getComputedStyle(this.input);e&&(d(e,this.sizer),this.placeHolderSizer&&d(e,this.placeHolderSizer))}}},{key:"updateInputWidth",value:function(){if(this.mounted&&this.sizer&&void 0!==this.sizer.scrollWidth){var e=void 0;(e=(this.props.placeholder&&(!this.props.value||this.props.value&&this.props.placeholderIsMinWidth)?Math.max(this.sizer.scrollWidth,this.placeHolderSizer.scrollWidth)+2:this.sizer.scrollWidth+2)+("number"===this.props.type&&void 0===this.props.extraWidth?16:parseInt(this.props.extraWidth)||0))<this.props.minWidth&&(e=this.props.minWidth),e!==this.state.inputWidth&&this.setState({inputWidth:e})}}},{key:"getInput",value:function(){return this.input}},{key:"focus",value:function(){this.input.focus()}},{key:"blur",value:function(){this.input.blur()}},{key:"select",value:function(){this.input.select()}},{key:"renderStyles",value:function(){var e=this.props.injectStyles;return h&&e?r.default.createElement("style",{dangerouslySetInnerHTML:{__html:"input#"+this.state.inputId+"::-ms-clear {display: none;}"}}):null}},{key:"render",value:function(){var e=[this.props.defaultValue,this.props.value,""].reduce(function(e,n){return null!=e?e:n}),n=o({},this.props.style);n.display||(n.display="inline-block");var l=o({boxSizing:"content-box",width:this.state.inputWidth+"px"},this.props.inputStyle),s=function(e,n){var l={};for(var o in e)!(n.indexOf(o)>=0)&&Object.prototype.hasOwnProperty.call(e,o)&&(l[o]=e[o]);return l}(this.props,[]);return x.forEach(function(e){return delete s[e]}),s.className=this.props.inputClassName,s.id=this.state.inputId,s.style=l,r.default.createElement("div",{className:this.props.className,style:n},this.renderStyles(),r.default.createElement("input",o({},s,{ref:this.inputRef})),r.default.createElement("div",{ref:this.sizerRef,style:c},e),this.props.placeholder?r.default.createElement("div",{ref:this.placeHolderSizerRef,style:c},this.props.placeholder):null)}}]),n}(i.Component);u.propTypes={className:t.default.string,defaultValue:t.default.any,extraWidth:t.default.oneOfType([t.default.number,t.default.string]),id:t.default.string,injectStyles:t.default.bool,inputClassName:t.default.string,inputRef:t.default.func,inputStyle:t.default.object,minWidth:t.default.oneOfType([t.default.number,t.default.string]),onAutosize:t.default.func,onChange:t.default.func,placeholder:t.default.string,placeholderIsMinWidth:t.default.bool,style:t.default.object,value:t.default.any},u.defaultProps={minWidth:1,injectStyles:!0},n.Z=u}},function(e){e.O(0,[707,261,12,545,888,774,179],function(){return e(e.s=83596)}),_N_E=e.O()}]);