@apolitical/component-library 8.3.18 → 8.3.20

package/styles/uclasses/uclasses.scss

@@ -1,34 +1,32 @@
 @import '../variables';
 @import '../mixins';
 
-//  add a prefix to all the utility classes
-$util-prefix: 'u-' !default;
 $font-size-s: 0.75rem;
 $font-size: 0.875rem;
 $font-size-md: 1rem;
 
 // form elements
-.#{$util-prefix}text-align-left {
+.u-text-align-left {
   text-align: left;
 }
 
-.#{$util-prefix}margin-bottom-half {
+.u-margin-bottom-half {
   margin-bottom: 0.5rem;
 }
 
-.#{$util-prefix}margin-bottom-one {
+.u-margin-bottom-one {
   margin-bottom: 1rem;
 }
 
-.#{$util-prefix}margin-bottom-one-point-five {
+.u-margin-bottom-one-point-five {
   margin-bottom: 1.5rem;
 }
 
-.#{$util-prefix}display-block {
+.u-display-block {
   display: block;
 }
 
-.#{$util-prefix}text-small {
+.u-text-small {
   font-size: $font-size-s;
   line-height: $font-size-md;
 
@@ -38,963 +36,1217 @@ $font-size-md: 1rem;
 }
 
 // common
-.#{$util-prefix}margin-y-two-point-five {
+.u-margin-y-two-point-five {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
 }
 
-.#{$util-prefix}padding-two-point-five {
+.u-padding-two-point-five {
   padding: 2.5rem;
 }
 
 // typography
-.#{$util-prefix}grey-text {
+.u-grey-text {
   color: get-map($default-colors, 'n600');
 }
 
-.#{$util-prefix}error-text {
+.u-error-text {
   color: get-map($default-colors, 'error600');
 }
 
 // Background
-.#{$util-prefix}bg-n50 {
+.u-bg-n50 {
   background-color: get-map($default-colors, 'n50');
 }
 
 // variables
 // flexbox
-.#{$util-prefix}flex {
+.u-flex {
   display: flex;
 }
-.#{$util-prefix}inline-flex {
+
+.u-inline-flex {
   display: inline-flex;
 }
-.#{$util-prefix}flex-wrap {
+
+.u-flex-wrap {
   flex-wrap: wrap;
 }
-.#{$util-prefix}flex-nowrap {
+
+.u-flex-nowrap {
   flex-wrap: nowrap;
 }
-.#{$util-prefix}flex-col {
+
+.u-flex-col {
   flex-direction: column;
 }
-.#{$util-prefix}flex-col-reverse {
+
+.u-flex-col-reverse {
   flex-direction: column-reverse;
 }
-.#{$util-prefix}flex-row {
+
+.u-flex-row {
   flex-direction: row;
 }
-.#{$util-prefix}flex-row-reverse {
+
+.u-flex-row-reverse {
   flex-direction: row-reverse;
 }
-.#{$util-prefix}flex-center {
+
+.u-flex-center {
   justify-content: center;
   align-items: center;
 }
-.#{$util-prefix}flex-grow {
+
+.u-flex-grow {
   flex-grow: 1;
 }
-.#{$util-prefix}flex-grow-0 {
+
+.u-flex-grow-0 {
   flex-grow: 0;
 }
-.#{$util-prefix}flex-shrink {
+
+.u-flex-shrink {
   flex-shrink: 1;
 }
-.#{$util-prefix}flex-shrink-0 {
+
+.u-flex-shrink-0 {
   flex-shrink: 0;
 }
-.#{$util-prefix}flex-basis-0 {
+
+.u-flex-basis-0 {
   flex-basis: 0;
 }
 
 // justify-content
-.#{$util-prefix}justify-start {
+.u-justify-start {
   justify-content: flex-start;
 }
-.#{$util-prefix}justify-end {
+
+.u-justify-end {
   justify-content: flex-end;
 }
-.#{$util-prefix}justify-center {
+
+.u-justify-center {
   justify-content: center;
 }
-.#{$util-prefix}justify-between {
+
+.u-justify-between {
   justify-content: space-between;
 }
 
 // align-items
-.#{$util-prefix}items-center {
+.u-items-center {
   align-items: center;
 }
-.#{$util-prefix}items-start {
+
+.u-items-start {
   align-items: start;
 }
-.#{$util-prefix}items-end {
+
+.u-items-end {
   align-items: end;
 }
-.#{$util-prefix}items-baseline {
+
+.u-items-baseline {
   align-items: baseline;
 }
-.#{$util-prefix}items-stretch {
+
+.u-items-stretch {
   align-items: stretch;
 }
 
 // align-content
-.#{$util-prefix}content-start {
+.u-content-start {
   align-content: start;
 }
-.#{$util-prefix}content-end {
+
+.u-content-end {
   align-content: end;
 }
