@nation-a/ui 0.8.0 → 0.9.0

package/dist/styled-system/styles.css

@@ -308,6 +308,14 @@ progress {
   --made-with-panda: '🐼';
 }
 
+html:not(#\#),body:not(#\#) {
+  margin: var(--spacing-0);
+  padding: var(--spacing-0);
+  max-width: 100vw;
+  color: var(--colors-content-neutral-default);
+  background-color: var(--colors-surface-base);
+}
+
 *:not(#\#),:not(#\#)::before,:not(#\#)::after,:not(#\#)::backdrop {
   --blur: /*-*/ /*-*/;
   --brightness: /*-*/ /*-*/;
@@ -563,16 +571,40 @@ progress {
   --spacing-2: 0.5rem;
   --spacing-3: 0.75rem;
   --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
   --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
   --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
   --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
   --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-28: 7rem;
   --spacing-30: 7.5rem;
+  --spacing-32: 8rem;
+  --spacing-36: 9rem;
+  --spacing-40: 10rem;
+  --spacing-44: 11rem;
+  --spacing-48: 12rem;
+  --spacing-52: 13rem;
   --spacing-56: 14rem;
+  --spacing-60: 15rem;
+  --spacing-64: 16rem;
   --spacing-72: 18rem;
+  --spacing-80: 20rem;
+  --spacing-96: 24rem;
   --spacing-98: 24rem;
   --spacing-128: 32rem;
   --spacing-160: 40rem;
+  --spacing-0\.5: 0.125rem;
+  --spacing-1\.5: 0.375rem;
+  --spacing-2\.5: 0.625rem;
+  --spacing-3\.5: 0.875rem;
+  --spacing-4\.5: 1.125rem;
   --radii-none: 0px;
   --radii-xs: 2px;
   --radii-sm: 4px;
@@ -914,7 +946,7 @@ progress {
 }
 
 .gap_5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  gap: 5px;
+  gap: var(--spacing-5);
 }
 
 .gap_6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -922,7 +954,7 @@ progress {
 }
 
 .gap_7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  gap: 7px;
+  gap: var(--spacing-7);
 }
 
 .gap_8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -930,11 +962,11 @@ progress {
 }
 
 .gap_9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  gap: 9px;
+  gap: var(--spacing-9);
 }
 
 .gap_10:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  gap: 10px;
+  gap: var(--spacing-10);
 }
 
 .pos_fixed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1296,6 +1328,78 @@ progress {
   padding: 8px;
 }
 
+.gap_10px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  gap: 10px;
+}
+
+.c_content\.neutral\.subtle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  color: var(--colors-content-neutral-subtle);
+}
+
+.ta_start:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  text-align: start;
+}
+
+.cursor_text:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  cursor: text;
+}
+
+.bd_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border: 1px;
+}
+
+.p_2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding: var(--spacing-2);
+}
+
+.min-h_56px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  min-height: 56px;
+}
+
+.min-h_48px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  min-height: 48px;
+}
+
+.max-h_60px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  max-height: 60px;
+}
+
+.bdr_8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-radius: 8px;
+}
+
+.px_2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding-inline: var(--spacing-2);
+}
+
+.bdr_16:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-radius: 16px;
+}
+
+.bdr_9999:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-radius: 9999px;
+}
+
+.c_content\.neutral\.disabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  color: var(--colors-content-neutral-disabled);
+}
+
+.bg_black\.500A:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-black-500-a);
+}
+
+.bg_background\.neutral\.disabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-background-neutral-disabled);
+}
+
+.d_inline-block:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  display: inline-block;
+}
+
+.c_content\.static\.white\.bold:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  color: var(--colors-content-static-white-bold);
+}
+
 .bg_surface\.layer_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   background: var(--colors-surface-layer_1);
 }
@@ -1312,10 +1416,6 @@ progress {
   width: 64px;
 }
 
-.px_2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  padding-inline: var(--spacing-2);
-}
-
 .c_content\.neutral\.subtlest:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   color: var(--colors-content-neutral-subtlest);
 }
@@ -1324,10 +1424,6 @@ progress {
   gap: 2rem;
 }
 
-.d_inline-block:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  display: inline-block;
-}
-
 .bdr-se_full:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   border-start-end-radius: var(--radii-full);
 }
@@ -1420,6 +1516,10 @@ progress {
   color: currentcolor;
 }
 
+.ta_end:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  text-align: end;
+}
+
 .ai_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   align-items: center;
 }
@@ -1681,7 +1781,7 @@ progress {
 }
 
 .cg_5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  column-gap: 5px;
+  column-gap: var(--spacing-5);
 }
 
 .cg_6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1689,7 +1789,7 @@ progress {
 }
 
 .cg_7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  column-gap: 7px;
+  column-gap: var(--spacing-7);
 }
 
 .cg_8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1697,11 +1797,11 @@ progress {
 }
 
 .cg_9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  column-gap: 9px;
+  column-gap: var(--spacing-9);
 }
 
 .cg_10:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  column-gap: 10px;
+  column-gap: var(--spacing-10);
 }
 
 .rg_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1725,7 +1825,7 @@ progress {
 }
 
 .rg_5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  row-gap: 5px;
+  row-gap: var(--spacing-5);
 }
 
 .rg_6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1733,7 +1833,7 @@ progress {
 }
 
 .rg_7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  row-gap: 7px;
+  row-gap: var(--spacing-7);
 }
 
 .rg_8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1741,11 +1841,11 @@ progress {
 }
 
 .rg_9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  row-gap: 9px;
+  row-gap: var(--spacing-9);
 }
 
 .rg_10:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  row-gap: 10px;
