diff --git a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx b/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
index 0ed7e5049acf..6fa5a94b97e9 100644
--- a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
@@ -51,7 +51,11 @@ import {
 } from "../../shared/css-value-input";
 import { ToggleControl } from "../../controls/toggle/toggle-control";
 import { PropertyInfo, PropertyLabel } from "../../property-label";
-import { useComputedStyles, useComputedStyleDecl } from "../../shared/model";
+import {
+  useComputedStyles,
+  useComputedStyleDecl,
+  $availableVariables,
+} from "../../shared/model";
 import type { ComputedStyleDecl } from "~/shared/style-object-model";
 
 const GapLinked = ({
@@ -152,9 +156,13 @@ const GapInput = ({
         property={property}
         value={styleDecl.cascadedValue}
         intermediateValue={intermediateValue}
-        getOptions={() =>
-          items.map((item) => ({ type: "keyword", value: item.name }))
-        }
+        getOptions={() => [
+          ...items.map((item) => ({
+            type: "keyword" as const,
+            value: item.name,
+          })),
+          ...$availableVariables.get(),
+        ]}
         onChange={(styleValue) => {
           onIntermediateChange(styleValue);
           if (styleValue === undefined) {
diff --git a/apps/builder/app/builder/features/style-panel/sections/position/inset-control.stories.tsx b/apps/builder/app/builder/features/style-panel/sections/position/inset-control.stories.tsx
index 044a0fd5fbc0..c25ef4b85c75 100644
--- a/apps/builder/app/builder/features/style-panel/sections/position/inset-control.stories.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/position/inset-control.stories.tsx
@@ -1,112 +1,52 @@
 import type { Meta } from "@storybook/react";
-import { InsetControl } from "./inset-control";
-import type {
-  CreateBatchUpdate,
-  DeleteProperty,
-  SetProperty,
-} from "../../shared/use-style-data";
-import { useState, useRef } from "react";
-import type { StyleInfo } from "../../shared/style-info";
 import { Box } from "@webstudio-is/design-system";
-
-const useStyleInfo = (styleInfoInitial: StyleInfo) => {
-  const [styleInfo, setStyleInfo] = useState(() => styleInfoInitial);
-
-  const setProperty: SetProperty = (name) => (value, options) => {
-    if (options?.isEphemeral) {
-      return;
-    }
-
-    setStyleInfo((styleInfo) => ({
-      ...styleInfo,
-      [name]: {
-        ...styleInfo[name],
-        value: value,
-        local: value,
-      },
-    }));
-  };
-
-  const deleteProperty: DeleteProperty = (name, options) => {
-    if (options?.isEphemeral) {
-      return;
-    }
-
-    setStyleInfo((styleInfo) => {
-      const styleInfoCopy = { ...styleInfo };
-
-      styleInfoCopy[name] = structuredClone(defaultValue);
-
-      return styleInfoCopy;
-    });
-  };
-
-  const execCommands = useRef<(() => void)[]>([]);
-
-  const createBatchUpdate: CreateBatchUpdate = () => ({
-    deleteProperty: (property) => {
-      execCommands.current.push(() => {
-        deleteProperty(property);
-      });
-    },
-    setProperty: (property) => (style) => {
-      execCommands.current.push(() => {
-        setProperty(property)(style);
-      });
-    },
-    publish: (options) => {
-      if (options?.isEphemeral) {
-        execCommands.current = [];
-        return;
-      }
-
-      for (const command of execCommands.current) {
-        command();
-      }
-
-      execCommands.current = [];
-    },
-  });
-
-  return { styleInfo, setProperty, deleteProperty, createBatchUpdate };
-};
-
-const defaultValue = {
-  value: {
-    type: "keyword",
-    value: "auto",
-  },
-} as const;
-
-const bigValue = {
+import { getStyleDeclKey, StyleDecl } from "@webstudio-is/sdk";
+import { InsetControl } from "./inset-control";
+import { registerContainers } from "~/shared/sync";
+import {
+  $breakpoints,
+  $selectedBreakpointId,
+  $selectedInstanceSelector,
+  $styles,
+  $styleSources,
+  $styleSourceSelections,
+} from "~/shared/nano-states";
+
+const right: StyleDecl = {
+  breakpointId: "base",
+  styleSourceId: "local",
+  property: "right",
   value: {
     type: "unit",
     value: 123.27,
     unit: "rem",
   },
+};
 
-  local: {
-    type: "unit",
-    value: 123.27,
-    unit: "rem",
-  },
-} as const;
+registerContainers();
+$breakpoints.set(new Map([["base", { id: "base", label: "" }]]));
+$selectedBreakpointId.set("base");
+$styleSources.set(
+  new Map([
+    [
+      "local",
+      {
+        id: "local",
+        type: "local",
+      },
+    ],
+  ])
+);
+$styles.set(new Map([[getStyleDeclKey(right), right]]));
+$styleSourceSelections.set(
+  new Map([["box", { instanceId: "box", values: ["local"] }]])
+);
+$selectedInstanceSelector.set(["box"]);
 
 export const InsetControlComponent = () => {
-  const { styleInfo, deleteProperty, createBatchUpdate } = useStyleInfo({
-    left: defaultValue,
-    right: bigValue,
-    top: defaultValue,
-    bottom: defaultValue,
-  });
-
   return (
     <Box css={{ marginLeft: 100 }}>
-      <InsetControl
-        createBatchUpdate={createBatchUpdate}
-        currentStyle={styleInfo}
-        deleteProperty={deleteProperty}
-      />
+      <InsetControl />
     </Box>
   );
 };
diff --git a/apps/builder/app/builder/features/style-panel/sections/position/inset-control.tsx b/apps/builder/app/builder/features/style-panel/sections/position/inset-control.tsx
index 13d5fcd1c718..9f00aaa7391f 100644
--- a/apps/builder/app/builder/features/style-panel/sections/position/inset-control.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/position/inset-control.tsx
@@ -1,60 +1,43 @@
 import { Grid, theme } from "@webstudio-is/design-system";
 import { useRef, useState } from "react";
 import { movementMapInset, useKeyboardNavigation } from "../shared/keyboard";
-import type {
-  CreateBatchUpdate,
-  DeleteProperty,
-} from "../../shared/use-style-data";
-import { getStyleSource, type StyleInfo } from "../../shared/style-info";
+import { createBatchUpdate, deleteProperty } from "../../shared/use-style-data";
 import { getInsetModifiersGroup, useScrub } from "../shared/scrub";
 import { ValueText } from "../shared/value-text";
 import type { StyleValue } from "@webstudio-is/css-engine";
 import { InputPopover } from "../shared/input-popover";
 import { InsetLayout, type InsetProperty } from "./inset-layout";
 import { InsetTooltip } from "./inset-tooltip";
+import { useComputedStyleDecl, useComputedStyles } from "../../shared/model";
 
 const Cell = ({
   scrubStatus,
-  currentStyle,
   property,
   onHover,
   isPopoverOpen,
   onPopoverClose,
-  createBatchUpdate,
 }: {
   isPopoverOpen: boolean;
   onPopoverClose: () => void;
   scrubStatus: ReturnType<typeof useScrub>;
-  currentStyle: StyleInfo;
   property: InsetProperty;
   onHover: (target: HoverTarget | undefined) => void;
-  createBatchUpdate: CreateBatchUpdate;
 }) => {
-  const styleInfo = currentStyle[property];
-  const finalValue: StyleValue | undefined = scrubStatus.isActive
-    ? (scrubStatus.values[property] ?? styleInfo?.value)
-    : styleInfo?.value;
-  const styleSource = getStyleSource(styleInfo);
-
-  if (finalValue === undefined) {
-    return null;
-  }
+  const styleDecl = useComputedStyleDecl(property);
+  const finalValue: StyleValue | undefined =
+    (scrubStatus.isActive && scrubStatus.values[property]) ||
+    styleDecl.cascadedValue;
 
   return (
     <>
       <InputPopover
-        styleSource={styleSource}
+        styleSource={styleDecl.source.name}
         value={finalValue}
         isOpen={isPopoverOpen}
         property={property}
         onClose={onPopoverClose}
       />
-      <InsetTooltip
-        property={property}
-        style={currentStyle}
-        createBatchUpdate={createBatchUpdate}
-        preventOpen={scrubStatus.isActive}
-      >
+      <InsetTooltip property={property} preventOpen={scrubStatus.isActive}>
         <ValueText
           css={{
             // We want value to have `default` cursor to indicate that it's clickable,
@@ -66,7 +49,7 @@ const Cell = ({
             pointerEvents: "all",
           }}
           value={finalValue}
-          source={styleSource}
+          source={styleDecl.source.name}
           onMouseEnter={(event) =>
             onHover({ property, element: event.currentTarget })
           }
@@ -82,24 +65,14 @@ type HoverTarget = {
   property: InsetProperty;
 };
 
-type InsetControlProps = {
-  deleteProperty: DeleteProperty;
-  createBatchUpdate: CreateBatchUpdate;
-  currentStyle: StyleInfo;
-};
-
-export const InsetControl = ({
-  createBatchUpdate,
-  currentStyle,
-  deleteProperty,
-}: InsetControlProps) => {
+export const InsetControl = () => {
+  const styles = useComputedStyles(["top", "right", "bottom", "left"]);
   const [hoverTarget, setHoverTarget] = useState<HoverTarget>();
 
   const scrubStatus = useScrub({
-    value:
-      hoverTarget === undefined
-        ? undefined
-        : currentStyle[hoverTarget.property]?.value,
+    value: styles.find(
+      (styleDecl) => styleDecl.property === hoverTarget?.property
+    )?.usedValue,
     target: hoverTarget,
     getModifiersGroup: getInsetModifiersGroup,
     onChange: (values, options) => {
@@ -176,7 +149,6 @@ export const InsetControl = ({
         renderCell={(property) => (
           <Cell
             scrubStatus={scrubStatus}
-            currentStyle={currentStyle}
             property={property}
             onHover={handleHover}
             isPopoverOpen={openProperty === property}
@@ -186,7 +158,6 @@ export const InsetControl = ({
                 layoutRef.current?.focus();
               }
             }}
-            createBatchUpdate={createBatchUpdate}
           />
         )}
         onHover={handleHover}
diff --git a/apps/builder/app/builder/features/style-panel/sections/position/inset-tooltip.tsx b/apps/builder/app/builder/features/style-panel/sections/position/inset-tooltip.tsx
index 98a53317b2ce..14eac47db6e9 100644
--- a/apps/builder/app/builder/features/style-panel/sections/position/inset-tooltip.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/position/inset-tooltip.tsx
@@ -1,10 +1,11 @@
-import { PropertyTooltip } from "../../shared/property-name";
-import type { StyleInfo } from "../../shared/style-info";
 import { useState, type ReactElement } from "react";
+import { Tooltip } from "@webstudio-is/design-system";
 import { useModifierKeys } from "../../shared/modifier-keys";
 import { getInsetModifiersGroup } from "../shared/scrub";
-import type { CreateBatchUpdate } from "../../shared/use-style-data";
+import { createBatchUpdate } from "../../shared/use-style-data";
 import type { InsetProperty } from "./inset-layout";
+import { PropertyInfo } from "../../property-label";
+import { useComputedStyles } from "../../shared/model";
 
 const sides = {
   top: "top",
@@ -34,7 +35,7 @@ const propertyContents: {
 
   {
     properties: ["top", "right", "bottom", "left"],
-    label: "Padding",
+    label: "Inset position",
     description:
       "Sets the top, right, bottom and left position of an element relative to its nearest positioned ancestor.",
   },
@@ -54,22 +55,27 @@ const isSameUnorderedArrays = (
 
 export const InsetTooltip = ({
   property,
-  style,
   children,
-  createBatchUpdate,
   preventOpen,
 }: {
   property: InsetProperty;
-  style: StyleInfo;
   children: ReactElement;
-  createBatchUpdate: CreateBatchUpdate;
   preventOpen: boolean;
 }) => {
-  const [open, setOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const modifiers = useModifierKeys();
 
   const properties = [...getInsetModifiersGroup(property, modifiers)];
+  const styles = useComputedStyles(properties);
+
+  const resetProperties = () => {
+    const batch = createBatchUpdate();
+    for (const property of properties) {
+      batch.deleteProperty(property);
+    }
+    batch.publish();
+  };
 
   const propertyContent = propertyContents.find((propertyContent) =>
     isSameUnorderedArrays(propertyContent.properties, properties)
@@ -79,27 +85,39 @@ export const InsetTooltip = ({
     if (preventOpen && value === true) {
       return;
     }
-    setOpen(value);
+    setIsOpen(value);
   };
 
   return (
-    <PropertyTooltip
-      open={open}
+    <Tooltip
+      open={isOpen}
       onOpenChange={handleOpenChange}
-      properties={properties}
-      style={style}
-      title={propertyContent?.label}
-      description={propertyContent?.description}
       side={sides[property]}
-      onReset={() => {
-        const batch = createBatchUpdate();
-        for (const property of properties) {
-          batch.deleteProperty(property);
-        }
-        batch.publish();
+      // prevent closing tooltip on content click
+      onPointerDown={(event) => event.preventDefault()}
+      triggerProps={{
+        onClick: (event) => {
+          if (event.altKey) {
+            event.preventDefault();
+            resetProperties();
+            return;
+          }
+        },
       }}
+      content={
+        <PropertyInfo
+          title={propertyContent?.label ?? ""}
+          description={propertyContent?.description}
+          styles={styles}
+          onReset={() => {
+            resetProperties();
+            handleOpenChange(false);
+          }}
+        />
+      }
     >
+      {/* @todo show tooltip on focus */}
       <div>{children}</div>
-    </PropertyTooltip>
+    </Tooltip>
   );
 };
diff --git a/apps/builder/app/builder/features/style-panel/sections/position/position.tsx b/apps/builder/app/builder/features/style-panel/sections/position/position.tsx
index 3b6fb8981a4a..72ca88789975 100644
--- a/apps/builder/app/builder/features/style-panel/sections/position/position.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/position/position.tsx
@@ -27,11 +27,7 @@ const positionControlVisibleProperties = [
 
 const zIndexParents = ["flex", "grid", "inline-flex", "inline-grid"] as const;
 
-export const Section = ({
-  deleteProperty,
-  currentStyle,
-  createBatchUpdate,
-}: SectionProps) => {
+export const Section = ({ currentStyle }: SectionProps) => {
   const parentStyle = useParentStyle();
 
   const positionValue = currentStyle.position?.value;
@@ -82,11 +78,7 @@ export const Section = ({
 
         {showInsetControl && (
           <Grid gap={3} columns={2}>
-            <InsetControl
-              currentStyle={currentStyle}
-              deleteProperty={deleteProperty}
-              createBatchUpdate={createBatchUpdate}
-            />
+            <InsetControl />
             <Grid gap={1}>
               <PropertyLabel
                 label="Z Index"
diff --git a/apps/builder/app/builder/features/style-panel/sections/space/space.tsx b/apps/builder/app/builder/features/style-panel/sections/space/space.tsx
index 7214d217eab9..2dcb82f806d4 100644
--- a/apps/builder/app/builder/features/style-panel/sections/space/space.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/space/space.tsx
@@ -68,12 +68,9 @@ export const Section = () => {
   const [hoverTarget, setHoverTarget] = useState<HoverTarget>();
 
   const scrubStatus = useScrub({
-    value:
-      hoverTarget === undefined
-        ? undefined
-        : styles.find(
-            (styleDecl) => styleDecl.property === hoverTarget.property
-          )?.usedValue,
+    value: styles.find(
+      (styleDecl) => styleDecl.property === hoverTarget?.property
+    )?.usedValue,
     target: hoverTarget,
     getModifiersGroup: getSpaceModifiersGroup,
     onChange: (values, options) => {
diff --git a/apps/builder/app/builder/features/style-panel/shared/property-name.tsx b/apps/builder/app/builder/features/style-panel/shared/property-name.tsx
deleted file mode 100644
index f6d402a726bb..000000000000
--- a/apps/builder/app/builder/features/style-panel/shared/property-name.tsx
+++ /dev/null
@@ -1,358 +0,0 @@
-import { useState, type ReactElement, type ReactNode } from "react";
-import { useStore } from "@nanostores/react";
-import type { StyleProperty } from "@webstudio-is/css-engine";
-import { propertyDescriptions } from "@webstudio-is/css-data";
-import {
-  theme,
-  Button,
-  Flex,
-  Tooltip,
-  type TooltipProps,
-  Text,
-  ScrollArea,
-  Kbd,
-} from "@webstudio-is/design-system";
-import { ResetIcon } from "@webstudio-is/icons";
-import type {
-  Breakpoint,
-  Breakpoints,
-  StyleSource,
-  StyleSources,
-} from "@webstudio-is/sdk";
-import { hyphenateProperty } from "@webstudio-is/css-engine";
-import {
-  $breakpoints,
-  $instances,
-  $registeredComponentMetas,
-  $selectedBreakpoint,
-  $selectedInstance,
-  $selectedStyleSource,
-  $styleSources,
-} from "~/shared/nano-states";
-import {
-  type StyleInfo,
-  getStyleSource,
-  type StyleValueInfo,
-} from "./style-info";
-import { humanizeString } from "~/shared/string-utils";
-import { getInstanceLabel } from "~/shared/instance-utils";
-import { StyleSourceBadge } from "../style-source";
-import type { WsComponentMeta } from "@webstudio-is/react-sdk";
-
-// We don't return source name only in case of preset or default value.
-const getSourceName = (
-  styleSources: StyleSources,
-  styleValueInfo: StyleValueInfo,
-  meta?: WsComponentMeta,
-  selectedStyleSource?: StyleSource
-) => {
-  if (styleValueInfo.nextSource) {
-    const { styleSourceId } = styleValueInfo.nextSource;
-    const styleSource = styleSources.get(styleSourceId);
-    if (styleSource?.type === "local") {
-      return "Local";
-    }
-    if (styleSource?.type === "token") {
-      return styleSource.name;
-    }
-  }
-
-  if (styleValueInfo.local || styleValueInfo.stateless) {
-    return selectedStyleSource?.type === "token"
-      ? selectedStyleSource.name
-      : "Local";
-  }
-
-  if (styleValueInfo.stateful) {
-    const selector = styleValueInfo.stateful.state;
-    const state =
-      meta?.states?.find((item) => item.selector === selector)?.label ??
-      humanizeString(selector);
-    return selectedStyleSource?.type === "token"
-      ? `${selectedStyleSource.name} (${state})`
-      : `Local (${state})`;
-  }
-
-  if (styleValueInfo.previousSource) {
-    const { styleSourceId } = styleValueInfo.previousSource;
-    const styleSource = styleSources.get(styleSourceId);
-    if (styleSource?.type === "local") {
-      return "Local";
-    }
-    if (styleSource?.type === "token") {
-      return styleSource.name;
-    }
-  }
-
-  if (styleValueInfo.cascaded) {
-    return selectedStyleSource?.type === "token"
-      ? selectedStyleSource.name
-      : "Local";
-  }
-
-  if (styleValueInfo.inherited?.styleSourceId !== undefined) {
-    const { styleSourceId } = styleValueInfo.inherited;
-    const styleSource = styleSources.get(styleSourceId);
-    return styleSource?.type === "token" ? styleSource.name : "Local";
-  }
-};
-
-const getBreakpointName = (
-  styleValueInfo: StyleValueInfo,
-  breakpoints: Breakpoints,
-  selectedBreakpoint?: Breakpoint
-) => {
-  let breakpoint;
-  if (
-    styleValueInfo.local ||
-    styleValueInfo.previousSource ||
-    styleValueInfo.nextSource
-  ) {
-    breakpoint = selectedBreakpoint;
-  } else if (styleValueInfo.cascaded) {
-    const { breakpointId } = styleValueInfo.cascaded;
-    breakpoint = breakpoints.get(breakpointId);
-  }
-
-  return breakpoint?.minWidth ?? breakpoint?.maxWidth ?? "Base";
-};
-
-const getDescription = (properties: StyleProperty[]) => {
-  if (properties.length > 1) {
-    return;
-  }
-  const property = properties[0];
-  return propertyDescriptions[property as keyof typeof propertyDescriptions];
-};
-
-export const TooltipContent = ({
-  title,
-  description,
-  scrollableContent,
-  properties,
-  style,
-  onReset,
-}: {
-  title?: string;
-  description?: ReactNode;
-  properties: StyleProperty[];
-  scrollableContent?: ReactNode;
-  style: StyleInfo;
-  onReset?: undefined | (() => void);
-}) => {
-  const breakpoints = useStore($breakpoints);
-  const selectedBreakpoint = useStore($selectedBreakpoint);
-  const instances = useStore($instances);
-  const styleSources = useStore($styleSources);
-  const instance = useStore($selectedInstance);
-  const metas = useStore($registeredComponentMetas);
-  const selectedStyleSource = useStore($selectedStyleSource);
-
-  const descriptionWithFallback = description ?? getDescription(properties);
-
-  const breakpointSet = new Set<string>();
-  const styleSourceNameSet = new Set<string>();
-  const instanceSet = new Set<string>();
-
-  for (const property of properties) {
-    const styleValueInfo = style[property];
-
-    if (styleValueInfo === undefined) {
-      continue;
-    }
-    const meta = instance ? metas.get(instance.component) : undefined;
-
-    const sourceName = getSourceName(
-      styleSources,
-      styleValueInfo,
-      meta,
-      selectedStyleSource
-    );
-
-    if (sourceName !== undefined) {
-      styleSourceNameSet.add(sourceName);
-    }
-
-    const breakpointName = getBreakpointName(
-      styleValueInfo,
-      breakpoints,
-      selectedBreakpoint
-    );
-
-    breakpointSet.add(`${breakpointName}`);
-
-    let instanceTitle: undefined | string;
-    if (instance && meta) {
-      instanceTitle = getInstanceLabel(instance, meta);
-    }
-    if (styleValueInfo.inherited && styleValueInfo.local === undefined) {
-      const localInstance = instances.get(styleValueInfo.inherited.instanceId);
-      if (localInstance) {
-        const meta = metas.get(localInstance.component);
-        if (meta) {
-          instanceTitle = getInstanceLabel(localInstance, meta);
-        }
-      }
-    }
-
-    if (instanceTitle !== undefined) {
-      instanceSet.add(instanceTitle);
-    }
-  }
-
-  const styleSourcesList = properties.map((property) =>
-    getStyleSource(style[property])
-  );
-
-  return (
-    <Flex direction="column" gap="2" css={{ maxWidth: theme.spacing[28] }}>
-      <Text variant="titles">{title ?? humanizeString(properties[0])}</Text>
-      <ScrollArea>
-        <Text
-          variant="monoBold"
-          color="moreSubtle"
-          userSelect="text"
-          css={{
-            whiteSpace: "break-spaces",
-            maxHeight: "3em",
-            cursor: "text",
-          }}
-        >
-          {scrollableContent ?? properties.map(hyphenateProperty).join("\n")}
-        </Text>
-      </ScrollArea>
-      {descriptionWithFallback && <Text>{descriptionWithFallback}</Text>}
-      {(styleSourceNameSet.size > 0 ||
-        // show badges when inherited from preset
-        (instanceSet.size > 0 && styleSourcesList.includes("remote"))) && (
-        <Flex
-          direction="column"
-          gap="1"
-          css={{ paddingBottom: theme.spacing[5] }}
-        >
-          <Text color="moreSubtle">Value comes from</Text>
-          <Flex gap="1" wrap="wrap">
-            {Array.from(breakpointSet).map((breakpointName) => (
-              <StyleSourceBadge
-                key={breakpointName}
-                source="breakpoint"
-                variant="small"
-              >
-                {breakpointName}
-              </StyleSourceBadge>
-            ))}
-
-            {Array.from(styleSourceNameSet).map((sourceName) => (
-              <StyleSourceBadge
-                key={sourceName}
-                source={sourceName === "Local" ? "local" : "token"}
-                variant="small"
-              >
-                {sourceName}
-              </StyleSourceBadge>
-            ))}
-
-            {Array.from(instanceSet).map((instanceTitle) => (
-              <StyleSourceBadge
-                key={instanceTitle}
-                source="instance"
-                variant="small"
-              >
-                {instanceTitle}
-              </StyleSourceBadge>
-            ))}
-          </Flex>
-        </Flex>
-      )}
-      {(styleSourcesList.includes("local") ||
-        styleSourcesList.includes("overwritten")) &&
-        onReset !== undefined && (
-          <Button
-            color="dark"
-            prefix={
-              <Flex justify="end">
-                <ResetIcon />
-              </Flex>
-            }
-            suffix={<Kbd value={["option", "click"]} color="moreSubtle" />}
-            css={{ gridTemplateColumns: "2fr 3fr 1fr" }}
-            onClick={onReset}
-          >
-            Reset value
-          </Button>
-        )}
-    </Flex>
-  );
-};
-
-export const PropertyTooltip = ({
-  openWithClick = false,
-  title,
-  description,
-  scrollableContent,
-  properties,
-  style,
-  onReset,
-  children,
-  open,
-  onOpenChange,
-  side,
-}: {
-  openWithClick?: boolean;
-  title?: string;
-  description?: ReactNode;
-  scrollableContent?: ReactNode;
-  properties: StyleProperty[];
-  style: StyleInfo;
-  onReset?: undefined | (() => void);
-  children: ReactElement;
-  open?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-  side?: TooltipProps["side"];
-}) => {
-  const [isOpenInternal, setIsOpenInternal] = useState(open ?? false);
-
-  const handleIsOpen = onOpenChange ?? setIsOpenInternal;
-  const isOpen = open ?? isOpenInternal;
-
-  return (
-    <Tooltip
-      open={isOpen}
-      onOpenChange={handleIsOpen}
-      side={side}
-      // prevent closing tooltip on content click
-      onPointerDown={(event) => event.preventDefault()}
-      triggerProps={{
-        onClick: (event) => {
-          if (event.altKey) {
-            event.preventDefault();
-            onReset?.();
-            return;
-          }
-          if (openWithClick) {
-            handleIsOpen(true);
-          }
-        },
-      }}
-      content={
-        <TooltipContent
-          title={title}
-          description={description}
-          scrollableContent={scrollableContent}
-          properties={properties}
-          style={style}
-          onReset={
-            onReset
-              ? () => {
-                  onReset();
-                  handleIsOpen(false);
-                }
-              : undefined
-          }
-        />
-      }
-    >
-      {children}
-    </Tooltip>
-  );
-};
diff --git a/apps/builder/app/builder/features/style-panel/shared/style-info.test.ts b/apps/builder/app/builder/features/style-panel/shared/style-info.test.ts
index 6b599766d475..2abebda00b03 100644
--- a/apps/builder/app/builder/features/style-panel/shared/style-info.test.ts
+++ b/apps/builder/app/builder/features/style-panel/shared/style-info.test.ts
@@ -29,7 +29,6 @@ import {
   getNextSourceInfo,
   getPreviousSourceInfo,
   __testing__,
-  getStyleSource,
   useStyleInfo,
 } from "./style-info";
 
@@ -609,7 +608,6 @@ describe("active states", () => {
     $selectedStyleSources.set(new Map([["box", "box.local"]]));
 
     const { result } = renderHook(() => useStyleInfo());
-    expect(getStyleSource(result.current.color)).toEqual("local");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "green",
@@ -619,7 +617,6 @@ describe("active states", () => {
       $selectedStyleSources.set(new Map([["box", "box.local"]]));
       $selectedStyleState.set(":hover");
     });
-    expect(getStyleSource(result.current.color)).toEqual("remote");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "green",
@@ -652,7 +649,6 @@ describe("active states", () => {
     $selectedInstanceStates.set(new Set([":hover"]));
 
     const { result } = renderHook(() => useStyleInfo());
-    expect(getStyleSource(result.current.color)).toEqual("remote");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "green",
@@ -662,7 +658,6 @@ describe("active states", () => {
       $selectedStyleSources.set(new Map([["box", "box.local"]]));
       $selectedStyleState.set(":hover");
     });
-    expect(getStyleSource(result.current.color)).toEqual("local");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "green",
@@ -707,7 +702,6 @@ describe("active states", () => {
     $selectedBreakpointId.set("small");
 
     const { result } = renderHook(() => useStyleInfo());
-    expect(getStyleSource(result.current.color)).toEqual("remote");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "red",
@@ -716,7 +710,6 @@ describe("active states", () => {
     act(() => {
       $selectedInstanceStates.set(new Set([":hover"]));
     });
-    expect(getStyleSource(result.current.color)).toEqual("remote");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "green",
@@ -764,7 +757,6 @@ describe("active states", () => {
     $selectedInstanceSelector.set(["box", "body"]);
 
     const { result } = renderHook(() => useStyleInfo());
-    expect(getStyleSource(result.current.color)).toEqual("remote");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "red",
@@ -773,7 +765,6 @@ describe("active states", () => {
     act(() => {
       $selectedInstanceStates.set(new Set([":hover"]));
     });
-    expect(getStyleSource(result.current.color)).toEqual("remote");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "green",
@@ -819,7 +810,6 @@ describe("active states", () => {
     $selectedStyleSources.set(new Map([["box", "box.local"]]));
 
     const { result } = renderHook(() => useStyleInfo());
-    expect(getStyleSource(result.current.color)).toEqual("remote");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "red",
@@ -828,7 +818,6 @@ describe("active states", () => {
     act(() => {
       $selectedInstanceStates.set(new Set([":hover"]));
     });
-    expect(getStyleSource(result.current.color)).toEqual("remote");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "green",
@@ -877,7 +866,6 @@ describe("active states", () => {
     $selectedInstanceStates.set(new Set([":hover"]));
 
     const { result } = renderHook(() => useStyleInfo());
-    expect(getStyleSource(result.current.color)).toEqual("remote");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "green",
@@ -886,7 +874,6 @@ describe("active states", () => {
     act(() => {
       $selectedStyleSources.set(new Map([["box", "box.second"]]));
     });
-    expect(getStyleSource(result.current.color)).toEqual("overwritten");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "blue",
@@ -936,7 +923,6 @@ describe("active states", () => {
 
     const { result } = renderHook(() => useStyleInfo());
 
-    expect(getStyleSource(result.current.color)).toEqual("preset");
     expect(result.current.color?.value).toEqual({
       type: "keyword",
       value: "green",
diff --git a/apps/builder/app/builder/features/style-panel/shared/style-info.ts b/apps/builder/app/builder/features/style-panel/shared/style-info.ts
index fe895af6f950..905e18f0ede1 100644
--- a/apps/builder/app/builder/features/style-panel/shared/style-info.ts
+++ b/apps/builder/app/builder/features/style-panel/shared/style-info.ts
@@ -76,7 +76,7 @@ const CUSTOM_DEFAULT_VALUES: Partial<Record<StyleProperty, StyleValue>> = {
 
 type StatefulValue = { state: string; value: StyleValue };
 
-export type StyleValueInfo = {
+type StyleValueInfo = {
   value: StyleValue;
   // either stateful and local exist or stateless and local or just local
   // @todo improve with more clear structure
@@ -114,54 +114,6 @@ export type StyleSource =
   | "preset"
   | "default";
 
-export const getStyleSource = (
-  ...styleValueInfos: (undefined | StyleValueInfo)[]
-): StyleSource => {
-  // show source to use if at least one of control properties matches
-  // so user could see if something is set or something is inherited
-  for (const info of styleValueInfos) {
-    if (info?.nextSource && (info.local || info.stateful)) {
-      return "overwritten";
-    }
-  }
-  for (const info of styleValueInfos) {
-    if (info?.stateful && info.local) {
-      return "overwritten";
-    }
-  }
-  for (const info of styleValueInfos) {
-    if (info?.local) {
-      return "local";
-    }
-  }
-  for (const info of styleValueInfos) {
-    if (info?.stateless || info?.stateful) {
-      return "remote";
-    }
-  }
-  for (const info of styleValueInfos) {
-    if (info?.previousSource || info?.nextSource || info?.cascaded) {
-      return "remote";
-    }
-  }
-  for (const info of styleValueInfos) {
-    if (info?.preset) {
-      return "preset";
-    }
-  }
-  for (const info of styleValueInfos) {
-    if (info?.htmlValue) {
-      return "default";
-    }
-  }
-  for (const info of styleValueInfos) {
-    if (info?.inherited) {
-      return "remote";
-    }
-  }
-  return "default";
-};
-
 const propertyNames = Object.keys(properties) as StyleProperty[];
 
 const inheritableProperties = new Set<string>();