@strapi/admin 5.56.0 → 5.58.0

package/dist/admin/ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AIUsage.mjs

@@ -1,23 +1,22 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Typography, Flex, Grid, ProgressBar } from '@strapi/design-system';
+import { Flex, Typography, ProgressBar } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { useAIAvailability } from '../../../../../hooks/useAIAvailability.mjs';
 import { useGetAiUsageQuery } from '../../../../../services/ai.mjs';
 
-const StyledProgressBar = styled(ProgressBar)`
+/**
+ * The fill colour has to come from a transient prop. `ProgressBar` forwards unknown props onto
+ * the underlying Radix div, so the `color="danger"` this used to be given was landing as an HTML
+ * `color` attribute and never reaching the fill — the overage bar rendered neutral, not red.
+ */ const StyledProgressBar = styled(ProgressBar)`
   width: 100%;
   background-color: ${({ theme })=>theme.colors.neutral200};
   > div {
-    background-color: ${({ theme })=>theme.colors.neutral700};
+    background-color: ${({ theme, $variant })=>$variant === 'danger' ? theme.colors.danger600 : theme.colors.neutral700};
   }
 `;
-const StyledGridItem = styled(Grid.Item)`
-  ${({ theme })=>theme.breakpoints.large} {
-    grid-column: 7 / 13;
-  }
-`;
-const AIUsage = ()=>{
+const AIUsage = ({ isTrial = false })=>{
     const { formatMessage } = useIntl();
     const isAIAvailable = useAIAvailability();
     const { data, isLoading, error } = useGetAiUsageQuery(undefined, {
@@ -44,9 +43,7 @@ const AIUsage = ()=>{
     const percentRemaining = usedCredits / totalCredits * 100;
     const percentOverage = usedCredits / maxCredits * 100;
     const isInOverages = overage > 0 && maxCredits !== totalCredits;
-    return /*#__PURE__*/ jsxs(StyledGridItem, {
-        col: 6,
-        s: 12,
+    return /*#__PURE__*/ jsxs(Flex, {
         direction: "column",
         alignItems: "start",
         gap: 2,
@@ -66,35 +63,68 @@ const AIUsage = ()=>{
                 children: [
                     !isInOverages && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
+                            /*#__PURE__*/ jsxs(Flex, {
+                                direction: "row",
+                                alignItems: "baseline",
+                                gap: 1,
+                                children: [
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        children: `${usedCredits.toFixed(2)}`
+                                    }),
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        variant: "pi",
+                                        textColor: "neutral600",
+                                        children: `/ ${totalCredits}`
+                                    })
+                                ]
+                            }),
                             /*#__PURE__*/ jsx(Flex, {
                                 width: "100%",
                                 children: /*#__PURE__*/ jsx(StyledProgressBar, {
                                     value: percentRemaining,
-                                    size: "M"
+                                    size: "M",
+                                    "aria-label": `${usedCredits.toFixed(2)} credits used from ${totalCredits} credits available in your plan`
                                 })
-                            }),
-                            /*#__PURE__*/ jsx(Typography, {
-                                variant: "omega",
-                                children: `${usedCredits.toFixed(2)} credits used from ${totalCredits} credits available in your plan`
                             })
                         ]
                     }),
                     isInOverages && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
+                            /*#__PURE__*/ jsxs(Flex, {
+                                direction: "row",
+                                alignItems: "baseline",
+                                gap: 1,
+                                children: [
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        variant: "epsilon",
+                                        textColor: "danger600",
+                                        children: `${overage.toFixed(2)}`
+                                    }),
+                                    /*#__PURE__*/ jsx(Typography, {
+                                        variant: "pi",
+                                        textColor: "neutral600",
+                                        children: `/ ${totalCredits}`
+                                    })
+                                ]
+                            }),
                             /*#__PURE__*/ jsx(Flex, {
                                 width: "100%",
                                 children: /*#__PURE__*/ jsx(StyledProgressBar, {
                                     value: percentOverage,
                                     size: "M",
-                                    color: "danger"
+                                    $variant: "danger",
+                                    "aria-label": `${overage.toFixed(2)} credits used above the ${totalCredits} credits available in your plan`
                                 })
-                            }),
-                            /*#__PURE__*/ jsx(Typography, {
-                                variant: "omega",
-                                textColor: "danger600",
-                                children: `${overage.toFixed(2)} credits used above the ${totalCredits} credits available in your plan`
                             })
                         ]
+                    }),
+                    !isTrial && /*#__PURE__*/ jsx(Typography, {
+                        variant: "pi",
+                        textColor: "neutral600",
+                        children: formatMessage({
+                            id: 'Settings.application.ai-usage.overage-rate',
+                            defaultMessage: '+$1.50 per 100 credits above plan limit'
+                        })
                     })
                 ]
             })

package/dist/admin/ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AIUsage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AIUsage.mjs","sources":["../../../../../../../../../../ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AIUsage.tsx"],"sourcesContent":["import { Flex, Typography, Grid, ProgressBar } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useAIAvailability } from '../../../../../hooks/useAIAvailability';\nimport { useGetAiUsageQuery } from '../../../../../services/ai';\n\nconst StyledProgressBar = styled(ProgressBar)`\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral200};\n  > div {\n    background-color: ${({ theme }) => theme.colors.neutral700};\n  }\n`;\n\nconst StyledGridItem = styled(Grid.Item)`\n  ${({ theme }) => theme.breakpoints.large} {\n    grid-column: 7 / 13;\n  }\n`;\n\nexport const AIUsage = () => {\n  const { formatMessage } = useIntl();\n  const isAIAvailable = useAIAvailability();\n  const { data, isLoading, error } = useGetAiUsageQuery(undefined, {\n    refetchOnMountOrArgChange: true,\n    skip: !isAIAvailable,\n  });\n\n  if (!isAIAvailable) {\n    return null;\n  }\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (error || !data) {\n    return null;\n  }\n\n  if (!data.subscription?.cmsAiEnabled) {\n    return null;\n  }\n\n  // Calculate remaining credits and total\n  const totalCredits = data.subscription.cmsAiCreditsBase;\n  const usedCredits = data.cmsAiCreditsUsed;\n  const maxCredits = data.subscription.cmsAiCreditsMaxUsage;\n  const overage = usedCredits - totalCredits;\n  const percentRemaining = (usedCredits / totalCredits) * 100;\n  const percentOverage = (usedCredits / maxCredits) * 100;\n\n  const isInOverages = overage > 0 && maxCredits !== totalCredits;\n\n  return (\n    <StyledGridItem col={6} s={12} direction=\"column\" alignItems=\"start\" gap={2}>\n      <Typography variant=\"sigma\" textColor=\"neutral600\">\n        {formatMessage({\n          id: 'Settings.application.ai-usage',\n          defaultMessage: 'AI Usage',\n        })}\n      </Typography>\n      <Flex gap={2} direction=\"column\" alignItems=\"flex-start\">\n        {!isInOverages && (\n          <>\n            <Flex width=\"100%\">\n              <StyledProgressBar value={percentRemaining} size=\"M\" />\n            </Flex>\n            <Typography variant=\"omega\">\n              {`${usedCredits.toFixed(2)} credits used from ${totalCredits} credits available in your plan`}\n            </Typography>\n          </>\n        )}\n        {isInOverages && (\n          <>\n            <Flex width=\"100%\">\n              <StyledProgressBar value={percentOverage} size=\"M\" color=\"danger\" />\n            </Flex>\n            <Typography variant=\"omega\" textColor=\"danger600\">\n              {`${overage.toFixed(2)} credits used above the ${totalCredits} credits available in your plan`}\n            </Typography>\n          </>\n        )}\n      </Flex>\n    </StyledGridItem>\n  );\n};\n"],"names":["StyledProgressBar","styled","ProgressBar","theme","colors","neutral200","neutral700","StyledGridItem","Grid","Item","breakpoints","large","AIUsage","formatMessage","useIntl","isAIAvailable","useAIAvailability","data","isLoading","error","useGetAiUsageQuery","undefined","refetchOnMountOrArgChange","skip","subscription","cmsAiEnabled","totalCredits","cmsAiCreditsBase","usedCredits","cmsAiCreditsUsed","maxCredits","cmsAiCreditsMaxUsage","overage","percentRemaining","percentOverage","isInOverages","_jsxs","col","s","direction","alignItems","gap","_jsx","Typography","variant","textColor","id","defaultMessage","Flex","_Fragment","width","value","size","toFixed","color"],"mappings":"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"}
+{"version":3,"file":"AIUsage.mjs","sources":["../../../../../../../../../../ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AIUsage.tsx"],"sourcesContent":["import { Flex, Typography, ProgressBar } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useAIAvailability } from '../../../../../hooks/useAIAvailability';\nimport { useGetAiUsageQuery } from '../../../../../services/ai';\n\n/**\n * The fill colour has to come from a transient prop. `ProgressBar` forwards unknown props onto\n * the underlying Radix div, so the `color=\"danger\"` this used to be given was landing as an HTML\n * `color` attribute and never reaching the fill — the overage bar rendered neutral, not red.\n */\nconst StyledProgressBar = styled(ProgressBar)<{ $variant?: 'neutral' | 'danger' }>`\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral200};\n  > div {\n    background-color: ${({ theme, $variant }) =>\n      $variant === 'danger' ? theme.colors.danger600 : theme.colors.neutral700};\n  }\n`;\n\ninterface AIUsageProps {\n  /** Trials are not billed for overages, so the rate line is meaningless to them. */\n  isTrial?: boolean;\n}\n\nexport const AIUsage = ({ isTrial = false }: AIUsageProps) => {\n  const { formatMessage } = useIntl();\n  const isAIAvailable = useAIAvailability();\n  const { data, isLoading, error } = useGetAiUsageQuery(undefined, {\n    refetchOnMountOrArgChange: true,\n    skip: !isAIAvailable,\n  });\n\n  if (!isAIAvailable) {\n    return null;\n  }\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (error || !data) {\n    return null;\n  }\n\n  if (!data.subscription?.cmsAiEnabled) {\n    return null;\n  }\n\n  // Calculate remaining credits and total\n  const totalCredits = data.subscription.cmsAiCreditsBase;\n  const usedCredits = data.cmsAiCreditsUsed;\n  const maxCredits = data.subscription.cmsAiCreditsMaxUsage;\n  const overage = usedCredits - totalCredits;\n  const percentRemaining = (usedCredits / totalCredits) * 100;\n  const percentOverage = (usedCredits / maxCredits) * 100;\n\n  const isInOverages = overage > 0 && maxCredits !== totalCredits;\n\n  return (\n    <Flex direction=\"column\" alignItems=\"start\" gap={2}>\n      <Typography variant=\"sigma\" textColor=\"neutral600\">\n        {formatMessage({\n          id: 'Settings.application.ai-usage',\n          defaultMessage: 'AI Usage',\n        })}\n      </Typography>\n      <Flex gap={2} direction=\"column\" alignItems=\"flex-start\">\n        {!isInOverages && (\n          <>\n            <Flex direction=\"row\" alignItems=\"baseline\" gap={1}>\n              <Typography>{`${usedCredits.toFixed(2)}`}</Typography>\n              <Typography variant=\"pi\" textColor=\"neutral600\">{`/ ${totalCredits}`}</Typography>\n            </Flex>\n            <Flex width=\"100%\">\n              {/* The \"12.00 / 100\" pair above is only meaningful next to the bar, so the bar\n                  carries the full sentence for screen readers. */}\n              <StyledProgressBar\n                value={percentRemaining}\n                size=\"M\"\n                aria-label={`${usedCredits.toFixed(2)} credits used from ${totalCredits} credits available in your plan`}\n              />\n            </Flex>\n          </>\n        )}\n        {isInOverages && (\n          <>\n            <Flex direction=\"row\" alignItems=\"baseline\" gap={1}>\n              <Typography variant=\"epsilon\" textColor=\"danger600\">\n                {`${overage.toFixed(2)}`}\n              </Typography>\n              <Typography variant=\"pi\" textColor=\"neutral600\">{`/ ${totalCredits}`}</Typography>\n            </Flex>\n            <Flex width=\"100%\">\n              <StyledProgressBar\n                value={percentOverage}\n                size=\"M\"\n                $variant=\"danger\"\n                aria-label={`${overage.toFixed(2)} credits used above the ${totalCredits} credits available in your plan`}\n              />\n            </Flex>\n          </>\n        )}\n        {!isTrial && (\n          <Typography variant=\"pi\" textColor=\"neutral600\">\n            {formatMessage({\n              id: 'Settings.application.ai-usage.overage-rate',\n              defaultMessage: '+$1.50 per 100 credits above plan limit',\n            })}\n          </Typography>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n"],"names":["StyledProgressBar","styled","ProgressBar","theme","colors","neutral200","$variant","danger600","neutral700","AIUsage","isTrial","formatMessage","useIntl","isAIAvailable","useAIAvailability","data","isLoading","error","useGetAiUsageQuery","undefined","refetchOnMountOrArgChange","skip","subscription","cmsAiEnabled","totalCredits","cmsAiCreditsBase","usedCredits","cmsAiCreditsUsed","maxCredits","cmsAiCreditsMaxUsage","overage","percentRemaining","percentOverage","isInOverages","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","textColor","id","defaultMessage","_Fragment","toFixed","width","value","size","aria-label"],"mappings":"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"}

