@primer/components 0.0.0-202110322387 → 0.0.0-202110322537

package/dist/browser.umd.js

@@ -810,10 +810,8 @@
 `,wn=i.default.nav`
   display: flex;
   justify-content: space-between;
-  ${yt};
-  ${St};
   ${Kt};
-`;function Bn({className:e,children:t,theme:r,...a}){const o=n.default.Children.map(t,(e=>n.default.createElement(yn,{theme:r},e)));return n.default.createElement(wn,Tt({className:e,"aria-label":"Breadcrumbs",theme:r},a),n.default.createElement(qt,{as:"ol",my:0,pl:0},o))}Bn.displayName="Breadcrumbs";const kn=i.default.a.attrs((e=>({activeClassName:"string"==typeof e.to?"selected":"",className:Xo(e.selected&&"selected",e.className),"aria-current":e.selected?"page":null})))`
+`;function Bn({className:e,children:t,sx:r}){const a=n.default.Children.map(t,(e=>n.default.createElement(yn,null,e)));return n.default.createElement(wn,{className:e,"aria-label":"Breadcrumbs",sx:r},n.default.createElement(qt,{as:"ol",my:0,pl:0},a))}Bn.displayName="Breadcrumbs";const kn=i.default.a.attrs((e=>({activeClassName:"string"==typeof e.to?"selected":"",className:Xo(e.selected&&"selected",e.className),"aria-current":e.selected?"page":null})))`
   color: ${xt("colors.accent.fg")};
   display: inline-block;
   font-size: ${xt("fontSizes.1")};
@@ -825,7 +823,6 @@
     color: ${xt("colors.fg.default")};
     pointer-events: none;
   }
-  ${yt}
   ${Kt};
 `;Bn.displayName="Breadcrumbs",kn.displayName="Breadcrumbs.Item";var $n=Object.assign(Bn,{Item:kn});const Sn=Object.assign(Bn,{Item:kn}),Tn={top:"Bottom",right:"Left",bottom:"Top",left:"Right"},En={top:"Left",right:"Top",bottom:"Left",left:"Top"};function Cn(e,t,r){const a=Tn[e].toLowerCase(),o=En[e].toLowerCase();return{[a]:"100%",[t||o]:t?r:"50%"}}const zn=pt({prop:"bg",key:"colors"}),Rn=pt({prop:"borderColor",key:"colors"}),Nn=pt({prop:"borderWidth",key:"borderWidths",scale:[0,1]});function An(e){var t;const a=n.default.useContext(r.ThemeContext),o={...e,theme:null!==(t=e.theme)&&void 0!==t?t:a},{bg:i}=zn(o),{borderColor:l}=Rn(o),{borderWidth:d}=Nn(o),{size:s=8,location:c="bottom"}=e,[f,u]=function(e){const[t,r]=e.split("-");return[t,r]}(c),g=En[f],p=[-s,0],b=[0,s],m=[s,0],h=`M${p}L${b}L${m}L${p}Z`,v=`M${p}L${b}L${m}`,x={top:`translate(${[s,2*s]}) rotate(180)`,right:`translate(${[0,s]}) rotate(-90)`,bottom:`translate(${[s,0]})`,left:`translate(${[2*s,s]}) rotate(90)`}[f];return n.default.createElement("svg",{width:2*s,height:2*s,style:{pointerEvents:"none",position:"absolute",...Cn(f,u,s),[`margin${g}`]:u?null:-s}},n.default.createElement("g",{transform:x},n.default.createElement("path",{d:h,fill:i}),n.default.createElement("path",{d:v,fill:"none",stroke:l,strokeWidth:d})))}An.displayName="Caret",An.locations=["top","top-left","top-right","right","right-top","right-bottom","bottom","bottom-left","bottom-right","left","left-top","left-bottom"],An.defaultProps={bg:"canvas.default",borderColor:"border.default",borderWidth:1};const In={small:56,medium:96,large:128},Ln=i.default.div`
   display: ${e=>e.inline?"inline-flex":"flex"};
@@ -1908,13 +1905,13 @@
   line-height: 0;
 
   ${e=>{switch(e.size){case"large":case"extralarge":return r.css(["margin-right:",";"],xt("space.2"));default:return r.css(["margin-right:",";"],xt("space.1"))}}}
