fix(icons): use useId for SapS4HanaIcon and PipedriveIcon gradients

Why: hardcoded SVG gradient/mask IDs collide when an icon renders more
than once on a page (e.g. integrations listing). All other icons in this
file use React's useId() — these were inconsistent.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: waleedlatif1

apps/docs/components/icons.tsx

@@ -4099,11 +4099,12 @@ export function SalesforceIcon(props: SVGProps<SVGSVGElement>) {
 }
 
 export function SapS4HanaIcon(props: SVGProps<SVGSVGElement>) {
+  const id = useId()
   return (
     <svg {...props} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 412.38 204'>
       <defs>
         <linearGradient
-          id='sap-s4hana-gradient'
+          id={id}
           x1='206.19'
           y1='0'
           x2='206.19'
@@ -4118,7 +4119,7 @@ export function SapS4HanaIcon(props: SVGProps<SVGSVGElement>) {
         </linearGradient>
       </defs>
       <polyline
-        fill='url(#sap-s4hana-gradient)'
+        fill={`url(#${id})`}
         fillRule='evenodd'
         points='0 204 208.413 204 412.38 0 0 0 0 204'
       />

apps/sim/components/icons.tsx

@@ -4045,6 +4045,9 @@ export function AsanaIcon(props: SVGProps<SVGSVGElement>) {
 }
 
 export function PipedriveIcon(props: SVGProps<SVGSVGElement>) {
+  const id = useId()
+  const pathId = `${id}-path`
+  const maskId = `${id}-mask`
   return (
     <svg
       {...props}
@@ -4058,7 +4061,7 @@ export function PipedriveIcon(props: SVGProps<SVGSVGElement>) {
       <defs>
         <path
           d='M59.6807,81.1772 C59.6807,101.5343 70.0078,123.4949 92.7336,123.4949 C109.5872,123.4949 126.6277,110.3374 126.6277,80.8785 C126.6277,55.0508 113.232,37.7119 93.2944,37.7119 C77.0483,37.7119 59.6807,49.1244 59.6807,81.1772 Z M101.3006,0 C142.0482,0 169.4469,32.2728 169.4469,80.3126 C169.4469,127.5978 140.584,160.60942 99.3224,160.60942 C79.6495,160.60942 67.0483,152.1836 60.4595,146.0843 C60.5063,147.5305 60.5374,149.1497 60.5374,150.8788 L60.5374,215 L18.32565,215 L18.32565,44.157 C18.32565,41.6732 17.53126,40.8873 15.07021,40.8873 L0.5531,40.8873 L0.5531,3.4741 L35.9736,3.4741 C52.282,3.4741 56.4564,11.7741 57.2508,18.1721 C63.8708,10.7524 77.5935,0 101.3006,0 Z'
-          id='path-1'
+          id={pathId}
         />
       </defs>
       <g
@@ -4069,10 +4072,10 @@ export function PipedriveIcon(props: SVGProps<SVGSVGElement>) {
         fillRule='evenodd'
       >
         <g transform='translate(67.000000, 44.000000)'>
-          <mask id='mask-2' fill='white'>
-            <use href='#path-1' />
+          <mask id={maskId} fill='white'>
+            <use href={`#${pathId}`} />
           </mask>
-          <use id='Clip-5' fill='#FFFFFF' xlinkHref='#path-1' />
+          <use fill='#FFFFFF' xlinkHref={`#${pathId}`} />
         </g>
       </g>
     </svg>
@@ -4099,11 +4102,12 @@ export function SalesforceIcon(props: SVGProps<SVGSVGElement>) {
 }
 
 export function SapS4HanaIcon(props: SVGProps<SVGSVGElement>) {
+  const id = useId()
   return (
     <svg {...props} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 412.38 204'>
       <defs>
         <linearGradient
-          id='sap-s4hana-gradient'
+          id={id}
           x1='206.19'
           y1='0'
           x2='206.19'
@@ -4118,7 +4122,7 @@ export function SapS4HanaIcon(props: SVGProps<SVGSVGElement>) {
         </linearGradient>
       </defs>
       <polyline
-        fill='url(#sap-s4hana-gradient)'
+        fill={`url(#${id})`}
         fillRule='evenodd'
         points='0 204 208.413 204 412.38 0 0 0 0 204'
       />