@olympusoss/canvas 2.20.1 → 3.1.0

package/styles/utilities/flexbox.css

@@ -0,0 +1,240 @@
+/* AUTO-GENERATED by scripts/generate-utilities.ts. Do not edit by hand; run: bun run generate-utilities */
+@layer canvas.utilities {
+  .flex-row { flex-direction:row; }
+  .flex-row-reverse { flex-direction:row-reverse; }
+  .flex-col { flex-direction:column; }
+  .flex-col-reverse { flex-direction:column-reverse; }
+  .flex-wrap { flex-wrap:wrap; }
+  .flex-wrap-reverse { flex-wrap:wrap-reverse; }
+  .flex-nowrap { flex-wrap:nowrap; }
+  .flex-1 { flex:1 1 0%; }
+  .flex-auto { flex:1 1 auto; }
+  .flex-initial { flex:0 1 auto; }
+  .flex-none { flex:none; }
+  .grow { flex-grow:1; }
+  .grow-0 { flex-grow:0; }
+  .shrink { flex-shrink:1; }
+  .shrink-0 { flex-shrink:0; }
+  .justify-start { justify-content:flex-start; }
+  .justify-end { justify-content:flex-end; }
+  .justify-center { justify-content:center; }
+  .justify-between { justify-content:space-between; }
+  .justify-around { justify-content:space-around; }
+  .justify-evenly { justify-content:space-evenly; }
+  .items-start { align-items:flex-start; }
+  .items-end { align-items:flex-end; }
+  .items-center { align-items:center; }
+  .items-baseline { align-items:baseline; }
+  .items-stretch { align-items:stretch; }
+  .content-start { align-content:flex-start; }
+  .content-end { align-content:flex-end; }
+  .content-center { align-content:center; }
+  .content-between { align-content:space-between; }
+  .content-around { align-content:space-around; }
+  .content-evenly { align-content:space-evenly; }
+  .self-auto { align-self:auto; }
+  .self-start { align-self:flex-start; }
+  .self-end { align-self:flex-end; }
+  .self-center { align-self:center; }
+  .self-stretch { align-self:stretch; }
+
+  @media (min-width: 640px) {
+    .sm\:flex-row { flex-direction:row; }
+    .sm\:flex-row-reverse { flex-direction:row-reverse; }
+    .sm\:flex-col { flex-direction:column; }
+    .sm\:flex-col-reverse { flex-direction:column-reverse; }
+    .sm\:flex-wrap { flex-wrap:wrap; }
+    .sm\:flex-wrap-reverse { flex-wrap:wrap-reverse; }
+    .sm\:flex-nowrap { flex-wrap:nowrap; }
+    .sm\:flex-1 { flex:1 1 0%; }
+    .sm\:flex-auto { flex:1 1 auto; }
+    .sm\:flex-initial { flex:0 1 auto; }
+    .sm\:flex-none { flex:none; }
+    .sm\:grow { flex-grow:1; }
+    .sm\:grow-0 { flex-grow:0; }
+    .sm\:shrink { flex-shrink:1; }
+    .sm\:shrink-0 { flex-shrink:0; }
+    .sm\:justify-start { justify-content:flex-start; }
+    .sm\:justify-end { justify-content:flex-end; }
+    .sm\:justify-center { justify-content:center; }
+    .sm\:justify-between { justify-content:space-between; }
+    .sm\:justify-around { justify-content:space-around; }
+    .sm\:justify-evenly { justify-content:space-evenly; }
+    .sm\:items-start { align-items:flex-start; }
+    .sm\:items-end { align-items:flex-end; }
+    .sm\:items-center { align-items:center; }
+    .sm\:items-baseline { align-items:baseline; }
+    .sm\:items-stretch { align-items:stretch; }
+    .sm\:content-start { align-content:flex-start; }
+    .sm\:content-end { align-content:flex-end; }
+    .sm\:content-center { align-content:center; }
+    .sm\:content-between { align-content:space-between; }
+    .sm\:content-around { align-content:space-around; }
+    .sm\:content-evenly { align-content:space-evenly; }
+    .sm\:self-auto { align-self:auto; }
+    .sm\:self-start { align-self:flex-start; }
+    .sm\:self-end { align-self:flex-end; }
+    .sm\:self-center { align-self:center; }
+    .sm\:self-stretch { align-self:stretch; }
+  }
+
+  @media (min-width: 768px) {
+    .md\:flex-row { flex-direction:row; }
+    .md\:flex-row-reverse { flex-direction:row-reverse; }
+    .md\:flex-col { flex-direction:column; }
+    .md\:flex-col-reverse { flex-direction:column-reverse; }
+    .md\:flex-wrap { flex-wrap:wrap; }
+    .md\:flex-wrap-reverse { flex-wrap:wrap-reverse; }
+    .md\:flex-nowrap { flex-wrap:nowrap; }
+    .md\:flex-1 { flex:1 1 0%; }
+    .md\:flex-auto { flex:1 1 auto; }
+    .md\:flex-initial { flex:0 1 auto; }
+    .md\:flex-none { flex:none; }
+    .md\:grow { flex-grow:1; }
+    .md\:grow-0 { flex-grow:0; }
+    .md\:shrink { flex-shrink:1; }
+    .md\:shrink-0 { flex-shrink:0; }
+    .md\:justify-start { justify-content:flex-start; }
+    .md\:justify-end { justify-content:flex-end; }
+    .md\:justify-center { justify-content:center; }
+    .md\:justify-between { justify-content:space-between; }
+    .md\:justify-around { justify-content:space-around; }
+    .md\:justify-evenly { justify-content:space-evenly; }
+    .md\:items-start { align-items:flex-start; }
+    .md\:items-end { align-items:flex-end; }
+    .md\:items-center { align-items:center; }
+    .md\:items-baseline { align-items:baseline; }
+    .md\:items-stretch { align-items:stretch; }
+    .md\:content-start { align-content:flex-start; }
+    .md\:content-end { align-content:flex-end; }
+    .md\:content-center { align-content:center; }
+    .md\:content-between { align-content:space-between; }
+    .md\:content-around { align-content:space-around; }
+    .md\:content-evenly { align-content:space-evenly; }
+    .md\:self-auto { align-self:auto; }
+    .md\:self-start { align-self:flex-start; }
+    .md\:self-end { align-self:flex-end; }
+    .md\:self-center { align-self:center; }
+    .md\:self-stretch { align-self:stretch; }
+  }
+
+  @media (min-width: 1024px) {
+    .lg\:flex-row { flex-direction:row; }
+    .lg\:flex-row-reverse { flex-direction:row-reverse; }
+    .lg\:flex-col { flex-direction:column; }
+    .lg\:flex-col-reverse { flex-direction:column-reverse; }
+    .lg\:flex-wrap { flex-wrap:wrap; }
+    .lg\:flex-wrap-reverse { flex-wrap:wrap-reverse; }
+    .lg\:flex-nowrap { flex-wrap:nowrap; }
+    .lg\:flex-1 { flex:1 1 0%; }
+    .lg\:flex-auto { flex:1 1 auto; }
+    .lg\:flex-initial { flex:0 1 auto; }
+    .lg\:flex-none { flex:none; }
+    .lg\:grow { flex-grow:1; }
+    .lg\:grow-0 { flex-grow:0; }
+    .lg\:shrink { flex-shrink:1; }
+    .lg\:shrink-0 { flex-shrink:0; }
+    .lg\:justify-start { justify-content:flex-start; }
+    .lg\:justify-end { justify-content:flex-end; }
+    .lg\:justify-center { justify-content:center; }
+    .lg\:justify-between { justify-content:space-between; }
+    .lg\:justify-around { justify-content:space-around; }
+    .lg\:justify-evenly { justify-content:space-evenly; }
+    .lg\:items-start { align-items:flex-start; }
+    .lg\:items-end { align-items:flex-end; }
+    .lg\:items-center { align-items:center; }
+    .lg\:items-baseline { align-items:baseline; }
+    .lg\:items-stretch { align-items:stretch; }
+    .lg\:content-start { align-content:flex-start; }
+    .lg\:content-end { align-content:flex-end; }
+    .lg\:content-center { align-content:center; }
+    .lg\:content-between { align-content:space-between; }
+    .lg\:content-around { align-content:space-around; }
+    .lg\:content-evenly { align-content:space-evenly; }
+    .lg\:self-auto { align-self:auto; }
+    .lg\:self-start { align-self:flex-start; }
+    .lg\:self-end { align-self:flex-end; }
+    .lg\:self-center { align-self:center; }
+    .lg\:self-stretch { align-self:stretch; }
+  }
+
+  @media (min-width: 1280px) {
+    .xl\:flex-row { flex-direction:row; }
+    .xl\:flex-row-reverse { flex-direction:row-reverse; }
+    .xl\:flex-col { flex-direction:column; }
+    .xl\:flex-col-reverse { flex-direction:column-reverse; }
+    .xl\:flex-wrap { flex-wrap:wrap; }
+    .xl\:flex-wrap-reverse { flex-wrap:wrap-reverse; }
+    .xl\:flex-nowrap { flex-wrap:nowrap; }
+    .xl\:flex-1 { flex:1 1 0%; }
+    .xl\:flex-auto { flex:1 1 auto; }
+    .xl\:flex-initial { flex:0 1 auto; }
+    .xl\:flex-none { flex:none; }
+    .xl\:grow { flex-grow:1; }
+    .xl\:grow-0 { flex-grow:0; }
+    .xl\:shrink { flex-shrink:1; }
+    .xl\:shrink-0 { flex-shrink:0; }
+    .xl\:justify-start { justify-content:flex-start; }
+    .xl\:justify-end { justify-content:flex-end; }
+    .xl\:justify-center { justify-content:center; }
+    .xl\:justify-between { justify-content:space-between; }
+    .xl\:justify-around { justify-content:space-around; }
+    .xl\:justify-evenly { justify-content:space-evenly; }
+    .xl\:items-start { align-items:flex-start; }
+    .xl\:items-end { align-items:flex-end; }
+    .xl\:items-center { align-items:center; }
+    .xl\:items-baseline { align-items:baseline; }
+    .xl\:items-stretch { align-items:stretch; }
+    .xl\:content-start { align-content:flex-start; }
+    .xl\:content-end { align-content:flex-end; }
+    .xl\:content-center { align-content:center; }
+    .xl\:content-between { align-content:space-between; }
+    .xl\:content-around { align-content:space-around; }
+    .xl\:content-evenly { align-content:space-evenly; }
+    .xl\:self-auto { align-self:auto; }
+    .xl\:self-start { align-self:flex-start; }
+    .xl\:self-end { align-self:flex-end; }
+    .xl\:self-center { align-self:center; }
+    .xl\:self-stretch { align-self:stretch; }
+  }
+
+  @media (min-width: 1536px) {
+    .\32 xl\:flex-row { flex-direction:row; }
+    .\32 xl\:flex-row-reverse { flex-direction:row-reverse; }
+    .\32 xl\:flex-col { flex-direction:column; }
+    .\32 xl\:flex-col-reverse { flex-direction:column-reverse; }
+    .\32 xl\:flex-wrap { flex-wrap:wrap; }
+    .\32 xl\:flex-wrap-reverse { flex-wrap:wrap-reverse; }
+    .\32 xl\:flex-nowrap { flex-wrap:nowrap; }
+    .\32 xl\:flex-1 { flex:1 1 0%; }
+    .\32 xl\:flex-auto { flex:1 1 auto; }
+    .\32 xl\:flex-initial { flex:0 1 auto; }
+    .\32 xl\:flex-none { flex:none; }
+    .\32 xl\:grow { flex-grow:1; }
+    .\32 xl\:grow-0 { flex-grow:0; }
+    .\32 xl\:shrink { flex-shrink:1; }
+    .\32 xl\:shrink-0 { flex-shrink:0; }
+    .\32 xl\:justify-start { justify-content:flex-start; }
+    .\32 xl\:justify-end { justify-content:flex-end; }
+    .\32 xl\:justify-center { justify-content:center; }
+    .\32 xl\:justify-between { justify-content:space-between; }
+    .\32 xl\:justify-around { justify-content:space-around; }
+    .\32 xl\:justify-evenly { justify-content:space-evenly; }
+    .\32 xl\:items-start { align-items:flex-start; }
+    .\32 xl\:items-end { align-items:flex-end; }
+    .\32 xl\:items-center { align-items:center; }
+    .\32 xl\:items-baseline { align-items:baseline; }
+    .\32 xl\:items-stretch { align-items:stretch; }
+    .\32 xl\:content-start { align-content:flex-start; }
+    .\32 xl\:content-end { align-content:flex-end; }
+    .\32 xl\:content-center { align-content:center; }
+    .\32 xl\:content-between { align-content:space-between; }
+    .\32 xl\:content-around { align-content:space-around; }
+    .\32 xl\:content-evenly { align-content:space-evenly; }
+    .\32 xl\:self-auto { align-self:auto; }
+    .\32 xl\:self-start { align-self:flex-start; }
+    .\32 xl\:self-end { align-self:flex-end; }
+    .\32 xl\:self-center { align-self:center; }
+    .\32 xl\:self-stretch { align-self:stretch; }
+  }
+}