-.#{$util-prefix}content-center {
+
+.u-content-center {
   align-content: center;
 }
-.#{$util-prefix}content-between {
+
+.u-content-between {
   align-content: space-between;
 }
 
 // display
-.#{$util-prefix}block {
+.u-block {
   display: block;
 }
-.#{$util-prefix}inline-block {
+
+.u-inline-block {
   display: inline-block;
 }
-.#{$util-prefix}inline {
+
+.u-inline {
   display: inline;
 }
-.#{$util-prefix}contents {
+
+.u-contents {
   display: contents;
 }
-.#{$util-prefix}grid {
+
+.u-grid {
   display: grid;
 }
-.#{$util-prefix}inline-grid {
+
+.u-inline-grid {
   display: inline-grid;
 }
-.#{$util-prefix}hidden {
+
+.u-hidden {
   display: none;
 }
 
 // margin
-.#{$util-prefix}m-auto {
+.u-m-auto {
   margin: auto;
 }
-.#{$util-prefix}m-0 {
+
+.u-m-0 {
   margin: 0;
 }
-.#{$util-prefix}my-auto {
+
+.u-my-auto {
   margin-top: auto;
   margin-bottom: auto;
 }
-.#{$util-prefix}my-0 {
+
+.u-my-0 {
   margin-top: 0;
   margin-bottom: 0;
 }
-.#{$util-prefix}mx-auto {
+
+.u-mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
-.#{$util-prefix}mx-0 {
+
+.u-mx-0 {
   margin-left: 0;
   margin-right: 0;
 }
-.#{$util-prefix}mt-auto {
+
+.u-mt-auto {
   margin-top: auto;
 }
-.#{$util-prefix}mt-0 {
+
+.u-mt-0 {
   margin-top: 0;
 }
-.#{$util-prefix}mt-10 {
+
+.u-mt-10 {
   margin-top: 2.5rem; /* 40px */
 }
-.#{$util-prefix}mr-auto {
+
+.u-mr-auto {
   margin-right: auto;
 }
-.#{$util-prefix}mr-0 {
+
+.u-mr-0 {
   margin-right: 0;
 }
-.#{$util-prefix}mb-auto {
+
+.u-mb-auto {
   margin-bottom: auto;
 }
-.#{$util-prefix}mb-0 {
+
+.u-mb-0 {
   margin-bottom: 0;
 }
-.#{$util-prefix}ml-auto {
+
+.u-ml-auto {
   margin-left: auto;
 }
-.#{$util-prefix}ml-0 {
+
+.u-ml-0 {
   margin-left: 0;
 }
 
 // padding
-.#{$util-prefix}py-0 {
+.u-py-0 {
   padding-top: 0;
   padding-bottom: 0;
 }
-.#{$util-prefix}py-10 {
+
+.u-py-10 {
   padding-top: 2.5rem; /* 40px */
   padding-bottom: 2.5rem; /* 40px */
 }
-.#{$util-prefix}px-0 {
+
+.u-px-0 {
   padding-left: 0;
   padding-right: 0;
 }
-.#{$util-prefix}pt-0 {
+
+.u-pt-0 {
   padding-top: 0;
 }
-.#{$util-prefix}pr-0 {
+
+.u-pr-0 {
   padding-right: 0;
 }
-.#{$util-prefix}pb-0 {
+
+.u-pb-0 {
   padding-bottom: 0;
 }
-.#{$util-prefix}pl-0 {
+
+.u-pl-0 {
   padding-left: 0;
 }
 
 // vertical-align
-.#{$util-prefix}align-baseline {
+.u-align-baseline {
   vertical-align: baseline;
 }
-.#{$util-prefix}align-sub {
+
+.u-align-sub {
   vertical-align: sub;
 }
-.#{$util-prefix}align-super {
+
+.u-align-super {
   vertical-align: super;
 }
-.#{$util-prefix}align-text-top {
+
+.u-align-text-top {
   vertical-align: text-top;
 }
-.#{$util-prefix}align-text-bottom {
+
+.u-align-text-bottom {
   vertical-align: text-bottom;
 }
-.#{$util-prefix}align-top {
+
+.u-align-top {
   vertical-align: top;
 }
-.#{$util-prefix}align-middle {
+
+.u-align-middle {
   vertical-align: middle;
 }
-.#{$util-prefix}align-bottom {
+
+.u-align-bottom {
   vertical-align: bottom;
 }
 
 // typography
-.#{$util-prefix}truncate,
-.#{$util-prefix}text-truncate {
+.u-truncate,
+.u-text-truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.#{$util-prefix}text-replace {
+
+.u-text-replace {
   overflow: hidden;
   color: transparent;
   text-indent: 100%;
   white-space: nowrap;
 }
