strapi-plugin-payone-provider 5.7.26 → 5.8.26

package/admin/src/pages/App/components/DocsPanel.jsx

@@ -1,53 +1,53 @@
-import * as React from "react";
-import { Box, Flex, Typography, Accordion } from "@strapi/design-system";
-import TableOfContents from "./docs/TableOfContents";
-import BaseUrlSection from "./docs/BaseUrlSection";
-import PaymentMethodsSection from "./docs/PaymentMethodsSection";
-import CreditCardSection from "./docs/CreditCardSection";
-import PayPalSection from "./docs/PayPalSection";
-import GooglePaySection from "./docs/GooglePaySection";
-import ApplePaySection from "./docs/ApplePaySection";
-import ThreeDSecureSection from "./docs/ThreeDSecureSection";
-import CaptureRefundSection from "./docs/CaptureRefundSection";
-import TestCredentialsSection from "./docs/TestCredentialsSection";
-import { usePluginTranslations } from "../../hooks/usePluginTranslations";
-
-const DocsPanel = ({ settings, paymentActions }) => {
-  const { t } = usePluginTranslations();
-  return (
-    <Flex direction="column" alignItems="stretch" gap={6} padding={8}>
-        <Box>
-          <Typography variant="beta" as="h2" fontWeight="bold" className="payment-title" style={{ fontSize: "20px", marginBottom: "4px" }}>
-            {t("docs.title", "Payone Provider Plugin - Frontend Integration Guide")}
-          </Typography>
-          <Typography variant="pi" textColor="neutral600" marginTop={2} className="payment-subtitle" style={{ fontSize: "14px" }}>
-            {t("docs.subtitle", "Complete documentation for integrating Payone payment methods in your frontend application")}
-          </Typography>
-        </Box>
-
-      <TableOfContents />
-
-      <BaseUrlSection />
-
-      <PaymentMethodsSection />
-
-        <Accordion.Root>
-        <CreditCardSection />
-        <PayPalSection />
-        <GooglePaySection />
-        <ApplePaySection />
-        <ThreeDSecureSection />
-        <CaptureRefundSection />
-        <TestCredentialsSection />
-        </Accordion.Root>
-
-        <Box paddingTop={4}>
-          <Typography variant="sigma" textColor="neutral600">
-            {t("docs.moreInfo", "For more information, visit the Payone documentation or contact your Payone account manager.")}
-          </Typography>
-        </Box>
-      </Flex>
-  );
-};
-
-export default DocsPanel;
+import * as React from "react";
+import { Box, Flex, Typography, Accordion } from "@strapi/design-system";
+import TableOfContents from "./docs/TableOfContents";
+import BaseUrlSection from "./docs/BaseUrlSection";
+import PaymentMethodsSection from "./docs/PaymentMethodsSection";
+import CreditCardSection from "./docs/CreditCardSection";
+import PayPalSection from "./docs/PayPalSection";
+import GooglePaySection from "./docs/GooglePaySection";
+import ApplePaySection from "./docs/ApplePaySection";
+import ThreeDSecureSection from "./docs/ThreeDSecureSection";
+import CaptureRefundSection from "./docs/CaptureRefundSection";
+import TestCredentialsSection from "./docs/TestCredentialsSection";
+import { usePluginTranslations } from "../../hooks/usePluginTranslations";
+
+const DocsPanel = ({ settings, paymentActions }) => {
+  const { t } = usePluginTranslations();
+  return (
+    <Flex direction="column" alignItems="stretch" gap={6} padding={8}>
+        <Box>
+          <Typography variant="beta" as="h2" fontWeight="bold" className="payment-title" style={{ fontSize: "20px", marginBottom: "4px" }}>
+            {t("docs.title", "Payone Provider Plugin - Frontend Integration Guide")}
+          </Typography>
+          <Typography variant="pi" textColor="neutral600" marginTop={2} className="payment-subtitle" style={{ fontSize: "14px" }}>
+            {t("docs.subtitle", "Complete documentation for integrating Payone payment methods in your frontend application")}
+          </Typography>
+        </Box>
+
+      <TableOfContents />
+
+      <BaseUrlSection />
+
+      <PaymentMethodsSection />
+
+        <Accordion.Root>
+        <CreditCardSection />
+        <PayPalSection />
+        <GooglePaySection />
+        <ApplePaySection />
+        <ThreeDSecureSection />
+        <CaptureRefundSection />
+        <TestCredentialsSection />
+        </Accordion.Root>
+
+        <Box paddingTop={4}>
+          <Typography variant="sigma" textColor="neutral600">
+            {t("docs.moreInfo", "For more information, visit the Payone documentation or contact your Payone account manager.")}
+          </Typography>
+        </Box>
+      </Flex>
+  );
+};
+
+export default DocsPanel;

package/admin/src/pages/App/components/RenderInput.jsx

