refactor: migrate legacy wire namespace to wrn

packages/ui/components/Divider.wrn

@@ -35,7 +35,7 @@ component Divider {
     <div
       {...attrs}
       data-ui-component="Divider"
-      class='wire-divider {class}'
+      class='wrn-divider {class}'
       data-size='{size}'
       data-color='{color}'
       data-tone='{tone()}'
@@ -45,15 +45,15 @@ component Divider {
       role="separator"
       aria-orientation='{isVertical() ? "vertical" : "horizontal"}'
     >
-      <span class="wire-divider__rule" aria-hidden="true"></span>
-      <span class="wire-divider__label" data-show="label">{label}</span>
-      <span class="wire-divider__rule" data-show="label" aria-hidden="true"></span>
+      <span class="wrn-divider__rule" aria-hidden="true"></span>
+      <span class="wrn-divider__label" data-show="label">{label}</span>
+      <span class="wrn-divider__rule" data-show="label" aria-hidden="true"></span>
     </div>
   }
 
   style {
-    .wire-divider {
-      --divider-tone: var(--wire-color-border);
+    .wrn-divider {
+      --divider-tone: var(--wrn-color-border);
       --divider-thickness: 1px;
       display: flex;
       align-items: center;
@@ -62,58 +62,58 @@ component Divider {
       min-width: 0;
     }
 
-    .wire-divider[data-tone="primary"] {
-      --divider-tone: var(--wire-color-primary);
+    .wrn-divider[data-tone="primary"] {
+      --divider-tone: var(--wrn-color-primary);
     }
 
-    .wire-divider[data-tone="secondary"] {
-      --divider-tone: var(--wire-color-secondary);
+    .wrn-divider[data-tone="secondary"] {
+      --divider-tone: var(--wrn-color-secondary);
     }
 
-    .wire-divider[data-tone="success"] {
-      --divider-tone: var(--wire-color-success);
+    .wrn-divider[data-tone="success"] {
+      --divider-tone: var(--wrn-color-success);
     }
 
-    .wire-divider[data-tone="warning"] {
-      --divider-tone: var(--wire-color-warning);
+    .wrn-divider[data-tone="warning"] {
+      --divider-tone: var(--wrn-color-warning);
     }
 
-    .wire-divider[data-tone="danger"] {
-      --divider-tone: var(--wire-color-danger);
+    .wrn-divider[data-tone="danger"] {
+      --divider-tone: var(--wrn-color-danger);
     }
 
-    .wire-divider[data-size="lg"] {
+    .wrn-divider[data-size="lg"] {
       --divider-thickness: 2px;
     }
 
-    .wire-divider__rule {
+    .wrn-divider__rule {
       flex: 1 1 auto;
       height: var(--divider-thickness);
       background: var(--divider-tone);
     }
 
-    .wire-divider[data-variant="dashed"] .wire-divider__rule {
+    .wrn-divider[data-variant="dashed"] .wrn-divider__rule {
       height: 0;
       background: transparent;
       border-top: var(--divider-thickness) dashed var(--divider-tone);
     }
 
-    .wire-divider[data-variant="dotted"] .wire-divider__rule {
+    .wrn-divider[data-variant="dotted"] .wrn-divider__rule {
       height: 0;
       background: transparent;
       border-top: var(--divider-thickness) dotted var(--divider-tone);
     }
 
-    .wire-divider__label {
+    .wrn-divider__label {
       flex: 0 0 auto;
-      color: var(--wire-color-text-muted);
+      color: var(--wrn-color-text-muted);
       font-size: 0.72rem;
       font-weight: 700;
       letter-spacing: 0.16em;
       text-transform: uppercase;
     }
 
-    .wire-divider[data-orientation="vertical"] {
+    .wrn-divider[data-orientation="vertical"] {
       flex-direction: column;
       width: auto;
       height: 100%;
@@ -121,18 +121,18 @@ component Divider {
       margin-inline: 0.75rem;
     }
 
-    .wire-divider[data-orientation="vertical"] .wire-divider__rule {
+    .wrn-divider[data-orientation="vertical"] .wrn-divider__rule {
       width: var(--divider-thickness);
       height: auto;
     }
 
-    .wire-divider[data-orientation="vertical"][data-variant="dashed"] .wire-divider__rule {
+    .wrn-divider[data-orientation="vertical"][data-variant="dashed"] .wrn-divider__rule {
       width: 0;
       border-top: 0;
       border-left: var(--divider-thickness) dashed var(--divider-tone);
     }
 
-    .wire-divider[data-orientation="vertical"][data-variant="dotted"] .wire-divider__rule {
+    .wrn-divider[data-orientation="vertical"][data-variant="dotted"] .wrn-divider__rule {
       width: 0;
       border-top: 0;
       border-left: var(--divider-thickness) dotted var(--divider-tone);