-.#{$util-prefix}break-word {
+
+.u-break-word {
   overflow-wrap: break-word;
   min-width: 0;
 }
 
 // text-transform
-.#{$util-prefix}uppercase {
+.u-uppercase {
   text-transform: uppercase;
 }
-.#{$util-prefix}capitalize {
+
+.u-capitalize {
   text-transform: capitalize;
 }
 
 // text-align
-.#{$util-prefix}text-center {
+.u-text-center {
   text-align: center;
 }
-.#{$util-prefix}text-left {
+
+.u-text-left {
   text-align: left;
 }
-.#{$util-prefix}text-right {
+
+.u-text-right {
   text-align: right;
 }
-.#{$util-prefix}text-justify {
+
+.u-text-justify {
   text-align: justify;
 }
 
 // text-decoration
-.#{$util-prefix}line-through {
+.u-line-through {
   text-decoration: line-through;
 }
-.#{$util-prefix}underline {
+
+.u-underline {
   text-decoration: underline;
 }
-.#{$util-prefix}text-decoration-none {
+
+.u-text-decoration-none {
   text-decoration: none;
 }
 
 // cursor
-.#{$util-prefix}cursor-pointer {
+.u-cursor-pointer {
   cursor: pointer;
 }
-.#{$util-prefix}cursor-default {
+
+.u-cursor-default {
   cursor: default;
 }
 
 // pointer-events
-.#{$util-prefix}pointer-events-auto {
+.u-pointer-events-auto {
   pointer-events: auto;
 }
-.#{$util-prefix}pointer-events-none {
+
+.u-pointer-events-none {
   pointer-events: none;
 }
 
 // min-height
-.#{$util-prefix}min-h-0 {
+.u-min-h-0 {
   min-height: 0;
 }
-.#{$util-prefix}min-h-full {
+
+.u-min-h-full {
   min-height: 100%;
 }
-.#{$util-prefix}min-h-screen {
+
+.u-min-h-screen {
   min-height: 100vh;
 }
 
 // max-height
-.#{$util-prefix}max-h-full {
+.u-max-h-full {
   max-height: 100%;
 }
-.#{$util-prefix}max-h-screen {
+
+.u-max-h-screen {
   max-height: 100vh;
 }
 
 // position
-.#{$util-prefix}relative {
+.u-relative {
   position: relative;
 }
-.#{$util-prefix}absolute {
+
+.u-absolute {
   position: absolute;
 }
-.#{$util-prefix}fixed {
+
+.u-fixed {
   position: fixed;
 }
-.#{$util-prefix}sticky {
+
+.u-sticky {
   position: sticky;
 }
-.#{$util-prefix}static {
+
+.u-static {
   position: static;
 }
-.#{$util-prefix}inset-0 {
+
+.u-inset-0 {
   inset: 0;
 }
 
 // z-index
-.#{$util-prefix}z-0 {
+.u-z-0 {
   z-index: 0;
 }
-.#{$util-prefix}z-1 {
+
+.u-z-1 {
   z-index: 1;
 }
-.#{$util-prefix}z-2 {
+
+.u-z-2 {
   z-index: 2;
 }
-.#{$util-prefix}z-3 {
+
+.u-z-3 {
   z-index: 3;
 }
 
 // overflow
-.#{$util-prefix}overflow-visible {
+.u-overflow-visible {
   overflow: visible;
 }
-.#{$util-prefix}overflow-hidden {
+
+.u-overflow-hidden {
   overflow: hidden;
 }
-.#{$util-prefix}overflow-x-hidden {
+
+.u-overflow-x-hidden {
   overflow-x: hidden;
 }
-.#{$util-prefix}overflow-y-hidden {
+
+.u-overflow-y-hidden {
   overflow-y: hidden;
 }
-.#{$util-prefix}overflow-clip {
+
+.u-overflow-clip {
   overflow: clip;
 }
-.#{$util-prefix}overflow-x-clip {
+
+.u-overflow-x-clip {
   overflow-x: clip;
 }
-.#{$util-prefix}overflow-y-clip {
+
+.u-overflow-y-clip {
   overflow-y: clip;
 }
-.#{$util-prefix}overflow-auto {
+
+.u-overflow-auto {
   overflow: auto;
 }
-.#{$util-prefix}momentum-scrolling {
+
+.u-momentum-scrolling {
   -webkit-overflow-scrolling: touch;
 }
 
 // overscroll-behavior
-.#{$util-prefix}overscroll-contain {
+.u-overscroll-contain {
   overscroll-behavior: contain;
 }
 
 // scroll behavior
-.#{$util-prefix}scroll-smooth {
+.u-scroll-smooth {
   scroll-behavior: smooth;
 }
 
 // opacity
-.#{$util-prefix}opacity-0 {
+.u-opacity-0 {
   opacity: 0;
 }
