refactor: migrate legacy wire namespace to wrn

.publish/ui/components/Image.wrn

@@ -26,14 +26,14 @@ component Image {
     <figure
       {...attrs}
       data-ui-component="Image"
-      class='wire-image {class}'
+      class='wrn-image {class}'
       data-size='{size}'
       data-color='{color}'
       data-fit='{fit}'
       data-rounded='{rounded}'
     >
       <img
-        class="wire-image__img"
+        class="wrn-image__img"
         data-show="src"
         src='{src}'
         alt='{alt}'
@@ -44,12 +44,12 @@ component Image {
       />
 
       <div
-        class="wire-image__placeholder"
+        class="wrn-image__placeholder"
         data-show="!src"
         role="img"
         aria-label='{alt || "Image placeholder"}'
       >
-        <span class="icon-[lucide--image] wire-image__placeholder-icon" aria-hidden="true"></span>
+        <span class="icon-[lucide--image] wrn-image__placeholder-icon" aria-hidden="true"></span>
       </div>
 
       <slot></slot>
@@ -57,69 +57,69 @@ component Image {
   }
 
   style {
-    .wire-image {
+    .wrn-image {
       position: relative;
       margin: 0;
       overflow: hidden;
       width: 100%;
       min-width: 0;
-      background: var(--wire-color-surface-soft);
+      background: var(--wrn-color-surface-soft);
     }
 
-    .wire-image[data-rounded="true"] {
-      border-radius: var(--wire-radius-lg);
+    .wrn-image[data-rounded="true"] {
+      border-radius: var(--wrn-radius-lg);
     }
 
     /*
      * The ratio sits on the frame rather than the image, so the space is
      * reserved before the file arrives and the page does not jump.
      */
-    .wire-image[data-size="square"] {
+    .wrn-image[data-size="square"] {
       aspect-ratio: 1 / 1;
     }
 
-    .wire-image[data-size="video"] {
+    .wrn-image[data-size="video"] {
       aspect-ratio: 16 / 9;
     }
 
-    .wire-image[data-size="landscape"] {
+    .wrn-image[data-size="landscape"] {
       aspect-ratio: 4 / 3;
     }
 
-    .wire-image[data-size="portrait"] {
+    .wrn-image[data-size="portrait"] {
       aspect-ratio: 3 / 4;
     }
 
-    .wire-image__img {
+    .wrn-image__img {
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
 
-    .wire-image[data-fit="contain"] .wire-image__img {
+    .wrn-image[data-fit="contain"] .wrn-image__img {
       object-fit: contain;
     }
 
-    .wire-image[data-fit="fill"] .wire-image__img {
+    .wrn-image[data-fit="fill"] .wrn-image__img {
       object-fit: fill;
     }
 
-    .wire-image[data-size="default"] .wire-image__img {
+    .wrn-image[data-size="default"] .wrn-image__img {
       height: auto;
     }
 
-    .wire-image__placeholder {
+    .wrn-image__placeholder {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       min-height: 12rem;
       height: 100%;
-      color: var(--wire-color-text-muted);
+      color: var(--wrn-color-text-muted);
     }
 
-    .wire-image__placeholder-icon {
+    .wrn-image__placeholder-icon {
       width: 2rem;
       height: 2rem;
     }