feat: Rename "remove" to "detach" in token menu (#4814)

## Description


[Discussion](https://discord.com/channels/955905230107738152/1334251272127119430/1335002117961678948)

Difference between delete and remove is too subtle. Detach is clearer

## 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: kof

apps/builder/app/builder/features/style-panel/style-source-section.tsx

@@ -422,7 +422,7 @@ export const StyleSourcesSection = () => {
           setEditingItem(id);
         }}
         onClearStyles={clearStyles}
-        onRemoveItem={(id) => {
+        onDetachItem={(id) => {
           removeStyleSourceFromInstance(id);
         }}
         onDeleteItem={(id) => {

apps/builder/app/builder/features/style-panel/style-source/style-source-input.stories.tsx

@@ -77,7 +77,7 @@ export const Basic: StoryFn<typeof StyleSourceInput> = () => {
       onSelectAutocompleteItem={(item) => {
         setValue([...value, item]);
       }}
-      onRemoveItem={(itemId) => {
+      onDetachItem={(itemId) => {
         removeItem(itemId, value, setValue);
       }}
       onSort={setValue}
@@ -108,7 +108,7 @@ export const WithTruncatedItem: StoryFn<typeof StyleSourceInput> = () => {
       onSelectAutocompleteItem={(item) => {
         setValue([...value, item]);
       }}
-      onRemoveItem={(itemToRemove) => {
+      onDetachItem={(itemToRemove) => {
         removeItem(itemToRemove, value, setValue);
       }}
       onSort={setValue}
@@ -148,7 +148,7 @@ export const Complete: StoryFn<typeof StyleSourceInput> = () => {
       onSelectAutocompleteItem={(item) => {
         setValue([...value, item]);
       }}
-      onRemoveItem={(itemToRemove) => {
+      onDetachItem={(itemToRemove) => {
         removeItem(itemToRemove, value, setValue);
       }}
       onChangeItem={(changedItem) => {

apps/builder/app/builder/features/style-panel/style-source/style-source-input.tsx

@@ -277,7 +277,7 @@ type StyleSourceInputProps<Item extends IntermediateItem> = {
   editingItemId?: Item["id"];
   componentStates?: ComponentState[];
   onSelectAutocompleteItem?: (item: Item) => void;
-  onRemoveItem?: (id: Item["id"]) => void;
+  onDetachItem?: (id: Item["id"]) => void;
   onDeleteItem?: (id: Item["id"]) => void;
   onClearStyles?: (id: Item["id"]) => void;
   onDuplicateItem?: (id: Item["id"]) => void;
@@ -351,7 +351,7 @@ const renderMenuItems = (props: {
   onConvertToToken?: (itemId: IntermediateItem["id"]) => void;
   onDisable?: (itemId: IntermediateItem["id"]) => void;
   onEnable?: (itemId: IntermediateItem["id"]) => void;
-  onRemove?: (itemId: IntermediateItem["id"]) => void;
+  onDetach?: (itemId: IntermediateItem["id"]) => void;
   onDelete?: (itemId: IntermediateItem["id"]) => void;
   onClearStyles?: (itemId: IntermediateItem["id"]) => void;
 }) => {
@@ -404,8 +404,8 @@ const renderMenuItems = (props: {
     )}
     */}
       {props.item.source !== "local" && (
-        <DropdownMenuItem onSelect={() => props.onRemove?.(props.item.id)}>
-          Remove
+        <DropdownMenuItem onSelect={() => props.onDetach?.(props.item.id)}>
+          Detach
         </DropdownMenuItem>
       )}
       {props.item.source !== "local" && (
@@ -537,7 +537,7 @@ export const StyleSourceInput = (
       ) {
         const item = value[value.length - 2];
         if (item) {
-          props.onRemoveItem?.(item.id);
+          props.onDetachItem?.(item.id);
         }
       }
     },
@@ -568,7 +568,7 @@ export const StyleSourceInput = (
                 onEnable: props.onEnableItem,
                 onDisable: props.onDisableItem,
                 onEdit: props.onEditItem,
-                onRemove: props.onRemoveItem,
+                onDetach: props.onDetachItem,
                 onDelete: props.onDeleteItem,
                 onClearStyles: props.onClearStyles,
               })