-.#{$util-prefix}opacity-25 {
+
+.u-opacity-25 {
   opacity: 0.25;
 }
-.#{$util-prefix}opacity-50 {
+
+.u-opacity-50 {
   opacity: 0.5;
 }
-.#{$util-prefix}opacity-75 {
+
+.u-opacity-75 {
   opacity: 0.75;
 }
-.#{$util-prefix}opacity-100 {
+
+.u-opacity-100 {
   opacity: 1;
 }
-.#{$util-prefix}border-dotted {
+
+.u-border-dotted {
   border-style: dotted;
 }
-.#{$util-prefix}border-dashed {
+
+.u-border-dashed {
   border-style: dashed;
 }
 
 // object-fit
-.#{$util-prefix}object-contain {
+.u-object-contain {
   object-fit: contain;
 }
-.#{$util-prefix}object-cover {
+
+.u-object-cover {
   object-fit: cover;
 }
 
 // transform
-.#{$util-prefix}rotate-90 {
+.u-rotate-90 {
   rotate: 90deg;
 }
-.#{$util-prefix}rotate-180 {
+
+.u-rotate-180 {
   rotate: 180deg;
 }
-.#{$util-prefix}rotate-270 {
+
+.u-rotate-270 {
   rotate: 270deg;
 }
 
 // transform-origin
-.#{$util-prefix}origin-center {
+.u-origin-center {
   transform-origin: center;
 }
-.#{$util-prefix}origin-top {
+
+.u-origin-top {
   transform-origin: center top;
 }
-.#{$util-prefix}origin-right {
+
+.u-origin-right {
   transform-origin: right center;
 }
-.#{$util-prefix}origin-bottom {
+
+.u-origin-bottom {
   transform-origin: center bottom;
 }
-.#{$util-prefix}origin-left {
+
+.u-origin-left {
   transform-origin: left center;
 }
-.#{$util-prefix}origin-top-left {
+
+.u-origin-top-left {
   transform-origin: left top;
 }
-.#{$util-prefix}origin-top-right {
+
+.u-origin-top-right {
   transform-origin: right top;
 }
-.#{$util-prefix}origin-bottom-left {
+
+.u-origin-bottom-left {
   transform-origin: left bottom;
 }
-.#{$util-prefix}origin-bottom-right {
+
+.u-origin-bottom-right {
   transform-origin: right bottom;
 }
 
 // visibility
-.#{$util-prefix}visible {
+.u-visible {
   visibility: visible;
 }
-.#{$util-prefix}invisible {
+
+.u-invisible {
   visibility: hidden;
 }
 
 // width
-.#{$util-prefix}w-full {
+.u-w-full {
   width: 100%;
 }
 
 // max-width
-.#{$util-prefix}max-w-0 {
+.u-max-w-0 {
   max-width: 0;
 }
-.#{$util-prefix}max-w-px {
+
+.u-max-w-px {
   max-width: 1px;
 }
-.#{$util-prefix}max-w-0-5 {
+
+.u-max-w-0-5 {
   max-width: 0.125rem; /* 2px */
 }
-.#{$util-prefix}max-w-1 {
+
+.u-max-w-1 {
   max-width: 0.25rem; /* 4px */
 }
-.#{$util-prefix}max-w-1-5 {
+
+.u-max-w-1-5 {
   max-width: 0.375rem; /* 6px */
 }
-.#{$util-prefix}max-w-2 {
+
+.u-max-w-2 {
   max-width: 0.5rem; /* 8px */
 }
-.#{$util-prefix}max-w-2-5 {
+
+.u-max-w-2-5 {
   max-width: 0.625rem; /* 10px */
 }
-.#{$util-prefix}max-w-3 {
+
+.u-max-w-3 {
   max-width: 0.75rem; /* 12px */
 }
-.#{$util-prefix}max-w-3-5 {
+
+.u-max-w-3-5 {
   max-width: 0.875rem; /* 14px */
 }
-.#{$util-prefix}max-w-4 {
+
+.u-max-w-4 {
   max-width: 1rem; /* 16px */
 }
-.#{$util-prefix}max-w-5 {
+
+.u-max-w-5 {
   max-width: 1.25rem; /* 20px */
 }
-.#{$util-prefix}max-w-6 {
+
+.u-max-w-6 {
   max-width: 1.5rem; /* 24px */
 }
-.#{$util-prefix}max-w-7 {
+
+.u-max-w-7 {
   max-width: 1.75rem; /* 28px */
 }
-.#{$util-prefix}max-w-8 {
+
+.u-max-w-8 {
   max-width: 2rem; /* 32px */
 }
-.#{$util-prefix}max-w-9 {
+
+.u-max-w-9 {
   max-width: 2.25rem; /* 36px */
 }
-.#{$util-prefix}max-w-10 {
+
+.u-max-w-10 {
   max-width: 2.5rem; /* 40px */
 }
