@globalpayments/vega 2.24.2 → 2.25.0

package/dist/collection/components/vega-grid/vega-grid.css

@@ -4,344 +4,1016 @@
   gap: 0px;
 }
 
+:host(.v-gap-row-0),
+.v-gap-row-0 {
+  row-gap: 0px;
+}
+
+:host(.v-gap-col-0),
+.v-gap-col-0 {
+  column-gap: 0px;
+}
+
 :host(.v-gap-size-0),
 .v-gap-size-0 {
   gap: 0px;
 }
 
+:host(.v-gap-row-size-0),
+.v-gap-row-size-0 {
+  row-gap: 0px;
+}
+
+:host(.v-gap-col-size-0),
+.v-gap-col-size-0 {
+  column-gap: 0px;
+}
+
 :host(.v-gap-size-4),
 .v-gap-size-4 {
   gap: 4px;
 }
 
+:host(.v-gap-row-size-4),
+.v-gap-row-size-4 {
+  row-gap: 4px;
+}
+
+:host(.v-gap-col-size-4),
+.v-gap-col-size-4 {
+  column-gap: 4px;
+}
+
 :host(.v-gap-size-8),
 .v-gap-size-8 {
   gap: 8px;
 }
 
+:host(.v-gap-row-size-8),
+.v-gap-row-size-8 {
+  row-gap: 8px;
+}
+
+:host(.v-gap-col-size-8),
+.v-gap-col-size-8 {
+  column-gap: 8px;
+}
+
 :host(.v-gap-size-12),
 .v-gap-size-12 {
   gap: 12px;
 }
 
+:host(.v-gap-row-size-12),
+.v-gap-row-size-12 {
+  row-gap: 12px;
+}
+
+:host(.v-gap-col-size-12),
+.v-gap-col-size-12 {
+  column-gap: 12px;
+}
+
 :host(.v-gap-size-16),
 .v-gap-size-16 {
   gap: 16px;
 }
 
+:host(.v-gap-row-size-16),
+.v-gap-row-size-16 {
+  row-gap: 16px;
+}
+
+:host(.v-gap-col-size-16),
+.v-gap-col-size-16 {
+  column-gap: 16px;
+}
+
 :host(.v-gap-size-20),
 .v-gap-size-20 {
   gap: 20px;
 }
 
+:host(.v-gap-row-size-20),
+.v-gap-row-size-20 {
+  row-gap: 20px;
+}
+
+:host(.v-gap-col-size-20),
+.v-gap-col-size-20 {
+  column-gap: 20px;
+}
+
 :host(.v-gap-size-24),
 .v-gap-size-24 {
   gap: 24px;
 }
 
+:host(.v-gap-row-size-24),
+.v-gap-row-size-24 {
+  row-gap: 24px;
+}
+
+:host(.v-gap-col-size-24),
+.v-gap-col-size-24 {
+  column-gap: 24px;
+}
+
 :host(.v-gap-size-32),
 .v-gap-size-32 {
   gap: 32px;
 }
 
+:host(.v-gap-row-size-32),
+.v-gap-row-size-32 {
+  row-gap: 32px;
+}
+
+:host(.v-gap-col-size-32),
+.v-gap-col-size-32 {
+  column-gap: 32px;
+}
+
 :host(.v-gap-size-40),
 .v-gap-size-40 {
   gap: 40px;
 }
 
+:host(.v-gap-row-size-40),
+.v-gap-row-size-40 {
+  row-gap: 40px;
+}
+
+:host(.v-gap-col-size-40),
+.v-gap-col-size-40 {
+  column-gap: 40px;
+}
+
 :host(.v-gap-size-48),
 .v-gap-size-48 {
   gap: 48px;
 }
 
+:host(.v-gap-row-size-48),
+.v-gap-row-size-48 {
+  row-gap: 48px;
+}
+
+:host(.v-gap-col-size-48),
+.v-gap-col-size-48 {
+  column-gap: 48px;
+}
+
 :host(.v-gap-size-64),
 .v-gap-size-64 {
   gap: 64px;
 }
 
