@twilio-paste/breadcrumb/dist/index.es.js

A Breadcrumb is text that shows navigation hierarchy and lets users navigate a nested path of pages.

"use client";
import{Anchor}from"@twilio-paste/anchor";import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import{Text,safelySpreadTextProps}from"@twilio-paste/text";import{useUIDSeed}from"@twilio-paste/uid-library";import*as React from"react";var BreadcrumbSeparator=({element})=>React.createElement(Text,{as:"span",color:"colorTextWeak",fontSize:"fontSize20",lineHeight:"lineHeight20",paddingLeft:"space20",paddingRight:"space20",role:"presentation",element:`${element}_SEPARATOR`},"/");BreadcrumbSeparator.displayName="BreadcrumbSeparator";var DEFAULT_ELEMENT_NAME="BREADCRUMB",BreadcrumbItem=React.forwardRef(({children,element,parentElement,href,last,...props},ref)=>{let elementName=element||parentElement||DEFAULT_ELEMENT_NAME;return React.createElement(Box,{alignItems:"center",as:"li",display:"inline-flex",element:`${elementName}_ITEM`,fontSize:"fontSize20",lineHeight:"lineHeight20"},href?React.createElement(Anchor,{...props,element:`${elementName}_ANCHOR`,href,ref},children):React.createElement(Text,{...safelySpreadTextProps(props),"aria-current":"page",as:"span",color:"colorTextWeak",element:`${elementName}_TEXT`,fontSize:"fontSize20",lineHeight:"lineHeight20",ref},children),!last&&React.createElement(BreadcrumbSeparator,{element:elementName}))});BreadcrumbItem.displayName="BreadcrumbItem";var Breadcrumb=React.forwardRef(({children,element=DEFAULT_ELEMENT_NAME,...props},ref)=>{let[childrenCount,validChildren]=React.useMemo(()=>[React.Children.count(children),React.Children.toArray(children).filter(child=>React.isValidElement(child)||typeof child=="string")],[children]),keySeed=useUIDSeed();return React.createElement(Box,{"aria-label":"breadcrumb",...safelySpreadBoxProps(props),as:"nav",element,ref},React.createElement(Box,{alignItems:"center",as:"ol",display:"inline-flex",listStyleType:"none",margin:"space0",padding:"space0"},validChildren.map((child,index)=>React.cloneElement(child,{last:childrenCount===index+1,key:keySeed(`breadcrumb-${index}`),parentElement:element}))))});Breadcrumb.displayName="Breadcrumb";export{Breadcrumb,BreadcrumbItem};