-`,Td=t.forwardRef(((e,t)=>{const{as:r,onRemove:a,id:o,leadingVisual:i,text:l,size:d,hideRemoveButton:s,href:c,onClick:f,...u}=e,g=pd(e)&&Boolean(a)&&!s,p={as:r,href:c,onClick:f};return n.default.createElement($d,Tt({onRemove:a,hideRemoveButton:s||!a,id:null==o?void 0:o.toString(),text:l,size:d,isTokenInteractive:pd(e)},g?{}:p,u,{ref:t}),i?n.default.createElement(Sd,{size:d},n.default.createElement(i,null)):null,n.default.createElement(kd,g?p:{},l),!s&&a?n.default.createElement(Bd,{borderOffset:1,onClick:e=>{e.stopPropagation(),a&&a()},size:d,isParentInteractive:pd(e),"aria-hidden":g?"true":"false",sx:g?{position:"relative",zIndex:"1"}:{}}):null)}));Td.displayName="Token",Td.defaultProps={size:gd};var Ed=Td;const Cd={small:0,medium:1,large:1,extralarge:2};function zd({icon:e,contrast:r,className:a,block:o,disabled:i,theme:l,sx:d,tokens:s,onTokenRemove:c,tokenComponent:f,preventTokenWrapping:u,size:g,hideTokenRemoveButtons:p,maxHeight:b,width:m,minWidth:h,maxWidth:v,variant:x,visibleTokenCount:y,...w},B){const{onBlur:k,onFocus:$,onKeyDown:S,...T}=function(e){var t={};for(var r in e)fd.test(r)||(t[r]=e[r]);return t}(w),E=yr(B),C=Oa(t.useRef(null),E),[z,R]=t.useState(),[N,A]=t.useState(Boolean(y)),{containerRef:I}=za({focusOutBehavior:"wrap",bindKeys:Er.ArrowHorizontal|Er.HomeAndEnd,focusableElementFilter:e=>!e.getAttributeNames().includes("aria-hidden"),getNextFocusable:e=>{var t;if(!z&&0!==z)return;let r=z+1;return"next"===e&&(r+=1),"previous"===e&&(r-=1),r>s.length||r<1?C.current||void 0:null===(t=I.current)||void 0===t?void 0:t.children[r]}},[z]),L=e=>{c(e),setTimeout((()=>{var e,t;const r=null===(e=I.current)||void 0===e?void 0:e.children[z||0],a=r&&pr(r)?r:Array.from((null===(t=I.current)||void 0===t?void 0:t.children)||[]).find((e=>pr(e)));var o;a?a.focus():null===(o=E.current)||void 0===o||o.focus()}),0)},O=()=>{R(void 0),setTimeout((()=>{var e;null!==(e=I.current)&&void 0!==e&&e.contains(document.activeElement)||!y||A(!0)}),0)},M=e=>{var t;"Escape"===e.key&&(null===(t=E.current)||void 0===t||t.focus())},P=e=>{e.stopPropagation()},H=N?s.slice(0,y):s;return n.default.createElement(Zo,{block:o,className:a,contrast:r,disabled:i,hasIcon:!!e,theme:l,width:m,minWidth:h,maxWidth:v,variant:x,onClick:()=>{var e;null===(e=C.current)||void 0===e||e.focus()},sx:{...o?{display:"flex",width:"100%"}:{},...b?{maxHeight:b,overflow:"auto"}:{},...u?{overflow:"auto"}:{},...d}},n.default.createElement(qt,{ref:I,display:"flex",sx:{alignItems:"center",flexWrap:u?"nowrap":"wrap",marginLeft:"-0.25rem",marginBottom:"-0.25rem",flexGrow:1,"> *":{flexShrink:0,marginLeft:"0.25rem",marginBottom:"0.25rem"}}},n.default.createElement(qt,{sx:{order:1,flexGrow:1}},e&&n.default.createElement(e,{className:"TextInput-icon"}),n.default.createElement(Yo,Tt({ref:C,disabled:i,onFocus:e=>{$&&$(e),R(void 0),y&&A(!1)},onBlur:e=>{k&&k(e),setTimeout((()=>{var e;null!==(e=I.current)&&void 0!==e&&e.contains(document.activeElement)||!y||A(!0)}),0)},onKeyDown:e=>{var t;if(S&&S(e),null!==(t=E.current)&&void 0!==t&&t.value)return;const r=s[s.length-1];"Backspace"===e.key&&r&&(L(r.id),E.current&&(E.current.value=`${r.text} `),setTimeout((()=>{var e;null===(e=E.current)||void 0===e||e.select()}),0))},type:"text",sx:{height:"100%"}},T))),f?H.map((({id:e,...t},r)=>{return n.default.createElement(f,Tt({key:e,onFocus:(a=r,()=>{R(a)}),onBlur:O,onKeyUp:M,onClick:P,isSelected:z===r,onRemove:()=>{L(e)},hideRemoveButton:p,size:g,tabIndex:0},t));var a})):null,N?n.default.createElement(jn,{color:"fg.muted",fontSize:g&&Cd[g]},"+",s.length-H.length):null))}zd.displayName="TextInputWithTokensInnerComponent";const Rd=n.default.forwardRef(zd);Rd.defaultProps={tokenComponent:Ed,size:"extralarge",hideTokenRemoveButtons:!1,preventTokenWrapping:!1},Rd.displayName="TextInputWithTokens";var Nd=Rd;const Ad=i.default.div`
+`,Td=t.forwardRef(((e,t)=>{const{as:r,onRemove:a,id:o,leadingVisual:i,text:l,size:d,hideRemoveButton:s,href:c,onClick:f,...u}=e,g=pd(e)&&Boolean(a)&&!s,p={as:r,href:c,onClick:f};return n.default.createElement($d,Tt({onRemove:a,hideRemoveButton:s||!a,id:null==o?void 0:o.toString(),text:l,size:d,isTokenInteractive:pd(e)},g?{}:p,u,{ref:t}),i?n.default.createElement(Sd,{size:d},n.default.createElement(i,null)):null,n.default.createElement(kd,g?p:{},l),!s&&a?n.default.createElement(Bd,{borderOffset:1,onClick:e=>{e.stopPropagation(),a&&a()},size:d,isParentInteractive:pd(e),"aria-hidden":g?"true":"false",sx:g?{position:"relative",zIndex:"1"}:{}}):null)}));Td.displayName="Token",Td.defaultProps={size:gd};var Ed=Td;const Cd={small:0,medium:1,large:1,extralarge:2};function zd({icon:e,contrast:r,className:a,block:o,disabled:i,theme:l,sx:d,tokens:s,onTokenRemove:c,tokenComponent:f,preventTokenWrapping:u,size:g,hideTokenRemoveButtons:p,maxHeight:b,width:m,minWidth:h,maxWidth:v,variant:x,visibleTokenCount:y,...w},B){const{onBlur:k,onFocus:$,onKeyDown:S,...T}=function(e){var t={};for(var r in e)fd.test(r)||(t[r]=e[r]);return t}(w),E=yr(B),C=Oa(t.useRef(null),E),[z,R]=t.useState(),[N,A]=t.useState(Boolean(y)),{containerRef:I}=za({focusOutBehavior:"wrap",bindKeys:Er.ArrowHorizontal|Er.HomeAndEnd,focusableElementFilter:e=>!e.getAttributeNames().includes("aria-hidden"),getNextFocusable:e=>{var t;if(!z&&0!==z)return;let r=z+1;return"next"===e&&(r+=1),"previous"===e&&(r-=1),r>s.length||r<1?C.current||void 0:null===(t=I.current)||void 0===t?void 0:t.children[r]}},[z]),L=e=>{c(e),setTimeout((()=>{var e,t;const r=null===(e=I.current)||void 0===e?void 0:e.children[z||0],a=r&&pr(r)?r:Array.from((null===(t=I.current)||void 0===t?void 0:t.children)||[]).find((e=>pr(e)));var o;a?a.focus():null===(o=E.current)||void 0===o||o.focus()}),0)},O=()=>{R(void 0),setTimeout((()=>{var e;null!==(e=I.current)&&void 0!==e&&e.contains(document.activeElement)||!y||A(!0)}),0)},M=e=>{var t;"Escape"===e.key&&(null===(t=E.current)||void 0===t||t.focus())},P=e=>{e.stopPropagation()},H=N?s.slice(0,y):s;return n.default.createElement(Zo,{block:o,className:a,contrast:r,disabled:i,hasIcon:!!e,theme:l,width:m,minWidth:h,maxWidth:v,variant:x,onClick:()=>{var e;null===(e=C.current)||void 0===e||e.focus()},sx:{...o?{display:"flex",width:"100%"}:{},...b?{maxHeight:b,overflow:"auto"}:{},...u?{overflow:"auto"}:{},...d}},n.default.createElement(qt,{ref:I,display:"flex",sx:{alignItems:"center",flexWrap:u?"nowrap":"wrap",marginLeft:"-0.25rem",marginBottom:"-0.25rem",flexGrow:1,"> *":{flexShrink:0,marginLeft:"0.25rem",marginBottom:"0.25rem"}}},n.default.createElement(qt,{sx:{order:1,flexGrow:1}},e&&n.default.createElement(e,{className:"TextInput-icon"}),n.default.createElement(Yo,Tt({ref:C,disabled:i,onFocus:e=>{$&&$(e),R(void 0),y&&A(!1)},onBlur:e=>{k&&k(e),setTimeout((()=>{var e;null!==(e=I.current)&&void 0!==e&&e.contains(document.activeElement)||!y||A(!0)}),0)},onKeyDown:e=>{var t;if(S&&S(e),null!==(t=E.current)&&void 0!==t&&t.value)return;const r=s[s.length-1];"Backspace"===e.key&&r&&(L(r.id),E.current&&(E.current.value=`${r.text} `),setTimeout((()=>{var e;null===(e=E.current)||void 0===e||e.select()}),0))},type:"text",sx:{height:"100%"}},T))),f?H.map((({id:e,...t},r)=>{return n.default.createElement(f,Tt({key:e,onFocus:(a=r,()=>{R(a)}),onBlur:O,onKeyUp:M,onClick:P,isSelected:z===r,onRemove:()=>{L(e)},hideRemoveButton:p,size:g,tabIndex:0},t));var a})):null,N?n.default.createElement(jn,{color:"fg.muted",fontSize:g&&Cd[g]},"+",s.length-H.length):null))}zd.displayName="TextInputWithTokensInnerComponent";const Rd=n.default.forwardRef(zd);Rd.defaultProps={tokenComponent:Ed,size:"extralarge",hideTokenRemoveButtons:!1,preventTokenWrapping:!1},Rd.displayName="TextInputWithTokens";var Nd=Rd;const Ad=i.default(qt)`
   display: flex;
   flex-direction: column;
   ${e=>e.clipSidebar&&r.css([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"])}
 
   ${Kt};
-`,Id=i.default.div.attrs((e=>({className:Xo("Timeline-Item",e.className)})))`
+`,Id=i.default(qt).attrs((e=>({className:Xo("Timeline-Item",e.className)})))`
   display: flex;
   position: relative;
   padding: ${xt("space.3")} 0;
@@ -1933,8 +1930,9 @@
 
   ${e=>e.condensed&&r.css(["padding-top:",";padding-bottom:0;&:last-child{padding-bottom:",";}.TimelineItem-Badge{height:16px;margin-top:",";margin-bottom:",";color:",";background-color:",";border:0;}"],xt("space.1"),xt("space.3"),xt("space.2"),xt("space.2"),xt("colors.fg.muted"),xt("colors.canvas.default"))}
 
+  ${yt};
   ${Kt};
-`,Ld=e=>n.default.createElement(qt,{position:"relative",zIndex:1},n.default.createElement(qt,{display:"flex",className:"TimelineItem-Badge",flexShrink:0,borderRadius:"50%",borderWidth:"2px",borderStyle:"solid",borderColor:"canvas.default",overflow:"hidden",color:"fg.muted",bg:"timeline.badgeBg",width:"32px",height:"32px",mr:2,ml:"-15px",alignItems:"center",justifyContent:"center",sx:e.sx},e.children));Ld.displayName="TimelineBadge";const Od=i.default.div`
+`,Ld=e=>n.default.createElement(qt,{position:"relative",zIndex:1},n.default.createElement(qt,Tt({display:"flex",className:Xo(e.className,"TimelineItem-Badge"),flexShrink:0,borderRadius:"50%",borderWidth:"2px",borderStyle:"solid",borderColor:"canvas.default",overflow:"hidden",color:"fg.muted",bg:"timeline.badgeBg",width:"32px",height:"32px",mr:2,ml:"-15px",alignItems:"center",justifyContent:"center"},e),e.children));Ld.displayName="TimelineBadge";const Od=i.default(qt)`
   min-width: 0;
   max-width: 100%;
   margin-top: ${xt("space.1")};
@@ -1942,7 +1940,7 @@
   flex: auto;
   font-size: ${xt("fontSizes.1")};
   ${Kt};
-`,Md=i.default.div`
+`,Md=i.default(qt)`
   position: relative
   z-index: 1;
   height: 24px;