@@ -1,78 +1,78 @@
-import { Field, Flex, Tooltip, Typography } from "@strapi/design-system";
-import { Information } from "@strapi/icons";
-import { InputComponent } from "../../utils/getInputComponent";
-import { shouldShowTooltip } from "../../utils/tooltipHelpers";
-
-const RenderInput = ({
-  hint,
-  label,
-  name,
-  value,
-  onChange,
-  inputType = "textInput",
-  options = [],
-  tooltipContent = "",
-  additionalMessage = "",
-  required = false,
-  placeholder,
-  onLabel,
-  offLabel,
-  type = "text",
-  className = "payment-input",
-  labelStyle = {},
-  labelDirection = "column",
-  ...props
-}) => {
-  const getLabelStyle = () => {
-    if (labelDirection === "row") {
-      return {
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between"
-      };
-    }
-    return { display: "flex", flexDirection: "column" };
-  };
-
-  return (
-    <Flex direction="column" gap={2} alignItems={"stretch"} width={"100%"}>
-      <Field.Root hint={hint} width={"100%"} style={getLabelStyle()}>
-        <Flex alignItems="center" gap={1} style={{ marginBottom: "5px" }}>
-          <Field.Label style={labelStyle}>{label}</Field.Label>
-          {shouldShowTooltip(inputType, tooltipContent) && (
-            <Tooltip label={tooltipContent}>
-              <Information
-                style={{
-                  cursor: "pointer"
-                }}
-              />
-            </Tooltip>
-          )}
-        </Flex>
-        <InputComponent
-          inputType={inputType}
-          name={name}
-          value={value}
-          onChange={onChange}
-          tooltipContent={tooltipContent}
-          options={options}
-          required={required}
-          className={className}
-          placeholder={placeholder}
-          onLabel={onLabel}
-          offLabel={offLabel}
-          type={type}
-          {...props}
-        />
-        <Field.Hint />
-      </Field.Root>
-      {additionalMessage && (
-        <Typography variant="pi" textColor={"ActiveText"}>
-          {additionalMessage}
-        </Typography>
-      )}
-    </Flex>
-  );
-};
-
-export default RenderInput;
+import { Field, Flex, Tooltip, Typography } from "@strapi/design-system";
+import { Information } from "@strapi/icons";
+import { InputComponent } from "../../utils/getInputComponent";
+import { shouldShowTooltip } from "../../utils/tooltipHelpers";
+
+const RenderInput = ({
+  hint,
+  label,
+  name,
+  value,
+  onChange,
+  inputType = "textInput",
+  options = [],
+  tooltipContent = "",
+  additionalMessage = "",
+  required = false,
+  placeholder,
+  onLabel,
+  offLabel,
+  type = "text",
+  className = "payment-input",
+  labelStyle = {},
+  labelDirection = "column",
+  ...props
+}) => {
+  const getLabelStyle = () => {
+    if (labelDirection === "row") {
+      return {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between"
+      };
+    }
+    return { display: "flex", flexDirection: "column" };
+  };
+
+  return (
+    <Flex direction="column" gap={2} alignItems={"stretch"} width={"100%"}>
+      <Field.Root hint={hint} width={"100%"} style={getLabelStyle()}>
+        <Flex alignItems="center" gap={1} style={{ marginBottom: "5px" }}>
+          <Field.Label style={labelStyle}>{label}</Field.Label>
+          {shouldShowTooltip(inputType, tooltipContent) && (
+            <Tooltip label={tooltipContent}>
+              <Information
+                style={{
+                  cursor: "pointer"
+                }}
+              />
+            </Tooltip>
+          )}
+        </Flex>
+        <InputComponent
+          inputType={inputType}
+          name={name}
+          value={value}
+          onChange={onChange}
+          tooltipContent={tooltipContent}
+          options={options}
+          required={required}
+          className={className}
+          placeholder={placeholder}
+          onLabel={onLabel}
+          offLabel={offLabel}
+          type={type}
+          {...props}
+        />
+        <Field.Hint />
+      </Field.Root>
+      {additionalMessage && (
+        <Typography variant="pi" textColor={"ActiveText"}>
+          {additionalMessage}
+        </Typography>
+      )}
+    </Flex>
+  );
+};
+
+export default RenderInput;

package/admin/src/pages/App/components/StatusBadge.jsx

