@fpkit/acss 3.1.0 → 3.1.1

package/libs/index.js

@@ -1,20 +1,20 @@
-import { b as b$3 } from './chunk-IRLFZ3OL.js';
+import { b as b$2 } from './chunk-IRLFZ3OL.js';
 export { a as Textarea } from './chunk-IRLFZ3OL.js';
 export { a as Field } from './chunk-HRRHPLER.js';
-export { a as Caption, i as TBL, f as Table, c as Tbody, e as Td, b as Thead, d as Tr } from './chunk-Y2PFDELK.js';
-export { a as Dialog } from './chunk-QKHPHMG2.js';
+export { a as Caption, i as TBL, f as Table, c as Tbody, e as Td, b as Thead, d as Tr } from './chunk-FMIM3332.js';
+export { a as Dialog } from './chunk-TPIB3RQP.js';
 export { c as Nav, b as NavItem, a as NavList } from './chunk-FVROL3V5.js';
 export { c as List } from './chunk-IEB64SWY.js';
-export { b as Popover } from './chunk-23ANBDCR.js';
+export { b as Popover } from './chunk-4I5MF54P.js';
 export { a as Text } from './chunk-IQ76HGVP.js';
 export { b as Heading, a as Title } from './chunk-ZFJ4U45S.js';
 export { b as Breadcrumb, a as useBreadcrumbSegments } from './chunk-CWRNJA4P.js';
 import './chunk-GCGKYLDG.js';
-import { b as b$2 } from './chunk-5QD3DWFI.js';
-export { a as Icon } from './chunk-5QD3DWFI.js';
+import { b as b$1 } from './chunk-MPTMPBFT.js';
+export { a as Icon } from './chunk-MPTMPBFT.js';
 export { d as Card, b as CardContent, c as CardFooter, a as CardTitle } from './chunk-KK47SYZI.js';
 export { a as Modal } from './chunk-43TK2ICH.js';
-import { b as b$1 } from './chunk-KVKQLRJG.js';
+import { b } from './chunk-KVKQLRJG.js';
 export { a as Button } from './chunk-KVKQLRJG.js';
 export { a as Input } from './chunk-F5EYMVQM.js';
 export { a as Box, a as FP } from './chunk-6SAHIYCZ.js';
@@ -23,22 +23,22 @@ import './chunk-75QHTLFO.js';
 export { d as Link, d as To } from './chunk-5RAWNUVD.js';
 import { a } from './chunk-HHLNOC5T.js';
 export { a as UI } from './chunk-HHLNOC5T.js';
-import b, { useCallback, useMemo, useState, useEffect } from 'react';
+import T, { useCallback, useMemo, useState, useEffect } from 'react';
 