-.#{$util-prefix}max-w-11 {
+
+.u-max-w-11 {
   max-width: 2.75rem; /* 44px */
 }
-.#{$util-prefix}max-w-12 {
+
+.u-max-w-12 {
   max-width: 3rem; /* 48px */
 }
-.#{$util-prefix}max-w-14 {
+
+.u-max-w-14 {
   max-width: 3.5rem; /* 56px */
 }
-.#{$util-prefix}max-w-16 {
+
+.u-max-w-16 {
   max-width: 4rem; /* 64px */
 }
-.#{$util-prefix}max-w-20 {
+
+.u-max-w-20 {
   max-width: 5rem; /* 80px */
 }
-.#{$util-prefix}max-w-24 {
+
+.u-max-w-24 {
   max-width: 6rem; /* 96px */
 }
-.#{$util-prefix}max-w-28 {
+
+.u-max-w-28 {
   max-width: 7rem; /* 112px */
 }
-.#{$util-prefix}max-w-32 {
+
+.u-max-w-32 {
   max-width: 8rem; /* 128px */
 }
-.#{$util-prefix}max-w-36 {
+
+.u-max-w-36 {
   max-width: 9rem; /* 144px */
 }
-.#{$util-prefix}max-w-40 {
+
+.u-max-w-40 {
   max-width: 10rem; /* 160px */
 }
-.#{$util-prefix}max-w-44 {
+
+.u-max-w-44 {
   max-width: 11rem; /* 176px */
 }
-.#{$util-prefix}max-w-48 {
+
+.u-max-w-48 {
   max-width: 12rem; /* 192px */
 }
-.#{$util-prefix}max-w-52 {
+
+.u-max-w-52 {
   max-width: 13rem; /* 208px */
 }
-.#{$util-prefix}max-w-56 {
+
+.u-max-w-56 {
   max-width: 14rem; /* 224px */
 }
-.#{$util-prefix}max-w-60 {
+
+.u-max-w-60 {
   max-width: 15rem; /* 240px */
 }
-.#{$util-prefix}max-w-64 {
+
+.u-max-w-64 {
   max-width: 16rem; /* 256px */
 }
-.#{$util-prefix}max-w-72 {
+
+.u-max-w-72 {
   max-width: 18rem; /* 288px */
 }
-.#{$util-prefix}max-w-80 {
+
+.u-max-w-80 {
   max-width: 20rem; /* 320px */
 }
-.#{$util-prefix}max-w-96 {
+
+.u-max-w-96 {
   max-width: 24rem; /* 384px */
 }
 
 // Named max-width utilities
-.#{$util-prefix}max-w-none {
+.u-max-w-none {
   max-width: none;
 }
-.#{$util-prefix}max-w-xs {
+
+.u-max-w-xs {
   max-width: 20rem; /* 320px */
 }
-.#{$util-prefix}max-w-sm {
+
+.u-max-w-sm {
   max-width: 24rem; /* 384px */
 }
-.#{$util-prefix}max-w-md {
+
+.u-max-w-md {
   max-width: 28rem; /* 448px */
 }
-.#{$util-prefix}max-w-lg {
+
+.u-max-w-lg {
   max-width: 32rem; /* 512px */
 }
-.#{$util-prefix}max-w-xl {
+
+.u-max-w-xl {
   max-width: 36rem; /* 576px */
 }
-.#{$util-prefix}max-w-2xl {
+
+.u-max-w-2xl {
   max-width: 42rem; /* 672px */
 }
-.#{$util-prefix}max-w-3xl {
+
+.u-max-w-3xl {
   max-width: 48rem; /* 768px */
 }
-.#{$util-prefix}max-w-4xl {
+
+.u-max-w-4xl {
   max-width: 56rem; /* 896px */
 }
-.#{$util-prefix}max-w-5xl {
+
+.u-max-w-5xl {
   max-width: 64rem; /* 1024px */
 }
-.#{$util-prefix}max-w-6xl {
+
+.u-max-w-6xl {
   max-width: 72rem; /* 1152px */
 }
-.#{$util-prefix}max-w-7xl {
+
+.u-max-w-7xl {
   max-width: 80rem; /* 1280px */
 }
 
 // Special max-width utilities
-.#{$util-prefix}max-w-full {
+.u-max-w-full {
   max-width: 100%;
 }
-.#{$util-prefix}max-w-min {
+
+.u-max-w-min {
   max-width: min-content;
 }
-.#{$util-prefix}max-w-max {
+
+.u-max-w-max {
   max-width: max-content;
 }
-.#{$util-prefix}max-w-fit {
+
+.u-max-w-fit {
   max-width: fit-content;
 }
-.#{$util-prefix}max-w-prose {
+
+.u-max-w-prose {
   max-width: 65ch;
 }
 
 // Screen size max-width utilities