+  row-gap: var(--spacing-10);
 }
 
 .bg-c_\#ffffff:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1843,6 +1943,22 @@ progress {
   right: var(--spacing-4);
 }
 
+.pl_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding-left: var(--spacing-1);
+}
+
+.bd-c_transparent:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-color: transparent;
+}
+
+.bd-c_border\.neutral\.subtle:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-color: var(--colors-border-neutral-subtle);
+}
+
+.bd-c_border\.neutral\.disabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-color: var(--colors-border-neutral-disabled);
+}
+
 .pt_2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   padding-top: var(--spacing-2);
 }
@@ -1871,16 +1987,20 @@ progress {
   animation-duration: var(--durations-slowest);
 }
 
-.pl_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  padding-left: var(--spacing-1);
+.ff_inter:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  font-family: var(--fonts-inter);
 }
 
 .ff_notoSans:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   font-family: var(--fonts-noto-sans);
 }
 
-.ff_inter:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  font-family: var(--fonts-inter);
+.pr_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding-right: var(--spacing-1);
+}
+
+.mt_-0\.5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  margin-top: calc(var(--spacing-0\.5) * -1);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:flex-flow_column,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:flex-flow_column,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:flex-flow_column {
@@ -1920,7 +2040,7 @@ progress {
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_5,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_5,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:gap_5 {
-  gap: 5px;
+  gap: var(--spacing-5);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_6,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_6,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:gap_6 {
@@ -1928,7 +2048,7 @@ progress {
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_7,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_7,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:gap_7 {
-  gap: 7px;
+  gap: var(--spacing-7);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_8,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_8,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:gap_8 {
@@ -1936,11 +2056,11 @@ progress {
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_9,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_9,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:gap_9 {
-  gap: 9px;
+  gap: var(--spacing-9);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_10,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:gap_10,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:gap_10 {
-  gap: 10px;
+  gap: var(--spacing-10);
 }
 
 .hidden\:d_none:is([hidden]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2007,6 +2127,46 @@ progress {
   animation: var(--animations-dialog-out);
 }
 
+.\[\&_textarea\,_\&_input\]\:ring_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) textarea,.\[\&_textarea\,_\&_input\]\:ring_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input {
+  outline: var(--borders-none);
+}
+
+.\[\&_textarea\,_\&_input\]\:w_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) textarea,.\[\&_textarea\,_\&_input\]\:w_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input {
+  width: 100%;
+}
+
+.\[\&_textarea\,_\&_input\]\:h_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) textarea,.\[\&_textarea\,_\&_input\]\:h_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input {
+  height: 100%;
+}
+
+.\[\&_textarea\]\:bg_transparent:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) textarea {
+  background: transparent;
+}
+
+.\[\&_textarea\]\:h_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) textarea {
+  height: 100%;
+}
+
+.\[\&_textarea\]\:resize_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) textarea {
+  resize: none;
+}
+
+.\[\&\:\:placeholder\]\:c_content\.static\.white\.subtlest:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder {
+  color: var(--colors-content-static-white-subtlest);
+}
+
+.\[\&\:\:placeholder\]\:c_content\.neutral\.subtlest:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder {
+  color: var(--colors-content-neutral-subtlest);
+}
+
+.\[\&\:\:placeholder\]\:c_content\.static\.white\.disabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder {
+  color: var(--colors-content-static-white-disabled);
+}
+
+.\[\&\:\:placeholder\]\:c_content\.neutral\.disabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder {
+  color: var(--colors-content-neutral-disabled);
+}
+
 .selected\:c_content\.neutral\.default:is([aria-selected=true], [data-selected]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   color: var(--colors-content-neutral-default);
 }
@@ -2276,7 +2436,7 @@ progress {
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_5,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_5,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:cg_5 {
-  column-gap: 5px;
+  column-gap: var(--spacing-5);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_6,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_6,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:cg_6 {
@@ -2284,7 +2444,7 @@ progress {
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_7,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_7,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:cg_7 {
-  column-gap: 7px;
+  column-gap: var(--spacing-7);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_8,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_8,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:cg_8 {
@@ -2292,11 +2452,11 @@ progress {
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_9,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_9,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:cg_9 {
-  column-gap: 9px;
+  column-gap: var(--spacing-9);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_10,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:cg_10,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:cg_10 {
-  column-gap: 10px;
+  column-gap: var(--spacing-10);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_0,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_0,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:rg_0 {
@@ -2320,7 +2480,7 @@ progress {
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_5,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_5,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:rg_5 {
-  row-gap: 5px;
+  row-gap: var(--spacing-5);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_6,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_6,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:rg_6 {
@@ -2328,7 +2488,7 @@ progress {
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_7,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_7,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:rg_7 {
-  row-gap: 7px;
+  row-gap: var(--spacing-7);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_8,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_8,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:rg_8 {
@@ -2336,17 +2496,21 @@ progress {
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_9,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_9,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:rg_9 {
-  row-gap: 9px;
+  row-gap: var(--spacing-9);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_10,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:rg_10,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:rg_10 {
-  row-gap: 10px;
+  row-gap: var(--spacing-10);
 }
 
 .disabled\:bd-c_border\.neutral\.disabled:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   border-color: var(--colors-border-neutral-disabled);
 }
 
+.\[\&_textarea\]\:ov-y_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) textarea {
+  overflow-y: auto;
+}
+
 @media (hover: hover) and (pointer: fine) {
   .hover\:bg_background\.neuroidPrimary\.selected:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
     background: var(--colors-background-neuroid-primary-selected);