+:host(.v-gap-row-size-64),
+.v-gap-row-size-64 {
+  row-gap: 64px;
+}
+
+:host(.v-gap-col-size-64),
+.v-gap-col-size-64 {
+  column-gap: 64px;
+}
+
 :host(.v-gap-size-72),
 .v-gap-size-72 {
   gap: 72px;
 }
 
+:host(.v-gap-row-size-72),
+.v-gap-row-size-72 {
+  row-gap: 72px;
+}
+
+:host(.v-gap-col-size-72),
+.v-gap-col-size-72 {
+  column-gap: 72px;
+}
+
 :host(.v-gap-size-80),
 .v-gap-size-80 {
   gap: 80px;
 }
 
+:host(.v-gap-row-size-80),
+.v-gap-row-size-80 {
+  row-gap: 80px;
+}
+
+:host(.v-gap-col-size-80),
+.v-gap-col-size-80 {
+  column-gap: 80px;
+}
+
 :host(.v-gap-size-112),
 .v-gap-size-112 {
   gap: 112px;
 }
 
+:host(.v-gap-row-size-112),
+.v-gap-row-size-112 {
+  row-gap: 112px;
+}
+
+:host(.v-gap-col-size-112),
+.v-gap-col-size-112 {
+  column-gap: 112px;
+}
+
 :host(.v-gap-size-2),
 .v-gap-size-2 {
   gap: 2px;
 }
 