-.#{$util-prefix}max-w-screen-sm {
+.u-max-w-screen-sm {
   max-width: 640px;
 }
-.#{$util-prefix}max-w-screen-md {
+
+.u-max-w-screen-md {
   max-width: 768px;
 }
-.#{$util-prefix}max-w-screen-lg {
+
+.u-max-w-screen-lg {
   max-width: 1024px;
 }
-.#{$util-prefix}max-w-screen-xl {
+
+.u-max-w-screen-xl {
   max-width: 1280px;
 }
-.#{$util-prefix}max-w-screen-2xl {
+
+.u-max-w-screen-2xl {
   max-width: 1536px;
 }
 
 // Gap utilities
-.#{$util-prefix}gap-0 {
+.u-gap-0 {
   gap: 0;
 }
-.#{$util-prefix}gap-x-0 {
+
+.u-gap-x-0 {
   column-gap: 0;
 }
-.#{$util-prefix}gap-y-0 {
+
+.u-gap-y-0 {
   row-gap: 0;
 }
-.#{$util-prefix}gap-px {
+
+.u-gap-px {
   gap: 1px;
 }
-.#{$util-prefix}gap-x-px {
+
+.u-gap-x-px {
   column-gap: 1px;
 }
-.#{$util-prefix}gap-y-px {
+
+.u-gap-y-px {
   row-gap: 1px;
 }
-.#{$util-prefix}gap-0-5 {
+
+.u-gap-0-5 {
   gap: 0.125rem; /* 2px */
 }
-.#{$util-prefix}gap-x-0-5 {
+
+.u-gap-x-0-5 {
   column-gap: 0.125rem; /* 2px */
 }
-.#{$util-prefix}gap-y-0-5 {
+
+.u-gap-y-0-5 {
   row-gap: 0.125rem; /* 2px */
 }
-.#{$util-prefix}gap-1 {
+
+.u-gap-1 {
   gap: 0.25rem; /* 4px */
 }
-.#{$util-prefix}gap-x-1 {
+
+.u-gap-x-1 {
   column-gap: 0.25rem; /* 4px */
 }
-.#{$util-prefix}gap-y-1 {
+
+.u-gap-y-1 {
   row-gap: 0.25rem; /* 4px */
 }
-.#{$util-prefix}gap-1-5 {
+
+.u-gap-1-5 {
   gap: 0.375rem; /* 6px */
 }
-.#{$util-prefix}gap-x-1-5 {
+
+.u-gap-x-1-5 {
   column-gap: 0.375rem; /* 6px */
 }
-.#{$util-prefix}gap-y-1-5 {
+
+.u-gap-y-1-5 {
   row-gap: 0.375rem; /* 6px */
 }
-.#{$util-prefix}gap-2 {
+
+.u-gap-2 {
   gap: 0.5rem; /* 8px */
 }
-.#{$util-prefix}gap-x-2 {
+
+.u-gap-x-2 {
   column-gap: 0.5rem; /* 8px */
 }
-.#{$util-prefix}gap-y-2 {
+
+.u-gap-y-2 {
   row-gap: 0.5rem; /* 8px */
 }
-.#{$util-prefix}gap-2-5 {
+
+.u-gap-2-5 {
   gap: 0.625rem; /* 10px */
 }
-.#{$util-prefix}gap-x-2-5 {
+
+.u-gap-x-2-5 {
   column-gap: 0.625rem; /* 10px */
 }
-.#{$util-prefix}gap-y-2-5 {
+
+.u-gap-y-2-5 {
   row-gap: 0.625rem; /* 10px */
 }
-.#{$util-prefix}gap-3 {
+
+.u-gap-3 {
   gap: 0.75rem; /* 12px */
 }
-.#{$util-prefix}gap-x-3 {
+
+.u-gap-x-3 {
   column-gap: 0.75rem; /* 12px */
 }
-.#{$util-prefix}gap-y-3 {
+
+.u-gap-y-3 {
   row-gap: 0.75rem; /* 12px */
 }
-.#{$util-prefix}gap-3-5 {
+
+.u-gap-3-5 {
   gap: 0.875rem; /* 14px */
 }
-.#{$util-prefix}gap-x-3-5 {
+
+.u-gap-x-3-5 {
   column-gap: 0.875rem; /* 14px */
 }
-.#{$util-prefix}gap-y-3-5 {
+
+.u-gap-y-3-5 {
   row-gap: 0.875rem; /* 14px */
 }
-.#{$util-prefix}gap-4 {
+
+.u-gap-4 {
   gap: 1rem; /* 16px */
 }
-.#{$util-prefix}gap-x-4 {
+
+.u-gap-x-4 {
   column-gap: 1rem; /* 16px */
 }