@@ -1,87 +1,87 @@
-import * as React from "react";
-import {
-  Badge,
-  Box,
-  Flex,
-  Typography,
-} from "@strapi/design-system";
-import { MarkCircle } from "./icons";
-
-const StatusBadge = ({ status, transaction }) => {
-  const [isHovered, setIsHovered] = React.useState(false);
-
-  const statusColors = {
-    APPROVED: "success200",
-    PENDING: "warning200",
-    ERROR: "danger200",
-    FAILED: "danger200",
-    INVALID: "danger200",
-    REDIRECT: "success100",
-  };
-
-  const getDisplayText = () => {
-    if (status === "ERROR" && transaction?.raw_response?.Error?.ErrorCode) {
-      return `${status} - ${transaction.raw_response.Error.ErrorCode}`;
-    }
-    return status;
-  };
-
-  const displayText = getDisplayText();
-  const errorMessage = status === "ERROR" && transaction?.raw_response?.Error?.ErrorMessage 
-    ? transaction.raw_response.Error.ErrorMessage 
-    : null;
-  
-  const errorCode = status === "ERROR" && transaction?.raw_response?.Error?.ErrorCode
-    ? transaction.raw_response.Error.ErrorCode
-    : null;
-  
-  const showExclamationIcon = status === "ERROR" && !errorCode && !errorMessage;
-
-  return (
-    <Box
-    position="relative"
-    onMouseEnter={() => setIsHovered(true)}
-    onMouseLeave={() => setIsHovered(false)}
-    style={{ display: "inline-block", cursor: status === "ERROR" ? "pointer" : "default" }}
-  >
-    <Flex gap={2} alignItems="center">
-      <Badge backgroundColor={statusColors[status] || "warning100"}>
-        {displayText}
-      </Badge>
-      {showExclamationIcon && (
-        <MarkCircle color="danger500"
-          style={{
-            width: "16px",
-            height: "16px"
-          }} 
-        />
-      )}
-    </Flex>
-    {isHovered && errorMessage && (
-      <Box
-        position="absolute"
-        zIndex={1000}
-        bottom="100%"
-        left="50%"
-        transform="translateX(-50%)"
-        marginBottom={2}
-        padding={3}
-        background="neutral900"
-        hasRadius
-        style={{
-          whiteSpace: "pre-line",
-          minWidth: "200px",
-          maxWidth: "300px",
-          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-        }}
-      >
-        <Typography variant="pi" textColor="neutral0" style={{ fontSize: "12px" }}>
-          Error: {errorMessage}
-        </Typography>
-      </Box>
-    )}
-  </Box>
-  );
-};
-
-export default StatusBadge;
+import * as React from "react";
+import {
+  Badge,
+  Box,
+  Flex,
+  Typography,
+} from "@strapi/design-system";
+import { MarkCircle } from "./icons";
+
+const StatusBadge = ({ status, transaction }) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  const statusColors = {
+    APPROVED: "success200",
+    PENDING: "warning200",
+    ERROR: "danger200",
+    FAILED: "danger200",
+    INVALID: "danger200",
+    REDIRECT: "success100",
+  };
+
+  const getDisplayText = () => {
+    if (status === "ERROR" && transaction?.raw_response?.Error?.ErrorCode) {
+      return `${status} - ${transaction.raw_response.Error.ErrorCode}`;
+    }
+    return status;
+  };
+
+  const displayText = getDisplayText();
+  const errorMessage = status === "ERROR" && transaction?.raw_response?.Error?.ErrorMessage 
+    ? transaction.raw_response.Error.ErrorMessage 
+    : null;
+  
+  const errorCode = status === "ERROR" && transaction?.raw_response?.Error?.ErrorCode
+    ? transaction.raw_response.Error.ErrorCode
+    : null;
+  
+  const showExclamationIcon = status === "ERROR" && !errorCode && !errorMessage;
+
+  return (
+    <Box
+    position="relative"
+    onMouseEnter={() => setIsHovered(true)}
+    onMouseLeave={() => setIsHovered(false)}
+    style={{ display: "inline-block", cursor: status === "ERROR" ? "pointer" : "default" }}
+  >
+    <Flex gap={2} alignItems="center">
+      <Badge backgroundColor={statusColors[status] || "warning100"}>
+        {displayText}
+      </Badge>
+      {showExclamationIcon && (
+        <MarkCircle color="danger500"
+          style={{
+            width: "16px",
+            height: "16px"
+          }} 
+        />
+      )}
+    </Flex>
+    {isHovered && errorMessage && (
+      <Box
+        position="absolute"
+        zIndex={1000}
+        bottom="100%"
+        left="50%"
+        transform="translateX(-50%)"
+        marginBottom={2}
+        padding={3}
+        background="neutral900"
+        hasRadius
+        style={{
+          whiteSpace: "pre-line",
+          minWidth: "200px",
+          maxWidth: "300px",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+        }}
+      >
+        <Typography variant="pi" textColor="neutral0" style={{ fontSize: "12px" }}>
+          Error: {errorMessage}
+        </Typography>
+      </Box>
+    )}
+  </Box>
+  );
+};
+
+export default StatusBadge;

package/admin/src/pages/App/components/icons/BankIcon.jsx

