experimental: Animation axis Icons change (#5060)

## Description

<img width="255" alt="image"
src="https://github.com/user-attachments/assets/dffc4f96-f669-4f65-883c-1acafecea4c2"
/>


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-section.tsx

@@ -25,7 +25,7 @@ import {
   insetUnitValueSchema,
   RANGE_UNITS,
 } from "@webstudio-is/sdk";
-import { RepeatColumnIcon, RepeatRowIcon } from "@webstudio-is/icons";
+import { ArrowDownIcon, ArrowRightIcon } from "@webstudio-is/icons";
 import { AnimationsSelect } from "./animations-select";
 import { SubjectSelect } from "./subject-select";
 import { toValue, type StyleValue } from "@webstudio-is/css-engine";
@@ -51,35 +51,52 @@ const defaultActionValue: AnimationAction = {
 };
 
 const animationAxisDescription: Record<
-  NonNullable<AnimationAction["axis"]>,
+  Exclude<NonNullable<AnimationAction["axis"]>, "block" | "inline">,
   { icon: React.ReactNode; label: string; description: React.ReactNode }
 > = {
+  /*
+  // We decided to not support block and inline axis, as mostly not used
   block: {
-    icon: <RepeatColumnIcon />,
+    icon: <ArrowDownIcon />,
     label: "Block axis",
     description:
       "Uses the scroll progress along the block axis (depends on writing mode, usually vertical in English).",
   },
   inline: {
-    icon: <RepeatRowIcon />,
+    icon: <ArrowRightIcon />,
     label: "Inline axis",
     description:
       "Uses the scroll progress along the inline axis (depends on writing mode, usually horizontal in English).",
   },
+  */
+
   y: {
     label: "Y axis",
-    icon: <RepeatColumnIcon />,
-    description:
-      "Always maps to the vertical scroll direction, regardless of writing mode.",
+    icon: <ArrowDownIcon />,
+    description: "The scrollbar on the vertical axis of the scroller element.",
   },
   x: {
     label: "X axis",
-    icon: <RepeatRowIcon />,
+    icon: <ArrowRightIcon />,
     description:
-      "Always maps to the horizontal scroll direction, regardless of writing mode.",
+      "The scrollbar on the horizontal axis of the scroller element.",
   },
 };
 
+/**
+ * Support for block and inline axis is removed, as it is not widely used.
+ */
+const convertAxisToXY = (axis: NonNullable<AnimationAction["axis"]>) => {
+  switch (axis) {
+    case "block":
+      return "y";
+    case "inline":
+      return "x";
+    default:
+      return axis;
+  }
+};
+
 const animationSourceDescriptions: Record<
   NonNullable<AnimationActionScroll["source"]>,
   string
@@ -217,7 +234,7 @@ export const AnimationSection = ({
       return;
     }
 
-    toast.error("Schemas are incompatible, try fix");
+    toast.error("Invalid animation schema.");
   };
 
   return (
@@ -280,10 +297,13 @@ export const AnimationSection = ({
         <Grid gap={1} align={"center"} css={{ gridTemplateColumns: "1fr 1fr" }}>
           <Label>Axis</Label>
           <ToggleGroup
+            css={{
+              justifySelf: "end",
+            }}
             type="single"
-            value={value.axis ?? ("block" as const)}
-            onValueChange={(axis) => {
-              handleChange({ ...value, axis }, false);
+            value={convertAxisToXY(value.axis ?? ("y" as const))}
+            onValueChange={(axis: keyof typeof animationAxisDescription) => {
+              handleChange({ ...value, axis: convertAxisToXY(axis) }, false);
             }}
           >
             {Object.entries(animationAxisDescription).map(