-.#{$util-prefix}gap-y-4 {
+
+.u-gap-y-4 {
   row-gap: 1rem; /* 16px */
 }
-.#{$util-prefix}gap-5 {
+
+.u-gap-5 {
   gap: 1.25rem; /* 20px */
 }
-.#{$util-prefix}gap-x-5 {
+
+.u-gap-x-5 {
   column-gap: 1.25rem; /* 20px */
 }
-.#{$util-prefix}gap-y-5 {
+
+.u-gap-y-5 {
   row-gap: 1.25rem; /* 20px */
 }
-.#{$util-prefix}gap-6 {
+
+.u-gap-6 {
   gap: 1.5rem; /* 24px */
 }
-.#{$util-prefix}gap-x-6 {
+
+.u-gap-x-6 {
   column-gap: 1.5rem; /* 24px */
 }
-.#{$util-prefix}gap-y-6 {
+
+.u-gap-y-6 {
   row-gap: 1.5rem; /* 24px */
 }
-.#{$util-prefix}gap-7 {
+
+.u-gap-7 {
   gap: 1.75rem; /* 28px */
 }
-.#{$util-prefix}gap-x-7 {
+
+.u-gap-x-7 {
   column-gap: 1.75rem; /* 28px */
 }
-.#{$util-prefix}gap-y-7 {
+
+.u-gap-y-7 {
   row-gap: 1.75rem; /* 28px */
 }
-.#{$util-prefix}gap-8 {
+
+.u-gap-8 {
   gap: 2rem; /* 32px */
 }
-.#{$util-prefix}gap-x-8 {
+
+.u-gap-x-8 {
   column-gap: 2rem; /* 32px */
 }
-.#{$util-prefix}gap-y-8 {
+
+.u-gap-y-8 {
   row-gap: 2rem; /* 32px */
 }
-.#{$util-prefix}gap-9 {
+
+.u-gap-9 {
   gap: 2.25rem; /* 36px */
 }
-.#{$util-prefix}gap-x-9 {
+
+.u-gap-x-9 {
   column-gap: 2.25rem; /* 36px */
 }
-.#{$util-prefix}gap-y-9 {
+
+.u-gap-y-9 {
   row-gap: 2.25rem; /* 36px */
 }
-.#{$util-prefix}gap-10 {
+
+.u-gap-10 {
   gap: 2.5rem; /* 40px */
 }
-.#{$util-prefix}gap-x-10 {
+
+.u-gap-x-10 {
   column-gap: 2.5rem; /* 40px */
 }
-.#{$util-prefix}gap-y-10 {
+
+.u-gap-y-10 {
   row-gap: 2.5rem; /* 40px */
 }
-.#{$util-prefix}gap-11 {
+
+.u-gap-11 {
   gap: 2.75rem; /* 44px */
 }
-.#{$util-prefix}gap-x-11 {
+
+.u-gap-x-11 {
   column-gap: 2.75rem; /* 44px */
 }
-.#{$util-prefix}gap-y-11 {
+
+.u-gap-y-11 {
   row-gap: 2.75rem; /* 44px */
 }
-.#{$util-prefix}gap-12 {
+
+.u-gap-12 {
   gap: 3rem; /* 48px */
 }
-.#{$util-prefix}gap-x-12 {
+
+.u-gap-x-12 {
   column-gap: 3rem; /* 48px */
 }
-.#{$util-prefix}gap-y-12 {
+
+.u-gap-y-12 {
   row-gap: 3rem; /* 48px */
 }
-.#{$util-prefix}gap-14 {
+
+.u-gap-14 {
   gap: 3.5rem; /* 56px */
 }
-.#{$util-prefix}gap-x-14 {
+
+.u-gap-x-14 {
   column-gap: 3.5rem; /* 56px */
 }
-.#{$util-prefix}gap-y-14 {
+
+.u-gap-y-14 {
   row-gap: 3.5rem; /* 56px */
 }
-.#{$util-prefix}gap-16 {
+
+.u-gap-16 {
   gap: 4rem; /* 64px */
 }
-.#{$util-prefix}gap-x-16 {
+
+.u-gap-x-16 {
   column-gap: 4rem; /* 64px */
 }
-.#{$util-prefix}gap-y-16 {
+
+.u-gap-y-16 {
   row-gap: 4rem; /* 64px */
 }
-.#{$util-prefix}gap-20 {
+
+.u-gap-20 {
   gap: 5rem; /* 80px */
 }
-.#{$util-prefix}gap-x-20 {
+
+.u-gap-x-20 {
   column-gap: 5rem; /* 80px */
 }
-.#{$util-prefix}gap-y-20 {
+
+.u-gap-y-20 {
   row-gap: 5rem; /* 80px */
 }
-.#{$util-prefix}gap-24 {
+
+.u-gap-24 {
   gap: 6rem; /* 96px */
 }
