import{j as i,K as t,dq as m,L as h,r as g,s as _,bf as u,aD as f,o as n}from"./index-CCv_8omK.js";function b({icon:e,value:a,name:r,url:o="",animated:s=!1,LinkComponent:p=h,loading:x=!1}){const d=()=>u.isValidElement(e)?e:i.jsx(t,{component:f,icon:e,alt:typeof r=="string"?r:"",sx:{fontSize:30}});if(x)return i.jsxs(c,{children:[e&&i.jsx(t,{className:"metric__image",children:i.jsx(m,{variant:"circular",width:32,height:32})}),i.jsxs(t,{children:[i.jsx(m,{className:`metric__number ${s?"metric__number--animated":""}`,variant:"rounded",width:160,height:"36px",sx:{mb:1}}),i.jsx(m,{className:"metric__name",variant:"rounded",width:80,height:20})]})]});const l=i.jsxs(i.Fragment,{children:[e&&i.jsx(t,{className:"metric__image",children:d()}),i.jsxs(t,{children:[g.isValidElement(a)?i.jsx(t,{className:`metric__number ${s?"metric__number--animated":""}`,children:a}):i.jsx(t,{className:`metric__number ${s?"metric__number--animated":""}`,dangerouslySetInnerHTML:{__html:a}}),i.jsx(t,{className:"metric__name",children:r})]})]});return i.jsx(c,{children:o?i.jsx(p,{href:o,sx:{textDecoration:"none"},children:l}):l})}b.propTypes={icon:n.string.isRequired,value:n.string.isRequired,name:n.string.isRequired,url:n.string,animated:n.bool,LinkComponent:n.elementType,loading:n.bool};const c=_(t)`
  border-left: 1px solid ${e=>e.theme.palette.divider};
  padding: 10px 0 10px 16px;
  @media (max-width: ${e=>e.theme.breakpoints.values.sm}px) {
    padding: 0 0 0 8px;
  }

  display: flex;
  justify-items: center;
  align-items: flex-start;

  a {
    display: flex;
    justify-items: center;
    align-items: flex-start;
  }

  .metric__image {
    margin-right: 8px;
    margin-top: 2px;
  }

  .metric__number {
    margin-bottom: 8px;
    font-size: ${e=>e.size==="small"?32:36}px;
    font-weight: 600;
    line-height: 36px;
    color: ${e=>e.theme.typography.color.main};

    small {
      font-size: 12px;
      line-height: 12px;
    }

    @media (max-width: ${e=>e.theme.breakpoints.values.sm}px) {
      font-size: ${e=>e.size==="small"?24:28}px;
      line-height: ${e=>e.size==="small"?24:28}px;
      margin-bottom: 2px;
    }
  }

  .metric__number--animated {
    animation-name: blink-opacity;
    animation-duration: 250ms;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    background-color: transparent !important;
  }

  .metric__name {
    font-size: 14px;
    text-transform: capitalize;
    line-height: 1.2;
    font-weight: 500;
    color: ${e=>e.theme.typography.color.main};
    @media (max-width: ${e=>e.theme.breakpoints.values.sm}px) {
      font-size: 10px;
      line-height: 1;
    }
  }

  @keyframes blink-opacity {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
    100% {
      opacity: 1;
    }
  }
`;export{b as M};