package/styles/utilities/gap.css

@@ -0,0 +1,288 @@
+/* AUTO-GENERATED by scripts/generate-utilities.ts. Do not edit by hand; run: bun run generate-utilities */
+@layer canvas.utilities {
+  .gap-0 { gap:var(--space-0); }
+  .gap-px { gap:var(--space-px); }
+  .gap-0-5 { gap:var(--space-0-5); }
+  .gap-1 { gap:var(--space-1); }
+  .gap-1-5 { gap:var(--space-1-5); }
+  .gap-2 { gap:var(--space-2); }
+  .gap-2-5 { gap:var(--space-2-5); }
+  .gap-3 { gap:var(--space-3); }
+  .gap-4 { gap:var(--space-4); }
+  .gap-5 { gap:var(--space-5); }
+  .gap-6 { gap:var(--space-6); }
+  .gap-8 { gap:var(--space-8); }
+  .gap-10 { gap:var(--space-10); }
+  .gap-12 { gap:var(--space-12); }
+  .gap-16 { gap:var(--space-16); }
+  .gap-x-0 { column-gap:var(--space-0); }
+  .gap-x-px { column-gap:var(--space-px); }
+  .gap-x-0-5 { column-gap:var(--space-0-5); }
+  .gap-x-1 { column-gap:var(--space-1); }
+  .gap-x-1-5 { column-gap:var(--space-1-5); }
+  .gap-x-2 { column-gap:var(--space-2); }
+  .gap-x-2-5 { column-gap:var(--space-2-5); }
+  .gap-x-3 { column-gap:var(--space-3); }
+  .gap-x-4 { column-gap:var(--space-4); }
+  .gap-x-5 { column-gap:var(--space-5); }
+  .gap-x-6 { column-gap:var(--space-6); }
+  .gap-x-8 { column-gap:var(--space-8); }
+  .gap-x-10 { column-gap:var(--space-10); }
+  .gap-x-12 { column-gap:var(--space-12); }
+  .gap-x-16 { column-gap:var(--space-16); }
+  .gap-y-0 { row-gap:var(--space-0); }
+  .gap-y-px { row-gap:var(--space-px); }
+  .gap-y-0-5 { row-gap:var(--space-0-5); }
+  .gap-y-1 { row-gap:var(--space-1); }
+  .gap-y-1-5 { row-gap:var(--space-1-5); }
+  .gap-y-2 { row-gap:var(--space-2); }
+  .gap-y-2-5 { row-gap:var(--space-2-5); }
+  .gap-y-3 { row-gap:var(--space-3); }
+  .gap-y-4 { row-gap:var(--space-4); }
+  .gap-y-5 { row-gap:var(--space-5); }
+  .gap-y-6 { row-gap:var(--space-6); }
+  .gap-y-8 { row-gap:var(--space-8); }
+  .gap-y-10 { row-gap:var(--space-10); }
+  .gap-y-12 { row-gap:var(--space-12); }
+  .gap-y-16 { row-gap:var(--space-16); }
+
+  @media (min-width: 640px) {
+    .sm\:gap-0 { gap:var(--space-0); }
+    .sm\:gap-px { gap:var(--space-px); }
+    .sm\:gap-0-5 { gap:var(--space-0-5); }
+    .sm\:gap-1 { gap:var(--space-1); }
+    .sm\:gap-1-5 { gap:var(--space-1-5); }
+    .sm\:gap-2 { gap:var(--space-2); }
+    .sm\:gap-2-5 { gap:var(--space-2-5); }
+    .sm\:gap-3 { gap:var(--space-3); }
+    .sm\:gap-4 { gap:var(--space-4); }
+    .sm\:gap-5 { gap:var(--space-5); }
+    .sm\:gap-6 { gap:var(--space-6); }
+    .sm\:gap-8 { gap:var(--space-8); }
+    .sm\:gap-10 { gap:var(--space-10); }
+    .sm\:gap-12 { gap:var(--space-12); }
+    .sm\:gap-16 { gap:var(--space-16); }
+    .sm\:gap-x-0 { column-gap:var(--space-0); }
+    .sm\:gap-x-px { column-gap:var(--space-px); }
+    .sm\:gap-x-0-5 { column-gap:var(--space-0-5); }
+    .sm\:gap-x-1 { column-gap:var(--space-1); }
+    .sm\:gap-x-1-5 { column-gap:var(--space-1-5); }
+    .sm\:gap-x-2 { column-gap:var(--space-2); }
+    .sm\:gap-x-2-5 { column-gap:var(--space-2-5); }
+    .sm\:gap-x-3 { column-gap:var(--space-3); }
+    .sm\:gap-x-4 { column-gap:var(--space-4); }
+    .sm\:gap-x-5 { column-gap:var(--space-5); }
+    .sm\:gap-x-6 { column-gap:var(--space-6); }
+    .sm\:gap-x-8 { column-gap:var(--space-8); }
+    .sm\:gap-x-10 { column-gap:var(--space-10); }
+    .sm\:gap-x-12 { column-gap:var(--space-12); }
+    .sm\:gap-x-16 { column-gap:var(--space-16); }
+    .sm\:gap-y-0 { row-gap:var(--space-0); }
+    .sm\:gap-y-px { row-gap:var(--space-px); }
+    .sm\:gap-y-0-5 { row-gap:var(--space-0-5); }
+    .sm\:gap-y-1 { row-gap:var(--space-1); }
+    .sm\:gap-y-1-5 { row-gap:var(--space-1-5); }
+    .sm\:gap-y-2 { row-gap:var(--space-2); }
+    .sm\:gap-y-2-5 { row-gap:var(--space-2-5); }
+    .sm\:gap-y-3 { row-gap:var(--space-3); }
+    .sm\:gap-y-4 { row-gap:var(--space-4); }
+    .sm\:gap-y-5 { row-gap:var(--space-5); }
+    .sm\:gap-y-6 { row-gap:var(--space-6); }
+    .sm\:gap-y-8 { row-gap:var(--space-8); }
+    .sm\:gap-y-10 { row-gap:var(--space-10); }
+    .sm\:gap-y-12 { row-gap:var(--space-12); }
+    .sm\:gap-y-16 { row-gap:var(--space-16); }
+  }
+
+  @media (min-width: 768px) {
+    .md\:gap-0 { gap:var(--space-0); }
+    .md\:gap-px { gap:var(--space-px); }
+    .md\:gap-0-5 { gap:var(--space-0-5); }
+    .md\:gap-1 { gap:var(--space-1); }
+    .md\:gap-1-5 { gap:var(--space-1-5); }
+    .md\:gap-2 { gap:var(--space-2); }
+    .md\:gap-2-5 { gap:var(--space-2-5); }
+    .md\:gap-3 { gap:var(--space-3); }
+    .md\:gap-4 { gap:var(--space-4); }
+    .md\:gap-5 { gap:var(--space-5); }
+    .md\:gap-6 { gap:var(--space-6); }
+    .md\:gap-8 { gap:var(--space-8); }
+    .md\:gap-10 { gap:var(--space-10); }
+    .md\:gap-12 { gap:var(--space-12); }
+    .md\:gap-16 { gap:var(--space-16); }
+    .md\:gap-x-0 { column-gap:var(--space-0); }
+    .md\:gap-x-px { column-gap:var(--space-px); }
+    .md\:gap-x-0-5 { column-gap:var(--space-0-5); }
+    .md\:gap-x-1 { column-gap:var(--space-1); }
+    .md\:gap-x-1-5 { column-gap:var(--space-1-5); }
+    .md\:gap-x-2 { column-gap:var(--space-2); }
+    .md\:gap-x-2-5 { column-gap:var(--space-2-5); }
+    .md\:gap-x-3 { column-gap:var(--space-3); }
+    .md\:gap-x-4 { column-gap:var(--space-4); }
+    .md\:gap-x-5 { column-gap:var(--space-5); }
+    .md\:gap-x-6 { column-gap:var(--space-6); }
+    .md\:gap-x-8 { column-gap:var(--space-8); }
+    .md\:gap-x-10 { column-gap:var(--space-10); }
+    .md\:gap-x-12 { column-gap:var(--space-12); }
+    .md\:gap-x-16 { column-gap:var(--space-16); }
+    .md\:gap-y-0 { row-gap:var(--space-0); }
+    .md\:gap-y-px { row-gap:var(--space-px); }
+    .md\:gap-y-0-5 { row-gap:var(--space-0-5); }
+    .md\:gap-y-1 { row-gap:var(--space-1); }
+    .md\:gap-y-1-5 { row-gap:var(--space-1-5); }
+    .md\:gap-y-2 { row-gap:var(--space-2); }
+    .md\:gap-y-2-5 { row-gap:var(--space-2-5); }
+    .md\:gap-y-3 { row-gap:var(--space-3); }
+    .md\:gap-y-4 { row-gap:var(--space-4); }
+    .md\:gap-y-5 { row-gap:var(--space-5); }
+    .md\:gap-y-6 { row-gap:var(--space-6); }
+    .md\:gap-y-8 { row-gap:var(--space-8); }
+    .md\:gap-y-10 { row-gap:var(--space-10); }
+    .md\:gap-y-12 { row-gap:var(--space-12); }
+    .md\:gap-y-16 { row-gap:var(--space-16); }
+  }
+
+  @media (min-width: 1024px) {
+    .lg\:gap-0 { gap:var(--space-0); }
+    .lg\:gap-px { gap:var(--space-px); }
+    .lg\:gap-0-5 { gap:var(--space-0-5); }
+    .lg\:gap-1 { gap:var(--space-1); }
+    .lg\:gap-1-5 { gap:var(--space-1-5); }
+    .lg\:gap-2 { gap:var(--space-2); }
+    .lg\:gap-2-5 { gap:var(--space-2-5); }
+    .lg\:gap-3 { gap:var(--space-3); }
+    .lg\:gap-4 { gap:var(--space-4); }
+    .lg\:gap-5 { gap:var(--space-5); }
+    .lg\:gap-6 { gap:var(--space-6); }
+    .lg\:gap-8 { gap:var(--space-8); }
+    .lg\:gap-10 { gap:var(--space-10); }
+    .lg\:gap-12 { gap:var(--space-12); }
+    .lg\:gap-16 { gap:var(--space-16); }
+    .lg\:gap-x-0 { column-gap:var(--space-0); }
+    .lg\:gap-x-px { column-gap:var(--space-px); }
+    .lg\:gap-x-0-5 { column-gap:var(--space-0-5); }
+    .lg\:gap-x-1 { column-gap:var(--space-1); }
+    .lg\:gap-x-1-5 { column-gap:var(--space-1-5); }
+    .lg\:gap-x-2 { column-gap:var(--space-2); }
+    .lg\:gap-x-2-5 { column-gap:var(--space-2-5); }
+    .lg\:gap-x-3 { column-gap:var(--space-3); }
+    .lg\:gap-x-4 { column-gap:var(--space-4); }
+    .lg\:gap-x-5 { column-gap:var(--space-5); }
+    .lg\:gap-x-6 { column-gap:var(--space-6); }
+    .lg\:gap-x-8 { column-gap:var(--space-8); }
+    .lg\:gap-x-10 { column-gap:var(--space-10); }
+    .lg\:gap-x-12 { column-gap:var(--space-12); }
+    .lg\:gap-x-16 { column-gap:var(--space-16); }
+    .lg\:gap-y-0 { row-gap:var(--space-0); }
+    .lg\:gap-y-px { row-gap:var(--space-px); }
+    .lg\:gap-y-0-5 { row-gap:var(--space-0-5); }
+    .lg\:gap-y-1 { row-gap:var(--space-1); }
+    .lg\:gap-y-1-5 { row-gap:var(--space-1-5); }
+    .lg\:gap-y-2 { row-gap:var(--space-2); }
+    .lg\:gap-y-2-5 { row-gap:var(--space-2-5); }
+    .lg\:gap-y-3 { row-gap:var(--space-3); }
+    .lg\:gap-y-4 { row-gap:var(--space-4); }
+    .lg\:gap-y-5 { row-gap:var(--space-5); }
+    .lg\:gap-y-6 { row-gap:var(--space-6); }
+    .lg\:gap-y-8 { row-gap:var(--space-8); }
+    .lg\:gap-y-10 { row-gap:var(--space-10); }
+    .lg\:gap-y-12 { row-gap:var(--space-12); }
+    .lg\:gap-y-16 { row-gap:var(--space-16); }
+  }
+
+  @media (min-width: 1280px) {
+    .xl\:gap-0 { gap:var(--space-0); }
+    .xl\:gap-px { gap:var(--space-px); }
+    .xl\:gap-0-5 { gap:var(--space-0-5); }
+    .xl\:gap-1 { gap:var(--space-1); }
+    .xl\:gap-1-5 { gap:var(--space-1-5); }
+    .xl\:gap-2 { gap:var(--space-2); }
+    .xl\:gap-2-5 { gap:var(--space-2-5); }
+    .xl\:gap-3 { gap:var(--space-3); }
+    .xl\:gap-4 { gap:var(--space-4); }
+    .xl\:gap-5 { gap:var(--space-5); }
+    .xl\:gap-6 { gap:var(--space-6); }
+    .xl\:gap-8 { gap:var(--space-8); }
+    .xl\:gap-10 { gap:var(--space-10); }
+    .xl\:gap-12 { gap:var(--space-12); }
+    .xl\:gap-16 { gap:var(--space-16); }
+    .xl\:gap-x-0 { column-gap:var(--space-0); }
+    .xl\:gap-x-px { column-gap:var(--space-px); }
+    .xl\:gap-x-0-5 { column-gap:var(--space-0-5); }
+    .xl\:gap-x-1 { column-gap:var(--space-1); }
+    .xl\:gap-x-1-5 { column-gap:var(--space-1-5); }
+    .xl\:gap-x-2 { column-gap:var(--space-2); }
+    .xl\:gap-x-2-5 { column-gap:var(--space-2-5); }
+    .xl\:gap-x-3 { column-gap:var(--space-3); }
+    .xl\:gap-x-4 { column-gap:var(--space-4); }
+    .xl\:gap-x-5 { column-gap:var(--space-5); }
+    .xl\:gap-x-6 { column-gap:var(--space-6); }
+    .xl\:gap-x-8 { column-gap:var(--space-8); }
+    .xl\:gap-x-10 { column-gap:var(--space-10); }
+    .xl\:gap-x-12 { column-gap:var(--space-12); }
+    .xl\:gap-x-16 { column-gap:var(--space-16); }
+    .xl\:gap-y-0 { row-gap:var(--space-0); }
+    .xl\:gap-y-px { row-gap:var(--space-px); }
+    .xl\:gap-y-0-5 { row-gap:var(--space-0-5); }
+    .xl\:gap-y-1 { row-gap:var(--space-1); }
+    .xl\:gap-y-1-5 { row-gap:var(--space-1-5); }
+    .xl\:gap-y-2 { row-gap:var(--space-2); }
+    .xl\:gap-y-2-5 { row-gap:var(--space-2-5); }
+    .xl\:gap-y-3 { row-gap:var(--space-3); }
+    .xl\:gap-y-4 { row-gap:var(--space-4); }
+    .xl\:gap-y-5 { row-gap:var(--space-5); }
+    .xl\:gap-y-6 { row-gap:var(--space-6); }
+    .xl\:gap-y-8 { row-gap:var(--space-8); }
+    .xl\:gap-y-10 { row-gap:var(--space-10); }
+    .xl\:gap-y-12 { row-gap:var(--space-12); }
+    .xl\:gap-y-16 { row-gap:var(--space-16); }
+  }
+
+  @media (min-width: 1536px) {
+    .\32 xl\:gap-0 { gap:var(--space-0); }
+    .\32 xl\:gap-px { gap:var(--space-px); }
+    .\32 xl\:gap-0-5 { gap:var(--space-0-5); }
+    .\32 xl\:gap-1 { gap:var(--space-1); }
+    .\32 xl\:gap-1-5 { gap:var(--space-1-5); }
+    .\32 xl\:gap-2 { gap:var(--space-2); }
+    .\32 xl\:gap-2-5 { gap:var(--space-2-5); }
+    .\32 xl\:gap-3 { gap:var(--space-3); }
+    .\32 xl\:gap-4 { gap:var(--space-4); }
+    .\32 xl\:gap-5 { gap:var(--space-5); }
+    .\32 xl\:gap-6 { gap:var(--space-6); }
+    .\32 xl\:gap-8 { gap:var(--space-8); }
+    .\32 xl\:gap-10 { gap:var(--space-10); }
+    .\32 xl\:gap-12 { gap:var(--space-12); }
+    .\32 xl\:gap-16 { gap:var(--space-16); }
+    .\32 xl\:gap-x-0 { column-gap:var(--space-0); }
+    .\32 xl\:gap-x-px { column-gap:var(--space-px); }
+    .\32 xl\:gap-x-0-5 { column-gap:var(--space-0-5); }
+    .\32 xl\:gap-x-1 { column-gap:var(--space-1); }
+    .\32 xl\:gap-x-1-5 { column-gap:var(--space-1-5); }
+    .\32 xl\:gap-x-2 { column-gap:var(--space-2); }
+    .\32 xl\:gap-x-2-5 { column-gap:var(--space-2-5); }
+    .\32 xl\:gap-x-3 { column-gap:var(--space-3); }
+    .\32 xl\:gap-x-4 { column-gap:var(--space-4); }
+    .\32 xl\:gap-x-5 { column-gap:var(--space-5); }
+    .\32 xl\:gap-x-6 { column-gap:var(--space-6); }
+    .\32 xl\:gap-x-8 { column-gap:var(--space-8); }
+    .\32 xl\:gap-x-10 { column-gap:var(--space-10); }
+    .\32 xl\:gap-x-12 { column-gap:var(--space-12); }
+    .\32 xl\:gap-x-16 { column-gap:var(--space-16); }
+    .\32 xl\:gap-y-0 { row-gap:var(--space-0); }
+    .\32 xl\:gap-y-px { row-gap:var(--space-px); }
+    .\32 xl\:gap-y-0-5 { row-gap:var(--space-0-5); }
+    .\32 xl\:gap-y-1 { row-gap:var(--space-1); }
+    .\32 xl\:gap-y-1-5 { row-gap:var(--space-1-5); }
+    .\32 xl\:gap-y-2 { row-gap:var(--space-2); }
+    .\32 xl\:gap-y-2-5 { row-gap:var(--space-2-5); }
+    .\32 xl\:gap-y-3 { row-gap:var(--space-3); }
+    .\32 xl\:gap-y-4 { row-gap:var(--space-4); }
+    .\32 xl\:gap-y-5 { row-gap:var(--space-5); }
+    .\32 xl\:gap-y-6 { row-gap:var(--space-6); }
+    .\32 xl\:gap-y-8 { row-gap:var(--space-8); }
+    .\32 xl\:gap-y-10 { row-gap:var(--space-10); }
+    .\32 xl\:gap-y-12 { row-gap:var(--space-12); }
+    .\32 xl\:gap-y-16 { row-gap:var(--space-16); }
+  }
+}