@@ -1,10 +1,10 @@
-import * as React from '@strapi/strapi/admin';
-
-const BankIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill={color} />
-    <path d="M12 6l-1.5 3L7 8.5l2.5 2.5L8 14l4-2.5L16 14l-1.5-3L18 8.5l-3.5.5L12 6z" fill={color} />
-  </svg>
-);
-
-export default BankIcon;
+import * as React from '@strapi/strapi/admin';
+
+const BankIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill={color} />
+    <path d="M12 6l-1.5 3L7 8.5l2.5 2.5L8 14l4-2.5L16 14l-1.5-3L18 8.5l-3.5.5L12 6z" fill={color} />
+  </svg>
+);
+
+export default BankIcon;

package/admin/src/pages/App/components/icons/ChevronDownIcon.jsx

@@ -1,9 +1,9 @@
-import * as React from '@strapi/strapi/admin';
-
-const ChevronDownIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill={color} />
-  </svg>
-);
-
-export default ChevronDownIcon;
+import * as React from '@strapi/strapi/admin';
+
+const ChevronDownIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill={color} />
+  </svg>
+);
+
+export default ChevronDownIcon;

package/admin/src/pages/App/components/icons/ChevronUpIcon.jsx

@@ -1,9 +1,9 @@
-import * as React from '@strapi/strapi/admin';
-
-const ChevronUpIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill={color} />
-  </svg>
-);
-
-export default ChevronUpIcon;
+import * as React from '@strapi/strapi/admin';
+
+const ChevronUpIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill={color} />
+  </svg>
+);
+
+export default ChevronUpIcon;

package/admin/src/pages/App/components/icons/CreditCardIcon.jsx

@@ -1,9 +1,9 @@
-import * as React from '@strapi/strapi/admin';
-
-const CreditCardIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" fill={color} />
-  </svg>
-);
-
-export default CreditCardIcon;
+import * as React from '@strapi/strapi/admin';
+
+const CreditCardIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" fill={color} />
+  </svg>
+);
+
+export default CreditCardIcon;

package/admin/src/pages/App/components/icons/ErrorIcon.jsx

@@ -1,10 +1,10 @@
-import * as React from '@strapi/strapi/admin';
-
-const ErrorIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill={color} />
-  </svg>
-);
-
-export default ErrorIcon;
+import * as React from '@strapi/strapi/admin';
+
+const ErrorIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill={color} />
+  </svg>
+);
+
+export default ErrorIcon;

package/admin/src/pages/App/components/icons/InfoIcon.jsx

@@ -1,9 +1,9 @@
-import * as React from '@strapi/strapi/admin';
-
-const InfoIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill={color} />
-  </svg>
-);
-
-export default InfoIcon;
+import * as React from '@strapi/strapi/admin';
+
+const InfoIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill={color} />
+  </svg>
+);
+
+export default InfoIcon;

package/admin/src/pages/App/components/icons/MarkCircle.jsx

@@ -1,19 +1,19 @@
-import React from "react";
-
-const MarkCircle = (props) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={12.5}
-    height={12.5}
-    fill="none"
-    viewBox="0 0 24 24"
-    {...props}
-  >
-    <path
-      fill="#212134"
-      d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0Zm1.154 18.456h-2.308V16.15h2.308v2.307Zm-.23-3.687h-1.847l-.346-9.23h2.538l-.346 9.23Z"
-    />
-  </svg>
-);
-
-export default MarkCircle;
+import React from "react";
+
+const MarkCircle = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12.5}
+    height={12.5}
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#212134"
+      d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0Zm1.154 18.456h-2.308V16.15h2.308v2.307Zm-.23-3.687h-1.847l-.346-9.23h2.538l-.346 9.23Z"
+    />
+  </svg>
+);
+
+export default MarkCircle;

package/admin/src/pages/App/components/icons/PaymentIcon.jsx

@@ -1,10 +1,10 @@
-import * as React from '@strapi/strapi/admin';
-
-const PaymentIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2 8h20v12H2V8zm2 2v8h16V10H4z" fill={color} />
-    <path d="M2 4h20v2H2V4z" fill={color} />
-  </svg>
-);
-
-export default PaymentIcon;
+import * as React from '@strapi/strapi/admin';
+
+const PaymentIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 8h20v12H2V8zm2 2v8h16V10H4z" fill={color} />
+    <path d="M2 4h20v2H2V4z" fill={color} />
+  </svg>
+);
+
+export default PaymentIcon;

package/admin/src/pages/App/components/icons/PendingIcon.jsx

@@ -1,9 +1,9 @@
-import * as React from '@strapi/strapi/admin';
-
-const PendingIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill={color} />
-  </svg>
-);
-
-export default PendingIcon;
+import * as React from '@strapi/strapi/admin';
+
+const PendingIcon = ({ size = 16, color = 'currentColor' }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill={color} />
+  </svg>
+);
+
+export default PendingIcon;