package/dist/admin/ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AdminSeatInfo.js

@@ -9,8 +9,6 @@ var useRBAC = require('../../../../../../../../admin/src/hooks/useRBAC.js');
 var selectors = require('../../../../../../../../admin/src/selectors.js');
 var useLicenseLimits = require('../../../../../hooks/useLicenseLimits.js');
 
-const BILLING_SELF_HOSTED_URL = 'mailto:sales@strapi.io';
-const MANAGE_SUBSCRIPTION_URL = 'https://billing.strapi.io';
 const AdminSeatInfoEE = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const { settings } = reactRedux.useSelector(selectors.selectAdminPermissions);
@@ -26,15 +24,22 @@ const AdminSeatInfoEE = ()=>{
     if (isError || isLoading || !license) {
         return null;
     }
-    const { licenseLimitStatus, enforcementUserCount, permittedSeats, type } = license;
-    if (!permittedSeats) {
+    const { enforcementUserCount, permittedSeats, seats } = license;
+    // `permittedSeats` is the live enforcement limit and is wiped once the licence stops being
+    // usable, so fall back to the retained `seats` to keep showing the count on an expired
+    // licence. Enforcement itself (`licenseLimitStatus`, `shouldStopCreate`) still runs off
+    // `permittedSeats` server-side and is untouched by this.
+    const seatLimit = permittedSeats ?? seats;
+    if (!seatLimit) {
         return null;
     }
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Grid.Item, {
-        col: 6,
-        xs: 12,
+    // The red count and the warning follow the same displayed limit. Server-side
+    // `licenseLimitStatus` tracks only the live limit, so it is empty once the licence expires.
+    const isOverLimit = enforcementUserCount > seatLimit;
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
         direction: "column",
-        alignItems: "stretch",
+        alignItems: "start",
+        gap: 2,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                 variant: "sigma",
@@ -54,17 +59,17 @@ const AdminSeatInfoEE = ()=>{
                                 id: 'Settings.application.ee.admin-seats.count',
                                 defaultMessage: '<text>{enforcementUserCount}</text>/{permittedSeats}'
                             }, {
-                                permittedSeats,
+                                permittedSeats: seatLimit,
                                 enforcementUserCount,
                                 text: (chunks)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                                         fontWeight: "semiBold",
-                                        textColor: enforcementUserCount > permittedSeats ? 'danger500' : undefined,
+                                        textColor: isOverLimit ? 'danger500' : undefined,
                                         children: chunks
                                     })
                             })
                         })
                     }),
