Product Menu aligning. + fixed paddingScale warning

dist/cspr-design.es.js

@@ -35288,7 +35288,7 @@ const A8 = be(M8).withConfig({
   theme: e,
   lineHeight: o = "sm",
   scale: g = "sm",
-  paddingScale: C = 2
+  $paddingScale: C = 2
 }) => ({
   zIndex: e.zIndex.tooltip,
   color: e.styleguideColors.contentPrimary,
@@ -35318,15 +35318,15 @@ const A8 = be(M8).withConfig({
   monotype: x,
   lineHeight: r = "sm",
   scale: c = "sm",
-  paddingScale: n = 2,
+  $paddingScale: n = 2,
   ...a
 }, i) => {
   const m = P8({
     animated: 250
   }), t = o ? typeof o == "string" ? o : "500px" : void 0;
   return e == null ? null : g == null ? /* @__PURE__ */ $(Ct, { children: e }) : /* @__PURE__ */ Pe(Ct, { children: [
     /* @__PURE__ */ $(E8, { ...m, ref: e.ref, ...e.props, children: (f) => At.cloneElement(e, f) }),
-    /* @__PURE__ */ $(A8, { paddingScale: n, ...m, ...a, children: /* @__PURE__ */ $("div", { style: {
+    /* @__PURE__ */ $(A8, { $paddingScale: n, ...m, ...a, children: /* @__PURE__ */ $("div", { style: {
       maxWidth: t
     }, children: /* @__PURE__ */ Pe(Ut, { itemsSpacing: 8, children: [
       /* @__PURE__ */ Pe(Ut, { children: [
@@ -39888,7 +39888,7 @@ const Fv = be(no).withConfig({
   }
 }));
 function k_(e) {
-  return /* @__PURE__ */ $(lr, { tooltipContent: e.tooltip, limitWidth: !0, lineHeight: e.lineHeight, scale: e.scale, paddingScale: e.tooltipPaddingScale, children: /* @__PURE__ */ $(Fv, { color: "utility", ...e, children: /* @__PURE__ */ Pe(je, { gap: 3, align: "center", children: [
+  return /* @__PURE__ */ $(lr, { tooltipContent: e.tooltip, limitWidth: !0, lineHeight: e.lineHeight, scale: e.scale, $paddingScale: e.tooltipPaddingScale, children: /* @__PURE__ */ $(Fv, { color: "utility", ...e, children: /* @__PURE__ */ Pe(je, { gap: 3, align: "center", children: [
     e.children,
     e.tooltip && /* @__PURE__ */ $(_t, { width: 17, height: 16, src: Gf })
   ] }) }) });

dist/lib/components/tooltip/tooltip.d.ts

@@ -3,7 +3,7 @@ import { BaseProps } from '../../types';
 type StyledReactTooltipProps = {
     lineHeight?: 'xs' | 'sm';
     scale?: 'xs' | 'sm';
-    paddingScale?: 1 | 2;
+    $paddingScale?: 1 | 2;
 };
 export interface TooltipProps extends BaseProps {
     tooltipContent?: JSX.Element | string | null;

src/lib/components/tab-menu-item/tab-menu-item.tsx

@@ -89,7 +89,7 @@ export function TabMenuItem(props: TabMenuItemProps) {
       limitWidth
       lineHeight={props.lineHeight}
       scale={props.scale}
-      paddingScale={props.tooltipPaddingScale}
+      $paddingScale={props.tooltipPaddingScale}
     >
       <StyledButton color="utility" {...props}>
         <FlexRow gap={3} align={'center'}>

src/lib/components/tooltip/tooltip.tsx

@@ -16,7 +16,7 @@ type Ref = HTMLDivElement;
 type StyledReactTooltipProps = {
   lineHeight?: 'xs' | 'sm';
   scale?: 'xs' | 'sm';
-  paddingScale?: 1 | 2;
+  $paddingScale?: 1 | 2;
 };
 
 export interface TooltipProps extends BaseProps {
@@ -29,12 +29,12 @@ export interface TooltipProps extends BaseProps {
 }
 
 const StyledReactTooltip = styled(ReakitTooltip)<StyledReactTooltipProps>(
-  ({ theme, lineHeight = 'sm', scale = 'sm', paddingScale = 2 }) => ({
+  ({ theme, lineHeight = 'sm', scale = 'sm', $paddingScale = 2 }) => ({
     zIndex: theme.zIndex.tooltip,
     color: theme.styleguideColors.contentPrimary,
     backgroundColor: theme.styleguideColors.backgroundPrimary,
     borderRadius: theme.borderRadius.base,
-    padding: theme.padding[paddingScale],
+    padding: theme.padding[$paddingScale],
     boxShadow: theme.boxShadow.tooltip,
 
     transition: 'opacity 250ms ease-in-out',
@@ -73,7 +73,7 @@ export const Tooltip = React.forwardRef<
       monotype,
       lineHeight = 'sm',
       scale = 'sm',
-      paddingScale = 2,
+      $paddingScale = 2,
       ...props
     },
     ref,
@@ -98,7 +98,7 @@ export const Tooltip = React.forwardRef<
         <TooltipReference {...tooltip} ref={children.ref} {...children.props}>
           {(referenceProps) => React.cloneElement(children, referenceProps)}
         </TooltipReference>
-        <StyledReactTooltip paddingScale={paddingScale} {...tooltip} {...props}>
+        <StyledReactTooltip $paddingScale={$paddingScale} {...tooltip} {...props}>
           <div style={{ maxWidth }}>
             <FlexColumn itemsSpacing={8}>
               <FlexColumn>