[minor] Offset added to popovera and changed to the correct padding token

apps/website/screens/components/popover/code/PopoverCodePage.tsx

@@ -80,6 +80,16 @@ const sections = [
             <td>Controlled open state of the popover. If it is left undefined, it will be uncontrolled.</td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>offset</td>
+            <td>
+              <TableCode>number</TableCode>
+            </td>
+            <td>Distance in pixels from the trigger element to the popover.</td>
+            <td>
+              <TableCode>4</TableCode>
+            </td>
+          </tr>
           <tr>
             <td>onClose</td>
             <td>

packages/lib/src/popover/Popover.tsx

@@ -3,11 +3,15 @@ import { useEffect, useId, useRef, useState } from "react";
 import * as Popover from "@radix-ui/react-popover";
 import { PopoverPropsType } from "./types";
 
+const PopoverWrapper = styled.div`
+  width: fit-content;
+`;
+
 const PopoverContent = styled.div`
   box-sizing: border-box;
   border-radius: var(--border-radius-m);
   box-shadow: var(--shadow-400);
-  padding: var(--spacing-gap-s);
+  padding: var(--spacing-padding-xs);
   background-color: var(--color-bg-neutral-lightest);
 `;
 
@@ -33,6 +37,7 @@ const DxcPopover = ({
   children,
   hasTip = false,
   isOpen,
+  offset = 4,
   onOpen,
   onClose,
   popoverContent,
@@ -55,9 +60,8 @@ const DxcPopover = ({
             {asChild ? (
               children
             ) : (
-              <div
+              <PopoverWrapper
                 role="button"
-                style={{ width: "fit-content" }}
                 onClick={
                   actionToOpen === "click"
                     ? () => handleTrigger(isControlled.current, setOpened, true, onOpen)
@@ -75,15 +79,15 @@ const DxcPopover = ({
                 }
               >
                 {children}
-              </div>
+              </PopoverWrapper>
             )}
           </Popover.Trigger>
           <Popover.Portal container={portalContainer}>
             <Popover.Content
               aria-label="Popover content"
               align={align}
               side={side}
-              sideOffset={4}
+              sideOffset={offset}
               onInteractOutside={() => handleTrigger(isControlled.current, setOpened, false, onClose)}
               onEscapeKeyDown={() => handleTrigger(isControlled.current, setOpened, false, onClose)}
               onMouseEnter={

packages/lib/src/popover/types.ts

@@ -11,6 +11,8 @@ export type PopoverPropsType = {
   hasTip?: boolean;
   /** Controlled open state of the popover. If it is left undefined, it will be uncontrolled. */
   isOpen?: boolean;
+  /** Distance in pixels from the trigger element to the popover. */
+  offset?: number;
   /** Callback function when the popover is opened.
    * Used only in controlled mode and if the trigger lacks the events to manage the controlled behavior. */
   onOpen?: () => void;