-                    licenseLimitStatus === 'OVER_LIMIT' && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                    isOverLimit && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
                         label: formatMessage({
                             id: 'Settings.application.ee.admin-seats.at-limit-tooltip',
                             defaultMessage: 'At limit: add seats to invite more users'
@@ -76,24 +81,6 @@ const AdminSeatInfoEE = ()=>{
                         })
                     })
                 ]
-            }),
-            type === 'gold' ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Link, {
-                href: BILLING_SELF_HOSTED_URL,
-                endIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ExternalLink, {}),
-                target: "_blank",
-                children: formatMessage({
-                    id: 'Settings.application.ee.admin-seats.support',
-                    defaultMessage: 'Contact sales'
-                })
-            }) : /*#__PURE__*/ jsxRuntime.jsx(designSystem.Link, {
-                href: MANAGE_SUBSCRIPTION_URL,
-                isExternal: true,
-                endIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ExternalLink, {}),
-                target: "_blank",
-                children: formatMessage({
-                    id: 'Settings.application.ee.admin-seats.add-seats',
-                    defaultMessage: 'Manage subscription'
-                })
             })
         ]
     });

package/dist/admin/ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AdminSeatInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdminSeatInfo.js","sources":["../../../../../../../../../../ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AdminSeatInfo.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Flex, Tooltip, Typography, Link, Grid } from '@strapi/design-system';\nimport { ExternalLink, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useSelector } from 'react-redux';\n\nimport { useRBAC } from '../../../../../../../../admin/src/hooks/useRBAC';\nimport { selectAdminPermissions } from '../../../../../../../../admin/src/selectors';\nimport { useLicenseLimits } from '../../../../../hooks/useLicenseLimits';\n\nconst BILLING_SELF_HOSTED_URL = 'mailto:sales@strapi.io';\nconst MANAGE_SUBSCRIPTION_URL = 'https://billing.strapi.io';\n\nexport const AdminSeatInfoEE = () => {\n  const { formatMessage } = useIntl();\n  const { settings } = useSelector(selectAdminPermissions);\n  const {\n    isLoading: isRBACLoading,\n    allowedActions: { canRead, canCreate, canUpdate, canDelete },\n  } = useRBAC(settings?.users ?? {});\n  const {\n    license,\n    isError,\n    isLoading: isLicenseLoading,\n  } = useLicenseLimits({\n    // TODO: this creates a waterfall which we should avoid to render earlier, but for that\n    // we will have to move away from data-fetching hooks to query functions.\n    // Short-term we could at least implement a loader, for the user to have visual feedback\n    // in case the requests take a while\n    enabled: !isRBACLoading && canRead && canCreate && canUpdate && canDelete,\n  });\n\n  const isLoading = isRBACLoading || isLicenseLoading;\n\n  if (isError || isLoading || !license) {\n    return null;\n  }\n\n  const { licenseLimitStatus, enforcementUserCount, permittedSeats, type } = license;\n\n  if (!permittedSeats) {\n    return null;\n  }\n\n  return (\n    <Grid.Item col={6} xs={12} direction=\"column\" alignItems=\"stretch\">\n      <Typography variant=\"sigma\" textColor=\"neutral600\">\n        {formatMessage({\n          id: 'Settings.application.admin-seats',\n          defaultMessage: 'Admin seats',\n        })}\n      </Typography>\n      <Flex gap={2}>\n        <Flex>\n          <Typography tag=\"p\">\n            {formatMessage(\n              {\n                id: 'Settings.application.ee.admin-seats.count',\n                defaultMessage: '<text>{enforcementUserCount}</text>/{permittedSeats}',\n              },\n              {\n                permittedSeats,\n                enforcementUserCount,\n                text: (chunks: ReactNode) => (\n                  <Typography\n                    fontWeight=\"semiBold\"\n                    textColor={enforcementUserCount > permittedSeats ? 'danger500' : undefined}\n                  >\n                    {chunks}\n                  </Typography>\n                ),\n              }\n            )}\n          </Typography>\n        </Flex>\n        {licenseLimitStatus === 'OVER_LIMIT' && (\n          <Tooltip\n            label={formatMessage({\n              id: 'Settings.application.ee.admin-seats.at-limit-tooltip',\n              defaultMessage: 'At limit: add seats to invite more users',\n            })}\n          >\n            <WarningCircle width=\"1.4rem\" height=\"1.4rem\" fill=\"danger500\" />\n          </Tooltip>\n        )}\n      </Flex>\n      {type === 'gold' ? (\n        <Link href={BILLING_SELF_HOSTED_URL} endIcon={<ExternalLink />} target=\"_blank\">\n          {formatMessage({\n            id: 'Settings.application.ee.admin-seats.support',\n            defaultMessage: 'Contact sales',\n          })}\n        </Link>\n      ) : (\n        <Link href={MANAGE_SUBSCRIPTION_URL} isExternal endIcon={<ExternalLink />} target=\"_blank\">\n          {formatMessage({\n            id: 'Settings.application.ee.admin-seats.add-seats',\n            defaultMessage: 'Manage subscription',\n          })}\n        </Link>\n      )}\n    </Grid.Item>\n  );\n};\n"],"names":["BILLING_SELF_HOSTED_URL","MANAGE_SUBSCRIPTION_URL","AdminSeatInfoEE","formatMessage","useIntl","settings","useSelector","selectAdminPermissions","isLoading","isRBACLoading","allowedActions","canRead","canCreate","canUpdate","canDelete","useRBAC","users","license","isError","isLicenseLoading","useLicenseLimits","enabled","licenseLimitStatus","enforcementUserCount","permittedSeats","type","_jsxs","Grid","Item","col","xs","direction","alignItems","_jsx","Typography","variant","textColor","id","defaultMessage","Flex","gap","tag","text","chunks","fontWeight","undefined","Tooltip","label","WarningCircle","width","height","fill","Link","href","endIcon","ExternalLink","target","isExternal"],"mappings":"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"}
+{"version":3,"file":"AdminSeatInfo.js","sources":["../../../../../../../../../../ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AdminSeatInfo.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Flex, Tooltip, Typography } from '@strapi/design-system';\nimport { WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useSelector } from 'react-redux';\n\nimport { useRBAC } from '../../../../../../../../admin/src/hooks/useRBAC';\nimport { selectAdminPermissions } from '../../../../../../../../admin/src/selectors';\nimport { useLicenseLimits } from '../../../../../hooks/useLicenseLimits';\n\nexport const AdminSeatInfoEE = () => {\n  const { formatMessage } = useIntl();\n  const { settings } = useSelector(selectAdminPermissions);\n  const {\n    isLoading: isRBACLoading,\n    allowedActions: { canRead, canCreate, canUpdate, canDelete },\n  } = useRBAC(settings?.users ?? {});\n  const {\n    license,\n    isError,\n    isLoading: isLicenseLoading,\n  } = useLicenseLimits({\n    // TODO: this creates a waterfall which we should avoid to render earlier, but for that\n    // we will have to move away from data-fetching hooks to query functions.\n    // Short-term we could at least implement a loader, for the user to have visual feedback\n    // in case the requests take a while\n    enabled: !isRBACLoading && canRead && canCreate && canUpdate && canDelete,\n  });\n\n  const isLoading = isRBACLoading || isLicenseLoading;\n\n  if (isError || isLoading || !license) {\n    return null;\n  }\n\n  const { enforcementUserCount, permittedSeats, seats } = license;\n\n  // `permittedSeats` is the live enforcement limit and is wiped once the licence stops being\n  // usable, so fall back to the retained `seats` to keep showing the count on an expired\n  // licence. Enforcement itself (`licenseLimitStatus`, `shouldStopCreate`) still runs off\n  // `permittedSeats` server-side and is untouched by this.\n  const seatLimit = permittedSeats ?? seats;\n\n  if (!seatLimit) {\n    return null;\n  }\n\n  // The red count and the warning follow the same displayed limit. Server-side\n  // `licenseLimitStatus` tracks only the live limit, so it is empty once the licence expires.\n  const isOverLimit = enforcementUserCount > seatLimit;\n\n  return (\n    <Flex direction=\"column\" alignItems=\"start\" gap={2}>\n      <Typography variant=\"sigma\" textColor=\"neutral600\">\n        {formatMessage({\n          id: 'Settings.application.admin-seats',\n          defaultMessage: 'Admin seats',\n        })}\n      </Typography>\n      <Flex gap={2}>\n        <Flex>\n          <Typography tag=\"p\">\n            {formatMessage(\n              {\n                id: 'Settings.application.ee.admin-seats.count',\n                defaultMessage: '<text>{enforcementUserCount}</text>/{permittedSeats}',\n              },\n              {\n                permittedSeats: seatLimit,\n                enforcementUserCount,\n                text: (chunks: ReactNode) => (\n                  <Typography\n                    fontWeight=\"semiBold\"\n                    textColor={isOverLimit ? 'danger500' : undefined}\n                  >\n                    {chunks}\n                  </Typography>\n                ),\n              }\n            )}\n          </Typography>\n        </Flex>\n        {isOverLimit && (\n          <Tooltip\n            label={formatMessage({\n              id: 'Settings.application.ee.admin-seats.at-limit-tooltip',\n              defaultMessage: 'At limit: add seats to invite more users',\n            })}\n          >\n            <WarningCircle width=\"1.4rem\" height=\"1.4rem\" fill=\"danger500\" />\n          </Tooltip>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n"],"names":["AdminSeatInfoEE","formatMessage","useIntl","settings","useSelector","selectAdminPermissions","isLoading","isRBACLoading","allowedActions","canRead","canCreate","canUpdate","canDelete","useRBAC","users","license","isError","isLicenseLoading","useLicenseLimits","enabled","enforcementUserCount","permittedSeats","seats","seatLimit","isOverLimit","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","textColor","id","defaultMessage","tag","text","chunks","fontWeight","undefined","Tooltip","label","WarningCircle","width","height","fill"],"mappings":";;;;;;;;;;;MAWaA,eAAAA,GAAkB,IAAA;IAC7B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,sBAAAA,CAAYC,gCAAAA,CAAAA;AACjC,IAAA,MAAM,EACJC,SAAAA,EAAWC,aAAa,EACxBC,cAAAA,EAAgB,EAAEC,OAAO,EAAEC,SAAS,EAAEC,SAAS,EAAEC,SAAS,EAAE,EAC7D,GAAGC,eAAAA,CAAQV,QAAAA,EAAUW,SAAS,EAAC,CAAA;IAChC,MAAM,EACJC,OAAO,EACPC,OAAO,EACPV,SAAAA,EAAWW,gBAAgB,EAC5B,GAAGC,iCAAAA,CAAiB;;;;;AAKnBC,QAAAA,OAAAA,EAAS,CAACZ,aAAAA,IAAiBE,OAAAA,IAAWC,SAAAA,IAAaC,SAAAA,IAAaC;AAClE,KAAA,CAAA;AAEA,IAAA,MAAMN,YAAYC,aAAAA,IAAiBU,gBAAAA;IAEnC,IAAID,OAAAA,IAAWV,SAAAA,IAAa,CAACS,OAAAA,EAAS;QACpC,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,MAAM,EAAEK,oBAAoB,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGP,OAAAA;;;;;AAMxD,IAAA,MAAMQ,YAAYF,cAAAA,IAAkBC,KAAAA;AAEpC,IAAA,IAAI,CAACC,SAAAA,EAAW;QACd,OAAO,IAAA;AACT,IAAA;;;AAIA,IAAA,MAAMC,cAAcJ,oBAAAA,GAAuBG,SAAAA;AAE3C,IAAA,qBACEE,eAAA,CAACC,iBAAAA,EAAAA;QAAKC,SAAAA,EAAU,QAAA;QAASC,UAAAA,EAAW,OAAA;QAAQC,GAAAA,EAAK,CAAA;;0BAC/CC,cAAA,CAACC,uBAAAA,EAAAA;gBAAWC,OAAAA,EAAQ,OAAA;gBAAQC,SAAAA,EAAU,YAAA;0BACnChC,aAAAA,CAAc;oBACbiC,EAAAA,EAAI,kCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA;;0BAEFV,eAAA,CAACC,iBAAAA,EAAAA;gBAAKG,GAAAA,EAAK,CAAA;;kCACTC,cAAA,CAACJ,iBAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAI,cAAA,CAACC,uBAAAA,EAAAA;4BAAWK,GAAAA,EAAI,GAAA;sCACbnC,aAAAA,CACC;gCACEiC,EAAAA,EAAI,2CAAA;gCACJC,cAAAA,EAAgB;6BAClB,EACA;gCACEd,cAAAA,EAAgBE,SAAAA;AAChBH,gCAAAA,oBAAAA;gCACAiB,IAAAA,EAAM,CAACC,uBACLR,cAAA,CAACC,uBAAAA,EAAAA;wCACCQ,UAAAA,EAAW,UAAA;AACXN,wCAAAA,SAAAA,EAAWT,cAAc,WAAA,GAAcgB,SAAAA;AAEtCF,wCAAAA,QAAAA,EAAAA;;AAGP,6BAAA;;;AAILd,oBAAAA,WAAAA,kBACCM,cAAA,CAACW,oBAAAA,EAAAA;AACCC,wBAAAA,KAAAA,EAAOzC,aAAAA,CAAc;4BACnBiC,EAAAA,EAAI,sDAAA;4BACJC,cAAAA,EAAgB;AAClB,yBAAA,CAAA;AAEA,wBAAA,QAAA,gBAAAL,cAAA,CAACa,mBAAAA,EAAAA;4BAAcC,KAAAA,EAAM,QAAA;4BAASC,MAAAA,EAAO,QAAA;4BAASC,IAAAA,EAAK;;;;;;;AAM/D;;;;"}

package/dist/admin/ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AdminSeatInfo.mjs

@@ -1,14 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Grid, Typography, Flex, Tooltip, Link } from '@strapi/design-system';
-import { WarningCircle, ExternalLink } from '@strapi/icons';
+import { Flex, Typography, Tooltip } from '@strapi/design-system';
+import { WarningCircle } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { useRBAC } from '../../../../../../../../admin/src/hooks/useRBAC.mjs';
 import { selectAdminPermissions } from '../../../../../../../../admin/src/selectors.mjs';
 import { useLicenseLimits } from '../../../../../hooks/useLicenseLimits.mjs';
 
-const BILLING_SELF_HOSTED_URL = 'mailto:sales@strapi.io';
-const MANAGE_SUBSCRIPTION_URL = 'https://billing.strapi.io';
 const AdminSeatInfoEE = ()=>{
     const { formatMessage } = useIntl();
     const { settings } = useSelector(selectAdminPermissions);
@@ -24,15 +22,22 @@ const AdminSeatInfoEE = ()=>{
     if (isError || isLoading || !license) {
         return null;
     }
-    const { licenseLimitStatus, enforcementUserCount, permittedSeats, type } = license;
-    if (!permittedSeats) {
+    const { enforcementUserCount, permittedSeats, seats } = license;
+    // `permittedSeats` is the live enforcement limit and is wiped once the licence stops being
+    // usable, so fall back to the retained `seats` to keep showing the count on an expired
+    // licence. Enforcement itself (`licenseLimitStatus`, `shouldStopCreate`) still runs off
+    // `permittedSeats` server-side and is untouched by this.
+    const seatLimit = permittedSeats ?? seats;
+    if (!seatLimit) {
         return null;
     }
-    return /*#__PURE__*/ jsxs(Grid.Item, {
-        col: 6,
-        xs: 12,
+    // The red count and the warning follow the same displayed limit. Server-side
+    // `licenseLimitStatus` tracks only the live limit, so it is empty once the licence expires.
+    const isOverLimit = enforcementUserCount > seatLimit;
+    return /*#__PURE__*/ jsxs(Flex, {
         direction: "column",
-        alignItems: "stretch",
+        alignItems: "start",
+        gap: 2,
         children: [
             /*#__PURE__*/ jsx(Typography, {
                 variant: "sigma",
@@ -52,17 +57,17 @@ const AdminSeatInfoEE = ()=>{
                                 id: 'Settings.application.ee.admin-seats.count',
                                 defaultMessage: '<text>{enforcementUserCount}</text>/{permittedSeats}'
                             }, {
-                                permittedSeats,
+                                permittedSeats: seatLimit,
                                 enforcementUserCount,
                                 text: (chunks)=>/*#__PURE__*/ jsx(Typography, {
                                         fontWeight: "semiBold",
-                                        textColor: enforcementUserCount > permittedSeats ? 'danger500' : undefined,
+                                        textColor: isOverLimit ? 'danger500' : undefined,
                                         children: chunks
                                     })
                             })
                         })
                     }),
-                    licenseLimitStatus === 'OVER_LIMIT' && /*#__PURE__*/ jsx(Tooltip, {
+                    isOverLimit && /*#__PURE__*/ jsx(Tooltip, {
                         label: formatMessage({
                             id: 'Settings.application.ee.admin-seats.at-limit-tooltip',
                             defaultMessage: 'At limit: add seats to invite more users'
@@ -74,24 +79,6 @@ const AdminSeatInfoEE = ()=>{
                         })
                     })
                 ]
-            }),
-            type === 'gold' ? /*#__PURE__*/ jsx(Link, {
-                href: BILLING_SELF_HOSTED_URL,
-                endIcon: /*#__PURE__*/ jsx(ExternalLink, {}),
-                target: "_blank",
-                children: formatMessage({
-                    id: 'Settings.application.ee.admin-seats.support',
-                    defaultMessage: 'Contact sales'
-                })
-            }) : /*#__PURE__*/ jsx(Link, {
-                href: MANAGE_SUBSCRIPTION_URL,
-                isExternal: true,
-                endIcon: /*#__PURE__*/ jsx(ExternalLink, {}),
-                target: "_blank",
-                children: formatMessage({
-                    id: 'Settings.application.ee.admin-seats.add-seats',
-                    defaultMessage: 'Manage subscription'
-                })
             })
         ]
     });

package/dist/admin/ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AdminSeatInfo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AdminSeatInfo.mjs","sources":["../../../../../../../../../../ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AdminSeatInfo.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Flex, Tooltip, Typography, Link, Grid } from '@strapi/design-system';\nimport { ExternalLink, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useSelector } from 'react-redux';\n\nimport { useRBAC } from '../../../../../../../../admin/src/hooks/useRBAC';\nimport { selectAdminPermissions } from '../../../../../../../../admin/src/selectors';\nimport { useLicenseLimits } from '../../../../../hooks/useLicenseLimits';\n\nconst BILLING_SELF_HOSTED_URL = 'mailto:sales@strapi.io';\nconst MANAGE_SUBSCRIPTION_URL = 'https://billing.strapi.io';\n\nexport const AdminSeatInfoEE = () => {\n  const { formatMessage } = useIntl();\n  const { settings } = useSelector(selectAdminPermissions);\n  const {\n    isLoading: isRBACLoading,\n    allowedActions: { canRead, canCreate, canUpdate, canDelete },\n  } = useRBAC(settings?.users ?? {});\n  const {\n    license,\n    isError,\n    isLoading: isLicenseLoading,\n  } = useLicenseLimits({\n    // TODO: this creates a waterfall which we should avoid to render earlier, but for that\n    // we will have to move away from data-fetching hooks to query functions.\n    // Short-term we could at least implement a loader, for the user to have visual feedback\n    // in case the requests take a while\n    enabled: !isRBACLoading && canRead && canCreate && canUpdate && canDelete,\n  });\n\n  const isLoading = isRBACLoading || isLicenseLoading;\n\n  if (isError || isLoading || !license) {\n    return null;\n  }\n\n  const { licenseLimitStatus, enforcementUserCount, permittedSeats, type } = license;\n\n  if (!permittedSeats) {\n    return null;\n  }\n\n  return (\n    <Grid.Item col={6} xs={12} direction=\"column\" alignItems=\"stretch\">\n      <Typography variant=\"sigma\" textColor=\"neutral600\">\n        {formatMessage({\n          id: 'Settings.application.admin-seats',\n          defaultMessage: 'Admin seats',\n        })}\n      </Typography>\n      <Flex gap={2}>\n        <Flex>\n          <Typography tag=\"p\">\n            {formatMessage(\n              {\n                id: 'Settings.application.ee.admin-seats.count',\n                defaultMessage: '<text>{enforcementUserCount}</text>/{permittedSeats}',\n              },\n              {\n                permittedSeats,\n                enforcementUserCount,\n                text: (chunks: ReactNode) => (\n                  <Typography\n                    fontWeight=\"semiBold\"\n                    textColor={enforcementUserCount > permittedSeats ? 'danger500' : undefined}\n                  >\n                    {chunks}\n                  </Typography>\n                ),\n              }\n            )}\n          </Typography>\n        </Flex>\n        {licenseLimitStatus === 'OVER_LIMIT' && (\n          <Tooltip\n            label={formatMessage({\n              id: 'Settings.application.ee.admin-seats.at-limit-tooltip',\n              defaultMessage: 'At limit: add seats to invite more users',\n            })}\n          >\n            <WarningCircle width=\"1.4rem\" height=\"1.4rem\" fill=\"danger500\" />\n          </Tooltip>\n        )}\n      </Flex>\n      {type === 'gold' ? (\n        <Link href={BILLING_SELF_HOSTED_URL} endIcon={<ExternalLink />} target=\"_blank\">\n          {formatMessage({\n            id: 'Settings.application.ee.admin-seats.support',\n            defaultMessage: 'Contact sales',\n          })}\n        </Link>\n      ) : (\n        <Link href={MANAGE_SUBSCRIPTION_URL} isExternal endIcon={<ExternalLink />} target=\"_blank\">\n          {formatMessage({\n            id: 'Settings.application.ee.admin-seats.add-seats',\n            defaultMessage: 'Manage subscription',\n          })}\n        </Link>\n      )}\n    </Grid.Item>\n  );\n};\n"],"names":["BILLING_SELF_HOSTED_URL","MANAGE_SUBSCRIPTION_URL","AdminSeatInfoEE","formatMessage","useIntl","settings","useSelector","selectAdminPermissions","isLoading","isRBACLoading","allowedActions","canRead","canCreate","canUpdate","canDelete","useRBAC","users","license","isError","isLicenseLoading","useLicenseLimits","enabled","licenseLimitStatus","enforcementUserCount","permittedSeats","type","_jsxs","Grid","Item","col","xs","direction","alignItems","_jsx","Typography","variant","textColor","id","defaultMessage","Flex","gap","tag","text","chunks","fontWeight","undefined","Tooltip","label","WarningCircle","width","height","fill","Link","href","endIcon","ExternalLink","target","isExternal"],"mappings":"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"}
+{"version":3,"file":"AdminSeatInfo.mjs","sources":["../../../../../../../../../../ee/admin/src/pages/SettingsPage/pages/ApplicationInfoPage/components/AdminSeatInfo.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Flex, Tooltip, Typography } from '@strapi/design-system';\nimport { WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useSelector } from 'react-redux';\n\nimport { useRBAC } from '../../../../../../../../admin/src/hooks/useRBAC';\nimport { selectAdminPermissions } from '../../../../../../../../admin/src/selectors';\nimport { useLicenseLimits } from '../../../../../hooks/useLicenseLimits';\n\nexport const AdminSeatInfoEE = () => {\n  const { formatMessage } = useIntl();\n  const { settings } = useSelector(selectAdminPermissions);\n  const {\n    isLoading: isRBACLoading,\n    allowedActions: { canRead, canCreate, canUpdate, canDelete },\n  } = useRBAC(settings?.users ?? {});\n  const {\n    license,\n    isError,\n    isLoading: isLicenseLoading,\n  } = useLicenseLimits({\n    // TODO: this creates a waterfall which we should avoid to render earlier, but for that\n    // we will have to move away from data-fetching hooks to query functions.\n    // Short-term we could at least implement a loader, for the user to have visual feedback\n    // in case the requests take a while\n    enabled: !isRBACLoading && canRead && canCreate && canUpdate && canDelete,\n  });\n\n  const isLoading = isRBACLoading || isLicenseLoading;\n\n  if (isError || isLoading || !license) {\n    return null;\n  }\n\n  const { enforcementUserCount, permittedSeats, seats } = license;\n\n  // `permittedSeats` is the live enforcement limit and is wiped once the licence stops being\n  // usable, so fall back to the retained `seats` to keep showing the count on an expired\n  // licence. Enforcement itself (`licenseLimitStatus`, `shouldStopCreate`) still runs off\n  // `permittedSeats` server-side and is untouched by this.\n  const seatLimit = permittedSeats ?? seats;\n\n  if (!seatLimit) {\n    return null;\n  }\n\n  // The red count and the warning follow the same displayed limit. Server-side\n  // `licenseLimitStatus` tracks only the live limit, so it is empty once the licence expires.\n  const isOverLimit = enforcementUserCount > seatLimit;\n\n  return (\n    <Flex direction=\"column\" alignItems=\"start\" gap={2}>\n      <Typography variant=\"sigma\" textColor=\"neutral600\">\n        {formatMessage({\n          id: 'Settings.application.admin-seats',\n          defaultMessage: 'Admin seats',\n        })}\n      </Typography>\n      <Flex gap={2}>\n        <Flex>\n          <Typography tag=\"p\">\n            {formatMessage(\n              {\n                id: 'Settings.application.ee.admin-seats.count',\n                defaultMessage: '<text>{enforcementUserCount}</text>/{permittedSeats}',\n              },\n              {\n                permittedSeats: seatLimit,\n                enforcementUserCount,\n                text: (chunks: ReactNode) => (\n                  <Typography\n                    fontWeight=\"semiBold\"\n                    textColor={isOverLimit ? 'danger500' : undefined}\n                  >\n                    {chunks}\n                  </Typography>\n                ),\n              }\n            )}\n          </Typography>\n        </Flex>\n        {isOverLimit && (\n          <Tooltip\n            label={formatMessage({\n              id: 'Settings.application.ee.admin-seats.at-limit-tooltip',\n              defaultMessage: 'At limit: add seats to invite more users',\n            })}\n          >\n            <WarningCircle width=\"1.4rem\" height=\"1.4rem\" fill=\"danger500\" />\n          </Tooltip>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n"],"names":["AdminSeatInfoEE","formatMessage","useIntl","settings","useSelector","selectAdminPermissions","isLoading","isRBACLoading","allowedActions","canRead","canCreate","canUpdate","canDelete","useRBAC","users","license","isError","isLicenseLoading","useLicenseLimits","enabled","enforcementUserCount","permittedSeats","seats","seatLimit","isOverLimit","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","textColor","id","defaultMessage","tag","text","chunks","fontWeight","undefined","Tooltip","label","WarningCircle","width","height","fill"],"mappings":";;;;;;;;;MAWaA,eAAAA,GAAkB,IAAA;IAC7B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,WAAAA,CAAYC,sBAAAA,CAAAA;AACjC,IAAA,MAAM,EACJC,SAAAA,EAAWC,aAAa,EACxBC,cAAAA,EAAgB,EAAEC,OAAO,EAAEC,SAAS,EAAEC,SAAS,EAAEC,SAAS,EAAE,EAC7D,GAAGC,OAAAA,CAAQV,QAAAA,EAAUW,SAAS,EAAC,CAAA;IAChC,MAAM,EACJC,OAAO,EACPC,OAAO,EACPV,SAAAA,EAAWW,gBAAgB,EAC5B,GAAGC,gBAAAA,CAAiB;;;;;AAKnBC,QAAAA,OAAAA,EAAS,CAACZ,aAAAA,IAAiBE,OAAAA,IAAWC,SAAAA,IAAaC,SAAAA,IAAaC;AAClE,KAAA,CAAA;AAEA,IAAA,MAAMN,YAAYC,aAAAA,IAAiBU,gBAAAA;IAEnC,IAAID,OAAAA,IAAWV,SAAAA,IAAa,CAACS,OAAAA,EAAS;QACpC,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,MAAM,EAAEK,oBAAoB,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGP,OAAAA;;;;;AAMxD,IAAA,MAAMQ,YAAYF,cAAAA,IAAkBC,KAAAA;AAEpC,IAAA,IAAI,CAACC,SAAAA,EAAW;QACd,OAAO,IAAA;AACT,IAAA;;;AAIA,IAAA,MAAMC,cAAcJ,oBAAAA,GAAuBG,SAAAA;AAE3C,IAAA,qBACEE,IAAA,CAACC,IAAAA,EAAAA;QAAKC,SAAAA,EAAU,QAAA;QAASC,UAAAA,EAAW,OAAA;QAAQC,GAAAA,EAAK,CAAA;;0BAC/CC,GAAA,CAACC,UAAAA,EAAAA;gBAAWC,OAAAA,EAAQ,OAAA;gBAAQC,SAAAA,EAAU,YAAA;0BACnChC,aAAAA,CAAc;oBACbiC,EAAAA,EAAI,kCAAA;oBACJC,cAAAA,EAAgB;AAClB,iBAAA;;0BAEFV,IAAA,CAACC,IAAAA,EAAAA;gBAAKG,GAAAA,EAAK,CAAA;;kCACTC,GAAA,CAACJ,IAAAA,EAAAA;AACC,wBAAA,QAAA,gBAAAI,GAAA,CAACC,UAAAA,EAAAA;4BAAWK,GAAAA,EAAI,GAAA;sCACbnC,aAAAA,CACC;gCACEiC,EAAAA,EAAI,2CAAA;gCACJC,cAAAA,EAAgB;6BAClB,EACA;gCACEd,cAAAA,EAAgBE,SAAAA;AAChBH,gCAAAA,oBAAAA;gCACAiB,IAAAA,EAAM,CAACC,uBACLR,GAAA,CAACC,UAAAA,EAAAA;wCACCQ,UAAAA,EAAW,UAAA;AACXN,wCAAAA,SAAAA,EAAWT,cAAc,WAAA,GAAcgB,SAAAA;AAEtCF,wCAAAA,QAAAA,EAAAA;;AAGP,6BAAA;;;AAILd,oBAAAA,WAAAA,kBACCM,GAAA,CAACW,OAAAA,EAAAA;AACCC,wBAAAA,KAAAA,EAAOzC,aAAAA,CAAc;4BACnBiC,EAAAA,EAAI,sDAAA;4BACJC,cAAAA,EAAgB;AAClB,yBAAA,CAAA;AAEA,wBAAA,QAAA,gBAAAL,GAAA,CAACa,aAAAA,EAAAA;4BAAcC,KAAAA,EAAM,QAAA;4BAASC,MAAAA,EAAO,QAAA;4BAASC,IAAAA,EAAK;;;;;;;AAM/D;;;;"}