-var Fe={default:"",info:"Information: ",success:"Success: ",warning:"Warning: ",error:"Error: "},z=({severity:e})=>{let t=Fe[e];return t?b.createElement("span",{className:"sr-only"},t):null};var Ee=(e,t)=>({info:b.createElement(b$2.InfoSolid,{...t}),success:b.createElement(b$2.SuccessSolid,{...t}),warning:b.createElement(b$2.WarnSolid,{...t}),error:b.createElement(b$2.AlertSolid,{...t}),default:b.createElement(b$2.AlertSquareSolid,{...t})})[e],H=({severity:e,iconProps:t,hideIcon:o})=>{if(o)return null;let s=Ee(e,t);return b.createElement(a,{"aria-hidden":"true",className:"alert-icon"},s)};var j=({title:e,titleLevel:t})=>{if(!e)return null;let o=t?`h${t}`:"strong";return b.createElement(a,{as:o,className:"alert-title"},e)};var _=({children:e,contentType:t})=>t==="node"?b.createElement(b.Fragment,null,e):b.createElement(a,{as:"p"},e);var W=({actions:e})=>e?b.createElement(a,{as:"div",className:"alert-actions"},e):null;var Q=b.memo(({onDismiss:e,iconSize:t=16})=>b.createElement(b$1,{type:"button",onClick:e,"aria-label":"Close alert",className:"alert-dismiss","data-btn":"icon sm"},b.createElement(b$2,null,b.createElement(b$2.Close,{size:t})))),Z=Q;Q.displayName="DismissButton";var Ue={default:"polite",info:"polite",success:"polite",warning:"polite",error:"assertive"},k=b.forwardRef(({severity:e,variant:t,isVisible:o,dismissible:s,onDismiss:n,onInteractionStart:l,onInteractionEnd:f,autoFocus:c,title:m,titleLevel:v,children:x,contentType:y,actions:h,hideIcon:d,iconProps:g,...I},S)=>b.createElement(a,{as:"div",ref:S,role:"alert","aria-live":Ue[e],"aria-atomic":"true",className:`alert alert-${e}`,"data-alert":e,"data-visible":o,"data-variant":t,tabIndex:c?-1:void 0,onMouseEnter:l,onMouseLeave:f,onFocus:l,onBlur:f,...I},b.createElement(z,{severity:e}),b.createElement(H,{severity:e,iconProps:g,hideIcon:d}),b.createElement(a,{as:"div",className:"alert-message"},b.createElement(j,{title:m,titleLevel:v}),b.createElement(_,{contentType:y},x),b.createElement(W,{actions:h})),s&&b.createElement(Z,{onDismiss:n})));k.displayName="AlertView";var Ne=({open:e,onDismiss:t,dismissible:o,autoHideDuration:s,pauseOnHover:n,autoFocus:l,alertRef:f})=>{let[c,m]=b.useState(e),[v,x]=b.useState(e),[y,h]=b.useState(!1),d=b.useCallback(()=>{m(!1),setTimeout(()=>{x(!1),t?.();},300);},[t]);b.useEffect(()=>{e?(x(!0),m(!0)):m(!1);},[e]),b.useEffect(()=>{if(!s||!c||y)return;let S=setTimeout(()=>{d();},s);return ()=>clearTimeout(S)},[s,c,y,d]),b.useEffect(()=>{if(!o||!c)return;let S=p=>{p.key==="Escape"&&d();};return document.addEventListener("keydown",S),()=>document.removeEventListener("keydown",S)},[o,c,d]),b.useEffect(()=>{l&&c&&f.current&&f.current.focus();},[l,c,f]);let g=b.useCallback(()=>{n&&s&&h(!0);},[n,s]),I=b.useCallback(()=>{n&&s&&h(!1);},[n,s]);return {isVisible:c,shouldRender:v,handleDismiss:d,handleInteractionStart:g,handleInteractionEnd:I}},ee=({open:e,severity:t="default",children:o,title:s,dismissible:n=!1,onDismiss:l,iconSize:f,iconProps:c,hideIcon:m,autoHideDuration:v,pauseOnHover:x=!0,titleLevel:y=3,actions:h,autoFocus:d=!1,variant:g="outlined",contentType:I="text",...S})=>{let p=b.useRef(null),{isVisible:i,shouldRender:r,handleDismiss:u,handleInteractionStart:T,handleInteractionEnd:R}=Ne({open:e,onDismiss:l,dismissible:n,autoHideDuration:v,pauseOnHover:x,autoFocus:d,alertRef:p});if(!r)return null;let D={size:f||16,...c};return b.createElement(k,{ref:p,severity:t,variant:g,isVisible:i,dismissible:n,onDismiss:u,onInteractionStart:T,onInteractionEnd:R,autoFocus:d,title:s,titleLevel:y,contentType:I,actions:h,hideIcon:m,iconProps:D,...S},o)};ee.displayName="Alert";var te=({src:e="//",alt:t,width:o=480,height:s,styles:n,loading:l="lazy",placeholder:f,fetchpriority:c="low",decoding:m="auto",srcSet:v,sizes:x,onError:y,onLoad:h,...d})=>{let g=useMemo(()=>{let i=typeof o=="number"?o:480,r=typeof s=="number"?s:Math.round(i*.75),u=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${i} ${r}">
+var Fe={default:"",info:"Information: ",success:"Success: ",warning:"Warning: ",error:"Error: "},z=({severity:e})=>{let t=Fe[e];return t?T.createElement("span",{className:"sr-only"},t):null};var Ee=(e,t)=>({info:T.createElement(b$1.InfoSolid,{...t}),success:T.createElement(b$1.SuccessSolid,{...t}),warning:T.createElement(b$1.WarnSolid,{...t}),error:T.createElement(b$1.AlertSolid,{...t}),default:T.createElement(b$1.AlertSquareSolid,{...t})})[e],H=({severity:e,iconProps:t,hideIcon:o})=>{if(o)return null;let s=Ee(e,t);return T.createElement(a,{"aria-hidden":"true",className:"alert-icon"},s)};var j=({title:e,titleLevel:t})=>{if(!e)return null;let o=t?`h${t}`:"strong";return T.createElement(a,{as:o,className:"alert-title"},e)};var _=({children:e,contentType:t})=>t==="node"?T.createElement(T.Fragment,null,e):T.createElement(a,{as:"p"},e);var W=({actions:e})=>e?T.createElement(a,{as:"div",className:"alert-actions"},e):null;var Q=T.memo(({onDismiss:e,iconSize:t=16})=>T.createElement(b,{type:"button",onClick:e,"aria-label":"Close alert",className:"alert-dismiss","data-btn":"icon sm"},T.createElement(b$1,null,T.createElement(b$1.Close,{size:t})))),Z=Q;Q.displayName="DismissButton";var Ue={default:"polite",info:"polite",success:"polite",warning:"polite",error:"assertive"},L=T.forwardRef(({severity:e,variant:t,isVisible:o,dismissible:s,onDismiss:n,onInteractionStart:l,onInteractionEnd:p,autoFocus:c,title:m,titleLevel:v,children:h,contentType:g,actions:S,hideIcon:d,iconProps:y,...u},x)=>T.createElement(a,{as:"div",ref:x,role:"alert","aria-live":Ue[e],"aria-atomic":"true",className:`alert alert-${e}`,"data-alert":e,"data-visible":o,"data-variant":t,tabIndex:c?-1:void 0,onMouseEnter:l,onMouseLeave:p,onFocus:l,onBlur:p,...u},T.createElement(z,{severity:e}),T.createElement(H,{severity:e,iconProps:y,hideIcon:d}),T.createElement(a,{as:"div",className:"alert-message"},T.createElement(j,{title:m,titleLevel:v}),T.createElement(_,{contentType:g},h),T.createElement(W,{actions:S})),s&&T.createElement(Z,{onDismiss:n})));L.displayName="AlertView";var Ne=({open:e,onDismiss:t,dismissible:o,autoHideDuration:s,pauseOnHover:n,autoFocus:l,alertRef:p})=>{let[c,m]=T.useState(e),[v,h]=T.useState(e),[g,S]=T.useState(!1),d=T.useCallback(()=>{m(!1),setTimeout(()=>{h(!1),t?.();},300);},[t]);T.useEffect(()=>{e?(h(!0),m(!0)):m(!1);},[e]),T.useEffect(()=>{if(!s||!c||g)return;let x=setTimeout(()=>{d();},s);return ()=>clearTimeout(x)},[s,c,g,d]),T.useEffect(()=>{if(!o||!c)return;let x=f=>{f.key==="Escape"&&d();};return document.addEventListener("keydown",x),()=>document.removeEventListener("keydown",x)},[o,c,d]),T.useEffect(()=>{l&&c&&p.current&&p.current.focus();},[l,c,p]);let y=T.useCallback(()=>{n&&s&&S(!0);},[n,s]),u=T.useCallback(()=>{n&&s&&S(!1);},[n,s]);return {isVisible:c,shouldRender:v,handleDismiss:d,handleInteractionStart:y,handleInteractionEnd:u}},ee=({open:e,severity:t="default",children:o,title:s,dismissible:n=!1,onDismiss:l,iconSize:p,iconProps:c,hideIcon:m,autoHideDuration:v,pauseOnHover:h=!0,titleLevel:g=3,actions:S,autoFocus:d=!1,variant:y="outlined",contentType:u="text",...x})=>{let f=T.useRef(null),{isVisible:r,shouldRender:i,handleDismiss:$,handleInteractionStart:C,handleInteractionEnd:R}=Ne({open:e,onDismiss:l,dismissible:n,autoHideDuration:v,pauseOnHover:h,autoFocus:d,alertRef:f});if(!i)return null;let D={size:p||16,...c};return T.createElement(L,{ref:f,severity:t,variant:y,isVisible:r,dismissible:n,onDismiss:$,onInteractionStart:C,onInteractionEnd:R,autoFocus:d,title:s,titleLevel:g,contentType:u,actions:S,hideIcon:m,iconProps:D,...x},o)};ee.displayName="Alert";var te=({src:e="//",alt:t,width:o=480,height:s,styles:n,loading:l="lazy",placeholder:p,fetchpriority:c="low",decoding:m="auto",srcSet:v,sizes:h,onError:g,onLoad:S,...d})=>{let y=useMemo(()=>{let r=typeof o=="number"?o:480,i=typeof s=="number"?s:Math.round(r*.75),$=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${r} ${i}">
       <defs>
-        <linearGradient id="grad-${i}-${r}" x1="0%" y1="0%" x2="100%" y2="100%">
+        <linearGradient id="grad-${r}-${i}" x1="0%" y1="0%" x2="100%" y2="100%">
           <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
           <stop offset="50%" style="stop-color:#8b5cf6;stop-opacity:1" />
           <stop offset="100%" style="stop-color:#ec4899;stop-opacity:1" />
         </linearGradient>
       </defs>
-      <rect width="${i}" height="${r}" fill="url(#grad-${i}-${r})"/>
-      <circle cx="${i*.15}" cy="${r*.2}" r="${Math.min(i,r)*.08}" fill="rgba(255,255,255,0.2)"/>
-      <path d="M0,${r*.75} Q${i*.25},${r*.65} ${i*.5},${r*.75} T${i},${r*.75} L${i},${r} L0,${r} Z" fill="rgba(0,0,0,0.15)"/>
-      <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="system-ui,-apple-system,sans-serif" font-size="${Math.max(16,Math.min(i,r)*.05)}" font-weight="500" fill="rgba(255,255,255,0.9)">${i}\xD7${r}</text>
-    </svg>`;return `data:image/svg+xml,${encodeURIComponent(u)}`},[o,s]),I=f??g;return b.createElement(a,{as:"img",src:e,alt:t,width:o,height:s||"auto",loading:l,style:n,srcSet:v,sizes:x,onError:i=>{y&&y(i),i.defaultPrevented||i.currentTarget.src!==I&&(i.currentTarget.src=I);},onLoad:i=>{h?.(i);},decoding:m,...d,...c&&{fetchpriority:c}})};te.displayName="Img";var oe=e=>{let[t,o]=useState([]),[s,n]=useState(e),[l,f]=useState(!1),[c,m]=useState(!1),[v,x]=useState(null);return useEffect(()=>{let p=()=>{let i=window.speechSynthesis.getVoices();o(i);let r=i.find(u=>u.name==="Google US English");if(r)n(r);else {let u=i.find(T=>T.lang.startsWith("en-"));u&&n(u);}};return p(),window.speechSynthesis.onvoiceschanged=p,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(p,i={},r)=>{let u=new SpeechSynthesisUtterance(p);u.lang=i.lang??"en-US",u.pitch=i.pitch??1,u.rate=i.rate??1,u.voice=s??i.voice??null,u.onend=()=>{f(!1),m(!1),r&&r();},"speechSynthesis"in window?(window.speechSynthesis.speak(u),x(u),f(!0),m(!1)):console.error("Speech synthesis not supported");},pause:()=>{l&&!c&&(window.speechSynthesis.pause(),m(!0));},resume:()=>{l&&c&&(window.speechSynthesis.resume(),m(!1));},cancel:()=>{l&&(window.speechSynthesis.cancel(),f(!1),m(!1));},isSpeaking:l,isPaused:c,availableVoices:t,changeVoice:p=>{n(p);},currentVoice:s,getAvailableLanguages:()=>[...new Set(t.map(p=>p.lang))]}};var Be=({children:e,onClick:t})=>b.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:t},e),N=b.memo(Be),J=({label:e,isSpeaking:t,isPaused:o,onSpeak:s,onPause:n,onResume:l,onCancel:f})=>b.createElement(a,{as:"div","data-tts":!0},e&&b.createElement("p",null,e),!t&&b.createElement(N,{"aria-label":"Speak",onClick:s},b.createElement(b$2.PlaySolid,{size:16})),t&&!o&&b.createElement(N,{"aria-label":"Pause",onClick:n},b.createElement(b$2.PauseSolid,{size:16})),o&&b.createElement(N,{"aria-label":"Resume",onClick:l},b.createElement(b$2.ResumeSolid,{size:16})),b.createElement(N,{"aria-label":"Stop",onClick:f},b.createElement(b$2.StopSolid,{size:16})));J.displayName="TextToSpeechControls";J.TTSButton=N;var se=J;var ne=({initialText:e="",showTextInput:t=!1,voice:o,pitch:s=1,rate:n=1,language:l,label:f,onEnd:c})=>{let{speak:m,pause:v,resume:x,cancel:y,isSpeaking:h,isPaused:d,getAvailableLanguages:g,availableVoices:I}=oe(),[S,p]=useState(e);console.log(g()),useEffect(()=>{p(e);},[e]);let i=()=>{S.trim()!==""&&m(S,{voice:o,pitch:s,rate:n},u);},r=T=>{p(T.target.value);},u=()=>{c&&c();};return b.createElement(b.Fragment,null,t&&b.createElement(b$3,{value:S,onChange:r}),b.createElement(se,{label:f,isSpeaking:h,isPaused:d,onSpeak:i,onPause:v,onResume:x,onCancel:y}))};ne.displayName="TextToSpeechComponent";var E=e=>b.createElement(b.Fragment,null,e),De=({id:e,children:t,headerBackground:o,styles:s,classes:n,...l})=>b.createElement(a,{as:"header",id:e,styles:s,className:n,...l},o,b.createElement(a,{as:"section"},t)),ze=({id:e,children:t,styles:o,classes:s,...n})=>b.createElement(a,{as:"main",id:e,styles:o,...n,className:s},t),He=({id:e,classes:t,children:o,styles:s={},...n})=>b.createElement(a,{as:"footer",id:e,className:t,styles:s,...n},b.createElement(a,{as:"section"},o||"Copyright \xA9 2022")),je=({id:e,children:t,styles:o={},classes:s,...n})=>b.createElement(a,{as:"aside",id:e,styles:o,className:s,...n},b.createElement(a,{as:"section"},t)),Ge=({id:e,children:t,styles:o,classes:s,...n})=>b.createElement(a,{as:"section",id:e,styles:o,className:s,...n},t),_e=({id:e,children:t,styles:o,classes:s,...n})=>b.createElement(a,{as:"article",id:e,styles:o,className:s,...n},t);E.displayName="Landmarks";E.Header=De;E.Main=ze;E.Footer=He;E.Aside=je;E.Section=Ge;E.Article=_e;var M=(e,t="")=>{let o=[];if(e.direction){let s={row:"flex-row","row-reverse":"flex-row-reverse",column:"flex-col","column-reverse":"flex-col-reverse"};o.push(`${t}${s[e.direction]}`);}if(e.wrap){let s={wrap:"flex-wrap",nowrap:"flex-nowrap","wrap-reverse":"flex-wrap-reverse"};o.push(`${t}${s[e.wrap]}`);}if(e.gap&&o.push(`${t}gap-${e.gap}`),e.rowGap&&o.push(`${t}row-gap-${e.rowGap}`),e.colGap&&o.push(`${t}col-gap-${e.colGap}`),e.justify){let s={start:"justify-start",end:"justify-end",center:"justify-center",between:"justify-between",around:"justify-around",evenly:"justify-evenly"};o.push(`${t}${s[e.justify]}`);}if(e.align){let s={start:"items-start",end:"items-end",center:"items-center",baseline:"items-baseline",stretch:"items-stretch"};o.push(`${t}${s[e.align]}`);}if(e.alignContent){let s={start:"content-start",end:"content-end",center:"content-center",between:"content-between",around:"content-around",evenly:"content-evenly",stretch:"content-stretch"};o.push(`${t}${s[e.alignContent]}`);}return o},re=b.forwardRef((e,t)=>{let{variant:o,inline:s=!1,as:n="div",className:l="",styles:f,children:c,sm:m,md:v,lg:x,xl:y,direction:h,wrap:d,gap:g,rowGap:I,colGap:S,justify:p,align:i,alignContent:r,...u}=e,T=[];if(T.push(s?"flex-inline":"flex"),o){let D={center:"flex-center",between:"flex-between",around:"flex-around",stack:"flex-stack",spread:"flex-spread"};T.push(D[o]);}T.push(...M({direction:h,wrap:d,gap:g,rowGap:I,colGap:S,justify:p,align:i,alignContent:r})),m&&T.push(...M(m,"sm:")),v&&T.push(...M(v,"md:")),x&&T.push(...M(x,"lg:")),y&&T.push(...M(y,"xl:"));let R=[...T,l].filter(Boolean).join(" ");return b.createElement(a,{as:n,ref:t,classes:R,styles:f,...u},c)});re.displayName="Flex";var ae=b.forwardRef((e,t)=>{let{grow:o,shrink:s,basis:n,flex:l,alignSelf:f,order:c,as:m="div",className:v="",styles:x,children:y,sm:h,md:d,lg:g,xl:I,...S}=e,p=[];if(l){let r={1:"flex-1",auto:"flex-auto",initial:"flex-initial",none:"flex-none"};p.push(r[l]);}if(o!==void 0&&p.push(`flex-grow-${o}`),s!==void 0&&p.push(`flex-shrink-${s}`),n){let r={auto:"flex-basis-auto",0:"flex-basis-0",full:"flex-basis-full"};p.push(r[n]);}if(f){let r={auto:"self-auto",start:"self-start",end:"self-end",center:"self-center",baseline:"self-baseline",stretch:"self-stretch"};p.push(r[f]);}if(c){let r={first:"order-first",last:"order-last",none:"order-none"};p.push(r[c]);}if(h?.flex){let r={1:"flex-1",auto:"flex-auto",none:"flex-none"};p.push(`sm:${r[h.flex]}`);}if(d?.flex){let r={1:"flex-1",auto:"flex-auto",none:"flex-none"};p.push(`md:${r[d.flex]}`);}if(g?.flex){let r={1:"flex-1",auto:"flex-auto",none:"flex-none"};p.push(`lg:${r[g.flex]}`);}if(I?.flex){let r={1:"flex-1",auto:"flex-auto",none:"flex-none"};p.push(`xl:${r[I.flex]}`);}let i=[...p,v].filter(Boolean).join(" ");return b.createElement(a,{as:m,ref:t,classes:i,styles:x,...S},y)});ae.displayName="Flex.Item";var ie=b.forwardRef((e,t)=>{let{as:o="div",className:s="",styles:n,...l}=e,f=["flex-1",s].filter(Boolean).join(" ");return b.createElement(a,{as:o,ref:t,classes:f,styles:n,...l})});ie.displayName="Flex.Spacer";var O=re;O.Item=ae;O.Spacer=ie;var We=O;var pe=({id:e,styles:t,classes:o,children:s,variant:n,...l})=>b.createElement(a,{as:"sup",id:e,styles:t,className:o,"data-badge":n||void 0,role:"status",...l},b.createElement(a,{as:"span"},s));pe.displayName="Badge";var Oe=({elm:e="span",role:t="note",variant:o,children:s,styles:n,...l})=>b.createElement(a,{as:e,role:t,"data-tag":o||void 0,styles:n,...l},s);Oe.displayName="Tag";var Xe=b.forwardRef(({summary:e,icon:t,styles:o,classes:s,ariaLabel:n,name:l,open:f,onPointerDown:c,onToggle:m,children:v,...x},y)=>{let h=useCallback(g=>{c?.(g);},[c]),d=useCallback(g=>{m?.(g);},[m]);return b.createElement(a,{as:"details",styles:o,classes:s,onToggle:d,ref:y,open:f,"aria-label":n,name:l,...x},b.createElement(a,{as:"summary",onPointerDown:h},t,e),b.createElement(a,{as:"section"},v))});Xe.displayName="Details";
+      <rect width="${r}" height="${i}" fill="url(#grad-${r}-${i})"/>
+      <circle cx="${r*.15}" cy="${i*.2}" r="${Math.min(r,i)*.08}" fill="rgba(255,255,255,0.2)"/>
+      <path d="M0,${i*.75} Q${r*.25},${i*.65} ${r*.5},${i*.75} T${r},${i*.75} L${r},${i} L0,${i} Z" fill="rgba(0,0,0,0.15)"/>
+      <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="system-ui,-apple-system,sans-serif" font-size="${Math.max(16,Math.min(r,i)*.05)}" font-weight="500" fill="rgba(255,255,255,0.9)">${r}\xD7${i}</text>
+    </svg>`;return `data:image/svg+xml,${encodeURIComponent($)}`},[o,s]),u=p??y;return T.createElement(a,{as:"img",src:e,alt:t,width:o,height:s||"auto",loading:l,style:n,srcSet:v,sizes:h,onError:r=>{g&&g(r),r.defaultPrevented||r.currentTarget.src!==u&&(r.currentTarget.src=u);},onLoad:r=>{S?.(r);},decoding:m,...d,...c&&{fetchpriority:c}})};te.displayName="Img";var oe=e=>{let[t,o]=useState([]),[s,n]=useState(e),[l,p]=useState(!1),[c,m]=useState(!1);return useEffect(()=>{let u=()=>{let x=window.speechSynthesis.getVoices();o(x);let f=x.find(r=>r.name==="Google US English");if(f)n(f);else {let r=x.find(i=>i.lang.startsWith("en-"));r&&n(r);}};return u(),window.speechSynthesis.onvoiceschanged=u,()=>{window.speechSynthesis.onvoiceschanged=null;}},[]),{speak:(u,x={},f)=>{let r=new SpeechSynthesisUtterance(u);r.lang=x.lang??"en-US",r.pitch=x.pitch??1,r.rate=x.rate??1,r.voice=s??x.voice??null,r.onend=()=>{p(!1),m(!1),f&&f();},"speechSynthesis"in window?(window.speechSynthesis.speak(r),p(!0),m(!1)):p(!1);},pause:()=>{l&&!c&&(window.speechSynthesis.pause(),m(!0));},resume:()=>{l&&c&&(window.speechSynthesis.resume(),m(!1));},cancel:()=>{l&&(window.speechSynthesis.cancel(),p(!1),m(!1));},isSpeaking:l,isPaused:c,availableVoices:t,changeVoice:u=>{n(u);},currentVoice:s,getAvailableLanguages:()=>[...new Set(t.map(u=>u.lang))]}};var Be=({children:e,onClick:t})=>T.createElement(a,{as:"button",type:"button",className:"tts-border","data-btn":"sm text pill",onClick:t},e),U=T.memo(Be),J=({label:e,isSpeaking:t,isPaused:o,onSpeak:s,onPause:n,onResume:l,onCancel:p})=>T.createElement(a,{as:"div","data-tts":!0},e&&T.createElement("p",null,e),!t&&T.createElement(U,{"aria-label":"Speak",onClick:s},T.createElement(b$1.PlaySolid,{size:16})),t&&!o&&T.createElement(U,{"aria-label":"Pause",onClick:n},T.createElement(b$1.PauseSolid,{size:16})),o&&T.createElement(U,{"aria-label":"Resume",onClick:l},T.createElement(b$1.ResumeSolid,{size:16})),T.createElement(U,{"aria-label":"Stop",onClick:p},T.createElement(b$1.StopSolid,{size:16})));J.displayName="TextToSpeechControls";J.TTSButton=U;var se=J;var ne=({initialText:e="",showTextInput:t=!1,voice:o,pitch:s=1,rate:n=1,label:l,onEnd:p})=>{let{speak:c,pause:m,resume:v,cancel:h,isSpeaking:g,isPaused:S}=oe(),[d,y]=useState(e);useEffect(()=>{y(e);},[e]);let u=()=>{d.trim()!==""&&c(d,{voice:o,pitch:s,rate:n},f);},x=r=>{y(r.target.value);},f=()=>{p&&p();};return T.createElement(T.Fragment,null,t&&T.createElement(b$2,{value:d,onChange:x}),T.createElement(se,{label:l,isSpeaking:g,isPaused:S,onSpeak:u,onPause:m,onResume:v,onCancel:h}))};ne.displayName="TextToSpeechComponent";var F=e=>T.createElement(T.Fragment,null,e),De=({id:e,children:t,headerBackground:o,styles:s,classes:n,...l})=>T.createElement(a,{as:"header",id:e,styles:s,className:n,...l},o,T.createElement(a,{as:"section"},t)),ze=({id:e,children:t,styles:o,classes:s,...n})=>T.createElement(a,{as:"main",id:e,styles:o,...n,className:s},t),He=({id:e,classes:t,children:o,styles:s={},...n})=>T.createElement(a,{as:"footer",id:e,className:t,styles:s,...n},T.createElement(a,{as:"section"},o||"Copyright \xA9 2022")),je=({id:e,children:t,styles:o={},classes:s,...n})=>T.createElement(a,{as:"aside",id:e,styles:o,className:s,...n},T.createElement(a,{as:"section"},t)),Ge=({id:e,children:t,styles:o,classes:s,...n})=>T.createElement(a,{as:"section",id:e,styles:o,className:s,...n},t),_e=({id:e,children:t,styles:o,classes:s,...n})=>T.createElement(a,{as:"article",id:e,styles:o,className:s,...n},t);F.displayName="Landmarks";F.Header=De;F.Main=ze;F.Footer=He;F.Aside=je;F.Section=Ge;F.Article=_e;var N=(e,t="")=>{let o=[];if(e.direction){let s={row:"flex-row","row-reverse":"flex-row-reverse",column:"flex-col","column-reverse":"flex-col-reverse"};o.push(`${t}${s[e.direction]}`);}if(e.wrap){let s={wrap:"flex-wrap",nowrap:"flex-nowrap","wrap-reverse":"flex-wrap-reverse"};o.push(`${t}${s[e.wrap]}`);}if(e.gap&&o.push(`${t}gap-${e.gap}`),e.rowGap&&o.push(`${t}row-gap-${e.rowGap}`),e.colGap&&o.push(`${t}col-gap-${e.colGap}`),e.justify){let s={start:"justify-start",end:"justify-end",center:"justify-center",between:"justify-between",around:"justify-around",evenly:"justify-evenly"};o.push(`${t}${s[e.justify]}`);}if(e.align){let s={start:"items-start",end:"items-end",center:"items-center",baseline:"items-baseline",stretch:"items-stretch"};o.push(`${t}${s[e.align]}`);}if(e.alignContent){let s={start:"content-start",end:"content-end",center:"content-center",between:"content-between",around:"content-around",evenly:"content-evenly",stretch:"content-stretch"};o.push(`${t}${s[e.alignContent]}`);}return o},re=T.forwardRef((e,t)=>{let{variant:o,inline:s=!1,as:n="div",className:l="",styles:p,children:c,sm:m,md:v,lg:h,xl:g,direction:S,wrap:d,gap:y,rowGap:u,colGap:x,justify:f,align:r,alignContent:i,...$}=e,C=[];if(C.push(s?"flex-inline":"flex"),o){let D={center:"flex-center",between:"flex-between",around:"flex-around",stack:"flex-stack",spread:"flex-spread"};C.push(D[o]);}C.push(...N({direction:S,wrap:d,gap:y,rowGap:u,colGap:x,justify:f,align:r,alignContent:i})),m&&C.push(...N(m,"sm:")),v&&C.push(...N(v,"md:")),h&&C.push(...N(h,"lg:")),g&&C.push(...N(g,"xl:"));let R=[...C,l].filter(Boolean).join(" ");return T.createElement(a,{as:n,ref:t,classes:R,styles:p,...$},c)});re.displayName="Flex";var ae=T.forwardRef((e,t)=>{let{grow:o,shrink:s,basis:n,flex:l,alignSelf:p,order:c,as:m="div",className:v="",styles:h,children:g,sm:S,md:d,lg:y,xl:u,...x}=e,f=[];if(l){let i={1:"flex-1",auto:"flex-auto",initial:"flex-initial",none:"flex-none"};f.push(i[l]);}if(o!==void 0&&f.push(`flex-grow-${o}`),s!==void 0&&f.push(`flex-shrink-${s}`),n){let i={auto:"flex-basis-auto",0:"flex-basis-0",full:"flex-basis-full"};f.push(i[n]);}if(p){let i={auto:"self-auto",start:"self-start",end:"self-end",center:"self-center",baseline:"self-baseline",stretch:"self-stretch"};f.push(i[p]);}if(c){let i={first:"order-first",last:"order-last",none:"order-none"};f.push(i[c]);}if(S?.flex){let i={1:"flex-1",auto:"flex-auto",none:"flex-none"};f.push(`sm:${i[S.flex]}`);}if(d?.flex){let i={1:"flex-1",auto:"flex-auto",none:"flex-none"};f.push(`md:${i[d.flex]}`);}if(y?.flex){let i={1:"flex-1",auto:"flex-auto",none:"flex-none"};f.push(`lg:${i[y.flex]}`);}if(u?.flex){let i={1:"flex-1",auto:"flex-auto",none:"flex-none"};f.push(`xl:${i[u.flex]}`);}let r=[...f,v].filter(Boolean).join(" ");return T.createElement(a,{as:m,ref:t,classes:r,styles:h,...x},g)});ae.displayName="Flex.Item";var ie=T.forwardRef((e,t)=>{let{as:o="div",className:s="",styles:n,...l}=e,p=["flex-1",s].filter(Boolean).join(" ");return T.createElement(a,{as:o,ref:t,classes:p,styles:n,...l})});ie.displayName="Flex.Spacer";var O=re;O.Item=ae;O.Spacer=ie;var We=O;var pe=({id:e,styles:t,classes:o,children:s,variant:n,...l})=>T.createElement(a,{as:"sup",id:e,styles:t,className:o,"data-badge":n||void 0,role:"status",...l},T.createElement(a,{as:"span"},s));pe.displayName="Badge";var Oe=({elm:e="span",role:t="note",variant:o,children:s,styles:n,...l})=>T.createElement(a,{as:e,role:t,"data-tag":o||void 0,styles:n,...l},s);Oe.displayName="Tag";var Xe=T.forwardRef(({summary:e,icon:t,styles:o,classes:s,ariaLabel:n,name:l,open:p,onPointerDown:c,onToggle:m,children:v,...h},g)=>{let S=useCallback(y=>{c?.(y);},[c]),d=useCallback(y=>{m?.(y);},[m]);return T.createElement(a,{as:"details",styles:o,classes:s,onToggle:d,ref:g,open:p,"aria-label":n,name:l,...h},T.createElement(a,{as:"summary",onPointerDown:S},t,e),T.createElement(a,{as:"section"},v))});Xe.displayName="Details";
 
-export { ee as Alert, _e as Article, je as Aside, pe as Badge, Xe as Details, We as Flex, He as Footer, De as Header, te as Img, E as Landmarks, ze as Main, Ge as Section, Oe as Tag, ne as TextToSpeech };
+export { ee as Alert, _e as Article, je as Aside, pe as Badge, Xe as Details, We as Flex, He as Footer, De as Header, te as Img, F as Landmarks, ze as Main, Ge as Section, Oe as Tag, ne as TextToSpeech };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map