-.#{$util-prefix}gap-x-24 {
+
+.u-gap-x-24 {
   column-gap: 6rem; /* 96px */
 }
-.#{$util-prefix}gap-y-24 {
+
+.u-gap-y-24 {
   row-gap: 6rem; /* 96px */
 }
-.#{$util-prefix}gap-28 {
+
+.u-gap-28 {
   gap: 7rem; /* 112px */
 }
-.#{$util-prefix}gap-x-28 {
+
+.u-gap-x-28 {
   column-gap: 7rem; /* 112px */
 }
-.#{$util-prefix}gap-y-28 {
+
+.u-gap-y-28 {
   row-gap: 7rem; /* 112px */
 }
-.#{$util-prefix}gap-32 {
+
+.u-gap-32 {
   gap: 8rem; /* 128px */
 }
-.#{$util-prefix}gap-x-32 {
+
+.u-gap-x-32 {
   column-gap: 8rem; /* 128px */
 }
-.#{$util-prefix}gap-y-32 {
+
+.u-gap-y-32 {
   row-gap: 8rem; /* 128px */
 }
-.#{$util-prefix}gap-36 {
+
+.u-gap-36 {
   gap: 9rem; /* 144px */
 }
-.#{$util-prefix}gap-x-36 {
+
+.u-gap-x-36 {
   column-gap: 9rem; /* 144px */
 }
-.#{$util-prefix}gap-y-36 {
+
+.u-gap-y-36 {
   row-gap: 9rem; /* 144px */
 }
-.#{$util-prefix}gap-40 {
+
+.u-gap-40 {
   gap: 10rem; /* 160px */
 }
-.#{$util-prefix}gap-x-40 {
+
+.u-gap-x-40 {
   column-gap: 10rem; /* 160px */
 }
-.#{$util-prefix}gap-y-40 {
+
+.u-gap-y-40 {
   row-gap: 10rem; /* 160px */
 }
-.#{$util-prefix}gap-44 {
+
+.u-gap-44 {
   gap: 11rem; /* 176px */
 }
-.#{$util-prefix}gap-x-44 {
+
+.u-gap-x-44 {
   column-gap: 11rem; /* 176px */
 }
-.#{$util-prefix}gap-y-44 {
+
+.u-gap-y-44 {
   row-gap: 11rem; /* 176px */
 }
-.#{$util-prefix}gap-48 {
+
+.u-gap-48 {
   gap: 12rem; /* 192px */
 }
-.#{$util-prefix}gap-x-48 {
+
+.u-gap-x-48 {
   column-gap: 12rem; /* 192px */
 }
-.#{$util-prefix}gap-y-48 {
+
+.u-gap-y-48 {
   row-gap: 12rem; /* 192px */
 }
-.#{$util-prefix}gap-52 {
+
+.u-gap-52 {
   gap: 13rem; /* 208px */
 }
-.#{$util-prefix}gap-x-52 {
+
+.u-gap-x-52 {
   column-gap: 13rem; /* 208px */
 }
-.#{$util-prefix}gap-y-52 {
+
+.u-gap-y-52 {
   row-gap: 13rem; /* 208px */
 }
-.#{$util-prefix}gap-56 {
+
+.u-gap-56 {
   gap: 14rem; /* 224px */
 }
-.#{$util-prefix}gap-x-56 {
+
+.u-gap-x-56 {
   column-gap: 14rem; /* 224px */
 }
-.#{$util-prefix}gap-y-56 {
+
+.u-gap-y-56 {
   row-gap: 14rem; /* 224px */
 }
-.#{$util-prefix}gap-60 {
+
+.u-gap-60 {
   gap: 15rem; /* 240px */
 }
-.#{$util-prefix}gap-x-60 {
+
+.u-gap-x-60 {
   column-gap: 15rem; /* 240px */
 }
-.#{$util-prefix}gap-y-60 {
+
+.u-gap-y-60 {
   row-gap: 15rem; /* 240px */
 }
-.#{$util-prefix}gap-64 {
+
+.u-gap-64 {
   gap: 16rem; /* 256px */
 }
-.#{$util-prefix}gap-x-64 {
+
+.u-gap-x-64 {
   column-gap: 16rem; /* 256px */
 }
-.#{$util-prefix}gap-y-64 {
+
+.u-gap-y-64 {
   row-gap: 16rem; /* 256px */
 }
-.#{$util-prefix}gap-72 {
+
+.u-gap-72 {
   gap: 18rem; /* 288px */
 }
-.#{$util-prefix}gap-x-72 {
+
+.u-gap-x-72 {
   column-gap: 18rem; /* 288px */
 }
-.#{$util-prefix}gap-y-72 {
+
+.u-gap-y-72 {
   row-gap: 18rem; /* 288px */
 }