convert ActionButton to new interface

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -10,11 +10,7 @@
   export let disabled = false
   export let icon = ""
 
-  export let xl = false
+  export let size = "M"
-  export let l = false
-  export let m = false
-  export let s = false
-  $: useDefault = ![xl, l, m, s].includes(true)
 
   function longPress(element) {
     if (!longPressable) return
@@ -42,11 +38,7 @@
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}
   class:is-selected={selected}
-  class:spectrum-ActionButton--sizeS={s}
+  class="spectrum-ActionButton spectrum-ActionButton--size{size}"
-  class:spectrum-ActionButton--sizeM={m || useDefault}
-  class:spectrum-ActionButton--sizeL={l}
-  class:spectrum-ActionButton--sizeXL={xl}
-  class="spectrum-ActionButton"
   {disabled}
   on:longPress
   on:click|preventDefault
@@ -62,11 +54,7 @@
   {/if}
   {#if icon}
     <svg
-      class:spectrum-Icon--sizeS={s}
+      class="spectrum-Icon spectrum-Icon--size{size}"
-      class:spectrum-Icon--sizeM={m || useDefault}
-      class:spectrum-Icon--sizeL={l}
-      class:spectrum-Icon--sizeXL={xl}
-      class="spectrum-Icon"
       focusable="false"
       aria-hidden="true"
       aria-label={icon}

packages/bbui/src/Table/SelectEditRenderer.svelte

@@ -13,5 +13,5 @@
   <Checkbox value={selected} />
 {/if}
 {#if allowEditRows}
-  <ActionButton s on:click={onEdit}>Edit</ActionButton>
+  <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
 {/if}

packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte

@@ -66,7 +66,7 @@
   <div bind:this={anchors[idx]}>
     <ActionButton
       quiet
-      s
+      size="S"
       icon={tab.icon}
       disabled={tab.disabled}
       on:click={tab.disabled ? null : () => onChangeTab(idx)}>

packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte

@@ -46,7 +46,7 @@
 <ActionGroup>
   {#each enrichedStructure as item, idx}
     <ActionMenu disabled={!item.isCategory}>
-      <ActionButton icon={item.icon} xs primary quiet slot="button" on:click={() => onItemChosen(item, idx)}>
+      <ActionButton icon={item.icon} size="XS" primary quiet slot="button" on:click={() => onItemChosen(item, idx)}>
         {item.name}
       </ActionButton>
       {#each item.children || [] as item}