+:host(.v-gap-row-size-2),
+.v-gap-row-size-2 {
+  row-gap: 2px;
+}
+
+:host(.v-gap-col-size-2),
+.v-gap-col-size-2 {
+  column-gap: 2px;
+}
+
 @media (min-width: 320px) {
   :host(.S\:v-gap-0),
   .S\:v-gap-0 {
     gap: 0px;
   }
+  :host(.S\:v-gap-row-0),
+  .S\:v-gap-row-0 {
+    row-gap: 0px;
+  }
+  :host(.S\:v-gap-col-0),
+  .S\:v-gap-col-0 {
+    column-gap: 0px;
+  }
   :host(.S\:v-gap-size-0),
   .S\:v-gap-size-0 {
     gap: 0px;
   }
+  :host(.S\:v-gap-row-size-0),
+  .S\:v-gap-row-size-0 {
+    row-gap: 0px;
+  }
+  :host(.S\:v-gap-col-size-0),
+  .S\:v-gap-col-size-0 {
+    column-gap: 0px;
+  }
   :host(.S\:v-gap-size-4),
   .S\:v-gap-size-4 {
     gap: 4px;
   }
+  :host(.S\:v-gap-row-size-4),
+  .S\:v-gap-row-size-4 {
+    row-gap: 4px;
+  }
+  :host(.S\:v-gap-col-size-4),
+  .S\:v-gap-col-size-4 {
+    column-gap: 4px;
+  }
   :host(.S\:v-gap-size-8),
   .S\:v-gap-size-8 {
     gap: 8px;
   }
+  :host(.S\:v-gap-row-size-8),
+  .S\:v-gap-row-size-8 {
+    row-gap: 8px;
+  }
+  :host(.S\:v-gap-col-size-8),
+  .S\:v-gap-col-size-8 {
+    column-gap: 8px;
+  }
   :host(.S\:v-gap-size-12),
   .S\:v-gap-size-12 {
     gap: 12px;
   }
+  :host(.S\:v-gap-row-size-12),
+  .S\:v-gap-row-size-12 {
+    row-gap: 12px;
+  }
+  :host(.S\:v-gap-col-size-12),
+  .S\:v-gap-col-size-12 {
+    column-gap: 12px;
+  }
   :host(.S\:v-gap-size-16),
   .S\:v-gap-size-16 {
     gap: 16px;
   }
+  :host(.S\:v-gap-row-size-16),
+  .S\:v-gap-row-size-16 {
+    row-gap: 16px;
+  }
+  :host(.S\:v-gap-col-size-16),
+  .S\:v-gap-col-size-16 {
+    column-gap: 16px;
+  }
   :host(.S\:v-gap-size-20),
   .S\:v-gap-size-20 {
     gap: 20px;
   }
+  :host(.S\:v-gap-row-size-20),
+  .S\:v-gap-row-size-20 {
+    row-gap: 20px;
+  }
+  :host(.S\:v-gap-col-size-20),
+  .S\:v-gap-col-size-20 {
+    column-gap: 20px;
+  }
   :host(.S\:v-gap-size-24),
   .S\:v-gap-size-24 {
     gap: 24px;
   }
+  :host(.S\:v-gap-row-size-24),
+  .S\:v-gap-row-size-24 {
+    row-gap: 24px;
+  }
+  :host(.S\:v-gap-col-size-24),
+  .S\:v-gap-col-size-24 {
+    column-gap: 24px;
+  }
   :host(.S\:v-gap-size-32),
   .S\:v-gap-size-32 {
     gap: 32px;
   }
+  :host(.S\:v-gap-row-size-32),
+  .S\:v-gap-row-size-32 {
+    row-gap: 32px;
+  }
+  :host(.S\:v-gap-col-size-32),
+  .S\:v-gap-col-size-32 {
+    column-gap: 32px;
+  }
   :host(.S\:v-gap-size-40),
   .S\:v-gap-size-40 {
     gap: 40px;
   }
+  :host(.S\:v-gap-row-size-40),
+  .S\:v-gap-row-size-40 {
+    row-gap: 40px;
+  }
+  :host(.S\:v-gap-col-size-40),
+  .S\:v-gap-col-size-40 {
+    column-gap: 40px;
+  }
   :host(.S\:v-gap-size-48),
   .S\:v-gap-size-48 {
     gap: 48px;
   }
+  :host(.S\:v-gap-row-size-48),
+  .S\:v-gap-row-size-48 {
+    row-gap: 48px;
+  }
+  :host(.S\:v-gap-col-size-48),
+  .S\:v-gap-col-size-48 {
+    column-gap: 48px;
+  }
   :host(.S\:v-gap-size-64),
   .S\:v-gap-size-64 {
     gap: 64px;
   }
+  :host(.S\:v-gap-row-size-64),
+  .S\:v-gap-row-size-64 {
+    row-gap: 64px;
+  }
+  :host(.S\:v-gap-col-size-64),
+  .S\:v-gap-col-size-64 {
+    column-gap: 64px;
+  }
   :host(.S\:v-gap-size-72),
   .S\:v-gap-size-72 {
     gap: 72px;
   }
+  :host(.S\:v-gap-row-size-72),
+  .S\:v-gap-row-size-72 {
+    row-gap: 72px;
+  }
+  :host(.S\:v-gap-col-size-72),
+  .S\:v-gap-col-size-72 {
+    column-gap: 72px;
+  }
   :host(.S\:v-gap-size-80),
   .S\:v-gap-size-80 {
     gap: 80px;
   }
+  :host(.S\:v-gap-row-size-80),
+  .S\:v-gap-row-size-80 {
+    row-gap: 80px;
+  }
+  :host(.S\:v-gap-col-size-80),
+  .S\:v-gap-col-size-80 {
+    column-gap: 80px;
+  }
   :host(.S\:v-gap-size-112),
   .S\:v-gap-size-112 {
     gap: 112px;
   }
+  :host(.S\:v-gap-row-size-112),
+  .S\:v-gap-row-size-112 {
+    row-gap: 112px;
+  }
+  :host(.S\:v-gap-col-size-112),
+  .S\:v-gap-col-size-112 {
+    column-gap: 112px;
+  }
   :host(.S\:v-gap-size-2),
   .S\:v-gap-size-2 {
     gap: 2px;
   }
+  :host(.S\:v-gap-row-size-2),
+  .S\:v-gap-row-size-2 {
+    row-gap: 2px;
+  }
+  :host(.S\:v-gap-col-size-2),
+  .S\:v-gap-col-size-2 {
+    column-gap: 2px;
+  }
 }
 @media (min-width: 768px) {
   :host(.M\:v-gap-0),
   .M\:v-gap-0 {
     gap: 0px;
   }
+  :host(.M\:v-gap-row-0),
+  .M\:v-gap-row-0 {
+    row-gap: 0px;
+  }
+  :host(.M\:v-gap-col-0),
+  .M\:v-gap-col-0 {
+    column-gap: 0px;
+  }
   :host(.M\:v-gap-size-0),
   .M\:v-gap-size-0 {
     gap: 0px;
   }
+  :host(.M\:v-gap-row-size-0),
+  .M\:v-gap-row-size-0 {
+    row-gap: 0px;
+  }
+  :host(.M\:v-gap-col-size-0),
+  .M\:v-gap-col-size-0 {
+    column-gap: 0px;
+  }
   :host(.M\:v-gap-size-4),
   .M\:v-gap-size-4 {
     gap: 4px;
   }
+  :host(.M\:v-gap-row-size-4),
+  .M\:v-gap-row-size-4 {
+    row-gap: 4px;
+  }
+  :host(.M\:v-gap-col-size-4),
+  .M\:v-gap-col-size-4 {
+    column-gap: 4px;
+  }
   :host(.M\:v-gap-size-8),
   .M\:v-gap-size-8 {
     gap: 8px;
   }
+  :host(.M\:v-gap-row-size-8),
+  .M\:v-gap-row-size-8 {
+    row-gap: 8px;
+  }
+  :host(.M\:v-gap-col-size-8),
+  .M\:v-gap-col-size-8 {
+    column-gap: 8px;
+  }
   :host(.M\:v-gap-size-12),
   .M\:v-gap-size-12 {
     gap: 12px;
   }
+  :host(.M\:v-gap-row-size-12),
+  .M\:v-gap-row-size-12 {
+    row-gap: 12px;
+  }
+  :host(.M\:v-gap-col-size-12),
+  .M\:v-gap-col-size-12 {
+    column-gap: 12px;
+  }
   :host(.M\:v-gap-size-16),
   .M\:v-gap-size-16 {
     gap: 16px;
   }
+  :host(.M\:v-gap-row-size-16),
+  .M\:v-gap-row-size-16 {
+    row-gap: 16px;
+  }
+  :host(.M\:v-gap-col-size-16),
+  .M\:v-gap-col-size-16 {
+    column-gap: 16px;
+  }
   :host(.M\:v-gap-size-20),
   .M\:v-gap-size-20 {
     gap: 20px;
   }
+  :host(.M\:v-gap-row-size-20),
+  .M\:v-gap-row-size-20 {
+    row-gap: 20px;
+  }
+  :host(.M\:v-gap-col-size-20),
+  .M\:v-gap-col-size-20 {
+    column-gap: 20px;
+  }
   :host(.M\:v-gap-size-24),
   .M\:v-gap-size-24 {
     gap: 24px;
   }
+  :host(.M\:v-gap-row-size-24),
+  .M\:v-gap-row-size-24 {
+    row-gap: 24px;
+  }
+  :host(.M\:v-gap-col-size-24),
+  .M\:v-gap-col-size-24 {
+    column-gap: 24px;
+  }
   :host(.M\:v-gap-size-32),
   .M\:v-gap-size-32 {
     gap: 32px;
   }
+  :host(.M\:v-gap-row-size-32),
+  .M\:v-gap-row-size-32 {
+    row-gap: 32px;
+  }
+  :host(.M\:v-gap-col-size-32),
+  .M\:v-gap-col-size-32 {
+    column-gap: 32px;
+  }
   :host(.M\:v-gap-size-40),
   .M\:v-gap-size-40 {
     gap: 40px;
   }
+  :host(.M\:v-gap-row-size-40),
+  .M\:v-gap-row-size-40 {
+    row-gap: 40px;
+  }
+  :host(.M\:v-gap-col-size-40),
+  .M\:v-gap-col-size-40 {
+    column-gap: 40px;
+  }
   :host(.M\:v-gap-size-48),
   .M\:v-gap-size-48 {
     gap: 48px;
   }
+  :host(.M\:v-gap-row-size-48),
+  .M\:v-gap-row-size-48 {
+    row-gap: 48px;
+  }
+  :host(.M\:v-gap-col-size-48),
+  .M\:v-gap-col-size-48 {
+    column-gap: 48px;
+  }
   :host(.M\:v-gap-size-64),
   .M\:v-gap-size-64 {
     gap: 64px;
   }
+  :host(.M\:v-gap-row-size-64),
+  .M\:v-gap-row-size-64 {
+    row-gap: 64px;
+  }
+  :host(.M\:v-gap-col-size-64),
+  .M\:v-gap-col-size-64 {
+    column-gap: 64px;
+  }
   :host(.M\:v-gap-size-72),
   .M\:v-gap-size-72 {
     gap: 72px;
   }
+  :host(.M\:v-gap-row-size-72),
+  .M\:v-gap-row-size-72 {
+    row-gap: 72px;
+  }
+  :host(.M\:v-gap-col-size-72),
+  .M\:v-gap-col-size-72 {
+    column-gap: 72px;
+  }
   :host(.M\:v-gap-size-80),
   .M\:v-gap-size-80 {
     gap: 80px;
   }
+  :host(.M\:v-gap-row-size-80),
+  .M\:v-gap-row-size-80 {
+    row-gap: 80px;
+  }
+  :host(.M\:v-gap-col-size-80),
+  .M\:v-gap-col-size-80 {
+    column-gap: 80px;
+  }
   :host(.M\:v-gap-size-112),
   .M\:v-gap-size-112 {
     gap: 112px;
   }
+  :host(.M\:v-gap-row-size-112),
+  .M\:v-gap-row-size-112 {
+    row-gap: 112px;
+  }
+  :host(.M\:v-gap-col-size-112),
+  .M\:v-gap-col-size-112 {
+    column-gap: 112px;
+  }
   :host(.M\:v-gap-size-2),
   .M\:v-gap-size-2 {
     gap: 2px;
   }
+  :host(.M\:v-gap-row-size-2),
+  .M\:v-gap-row-size-2 {
+    row-gap: 2px;
+  }
+  :host(.M\:v-gap-col-size-2),
+  .M\:v-gap-col-size-2 {
+    column-gap: 2px;
+  }
 }
 @media (min-width: 1024px) {
   :host(.L\:v-gap-0),
   .L\:v-gap-0 {
     gap: 0px;
   }
+  :host(.L\:v-gap-row-0),
+  .L\:v-gap-row-0 {
+    row-gap: 0px;
+  }
+  :host(.L\:v-gap-col-0),
+  .L\:v-gap-col-0 {
+    column-gap: 0px;
+  }
   :host(.L\:v-gap-size-0),
   .L\:v-gap-size-0 {
     gap: 0px;
   }
+  :host(.L\:v-gap-row-size-0),
+  .L\:v-gap-row-size-0 {
+    row-gap: 0px;
+  }
+  :host(.L\:v-gap-col-size-0),
+  .L\:v-gap-col-size-0 {
+    column-gap: 0px;
+  }
   :host(.L\:v-gap-size-4),
   .L\:v-gap-size-4 {
     gap: 4px;
   }
+  :host(.L\:v-gap-row-size-4),
+  .L\:v-gap-row-size-4 {
+    row-gap: 4px;
+  }
+  :host(.L\:v-gap-col-size-4),
+  .L\:v-gap-col-size-4 {
+    column-gap: 4px;
+  }
   :host(.L\:v-gap-size-8),
   .L\:v-gap-size-8 {
     gap: 8px;
   }
+  :host(.L\:v-gap-row-size-8),
+  .L\:v-gap-row-size-8 {
+    row-gap: 8px;
+  }
+  :host(.L\:v-gap-col-size-8),
+  .L\:v-gap-col-size-8 {
+    column-gap: 8px;
+  }
   :host(.L\:v-gap-size-12),
   .L\:v-gap-size-12 {
     gap: 12px;
   }
+  :host(.L\:v-gap-row-size-12),
+  .L\:v-gap-row-size-12 {
+    row-gap: 12px;
+  }
+  :host(.L\:v-gap-col-size-12),
+  .L\:v-gap-col-size-12 {
+    column-gap: 12px;
+  }
   :host(.L\:v-gap-size-16),
   .L\:v-gap-size-16 {
     gap: 16px;
   }
+  :host(.L\:v-gap-row-size-16),
+  .L\:v-gap-row-size-16 {
+    row-gap: 16px;
+  }
+  :host(.L\:v-gap-col-size-16),
+  .L\:v-gap-col-size-16 {
+    column-gap: 16px;
+  }
   :host(.L\:v-gap-size-20),
   .L\:v-gap-size-20 {
     gap: 20px;
   }
+  :host(.L\:v-gap-row-size-20),
+  .L\:v-gap-row-size-20 {
+    row-gap: 20px;
+  }
+  :host(.L\:v-gap-col-size-20),
+  .L\:v-gap-col-size-20 {
+    column-gap: 20px;
+  }
   :host(.L\:v-gap-size-24),
   .L\:v-gap-size-24 {
     gap: 24px;
   }
+  :host(.L\:v-gap-row-size-24),
+  .L\:v-gap-row-size-24 {
+    row-gap: 24px;
+  }
+  :host(.L\:v-gap-col-size-24),
+  .L\:v-gap-col-size-24 {
+    column-gap: 24px;
+  }
   :host(.L\:v-gap-size-32),
   .L\:v-gap-size-32 {
     gap: 32px;
   }
+  :host(.L\:v-gap-row-size-32),
+  .L\:v-gap-row-size-32 {
+    row-gap: 32px;
+  }
+  :host(.L\:v-gap-col-size-32),
+  .L\:v-gap-col-size-32 {
+    column-gap: 32px;
+  }
   :host(.L\:v-gap-size-40),
   .L\:v-gap-size-40 {
     gap: 40px;
   }
+  :host(.L\:v-gap-row-size-40),
+  .L\:v-gap-row-size-40 {
+    row-gap: 40px;
+  }
+  :host(.L\:v-gap-col-size-40),
+  .L\:v-gap-col-size-40 {
+    column-gap: 40px;
+  }
   :host(.L\:v-gap-size-48),
   .L\:v-gap-size-48 {
     gap: 48px;
   }
+  :host(.L\:v-gap-row-size-48),
+  .L\:v-gap-row-size-48 {
+    row-gap: 48px;
+  }
+  :host(.L\:v-gap-col-size-48),
+  .L\:v-gap-col-size-48 {
+    column-gap: 48px;
+  }
   :host(.L\:v-gap-size-64),
   .L\:v-gap-size-64 {
     gap: 64px;
   }
+  :host(.L\:v-gap-row-size-64),
+  .L\:v-gap-row-size-64 {
+    row-gap: 64px;
+  }
+  :host(.L\:v-gap-col-size-64),
+  .L\:v-gap-col-size-64 {
+    column-gap: 64px;
+  }
   :host(.L\:v-gap-size-72),
   .L\:v-gap-size-72 {
     gap: 72px;
   }
+  :host(.L\:v-gap-row-size-72),
+  .L\:v-gap-row-size-72 {
+    row-gap: 72px;
+  }
+  :host(.L\:v-gap-col-size-72),
+  .L\:v-gap-col-size-72 {
+    column-gap: 72px;
+  }
   :host(.L\:v-gap-size-80),
   .L\:v-gap-size-80 {
     gap: 80px;
   }
+  :host(.L\:v-gap-row-size-80),
+  .L\:v-gap-row-size-80 {
+    row-gap: 80px;
+  }
+  :host(.L\:v-gap-col-size-80),
+  .L\:v-gap-col-size-80 {
+    column-gap: 80px;
+  }
   :host(.L\:v-gap-size-112),
   .L\:v-gap-size-112 {
     gap: 112px;
   }
+  :host(.L\:v-gap-row-size-112),
+  .L\:v-gap-row-size-112 {
+    row-gap: 112px;
+  }
+  :host(.L\:v-gap-col-size-112),
+  .L\:v-gap-col-size-112 {
+    column-gap: 112px;
+  }
   :host(.L\:v-gap-size-2),
   .L\:v-gap-size-2 {
     gap: 2px;
   }
+  :host(.L\:v-gap-row-size-2),
+  .L\:v-gap-row-size-2 {
+    row-gap: 2px;
+  }
+  :host(.L\:v-gap-col-size-2),
+  .L\:v-gap-col-size-2 {
+    column-gap: 2px;
+  }
 }
 @media (min-width: 1440px) {
   :host(.XL\:v-gap-0),
   .XL\:v-gap-0 {
     gap: 0px;
   }
+  :host(.XL\:v-gap-row-0),
+  .XL\:v-gap-row-0 {
+    row-gap: 0px;
+  }
+  :host(.XL\:v-gap-col-0),
+  .XL\:v-gap-col-0 {
+    column-gap: 0px;
+  }
   :host(.XL\:v-gap-size-0),
   .XL\:v-gap-size-0 {
     gap: 0px;
   }
+  :host(.XL\:v-gap-row-size-0),
+  .XL\:v-gap-row-size-0 {
+    row-gap: 0px;
+  }
+  :host(.XL\:v-gap-col-size-0),
+  .XL\:v-gap-col-size-0 {
+    column-gap: 0px;
+  }
   :host(.XL\:v-gap-size-4),
   .XL\:v-gap-size-4 {
     gap: 4px;
   }
+  :host(.XL\:v-gap-row-size-4),
+  .XL\:v-gap-row-size-4 {
+    row-gap: 4px;
+  }
+  :host(.XL\:v-gap-col-size-4),
+  .XL\:v-gap-col-size-4 {
+    column-gap: 4px;
+  }
   :host(.XL\:v-gap-size-8),
   .XL\:v-gap-size-8 {
     gap: 8px;
   }
+  :host(.XL\:v-gap-row-size-8),
+  .XL\:v-gap-row-size-8 {
+    row-gap: 8px;
+  }
+  :host(.XL\:v-gap-col-size-8),
+  .XL\:v-gap-col-size-8 {
+    column-gap: 8px;
+  }
   :host(.XL\:v-gap-size-12),
   .XL\:v-gap-size-12 {
     gap: 12px;
   }
+  :host(.XL\:v-gap-row-size-12),
+  .XL\:v-gap-row-size-12 {
+    row-gap: 12px;
+  }
+  :host(.XL\:v-gap-col-size-12),
+  .XL\:v-gap-col-size-12 {
+    column-gap: 12px;
+  }
   :host(.XL\:v-gap-size-16),
   .XL\:v-gap-size-16 {
     gap: 16px;
   }
+  :host(.XL\:v-gap-row-size-16),
+  .XL\:v-gap-row-size-16 {
+    row-gap: 16px;
+  }
+  :host(.XL\:v-gap-col-size-16),
+  .XL\:v-gap-col-size-16 {
+    column-gap: 16px;
+  }
   :host(.XL\:v-gap-size-20),
   .XL\:v-gap-size-20 {
     gap: 20px;
   }
+  :host(.XL\:v-gap-row-size-20),
+  .XL\:v-gap-row-size-20 {
+    row-gap: 20px;
+  }
+  :host(.XL\:v-gap-col-size-20),
+  .XL\:v-gap-col-size-20 {
+    column-gap: 20px;
+  }
   :host(.XL\:v-gap-size-24),
   .XL\:v-gap-size-24 {
     gap: 24px;
   }
+  :host(.XL\:v-gap-row-size-24),
+  .XL\:v-gap-row-size-24 {
+    row-gap: 24px;
+  }
+  :host(.XL\:v-gap-col-size-24),
+  .XL\:v-gap-col-size-24 {
+    column-gap: 24px;
+  }
   :host(.XL\:v-gap-size-32),
   .XL\:v-gap-size-32 {
     gap: 32px;
   }
+  :host(.XL\:v-gap-row-size-32),
+  .XL\:v-gap-row-size-32 {
+    row-gap: 32px;
+  }
+  :host(.XL\:v-gap-col-size-32),
+  .XL\:v-gap-col-size-32 {
+    column-gap: 32px;
+  }
   :host(.XL\:v-gap-size-40),
   .XL\:v-gap-size-40 {
     gap: 40px;
   }
+  :host(.XL\:v-gap-row-size-40),
+  .XL\:v-gap-row-size-40 {
+    row-gap: 40px;
+  }
+  :host(.XL\:v-gap-col-size-40),
+  .XL\:v-gap-col-size-40 {
+    column-gap: 40px;
+  }
   :host(.XL\:v-gap-size-48),
   .XL\:v-gap-size-48 {
     gap: 48px;
   }
+  :host(.XL\:v-gap-row-size-48),
+  .XL\:v-gap-row-size-48 {
+    row-gap: 48px;
+  }
+  :host(.XL\:v-gap-col-size-48),
+  .XL\:v-gap-col-size-48 {
+    column-gap: 48px;
+  }
   :host(.XL\:v-gap-size-64),
   .XL\:v-gap-size-64 {
     gap: 64px;
   }
+  :host(.XL\:v-gap-row-size-64),
+  .XL\:v-gap-row-size-64 {
+    row-gap: 64px;
+  }
+  :host(.XL\:v-gap-col-size-64),
+  .XL\:v-gap-col-size-64 {
+    column-gap: 64px;
+  }
   :host(.XL\:v-gap-size-72),
   .XL\:v-gap-size-72 {
     gap: 72px;
   }
+  :host(.XL\:v-gap-row-size-72),
+  .XL\:v-gap-row-size-72 {
+    row-gap: 72px;
+  }
+  :host(.XL\:v-gap-col-size-72),
+  .XL\:v-gap-col-size-72 {
+    column-gap: 72px;
+  }
   :host(.XL\:v-gap-size-80),
   .XL\:v-gap-size-80 {
     gap: 80px;
   }
+  :host(.XL\:v-gap-row-size-80),
+  .XL\:v-gap-row-size-80 {
+    row-gap: 80px;
+  }
+  :host(.XL\:v-gap-col-size-80),
+  .XL\:v-gap-col-size-80 {
+    column-gap: 80px;
+  }
   :host(.XL\:v-gap-size-112),
   .XL\:v-gap-size-112 {
     gap: 112px;
   }
+  :host(.XL\:v-gap-row-size-112),
+  .XL\:v-gap-row-size-112 {
+    row-gap: 112px;
+  }
+  :host(.XL\:v-gap-col-size-112),
+  .XL\:v-gap-col-size-112 {
+    column-gap: 112px;
+  }
   :host(.XL\:v-gap-size-2),
   .XL\:v-gap-size-2 {
     gap: 2px;
   }
+  :host(.XL\:v-gap-row-size-2),
+  .XL\:v-gap-row-size-2 {
+    row-gap: 2px;
+  }
+  :host(.XL\:v-gap-col-size-2),
+  .XL\:v-gap-col-size-2 {
+    column-gap: 2px;
+  }
 }
 /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
 /**