package/styles/utilities/grid.css

@@ -0,0 +1,138 @@
+/* AUTO-GENERATED by scripts/generate-utilities.ts. Do not edit by hand; run: bun run generate-utilities */
+@layer canvas.utilities {
+  .grid-cols-1 { grid-template-columns:repeat(1, minmax(0, 1fr)); }
+  .grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
+  .grid-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
+  .grid-cols-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
+  .grid-cols-5 { grid-template-columns:repeat(5, minmax(0, 1fr)); }
+  .grid-cols-6 { grid-template-columns:repeat(6, minmax(0, 1fr)); }
+  .grid-cols-none { grid-template-columns:none; }
+  .grid-cols-auto-fit { grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
+  .grid-cols-auto-fill { grid-template-columns:repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
+  .col-span-1 { grid-column:span 1 / span 1; }
+  .col-span-2 { grid-column:span 2 / span 2; }
+  .col-span-3 { grid-column:span 3 / span 3; }
+  .col-span-4 { grid-column:span 4 / span 4; }
+  .col-span-5 { grid-column:span 5 / span 5; }
+  .col-span-6 { grid-column:span 6 / span 6; }
+  .col-span-full { grid-column:1 / -1; }
+  .grid-flow-row { grid-auto-flow:row; }
+  .grid-flow-col { grid-auto-flow:column; }
+  .grid-flow-dense { grid-auto-flow:row dense; }
+  .grid-flow-col-dense { grid-auto-flow:column dense; }
+
+  @media (min-width: 640px) {
+    .sm\:grid-cols-1 { grid-template-columns:repeat(1, minmax(0, 1fr)); }
+    .sm\:grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
+    .sm\:grid-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
+    .sm\:grid-cols-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
+    .sm\:grid-cols-5 { grid-template-columns:repeat(5, minmax(0, 1fr)); }
+    .sm\:grid-cols-6 { grid-template-columns:repeat(6, minmax(0, 1fr)); }
+    .sm\:grid-cols-none { grid-template-columns:none; }
+    .sm\:grid-cols-auto-fit { grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
+    .sm\:grid-cols-auto-fill { grid-template-columns:repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
+    .sm\:col-span-1 { grid-column:span 1 / span 1; }
+    .sm\:col-span-2 { grid-column:span 2 / span 2; }
+    .sm\:col-span-3 { grid-column:span 3 / span 3; }
+    .sm\:col-span-4 { grid-column:span 4 / span 4; }
+    .sm\:col-span-5 { grid-column:span 5 / span 5; }
+    .sm\:col-span-6 { grid-column:span 6 / span 6; }
+    .sm\:col-span-full { grid-column:1 / -1; }
+    .sm\:grid-flow-row { grid-auto-flow:row; }
+    .sm\:grid-flow-col { grid-auto-flow:column; }
+    .sm\:grid-flow-dense { grid-auto-flow:row dense; }
+    .sm\:grid-flow-col-dense { grid-auto-flow:column dense; }
+  }
+
+  @media (min-width: 768px) {
+    .md\:grid-cols-1 { grid-template-columns:repeat(1, minmax(0, 1fr)); }
+    .md\:grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
+    .md\:grid-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
+    .md\:grid-cols-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
+    .md\:grid-cols-5 { grid-template-columns:repeat(5, minmax(0, 1fr)); }
+    .md\:grid-cols-6 { grid-template-columns:repeat(6, minmax(0, 1fr)); }
+    .md\:grid-cols-none { grid-template-columns:none; }
+    .md\:grid-cols-auto-fit { grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
+    .md\:grid-cols-auto-fill { grid-template-columns:repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
+    .md\:col-span-1 { grid-column:span 1 / span 1; }
+    .md\:col-span-2 { grid-column:span 2 / span 2; }
+    .md\:col-span-3 { grid-column:span 3 / span 3; }
+    .md\:col-span-4 { grid-column:span 4 / span 4; }
+    .md\:col-span-5 { grid-column:span 5 / span 5; }
+    .md\:col-span-6 { grid-column:span 6 / span 6; }
+    .md\:col-span-full { grid-column:1 / -1; }
+    .md\:grid-flow-row { grid-auto-flow:row; }
+    .md\:grid-flow-col { grid-auto-flow:column; }
+    .md\:grid-flow-dense { grid-auto-flow:row dense; }
+    .md\:grid-flow-col-dense { grid-auto-flow:column dense; }
+  }
+
+  @media (min-width: 1024px) {
+    .lg\:grid-cols-1 { grid-template-columns:repeat(1, minmax(0, 1fr)); }
+    .lg\:grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
+    .lg\:grid-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
+    .lg\:grid-cols-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
+    .lg\:grid-cols-5 { grid-template-columns:repeat(5, minmax(0, 1fr)); }
+    .lg\:grid-cols-6 { grid-template-columns:repeat(6, minmax(0, 1fr)); }
+    .lg\:grid-cols-none { grid-template-columns:none; }
+    .lg\:grid-cols-auto-fit { grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
+    .lg\:grid-cols-auto-fill { grid-template-columns:repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
+    .lg\:col-span-1 { grid-column:span 1 / span 1; }
+    .lg\:col-span-2 { grid-column:span 2 / span 2; }
+    .lg\:col-span-3 { grid-column:span 3 / span 3; }
+    .lg\:col-span-4 { grid-column:span 4 / span 4; }
+    .lg\:col-span-5 { grid-column:span 5 / span 5; }
+    .lg\:col-span-6 { grid-column:span 6 / span 6; }
+    .lg\:col-span-full { grid-column:1 / -1; }
+    .lg\:grid-flow-row { grid-auto-flow:row; }
+    .lg\:grid-flow-col { grid-auto-flow:column; }
+    .lg\:grid-flow-dense { grid-auto-flow:row dense; }
+    .lg\:grid-flow-col-dense { grid-auto-flow:column dense; }
+  }
+
+  @media (min-width: 1280px) {
+    .xl\:grid-cols-1 { grid-template-columns:repeat(1, minmax(0, 1fr)); }
+    .xl\:grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
+    .xl\:grid-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
+    .xl\:grid-cols-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
+    .xl\:grid-cols-5 { grid-template-columns:repeat(5, minmax(0, 1fr)); }
+    .xl\:grid-cols-6 { grid-template-columns:repeat(6, minmax(0, 1fr)); }
+    .xl\:grid-cols-none { grid-template-columns:none; }
+    .xl\:grid-cols-auto-fit { grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
+    .xl\:grid-cols-auto-fill { grid-template-columns:repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
+    .xl\:col-span-1 { grid-column:span 1 / span 1; }
+    .xl\:col-span-2 { grid-column:span 2 / span 2; }
+    .xl\:col-span-3 { grid-column:span 3 / span 3; }
+    .xl\:col-span-4 { grid-column:span 4 / span 4; }
+    .xl\:col-span-5 { grid-column:span 5 / span 5; }
+    .xl\:col-span-6 { grid-column:span 6 / span 6; }
+    .xl\:col-span-full { grid-column:1 / -1; }
+    .xl\:grid-flow-row { grid-auto-flow:row; }
+    .xl\:grid-flow-col { grid-auto-flow:column; }
+    .xl\:grid-flow-dense { grid-auto-flow:row dense; }
+    .xl\:grid-flow-col-dense { grid-auto-flow:column dense; }
+  }
+
+  @media (min-width: 1536px) {
+    .\32 xl\:grid-cols-1 { grid-template-columns:repeat(1, minmax(0, 1fr)); }
+    .\32 xl\:grid-cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
+    .\32 xl\:grid-cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
+    .\32 xl\:grid-cols-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
+    .\32 xl\:grid-cols-5 { grid-template-columns:repeat(5, minmax(0, 1fr)); }
+    .\32 xl\:grid-cols-6 { grid-template-columns:repeat(6, minmax(0, 1fr)); }
+    .\32 xl\:grid-cols-none { grid-template-columns:none; }
+    .\32 xl\:grid-cols-auto-fit { grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
+    .\32 xl\:grid-cols-auto-fill { grid-template-columns:repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
+    .\32 xl\:col-span-1 { grid-column:span 1 / span 1; }
+    .\32 xl\:col-span-2 { grid-column:span 2 / span 2; }
+    .\32 xl\:col-span-3 { grid-column:span 3 / span 3; }
+    .\32 xl\:col-span-4 { grid-column:span 4 / span 4; }
+    .\32 xl\:col-span-5 { grid-column:span 5 / span 5; }
+    .\32 xl\:col-span-6 { grid-column:span 6 / span 6; }
+    .\32 xl\:col-span-full { grid-column:1 / -1; }
+    .\32 xl\:grid-flow-row { grid-auto-flow:row; }
+    .\32 xl\:grid-flow-col { grid-auto-flow:column; }
+    .\32 xl\:grid-flow-dense { grid-auto-flow:row dense; }
+    .\32 xl\:grid-flow-col-dense { grid-auto-flow:column dense; }
+  }
+}