import{jsx as e,jsxs as r}from"react/jsx-runtime";import{styled as o}from"../../styled-components.js";import{normalizeScopes as m}from"../../utils/security-scope.js";import{useTranslate as g}from"../../hooks/index.js";import{ScopeTagWithTooltip as c}from"./ScopeTagWithTooltip.js";const l=4,S=32;function j({scopes:d}){const t=g(),s=m(d);if(s.length===0)return null;const h=s.slice(0,l),a=s.slice(l),n=a.length;return r(x,{children:[e(p,{children:"("}),r(u,{children:[t("openapi.requiredScopes","Required scopes"),":"," "]}),r(f,{children:[h.map(i=>e(c,{className:"tag-grey",text:i,maxChars:S},i)),n>0&&e(c,{arrowPosition:"left",className:"tag-grey",text:`+${n}`,tip:e(v,{children:a.map(i=>e("div",{children:i},i))}),ariaLabel:t("openapi.showMoreScopes",`Show ${n} more scopes`)})]}),e(p,{children:")"})]})}const x=o.span`
  display: inline;
  margin-left: var(--spacing-xxs);
`,u=o.span`
  color: var(--color-warm-grey-8);
  line-height: var(--line-height-base);
`,f=o.span`
  display: inline;
  padding: 0 var(--spacing-xxs);
`,v=o.div`
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
`,p=o.span`
  color: var(--text-color-description);
  line-height: var(--line-height-base);
`;export{j as RequiredScopes};
