From 58ecccb630cffa2f6138d64b5aedaa0d1b9b793c Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 19 Dec 2024 11:02:08 +0000
Subject: [PATCH 01/10] Update Grid component

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Grid/Grid.stories.tsx      |  14 ++
 packages/canon/src/components/Grid/Grid.tsx   |  56 +++----
 packages/canon/src/components/Grid/styles.css |   2 +-
 packages/canon/src/components/Grid/types.ts   |  20 ++-
 packages/canon/src/css/utilities/2xl.css      |  52 +++++++
 packages/canon/src/css/utilities/lg.css       |  52 +++++++
 packages/canon/src/css/utilities/md.css       |  52 +++++++
 packages/canon/src/css/utilities/sm.css       |  52 +++++++
 packages/canon/src/css/utilities/xl.css       |  52 +++++++
 packages/canon/src/css/utilities/xs.css       |  52 +++++++
 packages/canon/src/types.ts                   |  30 ++--
 packages/canon/src/utils/getClassNames.ts     | 145 +++++++++++++-----
 12 files changed, 491 insertions(+), 88 deletions(-)

diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index 73aec06cf4..d4559f362a 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -61,6 +61,20 @@ export const Default: Story = {
   ),
 };
 
+export const Test: Story = {
+  args: {
+    columns: 12,
+    gap: 'md',
+  },
+  render: args => (
+    <Grid {...args}>
+      <FakeBox />
+      <FakeBox />
+      <FakeBox />
+    </Grid>
+  ),
+};
+
 export const LargeGap: Story = {
   args: {
     gap: 'lg',
diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx
index 2b61d1d3d4..67c9c54855 100644
--- a/packages/canon/src/components/Grid/Grid.tsx
+++ b/packages/canon/src/components/Grid/Grid.tsx
@@ -16,62 +16,54 @@
 
 import { createElement, forwardRef } from 'react';
 import { GridItemProps, GridProps } from './types';
-import { gridItemSprinkles, gridSprinkles } from './sprinkles.css';
+import { getClassNames } from '../../utils/getClassNames';
 
 const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const {
     children,
-    columns,
     gap = 'xs',
+    columns = 'auto',
     className,
     style,
     ...restProps
   } = props;
 
-  const sprinklesClassName = gridSprinkles({
-    ...restProps,
-    gap,
-    gridTemplateColumns: columns ? columns : 'auto',
-  });
+  const utilityClassNames = getClassNames({ gap, columns, ...restProps });
 
-  const classNames = ['grid', sprinklesClassName, className]
+  const classNames = ['canon-grid', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');
 
-  return createElement(
-    'div',
-    {
-      ref,
-      className: classNames,
-      style,
-    },
+  return createElement('div', {
+    ref,
+    className: classNames,
+    style,
     children,
-  );
+  });
 });
 
 const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
-  const { children, rowSpan, colSpan, start, end, className, style } = props;
+  const { children, className, style, ...restProps } = props;
 
-  const sprinklesClassName = gridItemSprinkles({
-    rowSpan,
-    colSpan,
-    start,
-    end,
-  });
+  const utilityClassNames = getClassNames(restProps);
 
-  const classNames = ['grid-item', sprinklesClassName, className]
+  // const sprinklesClassName = gridItemSprinkles({
+  //   rowSpan,
+  //   colSpan,
+  //   start,
+  //   end,
+  // });
+
+  const classNames = ['grid-item', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');
 
-  return createElement(
-    'div',
-    {
-      ref,
-      className: classNames,
-      style,
-    },
+  return createElement('div', {
+    ref,
+    className: classNames,
+    style,
     children,
-  );
+  });
 });
 
 /** @public */
diff --git a/packages/canon/src/components/Grid/styles.css b/packages/canon/src/components/Grid/styles.css
index 81f8d5471d..8314f896bc 100644
--- a/packages/canon/src/components/Grid/styles.css
+++ b/packages/canon/src/components/Grid/styles.css
@@ -1,3 +1,3 @@
-.grid {
+.canon-grid {
   display: grid;
 }
diff --git a/packages/canon/src/components/Grid/types.ts b/packages/canon/src/components/Grid/types.ts
index 097ad105e8..4e154f03b7 100644
--- a/packages/canon/src/components/Grid/types.ts
+++ b/packages/canon/src/components/Grid/types.ts
@@ -13,27 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ColorProps } from '../../layout/types';
-import { SpaceProps } from '../../layout/types';
-import type { Breakpoint } from '../../types';
-/** @public */
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+import type { UtilityProps, SpaceProps } from '../../types';
 
 /** @public */
-export interface GridProps extends SpaceProps, ColorProps {
+export interface GridProps extends SpaceProps {
   children?: React.ReactNode;
-  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
   className?: string;
+  columns?: UtilityProps['columns'];
+  gap?: UtilityProps['gap'];
   style?: React.CSSProperties;
 }
 
 /** @public */
 export interface GridItemProps {
   children: React.ReactNode;
-  rowSpan?: Columns | 'full';
-  colSpan?: Columns | 'full';
-  start?: Columns | 'auto';
-  end?: Columns | 'auto';
   className?: string;
+  colSpan?: UtilityProps['colSpan'];
+  colEnd?: UtilityProps['colEnd'];
+  colStart?: UtilityProps['colStart'];
+  rowSpan?: UtilityProps['rowSpan'];
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index 91013ab78e..9ee818e052 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -612,5 +612,57 @@
     .cu-2xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-2xl-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index 673c55885e..0bedcdddd2 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -612,5 +612,57 @@
     .cu-lg-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-lg-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index 4772943947..ae163d9275 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -612,5 +612,57 @@
     .cu-md-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-md-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index d3ffc68b44..4ddb1b9452 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -612,5 +612,57 @@
     .cu-sm-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-sm-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index 0ac56c7de1..8a7130e1a1 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -612,5 +612,57 @@
     .cu-xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
+
+    .cu-xl-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
   }
 }
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index 7276e59c46..f278d96a7c 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -611,4 +611,56 @@
   .cu-wrap-reverse {
     flex-wrap: wrap-reverse;
   }
+
+  .cu-grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
 }
diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts
index 1f2ce8c02b..fbb3c40864 100644
--- a/packages/canon/src/types.ts
+++ b/packages/canon/src/types.ts
@@ -56,15 +56,10 @@ export type BorderRadius =
 export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
 
 /** @public */
-export interface UtilityProps {
-  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
-  border?: Border | Partial<Record<Breakpoint, Border>>;
-  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
-  display?: Display | Partial<Record<Breakpoint, Display>>;
-  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
-  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
-  gap?: Space | Partial<Record<Breakpoint, Space>>;
-  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
+
+/** @public */
+export interface SpaceProps {
   margin?: Space | Partial<Record<Breakpoint, Space>>;
   marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
   marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
@@ -80,3 +75,20 @@ export interface UtilityProps {
   paddingX?: Space | Partial<Record<Breakpoint, Space>>;
   paddingY?: Space | Partial<Record<Breakpoint, Space>>;
 }
+
+/** @public */
+export interface UtilityProps extends SpaceProps {
+  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
+  border?: Border | Partial<Record<Breakpoint, Border>>;
+  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
+  display?: Display | Partial<Record<Breakpoint, Display>>;
+  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
+  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
+  gap?: Space | Partial<Record<Breakpoint, Space>>;
+  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
+  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
+  rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+}
diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts
index 9beb63d24e..47584f35ec 100644
--- a/packages/canon/src/utils/getClassNames.ts
+++ b/packages/canon/src/utils/getClassNames.ts
@@ -27,6 +27,89 @@ const spaceMap = (type: string) => ({
 });
 
 const valueMap: Record<string, Record<string, string>> = {
+  alignItems: {
+    stretch: 'items-stretch',
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+  },
+  border: {
+    none: 'border-none',
+    base: 'border-base',
+    error: 'border-error',
+    warning: 'border-warning',
+    selected: 'border-selected',
+  },
+  borderRadius: {
+    none: 'rounded-none',
+    '2xs': 'rounded-2xs',
+    xs: 'rounded-xs',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+  },
+  colEnd: {
+    1: 'col-end-1',
+    2: 'col-end-2',
+    3: 'col-end-3',
+    4: 'col-end-4',
+    5: 'col-end-5',
+    6: 'col-end-6',
+    7: 'col-end-7',
+    8: 'col-end-8',
+    9: 'col-end-9',
+    10: 'col-end-10',
+    11: 'col-end-11',
+    12: 'col-end-12',
+    auto: 'col-end-auto',
+  },
+  colSpan: {
+    1: 'col-span-1',
+    2: 'col-span-2',
+    3: 'col-span-3',
+    4: 'col-span-4',
+    5: 'col-span-5',
+    6: 'col-span-6',
+    7: 'col-span-7',
+    8: 'col-span-8',
+    9: 'col-span-9',
+    10: 'col-span-10',
+    11: 'col-span-11',
+    12: 'col-span-12',
+    auto: 'col-span-auto',
+  },
+  colStart: {
+    1: 'col-start-1',
+    2: 'col-start-2',
+    3: 'col-start-3',
+    4: 'col-start-4',
+    5: 'col-start-5',
+    6: 'col-start-6',
+    7: 'col-start-7',
+    8: 'col-start-8',
+    9: 'col-start-9',
+    10: 'col-start-10',
+    11: 'col-start-11',
+    12: 'col-start-12',
+    auto: 'col-start-auto',
+  },
+  columns: {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    5: 'grid-cols-5',
+    6: 'grid-cols-6',
+    7: 'grid-cols-7',
+    8: 'grid-cols-8',
+    9: 'grid-cols-9',
+    10: 'grid-cols-10',
+    11: 'grid-cols-11',
+    12: 'grid-cols-12',
+    auto: 'grid-cols-auto',
+  },
   display: {
     none: 'hidden',
     flex: 'flex',
@@ -42,6 +125,7 @@ const valueMap: Record<string, Record<string, string>> = {
     nowrap: 'flex-nowrap',
     'wrap-reverse': 'flex-wrap-reverse',
   },
+  gap: spaceMap('gap'),
   justifyContent: {
     stretch: 'justify-stretch',
     start: 'justify-start',
@@ -50,44 +134,35 @@ const valueMap: Record<string, Record<string, string>> = {
     around: 'justify-around',
     between: 'justify-between',
   },
-  alignItems: {
-    stretch: 'items-stretch',
-    start: 'items-start',
-    center: 'items-center',
-    end: 'items-end',
-  },
-  borderRadius: {
-    none: 'rounded-none',
-    '2xs': 'rounded-2xs',
-    xs: 'rounded-xs',
-    sm: 'rounded-sm',
-    md: 'rounded-md',
-    lg: 'rounded-lg',
-    xl: 'rounded-xl',
-    '2xl': 'rounded-2xl',
-  },
-  border: {
-    none: 'border-none',
-    base: 'border-base',
-    error: 'border-error',
-    warning: 'border-warning',
-    selected: 'border-selected',
-  },
-  padding: spaceMap('p'),
-  paddingX: spaceMap('px'),
-  paddingY: spaceMap('py'),
-  paddingLeft: spaceMap('pl'),
-  paddingRight: spaceMap('pr'),
-  paddingTop: spaceMap('pt'),
-  paddingBottom: spaceMap('pb'),
   margin: spaceMap('m'),
-  marginX: spaceMap('mx'),
-  marginY: spaceMap('my'),
+  marginBottom: spaceMap('mb'),
   marginLeft: spaceMap('ml'),
   marginRight: spaceMap('mr'),
   marginTop: spaceMap('mt'),
-  marginBottom: spaceMap('mb'),
-  gap: spaceMap('gap'),
+  marginX: spaceMap('mx'),
+  marginY: spaceMap('my'),
+  padding: spaceMap('p'),
+  paddingBottom: spaceMap('pb'),
+  paddingLeft: spaceMap('pl'),
+  paddingRight: spaceMap('pr'),
+  paddingTop: spaceMap('pt'),
+  paddingX: spaceMap('px'),
+  paddingY: spaceMap('py'),
+  rowSpan: {
+    1: 'row-span-1',
+    2: 'row-span-2',
+    3: 'row-span-3',
+    4: 'row-span-4',
+    5: 'row-span-5',
+    6: 'row-span-6',
+    7: 'row-span-7',
+    8: 'row-span-8',
+    9: 'row-span-9',
+    10: 'row-span-10',
+    11: 'row-span-11',
+    12: 'row-span-12',
+    full: 'row-span-full',
+  },
 };
 
 const generateClassNames = (propName: string, propValue: any) => {
@@ -98,7 +173,7 @@ const generateClassNames = (propName: string, propValue: any) => {
     return classNames;
   }
 
-  if (typeof propValue === 'string') {
+  if (typeof propValue === 'string' || typeof propValue === 'number') {
     // If the property value is a string, map it to the valueMap
     const value = valueMap[propName]?.[propValue] || propValue;
     classNames.push(`cu-${value}`);

From 49a1306f57b037896eb1a6fa77130542bd9d175a Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 19 Dec 2024 11:43:36 +0000
Subject: [PATCH 02/10] Improve Grid Item

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Grid/sprinkles.css.ts      | 130 -------
 packages/canon/src/css/utilities/2xl.css      | 320 +++++++++++++++---
 packages/canon/src/css/utilities/lg.css       | 320 +++++++++++++++---
 packages/canon/src/css/utilities/md.css       | 320 +++++++++++++++---
 packages/canon/src/css/utilities/sm.css       | 320 +++++++++++++++---
 packages/canon/src/css/utilities/xl.css       | 320 +++++++++++++++---
 packages/canon/src/css/utilities/xs.css       | 320 +++++++++++++++---
 packages/canon/src/types.ts                   |   8 +-
 packages/canon/src/utils/getClassNames.ts     |   1 +
 9 files changed, 1613 insertions(+), 446 deletions(-)
 delete mode 100644 packages/canon/src/components/Grid/sprinkles.css.ts

diff --git a/packages/canon/src/components/Grid/sprinkles.css.ts b/packages/canon/src/components/Grid/sprinkles.css.ts
deleted file mode 100644
index aff5a340ed..0000000000
--- a/packages/canon/src/components/Grid/sprinkles.css.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
-import { breakpoints } from '../../layout/properties';
-import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
-
-const gridProperties = defineProperties({
-  conditions: breakpoints,
-  defaultCondition: 'xs',
-  properties: {
-    gridTemplateColumns: {
-      1: 'repeat(1, minmax(0, 1fr))',
-      2: 'repeat(2, minmax(0, 1fr))',
-      3: 'repeat(3, minmax(0, 1fr))',
-      4: 'repeat(4, minmax(0, 1fr))',
-      5: 'repeat(5, minmax(0, 1fr))',
-      6: 'repeat(6, minmax(0, 1fr))',
-      7: 'repeat(7, minmax(0, 1fr))',
-      8: 'repeat(8, minmax(0, 1fr))',
-      9: 'repeat(9, minmax(0, 1fr))',
-      10: 'repeat(10, minmax(0, 1fr))',
-      11: 'repeat(11, minmax(0, 1fr))',
-      12: 'repeat(12, minmax(0, 1fr))',
-      auto: 'repeat(auto-fit, minmax(0, 1fr))',
-    },
-  },
-  shorthands: {
-    columns: ['gridTemplateColumns'],
-  },
-});
-
-export const gridSprinkles = createSprinkles(
-  spacingProperties,
-  colorProperties,
-  gridProperties,
-);
-
-const gridItemProperties = defineProperties({
-  conditions: breakpoints,
-  defaultCondition: 'xs',
-  properties: {
-    gridColumn: {
-      1: 'span 1 / span 1',
-      2: 'span 2 / span 2',
-      3: 'span 3 / span 3',
-      4: 'span 4 / span 4',
-      5: 'span 5 / span 5',
-      6: 'span 6 / span 6',
-      7: 'span 7 / span 7',
-      8: 'span 8 / span 8',
-      9: 'span 9 / span 9',
-      10: 'span 10 / span 10',
-      11: 'span 11 / span 11',
-      12: 'span 12 / span 12',
-      full: '1 / -1',
-    },
-    gridRow: {
-      1: 'span 1 / span 1',
-      2: 'span 2 / span 2',
-      3: 'span 3 / span 3',
-      4: 'span 4 / span 4',
-      5: 'span 5 / span 5',
-      6: 'span 6 / span 6',
-      7: 'span 7 / span 7',
-      8: 'span 8 / span 8',
-      9: 'span 9 / span 9',
-      10: 'span 10 / span 10',
-      11: 'span 11 / span 11',
-      12: 'span 12 / span 12',
-      full: '1 / -1',
-    },
-    gridColumnStart: {
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      13: '13',
-      auto: 'auto',
-    },
-    gridColumnEnd: {
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      13: '13',
-      auto: 'auto',
-    },
-  },
-  shorthands: {
-    colSpan: ['gridColumn'],
-    rowSpan: ['gridRow'],
-    start: ['gridColumnStart'],
-    end: ['gridColumnEnd'],
-  },
-});
-
-export const gridItemSprinkles = createSprinkles(
-  colorProperties,
-  gridItemProperties,
-);
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index 9ee818e052..8938d0dbc5 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -49,6 +49,170 @@
       border-style: solid;
     }
 
+    .cu-2xl-col-end-1 {
+      grid-column-end: 1;
+    }
+
+    .cu-2xl-col-end-10 {
+      grid-column-end: 10;
+    }
+
+    .cu-2xl-col-end-11 {
+      grid-column-end: 11;
+    }
+
+    .cu-2xl-col-end-12 {
+      grid-column-end: 12;
+    }
+
+    .cu-2xl-col-end-13 {
+      grid-column-end: 13;
+    }
+
+    .cu-2xl-col-end-2 {
+      grid-column-end: 2;
+    }
+
+    .cu-2xl-col-end-3 {
+      grid-column-end: 3;
+    }
+
+    .cu-2xl-col-end-4 {
+      grid-column-end: 4;
+    }
+
+    .cu-2xl-col-end-5 {
+      grid-column-end: 5;
+    }
+
+    .cu-2xl-col-end-6 {
+      grid-column-end: 6;
+    }
+
+    .cu-2xl-col-end-7 {
+      grid-column-end: 7;
+    }
+
+    .cu-2xl-col-end-8 {
+      grid-column-end: 8;
+    }
+
+    .cu-2xl-col-end-9 {
+      grid-column-end: 9;
+    }
+
+    .cu-2xl-col-end-auto {
+      grid-column-end: auto;
+    }
+
+    .cu-2xl-col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+
+    .cu-2xl-col-span-10 {
+      grid-column: span 10 / span 10;
+    }
+
+    .cu-2xl-col-span-11 {
+      grid-column: span 11 / span 11;
+    }
+
+    .cu-2xl-col-span-12 {
+      grid-column: span 12 / span 12;
+    }
+
+    .cu-2xl-col-span-2 {
+      grid-column: span 2 / span 2;
+    }
+
+    .cu-2xl-col-span-3 {
+      grid-column: span 3 / span 3;
+    }
+
+    .cu-2xl-col-span-4 {
+      grid-column: span 4 / span 4;
+    }
+
+    .cu-2xl-col-span-5 {
+      grid-column: span 5 / span 5;
+    }
+
+    .cu-2xl-col-span-6 {
+      grid-column: span 6 / span 6;
+    }
+
+    .cu-2xl-col-span-7 {
+      grid-column: span 7 / span 7;
+    }
+
+    .cu-2xl-col-span-8 {
+      grid-column: span 8 / span 8;
+    }
+
+    .cu-2xl-col-span-9 {
+      grid-column: span 9 / span 9;
+    }
+
+    .cu-2xl-col-span-auto {
+      grid-column: span auto / span auto;
+    }
+
+    .cu-2xl-col-start-1 {
+      grid-column-start: 1;
+    }
+
+    .cu-2xl-col-start-10 {
+      grid-column-start: 10;
+    }
+
+    .cu-2xl-col-start-11 {
+      grid-column-start: 11;
+    }
+
+    .cu-2xl-col-start-12 {
+      grid-column-start: 12;
+    }
+
+    .cu-2xl-col-start-13 {
+      grid-column-start: 13;
+    }
+
+    .cu-2xl-col-start-2 {
+      grid-column-start: 2;
+    }
+
+    .cu-2xl-col-start-3 {
+      grid-column-start: 3;
+    }
+
+    .cu-2xl-col-start-4 {
+      grid-column-start: 4;
+    }
+
+    .cu-2xl-col-start-5 {
+      grid-column-start: 5;
+    }
+
+    .cu-2xl-col-start-6 {
+      grid-column-start: 6;
+    }
+
+    .cu-2xl-col-start-7 {
+      grid-column-start: 7;
+    }
+
+    .cu-2xl-col-start-8 {
+      grid-column-start: 8;
+    }
+
+    .cu-2xl-col-start-9 {
+      grid-column-start: 9;
+    }
+
+    .cu-2xl-col-start-auto {
+      grid-column-start: auto;
+    }
+
     .cu-2xl-flex {
       display: flex;
     }
@@ -105,6 +269,58 @@
       display: grid;
     }
 
+    .cu-2xl-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-2xl-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
+
     .cu-2xl-hidden {
       display: none;
     }
@@ -609,60 +825,60 @@
       border-radius: var(--canon-border-radius-xs);
     }
 
+    .cu-2xl-row-span-1 {
+      grid-row: span 1 / span 1;
+    }
+
+    .cu-2xl-row-span-10 {
+      grid-row: span 10 / span 10;
+    }
+
+    .cu-2xl-row-span-11 {
+      grid-row: span 11 / span 11;
+    }
+
+    .cu-2xl-row-span-12 {
+      grid-row: span 12 / span 12;
+    }
+
+    .cu-2xl-row-span-2 {
+      grid-row: span 2 / span 2;
+    }
+
+    .cu-2xl-row-span-3 {
+      grid-row: span 3 / span 3;
+    }
+
+    .cu-2xl-row-span-4 {
+      grid-row: span 4 / span 4;
+    }
+
+    .cu-2xl-row-span-5 {
+      grid-row: span 5 / span 5;
+    }
+
+    .cu-2xl-row-span-6 {
+      grid-row: span 6 / span 6;
+    }
+
+    .cu-2xl-row-span-7 {
+      grid-row: span 7 / span 7;
+    }
+
+    .cu-2xl-row-span-8 {
+      grid-row: span 8 / span 8;
+    }
+
+    .cu-2xl-row-span-9 {
+      grid-row: span 9 / span 9;
+    }
+
+    .cu-2xl-row-span-auto {
+      grid-row: span auto / span auto;
+    }
+
     .cu-2xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
-
-    .cu-2xl-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
   }
 }
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index 0bedcdddd2..3053a0dde3 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -49,6 +49,170 @@
       border-style: solid;
     }
 
+    .cu-lg-col-end-1 {
+      grid-column-end: 1;
+    }
+
+    .cu-lg-col-end-10 {
+      grid-column-end: 10;
+    }
+
+    .cu-lg-col-end-11 {
+      grid-column-end: 11;
+    }
+
+    .cu-lg-col-end-12 {
+      grid-column-end: 12;
+    }
+
+    .cu-lg-col-end-13 {
+      grid-column-end: 13;
+    }
+
+    .cu-lg-col-end-2 {
+      grid-column-end: 2;
+    }
+
+    .cu-lg-col-end-3 {
+      grid-column-end: 3;
+    }
+
+    .cu-lg-col-end-4 {
+      grid-column-end: 4;
+    }
+
+    .cu-lg-col-end-5 {
+      grid-column-end: 5;
+    }
+
+    .cu-lg-col-end-6 {
+      grid-column-end: 6;
+    }
+
+    .cu-lg-col-end-7 {
+      grid-column-end: 7;
+    }
+
+    .cu-lg-col-end-8 {
+      grid-column-end: 8;
+    }
+
+    .cu-lg-col-end-9 {
+      grid-column-end: 9;
+    }
+
+    .cu-lg-col-end-auto {
+      grid-column-end: auto;
+    }
+
+    .cu-lg-col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+
+    .cu-lg-col-span-10 {
+      grid-column: span 10 / span 10;
+    }
+
+    .cu-lg-col-span-11 {
+      grid-column: span 11 / span 11;
+    }
+
+    .cu-lg-col-span-12 {
+      grid-column: span 12 / span 12;
+    }
+
+    .cu-lg-col-span-2 {
+      grid-column: span 2 / span 2;
+    }
+
+    .cu-lg-col-span-3 {
+      grid-column: span 3 / span 3;
+    }
+
+    .cu-lg-col-span-4 {
+      grid-column: span 4 / span 4;
+    }
+
+    .cu-lg-col-span-5 {
+      grid-column: span 5 / span 5;
+    }
+
+    .cu-lg-col-span-6 {
+      grid-column: span 6 / span 6;
+    }
+
+    .cu-lg-col-span-7 {
+      grid-column: span 7 / span 7;
+    }
+
+    .cu-lg-col-span-8 {
+      grid-column: span 8 / span 8;
+    }
+
+    .cu-lg-col-span-9 {
+      grid-column: span 9 / span 9;
+    }
+
+    .cu-lg-col-span-auto {
+      grid-column: span auto / span auto;
+    }
+
+    .cu-lg-col-start-1 {
+      grid-column-start: 1;
+    }
+
+    .cu-lg-col-start-10 {
+      grid-column-start: 10;
+    }
+
+    .cu-lg-col-start-11 {
+      grid-column-start: 11;
+    }
+
+    .cu-lg-col-start-12 {
+      grid-column-start: 12;
+    }
+
+    .cu-lg-col-start-13 {
+      grid-column-start: 13;
+    }
+
+    .cu-lg-col-start-2 {
+      grid-column-start: 2;
+    }
+
+    .cu-lg-col-start-3 {
+      grid-column-start: 3;
+    }
+
+    .cu-lg-col-start-4 {
+      grid-column-start: 4;
+    }
+
+    .cu-lg-col-start-5 {
+      grid-column-start: 5;
+    }
+
+    .cu-lg-col-start-6 {
+      grid-column-start: 6;
+    }
+
+    .cu-lg-col-start-7 {
+      grid-column-start: 7;
+    }
+
+    .cu-lg-col-start-8 {
+      grid-column-start: 8;
+    }
+
+    .cu-lg-col-start-9 {
+      grid-column-start: 9;
+    }
+
+    .cu-lg-col-start-auto {
+      grid-column-start: auto;
+    }
+
     .cu-lg-flex {
       display: flex;
     }
@@ -105,6 +269,58 @@
       display: grid;
     }
 
+    .cu-lg-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-lg-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
+
     .cu-lg-hidden {
       display: none;
     }
@@ -609,60 +825,60 @@
       border-radius: var(--canon-border-radius-xs);
     }
 
+    .cu-lg-row-span-1 {
+      grid-row: span 1 / span 1;
+    }
+
+    .cu-lg-row-span-10 {
+      grid-row: span 10 / span 10;
+    }
+
+    .cu-lg-row-span-11 {
+      grid-row: span 11 / span 11;
+    }
+
+    .cu-lg-row-span-12 {
+      grid-row: span 12 / span 12;
+    }
+
+    .cu-lg-row-span-2 {
+      grid-row: span 2 / span 2;
+    }
+
+    .cu-lg-row-span-3 {
+      grid-row: span 3 / span 3;
+    }
+
+    .cu-lg-row-span-4 {
+      grid-row: span 4 / span 4;
+    }
+
+    .cu-lg-row-span-5 {
+      grid-row: span 5 / span 5;
+    }
+
+    .cu-lg-row-span-6 {
+      grid-row: span 6 / span 6;
+    }
+
+    .cu-lg-row-span-7 {
+      grid-row: span 7 / span 7;
+    }
+
+    .cu-lg-row-span-8 {
+      grid-row: span 8 / span 8;
+    }
+
+    .cu-lg-row-span-9 {
+      grid-row: span 9 / span 9;
+    }
+
+    .cu-lg-row-span-auto {
+      grid-row: span auto / span auto;
+    }
+
     .cu-lg-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
-
-    .cu-lg-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
   }
 }
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index ae163d9275..62491f047a 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -49,6 +49,170 @@
       border-style: solid;
     }
 
+    .cu-md-col-end-1 {
+      grid-column-end: 1;
+    }
+
+    .cu-md-col-end-10 {
+      grid-column-end: 10;
+    }
+
+    .cu-md-col-end-11 {
+      grid-column-end: 11;
+    }
+
+    .cu-md-col-end-12 {
+      grid-column-end: 12;
+    }
+
+    .cu-md-col-end-13 {
+      grid-column-end: 13;
+    }
+
+    .cu-md-col-end-2 {
+      grid-column-end: 2;
+    }
+
+    .cu-md-col-end-3 {
+      grid-column-end: 3;
+    }
+
+    .cu-md-col-end-4 {
+      grid-column-end: 4;
+    }
+
+    .cu-md-col-end-5 {
+      grid-column-end: 5;
+    }
+
+    .cu-md-col-end-6 {
+      grid-column-end: 6;
+    }
+
+    .cu-md-col-end-7 {
+      grid-column-end: 7;
+    }
+
+    .cu-md-col-end-8 {
+      grid-column-end: 8;
+    }
+
+    .cu-md-col-end-9 {
+      grid-column-end: 9;
+    }
+
+    .cu-md-col-end-auto {
+      grid-column-end: auto;
+    }
+
+    .cu-md-col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+
+    .cu-md-col-span-10 {
+      grid-column: span 10 / span 10;
+    }
+
+    .cu-md-col-span-11 {
+      grid-column: span 11 / span 11;
+    }
+
+    .cu-md-col-span-12 {
+      grid-column: span 12 / span 12;
+    }
+
+    .cu-md-col-span-2 {
+      grid-column: span 2 / span 2;
+    }
+
+    .cu-md-col-span-3 {
+      grid-column: span 3 / span 3;
+    }
+
+    .cu-md-col-span-4 {
+      grid-column: span 4 / span 4;
+    }
+
+    .cu-md-col-span-5 {
+      grid-column: span 5 / span 5;
+    }
+
+    .cu-md-col-span-6 {
+      grid-column: span 6 / span 6;
+    }
+
+    .cu-md-col-span-7 {
+      grid-column: span 7 / span 7;
+    }
+
+    .cu-md-col-span-8 {
+      grid-column: span 8 / span 8;
+    }
+
+    .cu-md-col-span-9 {
+      grid-column: span 9 / span 9;
+    }
+
+    .cu-md-col-span-auto {
+      grid-column: span auto / span auto;
+    }
+
+    .cu-md-col-start-1 {
+      grid-column-start: 1;
+    }
+
+    .cu-md-col-start-10 {
+      grid-column-start: 10;
+    }
+
+    .cu-md-col-start-11 {
+      grid-column-start: 11;
+    }
+
+    .cu-md-col-start-12 {
+      grid-column-start: 12;
+    }
+
+    .cu-md-col-start-13 {
+      grid-column-start: 13;
+    }
+
+    .cu-md-col-start-2 {
+      grid-column-start: 2;
+    }
+
+    .cu-md-col-start-3 {
+      grid-column-start: 3;
+    }
+
+    .cu-md-col-start-4 {
+      grid-column-start: 4;
+    }
+
+    .cu-md-col-start-5 {
+      grid-column-start: 5;
+    }
+
+    .cu-md-col-start-6 {
+      grid-column-start: 6;
+    }
+
+    .cu-md-col-start-7 {
+      grid-column-start: 7;
+    }
+
+    .cu-md-col-start-8 {
+      grid-column-start: 8;
+    }
+
+    .cu-md-col-start-9 {
+      grid-column-start: 9;
+    }
+
+    .cu-md-col-start-auto {
+      grid-column-start: auto;
+    }
+
     .cu-md-flex {
       display: flex;
     }
@@ -105,6 +269,58 @@
       display: grid;
     }
 
+    .cu-md-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-md-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
+
     .cu-md-hidden {
       display: none;
     }
@@ -609,60 +825,60 @@
       border-radius: var(--canon-border-radius-xs);
     }
 
+    .cu-md-row-span-1 {
+      grid-row: span 1 / span 1;
+    }
+
+    .cu-md-row-span-10 {
+      grid-row: span 10 / span 10;
+    }
+
+    .cu-md-row-span-11 {
+      grid-row: span 11 / span 11;
+    }
+
+    .cu-md-row-span-12 {
+      grid-row: span 12 / span 12;
+    }
+
+    .cu-md-row-span-2 {
+      grid-row: span 2 / span 2;
+    }
+
+    .cu-md-row-span-3 {
+      grid-row: span 3 / span 3;
+    }
+
+    .cu-md-row-span-4 {
+      grid-row: span 4 / span 4;
+    }
+
+    .cu-md-row-span-5 {
+      grid-row: span 5 / span 5;
+    }
+
+    .cu-md-row-span-6 {
+      grid-row: span 6 / span 6;
+    }
+
+    .cu-md-row-span-7 {
+      grid-row: span 7 / span 7;
+    }
+
+    .cu-md-row-span-8 {
+      grid-row: span 8 / span 8;
+    }
+
+    .cu-md-row-span-9 {
+      grid-row: span 9 / span 9;
+    }
+
+    .cu-md-row-span-auto {
+      grid-row: span auto / span auto;
+    }
+
     .cu-md-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
-
-    .cu-md-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
   }
 }
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index 4ddb1b9452..60ddf67de5 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -49,6 +49,170 @@
       border-style: solid;
     }
 
+    .cu-sm-col-end-1 {
+      grid-column-end: 1;
+    }
+
+    .cu-sm-col-end-10 {
+      grid-column-end: 10;
+    }
+
+    .cu-sm-col-end-11 {
+      grid-column-end: 11;
+    }
+
+    .cu-sm-col-end-12 {
+      grid-column-end: 12;
+    }
+
+    .cu-sm-col-end-13 {
+      grid-column-end: 13;
+    }
+
+    .cu-sm-col-end-2 {
+      grid-column-end: 2;
+    }
+
+    .cu-sm-col-end-3 {
+      grid-column-end: 3;
+    }
+
+    .cu-sm-col-end-4 {
+      grid-column-end: 4;
+    }
+
+    .cu-sm-col-end-5 {
+      grid-column-end: 5;
+    }
+
+    .cu-sm-col-end-6 {
+      grid-column-end: 6;
+    }
+
+    .cu-sm-col-end-7 {
+      grid-column-end: 7;
+    }
+
+    .cu-sm-col-end-8 {
+      grid-column-end: 8;
+    }
+
+    .cu-sm-col-end-9 {
+      grid-column-end: 9;
+    }
+
+    .cu-sm-col-end-auto {
+      grid-column-end: auto;
+    }
+
+    .cu-sm-col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+
+    .cu-sm-col-span-10 {
+      grid-column: span 10 / span 10;
+    }
+
+    .cu-sm-col-span-11 {
+      grid-column: span 11 / span 11;
+    }
+
+    .cu-sm-col-span-12 {
+      grid-column: span 12 / span 12;
+    }
+
+    .cu-sm-col-span-2 {
+      grid-column: span 2 / span 2;
+    }
+
+    .cu-sm-col-span-3 {
+      grid-column: span 3 / span 3;
+    }
+
+    .cu-sm-col-span-4 {
+      grid-column: span 4 / span 4;
+    }
+
+    .cu-sm-col-span-5 {
+      grid-column: span 5 / span 5;
+    }
+
+    .cu-sm-col-span-6 {
+      grid-column: span 6 / span 6;
+    }
+
+    .cu-sm-col-span-7 {
+      grid-column: span 7 / span 7;
+    }
+
+    .cu-sm-col-span-8 {
+      grid-column: span 8 / span 8;
+    }
+
+    .cu-sm-col-span-9 {
+      grid-column: span 9 / span 9;
+    }
+
+    .cu-sm-col-span-auto {
+      grid-column: span auto / span auto;
+    }
+
+    .cu-sm-col-start-1 {
+      grid-column-start: 1;
+    }
+
+    .cu-sm-col-start-10 {
+      grid-column-start: 10;
+    }
+
+    .cu-sm-col-start-11 {
+      grid-column-start: 11;
+    }
+
+    .cu-sm-col-start-12 {
+      grid-column-start: 12;
+    }
+
+    .cu-sm-col-start-13 {
+      grid-column-start: 13;
+    }
+
+    .cu-sm-col-start-2 {
+      grid-column-start: 2;
+    }
+
+    .cu-sm-col-start-3 {
+      grid-column-start: 3;
+    }
+
+    .cu-sm-col-start-4 {
+      grid-column-start: 4;
+    }
+
+    .cu-sm-col-start-5 {
+      grid-column-start: 5;
+    }
+
+    .cu-sm-col-start-6 {
+      grid-column-start: 6;
+    }
+
+    .cu-sm-col-start-7 {
+      grid-column-start: 7;
+    }
+
+    .cu-sm-col-start-8 {
+      grid-column-start: 8;
+    }
+
+    .cu-sm-col-start-9 {
+      grid-column-start: 9;
+    }
+
+    .cu-sm-col-start-auto {
+      grid-column-start: auto;
+    }
+
     .cu-sm-flex {
       display: flex;
     }
@@ -105,6 +269,58 @@
       display: grid;
     }
 
+    .cu-sm-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-sm-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
+
     .cu-sm-hidden {
       display: none;
     }
@@ -609,60 +825,60 @@
       border-radius: var(--canon-border-radius-xs);
     }
 
+    .cu-sm-row-span-1 {
+      grid-row: span 1 / span 1;
+    }
+
+    .cu-sm-row-span-10 {
+      grid-row: span 10 / span 10;
+    }
+
+    .cu-sm-row-span-11 {
+      grid-row: span 11 / span 11;
+    }
+
+    .cu-sm-row-span-12 {
+      grid-row: span 12 / span 12;
+    }
+
+    .cu-sm-row-span-2 {
+      grid-row: span 2 / span 2;
+    }
+
+    .cu-sm-row-span-3 {
+      grid-row: span 3 / span 3;
+    }
+
+    .cu-sm-row-span-4 {
+      grid-row: span 4 / span 4;
+    }
+
+    .cu-sm-row-span-5 {
+      grid-row: span 5 / span 5;
+    }
+
+    .cu-sm-row-span-6 {
+      grid-row: span 6 / span 6;
+    }
+
+    .cu-sm-row-span-7 {
+      grid-row: span 7 / span 7;
+    }
+
+    .cu-sm-row-span-8 {
+      grid-row: span 8 / span 8;
+    }
+
+    .cu-sm-row-span-9 {
+      grid-row: span 9 / span 9;
+    }
+
+    .cu-sm-row-span-auto {
+      grid-row: span auto / span auto;
+    }
+
     .cu-sm-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
-
-    .cu-sm-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
   }
 }
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index 8a7130e1a1..0a999756ae 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -49,6 +49,170 @@
       border-style: solid;
     }
 
+    .cu-xl-col-end-1 {
+      grid-column-end: 1;
+    }
+
+    .cu-xl-col-end-10 {
+      grid-column-end: 10;
+    }
+
+    .cu-xl-col-end-11 {
+      grid-column-end: 11;
+    }
+
+    .cu-xl-col-end-12 {
+      grid-column-end: 12;
+    }
+
+    .cu-xl-col-end-13 {
+      grid-column-end: 13;
+    }
+
+    .cu-xl-col-end-2 {
+      grid-column-end: 2;
+    }
+
+    .cu-xl-col-end-3 {
+      grid-column-end: 3;
+    }
+
+    .cu-xl-col-end-4 {
+      grid-column-end: 4;
+    }
+
+    .cu-xl-col-end-5 {
+      grid-column-end: 5;
+    }
+
+    .cu-xl-col-end-6 {
+      grid-column-end: 6;
+    }
+
+    .cu-xl-col-end-7 {
+      grid-column-end: 7;
+    }
+
+    .cu-xl-col-end-8 {
+      grid-column-end: 8;
+    }
+
+    .cu-xl-col-end-9 {
+      grid-column-end: 9;
+    }
+
+    .cu-xl-col-end-auto {
+      grid-column-end: auto;
+    }
+
+    .cu-xl-col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+
+    .cu-xl-col-span-10 {
+      grid-column: span 10 / span 10;
+    }
+
+    .cu-xl-col-span-11 {
+      grid-column: span 11 / span 11;
+    }
+
+    .cu-xl-col-span-12 {
+      grid-column: span 12 / span 12;
+    }
+
+    .cu-xl-col-span-2 {
+      grid-column: span 2 / span 2;
+    }
+
+    .cu-xl-col-span-3 {
+      grid-column: span 3 / span 3;
+    }
+
+    .cu-xl-col-span-4 {
+      grid-column: span 4 / span 4;
+    }
+
+    .cu-xl-col-span-5 {
+      grid-column: span 5 / span 5;
+    }
+
+    .cu-xl-col-span-6 {
+      grid-column: span 6 / span 6;
+    }
+
+    .cu-xl-col-span-7 {
+      grid-column: span 7 / span 7;
+    }
+
+    .cu-xl-col-span-8 {
+      grid-column: span 8 / span 8;
+    }
+
+    .cu-xl-col-span-9 {
+      grid-column: span 9 / span 9;
+    }
+
+    .cu-xl-col-span-auto {
+      grid-column: span auto / span auto;
+    }
+
+    .cu-xl-col-start-1 {
+      grid-column-start: 1;
+    }
+
+    .cu-xl-col-start-10 {
+      grid-column-start: 10;
+    }
+
+    .cu-xl-col-start-11 {
+      grid-column-start: 11;
+    }
+
+    .cu-xl-col-start-12 {
+      grid-column-start: 12;
+    }
+
+    .cu-xl-col-start-13 {
+      grid-column-start: 13;
+    }
+
+    .cu-xl-col-start-2 {
+      grid-column-start: 2;
+    }
+
+    .cu-xl-col-start-3 {
+      grid-column-start: 3;
+    }
+
+    .cu-xl-col-start-4 {
+      grid-column-start: 4;
+    }
+
+    .cu-xl-col-start-5 {
+      grid-column-start: 5;
+    }
+
+    .cu-xl-col-start-6 {
+      grid-column-start: 6;
+    }
+
+    .cu-xl-col-start-7 {
+      grid-column-start: 7;
+    }
+
+    .cu-xl-col-start-8 {
+      grid-column-start: 8;
+    }
+
+    .cu-xl-col-start-9 {
+      grid-column-start: 9;
+    }
+
+    .cu-xl-col-start-auto {
+      grid-column-start: auto;
+    }
+
     .cu-xl-flex {
       display: flex;
     }
@@ -105,6 +269,58 @@
       display: grid;
     }
 
+    .cu-xl-grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+
+    .cu-xl-grid-cols-auto {
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
+
     .cu-xl-hidden {
       display: none;
     }
@@ -609,60 +825,60 @@
       border-radius: var(--canon-border-radius-xs);
     }
 
+    .cu-xl-row-span-1 {
+      grid-row: span 1 / span 1;
+    }
+
+    .cu-xl-row-span-10 {
+      grid-row: span 10 / span 10;
+    }
+
+    .cu-xl-row-span-11 {
+      grid-row: span 11 / span 11;
+    }
+
+    .cu-xl-row-span-12 {
+      grid-row: span 12 / span 12;
+    }
+
+    .cu-xl-row-span-2 {
+      grid-row: span 2 / span 2;
+    }
+
+    .cu-xl-row-span-3 {
+      grid-row: span 3 / span 3;
+    }
+
+    .cu-xl-row-span-4 {
+      grid-row: span 4 / span 4;
+    }
+
+    .cu-xl-row-span-5 {
+      grid-row: span 5 / span 5;
+    }
+
+    .cu-xl-row-span-6 {
+      grid-row: span 6 / span 6;
+    }
+
+    .cu-xl-row-span-7 {
+      grid-row: span 7 / span 7;
+    }
+
+    .cu-xl-row-span-8 {
+      grid-row: span 8 / span 8;
+    }
+
+    .cu-xl-row-span-9 {
+      grid-row: span 9 / span 9;
+    }
+
+    .cu-xl-row-span-auto {
+      grid-row: span auto / span auto;
+    }
+
     .cu-xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
-
-    .cu-xl-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
   }
 }
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index f278d96a7c..28ec25c817 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -48,6 +48,170 @@
     border-style: solid;
   }
 
+  .cu-col-end-1 {
+    grid-column-end: 1;
+  }
+
+  .cu-col-end-10 {
+    grid-column-end: 10;
+  }
+
+  .cu-col-end-11 {
+    grid-column-end: 11;
+  }
+
+  .cu-col-end-12 {
+    grid-column-end: 12;
+  }
+
+  .cu-col-end-13 {
+    grid-column-end: 13;
+  }
+
+  .cu-col-end-2 {
+    grid-column-end: 2;
+  }
+
+  .cu-col-end-3 {
+    grid-column-end: 3;
+  }
+
+  .cu-col-end-4 {
+    grid-column-end: 4;
+  }
+
+  .cu-col-end-5 {
+    grid-column-end: 5;
+  }
+
+  .cu-col-end-6 {
+    grid-column-end: 6;
+  }
+
+  .cu-col-end-7 {
+    grid-column-end: 7;
+  }
+
+  .cu-col-end-8 {
+    grid-column-end: 8;
+  }
+
+  .cu-col-end-9 {
+    grid-column-end: 9;
+  }
+
+  .cu-col-end-auto {
+    grid-column-end: auto;
+  }
+
+  .cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  .cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+
+  .cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+
+  .cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+
+  .cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
+  .cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+
+  .cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+
+  .cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+
+  .cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+
+  .cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+
+  .cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+
+  .cu-col-start-1 {
+    grid-column-start: 1;
+  }
+
+  .cu-col-start-10 {
+    grid-column-start: 10;
+  }
+
+  .cu-col-start-11 {
+    grid-column-start: 11;
+  }
+
+  .cu-col-start-12 {
+    grid-column-start: 12;
+  }
+
+  .cu-col-start-13 {
+    grid-column-start: 13;
+  }
+
+  .cu-col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .cu-col-start-3 {
+    grid-column-start: 3;
+  }
+
+  .cu-col-start-4 {
+    grid-column-start: 4;
+  }
+
+  .cu-col-start-5 {
+    grid-column-start: 5;
+  }
+
+  .cu-col-start-6 {
+    grid-column-start: 6;
+  }
+
+  .cu-col-start-7 {
+    grid-column-start: 7;
+  }
+
+  .cu-col-start-8 {
+    grid-column-start: 8;
+  }
+
+  .cu-col-start-9 {
+    grid-column-start: 9;
+  }
+
+  .cu-col-start-auto {
+    grid-column-start: auto;
+  }
+
   .cu-flex {
     display: flex;
   }
@@ -104,6 +268,58 @@
     display: grid;
   }
 
+  .cu-grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+
+  .cu-grid-cols-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+
   .cu-hidden {
     display: none;
   }
@@ -608,59 +824,59 @@
     border-radius: var(--canon-border-radius-xs);
   }
 
+  .cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+
+  .cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+
+  .cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+
+  .cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+
+  .cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+
+  .cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+
+  .cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+
+  .cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+
+  .cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+
+  .cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+
+  .cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+
+  .cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+
+  .cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+
   .cu-wrap-reverse {
     flex-wrap: wrap-reverse;
   }
-
-  .cu-grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-9 {
-    grid-template-columns: repeat(9, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-10 {
-    grid-template-columns: repeat(10, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-11 {
-    grid-template-columns: repeat(11, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-auto {
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-  }
 }
diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts
index fbb3c40864..08c3d481da 100644
--- a/packages/canon/src/types.ts
+++ b/packages/canon/src/types.ts
@@ -81,14 +81,14 @@ export interface UtilityProps extends SpaceProps {
   alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
   border?: Border | Partial<Record<Breakpoint, Border>>;
   borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
+  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
   display?: Display | Partial<Record<Breakpoint, Display>>;
   flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
   flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
   gap?: Space | Partial<Record<Breakpoint, Space>>;
   justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
-  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
   rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
-  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
-  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
-  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
 }
diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts
index 47584f35ec..684e633027 100644
--- a/packages/canon/src/utils/getClassNames.ts
+++ b/packages/canon/src/utils/getClassNames.ts
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import type { Breakpoint, UtilityProps } from '../types';
 
 const spaceMap = (type: string) => ({

From e43c7b414f5dc99ba782bf3c0cb8de4a82e639a7 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 19 Dec 2024 12:06:19 +0000
Subject: [PATCH 03/10] Fix docs + types

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/docs/spaceProps.ts             |  73 ++++++++++
 packages/canon/report.api.md                  | 133 +++++-------------
 packages/canon/src/components/Box/Docs.mdx    |  62 +-------
 .../canon/src/components/Container/types.ts   |   2 +-
 packages/canon/src/components/Grid/Docs.mdx   |   6 +-
 .../src/components/Grid/Grid.stories.tsx      |  14 --
 packages/canon/src/components/Grid/Grid.tsx   |   7 -
 packages/canon/src/components/Grid/index.ts   |   2 +-
 packages/canon/src/components/Inline/types.ts |   5 +-
 packages/canon/src/components/Stack/types.ts  |   5 +-
 packages/canon/src/layout/types.ts            |  66 ---------
 11 files changed, 123 insertions(+), 252 deletions(-)
 create mode 100644 packages/canon/docs/spaceProps.ts

diff --git a/packages/canon/docs/spaceProps.ts b/packages/canon/docs/spaceProps.ts
new file mode 100644
index 0000000000..132ccce699
--- /dev/null
+++ b/packages/canon/docs/spaceProps.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const spacePropsList = {
+  margin: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginBottom: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginLeft: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginRight: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginTop: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginX: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  marginY: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  padding: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingBottom: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingLeft: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingRight: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingTop: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingX: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+  paddingY: {
+    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+    responsive: true,
+  },
+};
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 12a52cc1d6..4ff3824bb0 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -146,7 +146,7 @@ export interface ColorProps {
 }
 
 // @public (undocumented)
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
 
 // @public (undocumented)
 export const Container: React_2.ForwardRefExoticComponent<
@@ -184,9 +184,6 @@ export type FlexDirection = 'row' | 'column';
 // @public (undocumented)
 export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 
-// @public (undocumented)
-export type Gap = Space | Partial<Record<Breakpoint, Space>>;
-
 // @public (undocumented)
 export const Grid: ForwardRefExoticComponent<
   GridProps & RefAttributes<HTMLDivElement>
@@ -203,25 +200,27 @@ export interface GridItemProps {
   // (undocumented)
   className?: string;
   // (undocumented)
-  colSpan?: Columns | 'full';
+  colEnd?: UtilityProps['colEnd'];
   // (undocumented)
-  end?: Columns | 'auto';
+  colSpan?: UtilityProps['colSpan'];
   // (undocumented)
-  rowSpan?: Columns | 'full';
+  colStart?: UtilityProps['colStart'];
   // (undocumented)
-  start?: Columns | 'auto';
+  rowSpan?: UtilityProps['rowSpan'];
   // (undocumented)
   style?: React.CSSProperties;
 }
 
 // @public (undocumented)
-export interface GridProps extends SpaceProps, ColorProps {
+export interface GridProps extends SpaceProps {
   // (undocumented)
   children?: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
-  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
+  columns?: UtilityProps['columns'];
+  // (undocumented)
+  gap?: UtilityProps['gap'];
   // (undocumented)
   style?: React.CSSProperties;
 }
@@ -284,6 +283,8 @@ export interface InlineProps extends SpaceProps, ColorProps {
   // (undocumented)
   className?: string;
   // (undocumented)
+  gap?: UtilityProps['gap'];
+  // (undocumented)
   style?: React.CSSProperties;
 }
 
@@ -296,83 +297,39 @@ export type JustifyContent =
   | 'around'
   | 'between';
 
-// @public (undocumented)
-export type Margin = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginBottom = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginLeft = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginRight = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginTop = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginX = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type MarginY = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type Padding = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingBottom = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingLeft = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingRight = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingTop = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingX = Space | Partial<Record<Breakpoint, Space>>;
-
-// @public (undocumented)
-export type PaddingY = Space | Partial<Record<Breakpoint, Space>>;
-
 // @public (undocumented)
 export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 // @public (undocumented)
 export interface SpaceProps {
   // (undocumented)
-  gap?: Gap;
+  margin?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  margin?: Margin;
+  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginBottom?: MarginBottom;
+  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginLeft?: MarginLeft;
+  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginRight?: MarginRight;
+  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginTop?: MarginTop;
+  marginX?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginX?: MarginX;
+  marginY?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  marginY?: MarginY;
+  padding?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  padding?: Padding;
+  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  paddingBottom?: PaddingBottom;
+  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  paddingLeft?: PaddingLeft;
+  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  paddingRight?: PaddingRight;
+  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  paddingTop?: PaddingTop;
+  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  paddingX?: PaddingX;
-  // (undocumented)
-  paddingY?: PaddingY;
+  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
 }
 
 // @public (undocumented)
@@ -395,6 +352,8 @@ export interface StackProps extends SpaceProps, ColorProps {
   // (undocumented)
   className?: string;
   // (undocumented)
+  gap?: UtilityProps['gap'];
+  // (undocumented)
   style?: React.CSSProperties;
 }
 
@@ -444,7 +403,7 @@ export const TableRow: React_3.ForwardRefExoticComponent<
 export type Theme = 'light' | 'dark';
 
 // @public (undocumented)
-export interface UtilityProps {
+export interface UtilityProps extends SpaceProps {
   // (undocumented)
   alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
   // (undocumented)
@@ -452,6 +411,14 @@ export interface UtilityProps {
   // (undocumented)
   borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
   // (undocumented)
+  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  // (undocumented)
+  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  // (undocumented)
+  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  // (undocumented)
+  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
+  // (undocumented)
   display?: Display | Partial<Record<Breakpoint, Display>>;
   // (undocumented)
   flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
@@ -462,32 +429,6 @@ export interface UtilityProps {
   // (undocumented)
   justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
   // (undocumented)
-  margin?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginX?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  marginY?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  padding?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
-  // (undocumented)
-  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
+  rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
 }
 ```
diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx
index bc350da323..ee30e17305 100644
--- a/packages/canon/src/components/Box/Docs.mdx
+++ b/packages/canon/src/components/Box/Docs.mdx
@@ -2,6 +2,7 @@ import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks';
 import * as BoxStories from './Box.stories';
 import { Title, Text } from '../../../docs/components';
 import { PropsTable } from '../../../docs/components';
+import { spacePropsList } from '../../../docs/spaceProps';
 
 <Meta of={BoxStories} />
 
@@ -84,66 +85,7 @@ import { PropsTable } from '../../../docs/components';
 
 <Canvas of={BoxStories.Padding} />
 
-<PropsTable
-  data={{
-    margin: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginBottom: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginLeft: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginRight: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginTop: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginX: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    marginY: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    padding: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingBottom: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingLeft: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingRight: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingTop: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingX: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-    paddingY: {
-      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-      responsive: true,
-    },
-  }}
-/>
+<PropsTable data={spacePropsList} />
 
 <Title type="h2">Examples</Title>
 <Text>Here are some examples of how you can use the Box component.</Text>
diff --git a/packages/canon/src/components/Container/types.ts b/packages/canon/src/components/Container/types.ts
index b1f414cf30..1ccf305191 100644
--- a/packages/canon/src/components/Container/types.ts
+++ b/packages/canon/src/components/Container/types.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { SpaceProps } from '../../layout/types';
+import { SpaceProps } from '../../types';
 
 /** @public */
 export interface ContainerProps
diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx
index 14e3bfb922..c1a0237279 100644
--- a/packages/canon/src/components/Grid/Docs.mdx
+++ b/packages/canon/src/components/Grid/Docs.mdx
@@ -1,7 +1,7 @@
 import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks';
 import * as GridStories from './Grid.stories';
-import { Title, Text, PropsTable, getProps } from '../../../docs/components';
-import { spacingProperties } from '../../layout/sprinkles.css';
+import { Title, Text, PropsTable } from '../../../docs/components';
+import { spacePropsList } from '../../../docs/spaceProps';
 
 <Meta of={GridStories} />
 
@@ -59,7 +59,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   The grid component also accepts all the spacing props from the Box component.
 </Text>
 
-<PropsTable data={getProps(spacingProperties.styles)} />
+<PropsTable data={spacePropsList} />
 
 <Title type="h3">Grid Item</Title>
 <Text>
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index d4559f362a..73aec06cf4 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -61,20 +61,6 @@ export const Default: Story = {
   ),
 };
 
-export const Test: Story = {
-  args: {
-    columns: 12,
-    gap: 'md',
-  },
-  render: args => (
-    <Grid {...args}>
-      <FakeBox />
-      <FakeBox />
-      <FakeBox />
-    </Grid>
-  ),
-};
-
 export const LargeGap: Story = {
   args: {
     gap: 'lg',
diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx
index 67c9c54855..3799a70ae8 100644
--- a/packages/canon/src/components/Grid/Grid.tsx
+++ b/packages/canon/src/components/Grid/Grid.tsx
@@ -47,13 +47,6 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
 
   const utilityClassNames = getClassNames(restProps);
 
-  // const sprinklesClassName = gridItemSprinkles({
-  //   rowSpan,
-  //   colSpan,
-  //   start,
-  //   end,
-  // });
-
   const classNames = ['grid-item', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');
diff --git a/packages/canon/src/components/Grid/index.ts b/packages/canon/src/components/Grid/index.ts
index b07249241c..b2534c6b77 100644
--- a/packages/canon/src/components/Grid/index.ts
+++ b/packages/canon/src/components/Grid/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 export { Grid } from './Grid';
-export type { GridProps, GridItemProps, Columns } from './types';
+export type { GridProps, GridItemProps } from './types';
diff --git a/packages/canon/src/components/Inline/types.ts b/packages/canon/src/components/Inline/types.ts
index b4be070e8e..e3069213c3 100644
--- a/packages/canon/src/components/Inline/types.ts
+++ b/packages/canon/src/components/Inline/types.ts
@@ -15,12 +15,13 @@
  */
 
 import { AsProps, ColorProps } from '../../layout/types';
-import { SpaceProps } from '../../layout/types';
-import type { Breakpoint } from '../../types';
+import type { Breakpoint, SpaceProps, UtilityProps } from '../../types';
+
 /** @public */
 export interface InlineProps extends SpaceProps, ColorProps {
   children: React.ReactNode;
   as?: AsProps;
+  gap?: UtilityProps['gap'];
   align?:
     | 'left'
     | 'center'
diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts
index bec5c1cb62..d4948557e7 100644
--- a/packages/canon/src/components/Stack/types.ts
+++ b/packages/canon/src/components/Stack/types.ts
@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 import { AsProps, ColorProps } from '../../layout/types';
-import { SpaceProps } from '../../layout/types';
-import type { Breakpoint } from '../../types';
+import type { Breakpoint, SpaceProps, UtilityProps } from '../../types';
+
 /** @public */
 export interface StackProps extends SpaceProps, ColorProps {
   children: React.ReactNode;
   as?: AsProps;
+  gap?: UtilityProps['gap'];
   align?:
     | 'left'
     | 'center'
diff --git a/packages/canon/src/layout/types.ts b/packages/canon/src/layout/types.ts
index a4fb53e6c6..3bb6bbb7f3 100644
--- a/packages/canon/src/layout/types.ts
+++ b/packages/canon/src/layout/types.ts
@@ -14,75 +14,9 @@
  * limitations under the License.
  */
 
-import type { Breakpoint, Space } from '../types';
-
 /** @public */
 export type Theme = 'light' | 'dark';
 
-/** @public */
-export type Gap = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingLeft = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingRight = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingTop = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingBottom = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type Padding = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingX = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type PaddingY = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginLeft = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginRight = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginTop = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginBottom = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type Margin = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginX = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export type MarginY = Space | Partial<Record<Breakpoint, Space>>;
-
-/** @public */
-export interface SpaceProps {
-  gap?: Gap;
-  padding?: Padding;
-  paddingLeft?: PaddingLeft;
-  paddingRight?: PaddingRight;
-  paddingTop?: PaddingTop;
-  paddingBottom?: PaddingBottom;
-  paddingX?: PaddingX;
-  paddingY?: PaddingY;
-  margin?: Margin;
-  marginLeft?: MarginLeft;
-  marginRight?: MarginRight;
-  marginTop?: MarginTop;
-  marginBottom?: MarginBottom;
-  marginX?: MarginX;
-  marginY?: MarginY;
-}
-
 /** @public */
 export type Background =
   | 'background'

From 85d6754b37e9810e04cbea468d79df2429096fa0 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 19 Dec 2024 12:17:33 +0000
Subject: [PATCH 04/10] Update Container to the new css classes

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Container/Container.tsx    | 16 ++++----
 .../src/components/Container/sprinkles.css.ts | 40 -------------------
 .../canon/src/components/Container/styles.css |  2 +-
 .../canon/src/components/Container/types.ts   | 20 ++++------
 4 files changed, 17 insertions(+), 61 deletions(-)
 delete mode 100644 packages/canon/src/components/Container/sprinkles.css.ts

diff --git a/packages/canon/src/components/Container/Container.tsx b/packages/canon/src/components/Container/Container.tsx
index b27775e116..bea7b4caf1 100644
--- a/packages/canon/src/components/Container/Container.tsx
+++ b/packages/canon/src/components/Container/Container.tsx
@@ -14,22 +14,24 @@
  * limitations under the License.
  */
 import React, { forwardRef } from 'react';
-import { containerSprinkles } from './sprinkles.css';
 import { ContainerProps } from './types';
+import { getClassNames } from '../../utils/getClassNames';
 
 /** @public */
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   (props, ref) => {
     const { children, className, style, ...restProps } = props;
 
-    const containerClassName = containerSprinkles(restProps);
+    // Generate utility class names
+    const utilityClassNames = getClassNames(restProps);
+
+    // Combine the base class name, the sprinkles class name, and any additional class names
+    const classNames = ['canon-container', utilityClassNames, className]
+      .filter(Boolean)
+      .join(' ');
 
     return (
-      <div
-        ref={ref}
-        className={['container', containerClassName].filter(Boolean).join(' ')}
-        style={style}
-      >
+      <div ref={ref} className={classNames} style={style}>
         {children}
       </div>
     );
diff --git a/packages/canon/src/components/Container/sprinkles.css.ts b/packages/canon/src/components/Container/sprinkles.css.ts
deleted file mode 100644
index 989e369433..0000000000
--- a/packages/canon/src/components/Container/sprinkles.css.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
-import { breakpoints, space } from '../../layout/properties';
-import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
-
-export const containerProperties = defineProperties({
-  conditions: breakpoints,
-  defaultCondition: 'xs',
-  properties: {
-    paddingTop: space,
-    paddingBottom: space,
-    marginTop: space,
-    marginBottom: space,
-  },
-  shorthands: {
-    paddingY: ['paddingTop', 'paddingBottom'],
-    marginY: ['marginTop', 'marginBottom'],
-  },
-});
-
-export const containerSprinkles = createSprinkles(
-  spacingProperties,
-  colorProperties,
-  containerProperties,
-);
diff --git a/packages/canon/src/components/Container/styles.css b/packages/canon/src/components/Container/styles.css
index 4da813623f..f3ebd64f52 100644
--- a/packages/canon/src/components/Container/styles.css
+++ b/packages/canon/src/components/Container/styles.css
@@ -1,4 +1,4 @@
-.container {
+.canon-container {
   max-width: var(--canon-container-max-width);
   margin: 0 auto;
   padding: 0 var(--canon-container-padding);
diff --git a/packages/canon/src/components/Container/types.ts b/packages/canon/src/components/Container/types.ts
index 1ccf305191..f9a71ecfa1 100644
--- a/packages/canon/src/components/Container/types.ts
+++ b/packages/canon/src/components/Container/types.ts
@@ -16,20 +16,14 @@
 import { SpaceProps } from '../../types';
 
 /** @public */
-export interface ContainerProps
-  extends Omit<
-    SpaceProps,
-    | 'padding'
-    | 'paddingLeft'
-    | 'paddingRight'
-    | 'paddingX'
-    | 'margin'
-    | 'marginLeft'
-    | 'marginRight'
-    | 'marginX'
-    | 'gap'
-  > {
+export interface ContainerProps {
   children?: React.ReactNode;
   className?: string;
+  marginY?: SpaceProps['marginY'];
+  marginBottom?: SpaceProps['marginBottom'];
+  marginTop?: SpaceProps['marginTop'];
+  paddingY?: SpaceProps['paddingY'];
+  paddingBottom?: SpaceProps['paddingBottom'];
+  paddingTop?: SpaceProps['paddingTop'];
   style?: React.CSSProperties;
 }

From bd74f7663bf74772cb54b7ac36eb0e8c2998f86c Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 19 Dec 2024 12:29:59 +0000
Subject: [PATCH 05/10] Fix Stack component

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Container/Docs.mdx   | 34 +++++++++++++++----
 packages/canon/src/components/Stack/Docs.mdx  |  2 +-
 .../src/components/Stack/Stack.stories.tsx    | 10 +++---
 packages/canon/src/components/Stack/Stack.tsx | 24 ++++---------
 .../src/components/Stack/sprinkles.css.ts     | 33 ------------------
 .../canon/src/components/Stack/styles.css     |  2 +-
 packages/canon/src/components/Stack/types.ts  |  8 ++---
 7 files changed, 44 insertions(+), 69 deletions(-)
 delete mode 100644 packages/canon/src/components/Stack/sprinkles.css.ts

diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx
index ca81477d44..05a0600813 100644
--- a/packages/canon/src/components/Container/Docs.mdx
+++ b/packages/canon/src/components/Container/Docs.mdx
@@ -1,8 +1,7 @@
 import { Meta, Unstyled, Source } from '@storybook/blocks';
 import * as ContainerStories from './Container.stories';
 import { Title, Text, PropsTable, getProps } from '../../../docs/components';
-import { spacingProperties } from '../../layout/sprinkles.css';
-import { containerProperties } from './sprinkles.css';
+import { spacePropsList } from '../../../docs/spaceProps';
 
 <Meta of={ContainerStories} />
 
@@ -28,18 +27,41 @@ import { containerProperties } from './sprinkles.css';
 
 <PropsTable
   data={{
-    ...getProps(containerProperties.styles),
     children: {
       type: 'ReactNode',
-      required: false,
+      responsive: false,
     },
     className: {
       type: 'string',
-      required: false,
+      responsive: false,
+    },
+    marginY: {
+      type: spacePropsList.marginY.type,
+      responsive: spacePropsList.marginY.responsive,
+    },
+    marginBottom: {
+      type: spacePropsList.marginBottom.type,
+      responsive: spacePropsList.marginBottom.responsive,
+    },
+    marginTop: {
+      type: spacePropsList.marginTop.type,
+      responsive: spacePropsList.marginTop.responsive,
+    },
+    paddingY: {
+      type: spacePropsList.paddingY.type,
+      responsive: spacePropsList.paddingY.responsive,
+    },
+    paddingBottom: {
+      type: spacePropsList.paddingBottom.type,
+      responsive: spacePropsList.paddingBottom.responsive,
+    },
+    paddingTop: {
+      type: spacePropsList.paddingTop.type,
+      responsive: spacePropsList.paddingTop.responsive,
     },
     style: {
       type: 'CSSProperties',
-      required: false,
+      responsive: false,
     },
   }}
 />
diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx
index f1776e0262..224ce8c2d7 100644
--- a/packages/canon/src/components/Stack/Docs.mdx
+++ b/packages/canon/src/components/Stack/Docs.mdx
@@ -33,7 +33,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 <PropsTable
   data={{
     align: {
-      type: ['left', 'center', 'right'],
+      type: ['start', 'center', 'end'],
       responsive: true,
     },
     children: {
diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx
index fbb5d5d651..71d4cab6ba 100644
--- a/packages/canon/src/components/Stack/Stack.stories.tsx
+++ b/packages/canon/src/components/Stack/Stack.stories.tsx
@@ -41,7 +41,7 @@ const meta = {
     },
   },
   args: {
-    align: 'left',
+    align: 'start',
     gap: 'xs',
   },
 } satisfies Meta<typeof Stack>;
@@ -75,7 +75,7 @@ export const Default: Story = {
 export const AlignLeft: Story = {
   args: {
     ...Default.args,
-    align: 'left',
+    align: 'start',
   },
 };
 
@@ -89,7 +89,7 @@ export const AlignCenter: Story = {
 export const AlignRight: Story = {
   args: {
     ...Default.args,
-    align: 'right',
+    align: 'end',
   },
 };
 
@@ -97,9 +97,9 @@ export const ResponsiveAlign: Story = {
   args: {
     ...Default.args,
     align: {
-      xs: 'left',
+      xs: 'start',
       md: 'center',
-      lg: 'right',
+      lg: 'end',
     },
   },
 };
diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx
index e0c36f2043..08525bcd92 100644
--- a/packages/canon/src/components/Stack/Stack.tsx
+++ b/packages/canon/src/components/Stack/Stack.tsx
@@ -16,39 +16,29 @@
 
 import { createElement, forwardRef } from 'react';
 import { StackProps } from './types';
-import { stackSprinkles } from './sprinkles.css';
-
-const alignToFlexAlign = (align: StackProps['align']) => {
-  if (align === 'left') return 'stretch';
-  if (align === 'center') return 'center';
-  if (align === 'right') return 'flex-end';
-  return undefined;
-};
+import { getClassNames } from '../../utils/getClassNames';
 
 /** @public */
 export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
   const {
     as = 'div',
     children,
-    align = 'left',
+    align = 'start',
     gap = 'xs',
     className,
     style,
     ...restProps
   } = props;
 
-  // Transform the align prop
-  const flexAlign = alignToFlexAlign(align);
-
-  // Generate the list of class names
-  const sprinklesClassName = stackSprinkles({
-    ...restProps,
+  // Generate utility class names
+  const utilityClassNames = getClassNames({
     gap,
-    alignItems: flexAlign,
+    alignItems: align === 'start' ? 'stretch' : align,
+    ...restProps,
   });
 
   // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = ['stack', sprinklesClassName, className]
+  const classNames = ['canon-stack', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');
 
diff --git a/packages/canon/src/components/Stack/sprinkles.css.ts b/packages/canon/src/components/Stack/sprinkles.css.ts
deleted file mode 100644
index 85c8f83a71..0000000000
--- a/packages/canon/src/components/Stack/sprinkles.css.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
-import { breakpoints } from '../../layout/properties';
-import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
-
-const stackProperties = defineProperties({
-  conditions: breakpoints,
-  defaultCondition: 'xs',
-  properties: {
-    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
-  },
-});
-
-export const stackSprinkles = createSprinkles(
-  spacingProperties,
-  colorProperties,
-  stackProperties,
-);
diff --git a/packages/canon/src/components/Stack/styles.css b/packages/canon/src/components/Stack/styles.css
index 784fd3b1ab..fa5c3f7e5d 100644
--- a/packages/canon/src/components/Stack/styles.css
+++ b/packages/canon/src/components/Stack/styles.css
@@ -1,4 +1,4 @@
-.stack {
+.canon-stack {
   display: flex;
   flex-direction: column;
 }
diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts
index d4948557e7..5df25ed452 100644
--- a/packages/canon/src/components/Stack/types.ts
+++ b/packages/canon/src/components/Stack/types.ts
@@ -14,18 +14,14 @@
  * limitations under the License.
  */
 import { AsProps, ColorProps } from '../../layout/types';
-import type { Breakpoint, SpaceProps, UtilityProps } from '../../types';
+import type { SpaceProps, UtilityProps } from '../../types';
 
 /** @public */
 export interface StackProps extends SpaceProps, ColorProps {
   children: React.ReactNode;
   as?: AsProps;
   gap?: UtilityProps['gap'];
-  align?:
-    | 'left'
-    | 'center'
-    | 'right'
-    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
+  align?: UtilityProps['alignItems'];
   className?: string;
   style?: React.CSSProperties;
 }

From 4d1235a018a139506868a41fa137ffe28afac8b7 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 19 Dec 2024 13:35:07 +0000
Subject: [PATCH 06/10] Finish it up

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/report.api.md                  | 47 ++++++++-----------
 packages/canon/src/components/Inline/Docs.mdx |  9 ++--
 .../src/components/Inline/Inline.stories.tsx  |  8 ++--
 .../canon/src/components/Inline/Inline.tsx    | 32 ++++---------
 .../src/components/Inline/sprinkles.css.ts    | 34 --------------
 .../canon/src/components/Inline/styles.css    |  2 +-
 packages/canon/src/components/Inline/types.ts | 17 +++----
 packages/canon/src/components/Stack/Docs.mdx  |  4 +-
 8 files changed, 45 insertions(+), 108 deletions(-)
 delete mode 100644 packages/canon/src/components/Inline/sprinkles.css.ts

diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 4ff3824bb0..75bcd30cda 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -154,24 +154,24 @@ export const Container: React_2.ForwardRefExoticComponent<
 >;
 
 // @public (undocumented)
-export interface ContainerProps
-  extends Omit<
-    SpaceProps,
-    | 'padding'
-    | 'paddingLeft'
-    | 'paddingRight'
-    | 'paddingX'
-    | 'margin'
-    | 'marginLeft'
-    | 'marginRight'
-    | 'marginX'
-    | 'gap'
-  > {
+export interface ContainerProps {
   // (undocumented)
   children?: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
+  marginBottom?: SpaceProps['marginBottom'];
+  // (undocumented)
+  marginTop?: SpaceProps['marginTop'];
+  // (undocumented)
+  marginY?: SpaceProps['marginY'];
+  // (undocumented)
+  paddingBottom?: SpaceProps['paddingBottom'];
+  // (undocumented)
+  paddingTop?: SpaceProps['paddingTop'];
+  // (undocumented)
+  paddingY?: SpaceProps['paddingY'];
+  // (undocumented)
   style?: React.CSSProperties;
 }
 
@@ -265,17 +265,12 @@ export const Inline: ForwardRefExoticComponent<
 // @public (undocumented)
 export interface InlineProps extends SpaceProps, ColorProps {
   // (undocumented)
-  align?:
-    | 'left'
-    | 'center'
-    | 'right'
-    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
+  align?: Omit<
+    UtilityProps['justifyContent'],
+    'stretch' | 'around' | 'between'
+  >;
   // (undocumented)
-  alignY?:
-    | 'top'
-    | 'center'
-    | 'bottom'
-    | Partial<Record<Breakpoint, 'top' | 'center' | 'bottom'>>;
+  alignY?: UtilityProps['alignItems'];
   // (undocumented)
   as?: AsProps;
   // (undocumented)
@@ -340,11 +335,7 @@ export const Stack: ForwardRefExoticComponent<
 // @public (undocumented)
 export interface StackProps extends SpaceProps, ColorProps {
   // (undocumented)
-  align?:
-    | 'left'
-    | 'center'
-    | 'right'
-    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
+  align?: UtilityProps['alignItems'];
   // (undocumented)
   as?: AsProps;
   // (undocumented)
diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx
index 8ff19747f0..7671122966 100644
--- a/packages/canon/src/components/Inline/Docs.mdx
+++ b/packages/canon/src/components/Inline/Docs.mdx
@@ -1,8 +1,7 @@
 import { Meta, Unstyled, Source } from '@storybook/blocks';
 import * as InlineStories from './Inline.stories';
 import { Title, Text, PropsTable, getProps } from '../../../docs/components';
-import { spacingProperties } from '../../layout/sprinkles.css';
-import { inlineProperties } from './sprinkles.css';
+import { spacePropsList } from '../../../docs/spaceProps';
 
 <Meta of={InlineStories} />
 
@@ -34,11 +33,11 @@ import { inlineProperties } from './sprinkles.css';
 <PropsTable
   data={{
     align: {
-      type: 'left | center | right',
+      type: 'start | center | end',
       responsive: true,
     },
     alignY: {
-      type: 'top | center | bottom',
+      type: 'start | center | end',
       responsive: true,
     },
     children: {
@@ -60,7 +59,7 @@ import { inlineProperties } from './sprinkles.css';
   The grid component also accepts all the spacing props from the Box component.
 </Text>
 
-<PropsTable data={getProps(spacingProperties.styles)} />
+<PropsTable data={spacePropsList} />
 
 <Title type="h2">Examples</Title>
 
diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx
index ab58a3b7f7..7edaaa971b 100644
--- a/packages/canon/src/components/Inline/Inline.stories.tsx
+++ b/packages/canon/src/components/Inline/Inline.stories.tsx
@@ -81,7 +81,7 @@ export const Default: Story = {
 export const AlignLeft: Story = {
   args: {
     ...Default.args,
-    align: 'left',
+    align: 'start',
   },
 };
 
@@ -95,14 +95,14 @@ export const AlignCenter: Story = {
 export const AlignRight: Story = {
   args: {
     ...Default.args,
-    align: 'right',
+    align: 'end',
   },
 };
 
 export const VerticalAlignTop: Story = {
   args: {
     ...Default.args,
-    alignY: 'top',
+    alignY: 'start',
   },
 };
 
@@ -116,7 +116,7 @@ export const VerticalAlignCenter: Story = {
 export const VerticalAlignBottom: Story = {
   args: {
     ...Default.args,
-    alignY: 'bottom',
+    alignY: 'end',
   },
 };
 
diff --git a/packages/canon/src/components/Inline/Inline.tsx b/packages/canon/src/components/Inline/Inline.tsx
index b583b2ae08..5283fbf067 100644
--- a/packages/canon/src/components/Inline/Inline.tsx
+++ b/packages/canon/src/components/Inline/Inline.tsx
@@ -15,46 +15,32 @@
  */
 
 import { createElement, forwardRef } from 'react';
-import { inlineSprinkles } from './sprinkles.css';
 import type { InlineProps } from './types';
-
-const alignYToFlexAlign = (alignY: InlineProps['alignY']) => {
-  if (alignY === 'top') return 'flex-start';
-  if (alignY === 'center') return 'center';
-  if (alignY === 'bottom') return 'flex-end';
-  return undefined;
-};
-
-const alignToFlexAlignY = (align: InlineProps['align']) => {
-  if (align === 'left') return 'flex-start';
-  if (align === 'center') return 'center';
-  if (align === 'right') return 'flex-end';
-  return undefined;
-};
+import { getClassNames } from '../../utils/getClassNames';
 
 /** @public */
 export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
   const {
     as = 'div',
     children,
-    align = 'left',
-    alignY = 'top',
+    align = 'start',
+    alignY = 'start',
     gap = 'xs',
     className,
     style,
     ...restProps
   } = props;
 
-  // Generate the list of class names
-  const sprinklesClassName = inlineSprinkles({
-    ...restProps,
+  // Generate utility class names
+  const utilityClassNames = getClassNames({
     gap,
-    alignItems: alignYToFlexAlign(alignY),
-    justifyContent: alignToFlexAlignY(align),
+    alignItems: alignY,
+    justifyContent: align,
+    ...restProps,
   });
 
   // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = ['inline', sprinklesClassName, className]
+  const classNames = ['canon-inline', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');
 
diff --git a/packages/canon/src/components/Inline/sprinkles.css.ts b/packages/canon/src/components/Inline/sprinkles.css.ts
deleted file mode 100644
index ccd4126608..0000000000
--- a/packages/canon/src/components/Inline/sprinkles.css.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
-import { breakpoints } from '../../layout/properties';
-import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
-
-export const inlineProperties = defineProperties({
-  conditions: breakpoints,
-  defaultCondition: 'xs',
-  properties: {
-    alignItems: ['flex-start', 'center', 'flex-end'],
-    justifyContent: ['flex-start', 'center', 'flex-end'],
-  },
-});
-
-export const inlineSprinkles = createSprinkles(
-  spacingProperties,
-  colorProperties,
-  inlineProperties,
-);
diff --git a/packages/canon/src/components/Inline/styles.css b/packages/canon/src/components/Inline/styles.css
index fb9b1c3825..bafd29bf53 100644
--- a/packages/canon/src/components/Inline/styles.css
+++ b/packages/canon/src/components/Inline/styles.css
@@ -1,4 +1,4 @@
-.inline {
+.canon-inline {
   display: flex;
   flex-wrap: wrap;
 }
diff --git a/packages/canon/src/components/Inline/types.ts b/packages/canon/src/components/Inline/types.ts
index e3069213c3..40577d72bc 100644
--- a/packages/canon/src/components/Inline/types.ts
+++ b/packages/canon/src/components/Inline/types.ts
@@ -15,23 +15,18 @@
  */
 
 import { AsProps, ColorProps } from '../../layout/types';
-import type { Breakpoint, SpaceProps, UtilityProps } from '../../types';
+import type { SpaceProps, UtilityProps } from '../../types';
 
 /** @public */
 export interface InlineProps extends SpaceProps, ColorProps {
   children: React.ReactNode;
   as?: AsProps;
   gap?: UtilityProps['gap'];
-  align?:
-    | 'left'
-    | 'center'
-    | 'right'
-    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
-  alignY?:
-    | 'top'
-    | 'center'
-    | 'bottom'
-    | Partial<Record<Breakpoint, 'top' | 'center' | 'bottom'>>;
+  align?: Omit<
+    UtilityProps['justifyContent'],
+    'stretch' | 'around' | 'between'
+  >;
+  alignY?: UtilityProps['alignItems'];
   className?: string;
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx
index 224ce8c2d7..921618f49f 100644
--- a/packages/canon/src/components/Stack/Docs.mdx
+++ b/packages/canon/src/components/Stack/Docs.mdx
@@ -1,7 +1,7 @@
 import { Meta, Unstyled, Source } from '@storybook/blocks';
 import * as StackStories from './Stack.stories';
 import { Title, Text, PropsTable, getProps } from '../../../docs/components';
-import { spacingProperties } from '../../layout/sprinkles.css';
+import { spacePropsList } from '../../../docs/spaceProps';
 
 <Meta of={StackStories} />
 
@@ -55,7 +55,7 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   The grid component also accepts all the spacing props from the Box component.
 </Text>
 
-<PropsTable data={getProps(spacingProperties.styles)} />
+<PropsTable data={spacePropsList} />
 
 <Title type="h2">Common questions</Title>
 

From 02d68087ae5c4aabd914c7d50943df7c6071603c Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 19 Dec 2024 13:58:35 +0000
Subject: [PATCH 07/10] Remove sprinkles for good

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/.storybook/main.ts             |  10 +-
 packages/canon/docs/utils/argTypes.ts         |  41 --
 packages/canon/package.json                   |   6 +-
 packages/canon/report.api.md                  |  32 +-
 .../Container/Container.stories.tsx           |  13 -
 .../src/components/Grid/Grid.stories.tsx      |   3 -
 .../src/components/Inline/Inline.stories.tsx  |   3 -
 packages/canon/src/components/Inline/types.ts |   5 +-
 .../src/components/Stack/Stack.stories.tsx    |   3 -
 packages/canon/src/components/Stack/types.ts  |   6 +-
 packages/canon/src/index.ts                   |   1 -
 packages/canon/src/layout/properties.ts       |  43 --
 packages/canon/src/layout/sprinkles.css.ts    |  63 ---
 packages/canon/src/layout/types.ts            |  60 ---
 packages/canon/src/types.ts                   |  19 +
 yarn.lock                                     | 499 +-----------------
 16 files changed, 35 insertions(+), 772 deletions(-)
 delete mode 100644 packages/canon/docs/utils/argTypes.ts
 delete mode 100644 packages/canon/src/layout/properties.ts
 delete mode 100644 packages/canon/src/layout/sprinkles.css.ts
 delete mode 100644 packages/canon/src/layout/types.ts

diff --git a/packages/canon/.storybook/main.ts b/packages/canon/.storybook/main.ts
index 41df32404b..cf7921268e 100644
--- a/packages/canon/.storybook/main.ts
+++ b/packages/canon/.storybook/main.ts
@@ -1,7 +1,4 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
-import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
-import { merge } from 'webpack-merge';
-
 import { join, dirname } from 'path';
 
 /**
@@ -28,13 +25,8 @@ const config: StorybookConfig = {
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),
     options: {
-      plugins: [new VanillaExtractPlugin()],
+      plugins: [],
     },
   },
-  webpackFinal: config => {
-    return merge(config, {
-      plugins: [new VanillaExtractPlugin()],
-    });
-  },
 };
 export default config;
diff --git a/packages/canon/docs/utils/argTypes.ts b/packages/canon/docs/utils/argTypes.ts
deleted file mode 100644
index 78da0bb6d2..0000000000
--- a/packages/canon/docs/utils/argTypes.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import {
-  colorProperties,
-  spacingProperties,
-} from '../../src/layout/sprinkles.css';
-
-export const argTypesSpacing = Object.keys(spacingProperties.styles).reduce<
-  Record<string, any>
->((acc, n) => {
-  acc[n] = {
-    control: 'inline-radio',
-    options: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
-  };
-  return acc;
-}, {});
-
-export const argTypesColor = Object.keys(colorProperties.styles).reduce<
-  Record<string, any>
->((acc, n) => {
-  acc[n as keyof typeof colorProperties.styles] = {
-    control: 'select',
-    options: Object.keys(
-      colorProperties.styles[n as keyof typeof colorProperties.styles].values,
-    ),
-  };
-  return acc;
-}, {});
diff --git a/packages/canon/package.json b/packages/canon/package.json
index e151680d5d..23c40300f1 100644
--- a/packages/canon/package.json
+++ b/packages/canon/package.json
@@ -55,17 +55,13 @@
     "@testing-library/jest-dom": "^6.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@vanilla-extract/rollup-plugin": "^1.3.10",
-    "@vanilla-extract/sprinkles": "^1.6.3",
-    "@vanilla-extract/webpack-plugin": "^2.3.14",
     "eslint-plugin-storybook": "^0.11.1",
     "globals": "^15.11.0",
     "mini-css-extract-plugin": "^2.9.2",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router-dom": "^6.3.0",
-    "storybook": "^8.4.7",
-    "webpack-merge": "^6.0.1"
+    "storybook": "^8.4.7"
   },
   "peerDependencies": {
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 75bcd30cda..cd6a727ff9 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -32,16 +32,6 @@ export type AsProps =
   | 'dl'
   | 'dt';
 
-// @public (undocumented)
-export type Background =
-  | 'background'
-  | 'elevation1'
-  | 'elevation2'
-  | 'transparent'
-  | Partial<
-      Record<Theme, 'background' | 'elevation1' | 'elevation2' | 'transparent'>
-    >;
-
 // @public (undocumented)
 export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
 
@@ -130,21 +120,6 @@ export interface CheckboxProps {
   value?: string;
 }
 
-// @public (undocumented)
-export type Color =
-  | 'primary'
-  | 'secondary'
-  | 'error'
-  | Partial<Record<Theme, 'primary' | 'secondary' | 'error'>>;
-
-// @public (undocumented)
-export interface ColorProps {
-  // (undocumented)
-  background?: Background;
-  // (undocumented)
-  color?: Color;
-}
-
 // @public (undocumented)
 export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
 
@@ -263,7 +238,7 @@ export const Inline: ForwardRefExoticComponent<
 >;
 
 // @public (undocumented)
-export interface InlineProps extends SpaceProps, ColorProps {
+export interface InlineProps extends SpaceProps {
   // (undocumented)
   align?: Omit<
     UtilityProps['justifyContent'],
@@ -333,7 +308,7 @@ export const Stack: ForwardRefExoticComponent<
 >;
 
 // @public (undocumented)
-export interface StackProps extends SpaceProps, ColorProps {
+export interface StackProps extends SpaceProps {
   // (undocumented)
   align?: UtilityProps['alignItems'];
   // (undocumented)
@@ -390,9 +365,6 @@ export const TableRow: React_3.ForwardRefExoticComponent<
     React_3.RefAttributes<HTMLTableRowElement>
 >;
 
-// @public (undocumented)
-export type Theme = 'light' | 'dark';
-
 // @public (undocumented)
 export interface UtilityProps extends SpaceProps {
   // (undocumented)
diff --git a/packages/canon/src/components/Container/Container.stories.tsx b/packages/canon/src/components/Container/Container.stories.tsx
index bdbaeb79e8..66c86f638d 100644
--- a/packages/canon/src/components/Container/Container.stories.tsx
+++ b/packages/canon/src/components/Container/Container.stories.tsx
@@ -17,25 +17,12 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Box } from '../Box/Box';
-import { argTypesSpacing } from '../../../docs/utils/argTypes';
 import { Container } from './Container';
 
-const argTypesSpacingWithoutLeftAndRight = { ...argTypesSpacing };
-delete argTypesSpacingWithoutLeftAndRight.padding;
-delete argTypesSpacingWithoutLeftAndRight.paddingLeft;
-delete argTypesSpacingWithoutLeftAndRight.paddingRight;
-delete argTypesSpacingWithoutLeftAndRight.paddingX;
-delete argTypesSpacingWithoutLeftAndRight.margin;
-delete argTypesSpacingWithoutLeftAndRight.marginLeft;
-delete argTypesSpacingWithoutLeftAndRight.marginRight;
-delete argTypesSpacingWithoutLeftAndRight.marginX;
-delete argTypesSpacingWithoutLeftAndRight.gap;
-
 const meta = {
   title: 'Components/Container',
   component: Container,
   argTypes: {
-    ...argTypesSpacingWithoutLeftAndRight,
     children: {
       control: false,
     },
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index 73aec06cf4..8fa6caec23 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -19,15 +19,12 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Grid } from './Grid';
 import type { GridItemProps } from './types';
 import { Box } from '../Box/Box';
-import { argTypesSpacing, argTypesColor } from '../../../docs/utils/argTypes';
 import { Stack } from '../Stack';
 
 const meta = {
   title: 'Components/Grid',
   component: Grid,
   argTypes: {
-    ...argTypesSpacing,
-    ...argTypesColor,
     children: {
       control: false,
     },
diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx
index 7edaaa971b..32c03bc8c6 100644
--- a/packages/canon/src/components/Inline/Inline.stories.tsx
+++ b/packages/canon/src/components/Inline/Inline.stories.tsx
@@ -18,14 +18,11 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Inline } from './Inline';
 import { Box } from '../Box/Box';
-import { argTypesSpacing, argTypesColor } from '../../../docs/utils/argTypes';
 
 const meta = {
   title: 'Components/Inline',
   component: Inline,
   argTypes: {
-    ...argTypesSpacing,
-    ...argTypesColor,
     align: {
       control: 'inline-radio',
       options: ['left', 'center', 'right'],
diff --git a/packages/canon/src/components/Inline/types.ts b/packages/canon/src/components/Inline/types.ts
index 40577d72bc..32a48f52a5 100644
--- a/packages/canon/src/components/Inline/types.ts
+++ b/packages/canon/src/components/Inline/types.ts
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import { AsProps, ColorProps } from '../../layout/types';
-import type { SpaceProps, UtilityProps } from '../../types';
+import type { SpaceProps, UtilityProps, AsProps } from '../../types';
 
 /** @public */
-export interface InlineProps extends SpaceProps, ColorProps {
+export interface InlineProps extends SpaceProps {
   children: React.ReactNode;
   as?: AsProps;
   gap?: UtilityProps['gap'];
diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx
index 71d4cab6ba..47eb0fb46a 100644
--- a/packages/canon/src/components/Stack/Stack.stories.tsx
+++ b/packages/canon/src/components/Stack/Stack.stories.tsx
@@ -18,14 +18,11 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Stack } from './Stack';
 import { Box } from '../Box/Box';
-import { argTypesSpacing, argTypesColor } from '../../../docs/utils/argTypes';
 
 const meta = {
   title: 'Components/Stack',
   component: Stack,
   argTypes: {
-    ...argTypesSpacing,
-    ...argTypesColor,
     align: {
       control: 'inline-radio',
       options: ['left', 'center', 'right'],
diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts
index 5df25ed452..eb8aff7d32 100644
--- a/packages/canon/src/components/Stack/types.ts
+++ b/packages/canon/src/components/Stack/types.ts
@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AsProps, ColorProps } from '../../layout/types';
-import type { SpaceProps, UtilityProps } from '../../types';
+
+import type { SpaceProps, UtilityProps, AsProps } from '../../types';
 
 /** @public */
-export interface StackProps extends SpaceProps, ColorProps {
+export interface StackProps extends SpaceProps {
   children: React.ReactNode;
   as?: AsProps;
   gap?: UtilityProps['gap'];
diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts
index e6a4fb26d3..23432295e2 100644
--- a/packages/canon/src/index.ts
+++ b/packages/canon/src/index.ts
@@ -34,5 +34,4 @@ export * from './components/Checkbox';
 export * from './components/Table';
 
 // Types
-export * from './layout/types';
 export * from './types';
diff --git a/packages/canon/src/layout/properties.ts b/packages/canon/src/layout/properties.ts
deleted file mode 100644
index d41bbddbeb..0000000000
--- a/packages/canon/src/layout/properties.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/** @public */
-export const breakpoints = {
-  xs: {},
-  sm: { '@media': 'screen and (min-width: 640px)' },
-  md: { '@media': 'screen and (min-width: 768px)' },
-  lg: { '@media': 'screen and (min-width: 1024px)' },
-  xl: { '@media': 'screen and (min-width: 1280px)' },
-  '2xl': { '@media': 'screen and (min-width: 1536px)' },
-};
-
-/** @public */
-export const themes = {
-  light: { selector: '[data-theme="light"] &' },
-  dark: { selector: '[data-theme="dark"] &' },
-};
-
-/** @public */
-export const space = {
-  none: 0,
-  '2xs': 'var(--canon-spacing-2xs)',
-  xs: 'var(--canon-spacing-xs)',
-  sm: 'var(--canon-spacing-sm)',
-  md: 'var(--canon-spacing-md)',
-  lg: 'var(--canon-spacing-lg)',
-  xl: 'var(--canon-spacing-xl)',
-  '2xl': 'var(--canon-spacing-2xl)',
-};
diff --git a/packages/canon/src/layout/sprinkles.css.ts b/packages/canon/src/layout/sprinkles.css.ts
deleted file mode 100644
index 7e85487fe3..0000000000
--- a/packages/canon/src/layout/sprinkles.css.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { defineProperties } from '@vanilla-extract/sprinkles';
-import { breakpoints, space } from './properties';
-
-export const spacingProperties = defineProperties({
-  conditions: breakpoints,
-  defaultCondition: 'xs',
-  responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
-  properties: {
-    paddingTop: space,
-    paddingBottom: space,
-    paddingLeft: space,
-    paddingRight: space,
-    marginTop: space,
-    marginBottom: space,
-    marginLeft: space,
-    marginRight: space,
-    gap: space,
-  },
-  shorthands: {
-    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
-    paddingX: ['paddingLeft', 'paddingRight'],
-    paddingY: ['paddingTop', 'paddingBottom'],
-    margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
-    marginX: ['marginLeft', 'marginRight'],
-    marginY: ['marginTop', 'marginBottom'],
-  },
-});
-
-export const colorProperties = defineProperties({
-  conditions: {
-    light: { selector: '[data-theme="light"] &' },
-    dark: { selector: '[data-theme="dark"] &' },
-  },
-  defaultCondition: ['light', 'dark'],
-  properties: {
-    color: {
-      primary: 'var(--canon-text-primary)',
-      secondary: 'var(--canon-text-secondary)',
-      error: 'var(--canon-error)',
-    },
-    background: {
-      background: 'var(--canon-background)',
-      elevation1: 'var(--canon-surface-1)',
-      elevation2: 'var(--canon-surface-2)',
-      transparent: 'transparent',
-    },
-  },
-});
diff --git a/packages/canon/src/layout/types.ts b/packages/canon/src/layout/types.ts
deleted file mode 100644
index 3bb6bbb7f3..0000000000
--- a/packages/canon/src/layout/types.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/** @public */
-export type Theme = 'light' | 'dark';
-
-/** @public */
-export type Background =
-  | 'background'
-  | 'elevation1'
-  | 'elevation2'
-  | 'transparent'
-  | Partial<
-      Record<Theme, 'background' | 'elevation1' | 'elevation2' | 'transparent'>
-    >;
-
-/** @public */
-export type Color =
-  | 'primary'
-  | 'secondary'
-  | 'error'
-  | Partial<Record<Theme, 'primary' | 'secondary' | 'error'>>;
-
-/** @public */
-export type AsProps =
-  | 'div'
-  | 'span'
-  | 'p'
-  | 'article'
-  | 'section'
-  | 'main'
-  | 'nav'
-  | 'aside'
-  | 'ul'
-  | 'ol'
-  | 'li'
-  | 'details'
-  | 'summary'
-  | 'dd'
-  | 'dl'
-  | 'dt';
-
-/** @public */
-export interface ColorProps {
-  color?: Color;
-  background?: Background;
-}
diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts
index 08c3d481da..1211b1be4d 100644
--- a/packages/canon/src/types.ts
+++ b/packages/canon/src/types.ts
@@ -14,6 +14,25 @@
  * limitations under the License.
  */
 
+/** @public */
+export type AsProps =
+  | 'div'
+  | 'span'
+  | 'p'
+  | 'article'
+  | 'section'
+  | 'main'
+  | 'nav'
+  | 'aside'
+  | 'ul'
+  | 'ol'
+  | 'li'
+  | 'details'
+  | 'summary'
+  | 'dd'
+  | 'dl'
+  | 'dt';
+
 /** @public */
 export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
diff --git a/yarn.lock b/yarn.lock
index 1b9fd0a972..f287a2c1e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1872,7 +1872,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.19.6, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.7, @babel/core@npm:^7.26.0":
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.19.6, @babel/core@npm:^7.24.7, @babel/core@npm:^7.26.0":
   version: 7.26.0
   resolution: "@babel/core@npm:7.26.0"
   dependencies:
@@ -2434,7 +2434,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-typescript@npm:^7.23.3, @babel/plugin-syntax-typescript@npm:^7.24.7, @babel/plugin-syntax-typescript@npm:^7.7.2":
+"@babel/plugin-syntax-typescript@npm:^7.24.7, @babel/plugin-syntax-typescript@npm:^7.7.2":
   version: 7.25.9
   resolution: "@babel/plugin-syntax-typescript@npm:7.25.9"
   dependencies:
@@ -3823,9 +3823,6 @@ __metadata:
     "@testing-library/jest-dom": ^6.0.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
-    "@vanilla-extract/rollup-plugin": ^1.3.10
-    "@vanilla-extract/sprinkles": ^1.6.3
-    "@vanilla-extract/webpack-plugin": ^2.3.14
     eslint-plugin-storybook: ^0.11.1
     globals: ^15.11.0
     mini-css-extract-plugin: ^2.9.2
@@ -3833,7 +3830,6 @@ __metadata:
     react-dom: ^18.0.2
     react-router-dom: ^6.3.0
     storybook: ^8.4.7
-    webpack-merge: ^6.0.1
   peerDependencies:
     "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
     react: ^16.13.1 || ^17.0.0 || ^18.0.0
@@ -9029,7 +9025,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/hash@npm:^0.9.0, @emotion/hash@npm:^0.9.1, @emotion/hash@npm:^0.9.2":
+"@emotion/hash@npm:^0.9.1, @emotion/hash@npm:^0.9.2":
   version: 0.9.2
   resolution: "@emotion/hash@npm:0.9.2"
   checksum: 379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387
@@ -9180,13 +9176,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/aix-ppc64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/aix-ppc64@npm:0.23.1"
-  conditions: os=aix & cpu=ppc64
-  languageName: node
-  linkType: hard
-
 "@esbuild/aix-ppc64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/aix-ppc64@npm:0.24.0"
@@ -9201,13 +9190,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/android-arm64@npm:0.23.1"
-  conditions: os=android & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/android-arm64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/android-arm64@npm:0.24.0"
@@ -9222,13 +9204,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/android-arm@npm:0.23.1"
-  conditions: os=android & cpu=arm
-  languageName: node
-  linkType: hard
-
 "@esbuild/android-arm@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/android-arm@npm:0.24.0"
@@ -9243,13 +9218,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/android-x64@npm:0.23.1"
-  conditions: os=android & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/android-x64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/android-x64@npm:0.24.0"
@@ -9264,13 +9232,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/darwin-arm64@npm:0.23.1"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/darwin-arm64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/darwin-arm64@npm:0.24.0"
@@ -9285,13 +9246,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/darwin-x64@npm:0.23.1"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/darwin-x64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/darwin-x64@npm:0.24.0"
@@ -9306,13 +9260,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/freebsd-arm64@npm:0.23.1"
-  conditions: os=freebsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/freebsd-arm64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/freebsd-arm64@npm:0.24.0"
@@ -9327,13 +9274,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/freebsd-x64@npm:0.23.1"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/freebsd-x64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/freebsd-x64@npm:0.24.0"
@@ -9348,13 +9288,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-arm64@npm:0.23.1"
-  conditions: os=linux & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-arm64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/linux-arm64@npm:0.24.0"
@@ -9369,13 +9302,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-arm@npm:0.23.1"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-arm@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/linux-arm@npm:0.24.0"
@@ -9390,13 +9316,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ia32@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-ia32@npm:0.23.1"
-  conditions: os=linux & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-ia32@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/linux-ia32@npm:0.24.0"
@@ -9411,13 +9330,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-loong64@npm:0.23.1"
-  conditions: os=linux & cpu=loong64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-loong64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/linux-loong64@npm:0.24.0"
@@ -9432,13 +9344,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-mips64el@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-mips64el@npm:0.23.1"
-  conditions: os=linux & cpu=mips64el
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-mips64el@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/linux-mips64el@npm:0.24.0"
@@ -9453,13 +9358,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ppc64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-ppc64@npm:0.23.1"
-  conditions: os=linux & cpu=ppc64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-ppc64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/linux-ppc64@npm:0.24.0"
@@ -9474,13 +9372,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-riscv64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-riscv64@npm:0.23.1"
-  conditions: os=linux & cpu=riscv64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-riscv64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/linux-riscv64@npm:0.24.0"
@@ -9495,13 +9386,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-s390x@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-s390x@npm:0.23.1"
-  conditions: os=linux & cpu=s390x
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-s390x@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/linux-s390x@npm:0.24.0"
@@ -9516,13 +9400,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-x64@npm:0.23.1"
-  conditions: os=linux & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-x64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/linux-x64@npm:0.24.0"
@@ -9537,13 +9414,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/netbsd-x64@npm:0.23.1"
-  conditions: os=netbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/netbsd-x64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/netbsd-x64@npm:0.24.0"
@@ -9551,13 +9421,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/openbsd-arm64@npm:0.23.1"
-  conditions: os=openbsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/openbsd-arm64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/openbsd-arm64@npm:0.24.0"
@@ -9572,13 +9435,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/openbsd-x64@npm:0.23.1"
-  conditions: os=openbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/openbsd-x64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/openbsd-x64@npm:0.24.0"
@@ -9593,13 +9449,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/sunos-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/sunos-x64@npm:0.23.1"
-  conditions: os=sunos & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/sunos-x64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/sunos-x64@npm:0.24.0"
@@ -9614,13 +9463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/win32-arm64@npm:0.23.1"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@esbuild/win32-arm64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/win32-arm64@npm:0.24.0"
@@ -9635,13 +9477,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-ia32@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/win32-ia32@npm:0.23.1"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@esbuild/win32-ia32@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/win32-ia32@npm:0.24.0"
@@ -9656,13 +9491,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/win32-x64@npm:0.23.1"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@esbuild/win32-x64@npm:0.24.0":
   version: 0.24.0
   resolution: "@esbuild/win32-x64@npm:0.24.0"
@@ -20982,96 +20810,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vanilla-extract/babel-plugin-debug-ids@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@vanilla-extract/babel-plugin-debug-ids@npm:1.1.0"
-  dependencies:
-    "@babel/core": ^7.23.9
-  checksum: b2feec9016ba2dd6740c2ce002d814123f38bf8fc01a6d771eff74ed8108abefdc9d6507e2045587d2a73d8a538ece867e4bfef8c5ccc2b13095a2c825160e7a
-  languageName: node
-  linkType: hard
-
-"@vanilla-extract/css@npm:^1.16.1":
-  version: 1.16.1
-  resolution: "@vanilla-extract/css@npm:1.16.1"
-  dependencies:
-    "@emotion/hash": ^0.9.0
-    "@vanilla-extract/private": ^1.0.6
-    css-what: ^6.1.0
-    cssesc: ^3.0.0
-    csstype: ^3.0.7
-    dedent: ^1.5.3
-    deep-object-diff: ^1.1.9
-    deepmerge: ^4.2.2
-    lru-cache: ^10.4.3
-    media-query-parser: ^2.0.2
-    modern-ahocorasick: ^1.0.0
-    picocolors: ^1.0.0
-  checksum: ff58f32778cbc15458aff951ad771ba46f772d78633ff99f849f590b83a22ce67e017af28351c68c32edcdaae4454146dd90f369842a627ee79dc9c3ab434e1e
-  languageName: node
-  linkType: hard
-
-"@vanilla-extract/integration@npm:^7.1.11":
-  version: 7.1.11
-  resolution: "@vanilla-extract/integration@npm:7.1.11"
-  dependencies:
-    "@babel/core": ^7.23.9
-    "@babel/plugin-syntax-typescript": ^7.23.3
-    "@vanilla-extract/babel-plugin-debug-ids": ^1.1.0
-    "@vanilla-extract/css": ^1.16.1
-    dedent: ^1.5.3
-    esbuild: "npm:esbuild@>=0.17.6 <0.24.0"
-    eval: 0.1.8
-    find-up: ^5.0.0
-    javascript-stringify: ^2.0.1
-    mlly: ^1.4.2
-    vite: ^5.0.11
-    vite-node: ^1.2.0
-  checksum: 23196f388045c0cdaa35bf26cf484ca4423e336026770b743017056aed7704c74c2134b425571eee9c6859ed1a1553a435e4d0c502ff5a78f8dc2c02db00707a
-  languageName: node
-  linkType: hard
-
-"@vanilla-extract/private@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "@vanilla-extract/private@npm:1.0.6"
-  checksum: 2265b02af29d8cd40f6ddeeed197fb2df1a7695f5a9821d5e3597677179be8b83bcd8fe4df4a6178544f89123d745a3c6a13599d4fe4e5873b065a8ad329f690
-  languageName: node
-  linkType: hard
-
-"@vanilla-extract/rollup-plugin@npm:^1.3.10":
-  version: 1.3.11
-  resolution: "@vanilla-extract/rollup-plugin@npm:1.3.11"
-  dependencies:
-    "@vanilla-extract/integration": ^7.1.11
-  peerDependencies:
-    rollup: ^2.0.0 || ^3.0.0 || ^4.0.0
-  checksum: 2e38981d156f8db962dedfc64131adbe8bd5ec9236686dccec92f3418d43d658f2f3a5797456f67eeb43ce75dcc84f9593e4f073e0e42c6df31d4e3ba6a59785
-  languageName: node
-  linkType: hard
-
-"@vanilla-extract/sprinkles@npm:^1.6.3":
-  version: 1.6.3
-  resolution: "@vanilla-extract/sprinkles@npm:1.6.3"
-  peerDependencies:
-    "@vanilla-extract/css": ^1.0.0
-  checksum: 7eb4fe0f1a6048bf5ffb5ffab964c2d127ff95244da79dca2e448af380b591c7af3b4f63ab243584baa8a42c7694d8fe9eeb366587a2da381a481fe1a9e02af8
-  languageName: node
-  linkType: hard
-
-"@vanilla-extract/webpack-plugin@npm:^2.3.14":
-  version: 2.3.15
-  resolution: "@vanilla-extract/webpack-plugin@npm:2.3.15"
-  dependencies:
-    "@vanilla-extract/integration": ^7.1.11
-    debug: ^4.3.1
-    loader-utils: ^2.0.0
-    picocolors: ^1.0.0
-  peerDependencies:
-    webpack: ^4.30.0 || ^5.20.2
-  checksum: 105540377d0eb19f8dafcd2cc2cf893471494d4b82012574d4b70c32351ef78b6107ffaecf188a7a6edc10e70bd2963c4fd13ff16954f8063bb785aab98070dd
-  languageName: node
-  linkType: hard
-
 "@vitejs/plugin-react@npm:^4.3.1":
   version: 4.3.4
   resolution: "@vitejs/plugin-react@npm:4.3.4"
@@ -23951,13 +23689,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cac@npm:^6.7.14":
-  version: 6.7.14
-  resolution: "cac@npm:6.7.14"
-  checksum: 45a2496a9443abbe7f52a49b22fbe51b1905eff46e03fd5e6c98e3f85077be3f8949685a1849b1a9cd2bc3e5567dfebcf64f01ce01847baf918f1b37c839791a
-  languageName: node
-  linkType: hard
-
 "cacache@npm:^15.0.3, cacache@npm:^15.0.5, cacache@npm:^15.2.0":
   version: 15.3.0
   resolution: "cacache@npm:15.3.0"
@@ -25174,13 +24905,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"confbox@npm:^0.1.8":
-  version: 0.1.8
-  resolution: "confbox@npm:0.1.8"
-  checksum: 5c7718ab22cf9e35a31c21ef124156076ae8c9dc65e6463d54961caf5a1d529284485a0fdf83fd23b27329f3b75b0c8c07d2e36c699f5151a2efe903343f976a
-  languageName: node
-  linkType: hard
-
 "configstore@npm:^5.0.1":
   version: 5.0.1
   resolution: "configstore@npm:5.0.1"
@@ -25968,7 +25692,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.0.2, csstype@npm:^3.0.7, csstype@npm:^3.1.2, csstype@npm:^3.1.3":
+"csstype@npm:^3.0.2, csstype@npm:^3.1.2, csstype@npm:^3.1.3":
   version: 3.0.9
   resolution: "csstype@npm:3.0.9"
   checksum: 199f9af7e673f9f188525c3102a329d637ff46c52f6385a4427ff5cb17adcb736189150170a7af7c5701d18d7704bdad130273f4aa7e44c6c4f9967e6115dc93
@@ -26334,7 +26058,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dedent@npm:^1.0.0, dedent@npm:^1.5.3":
+"dedent@npm:^1.0.0":
   version: 1.5.3
   resolution: "dedent@npm:1.5.3"
   peerDependencies:
@@ -26374,13 +26098,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-object-diff@npm:^1.1.9":
-  version: 1.1.9
-  resolution: "deep-object-diff@npm:1.1.9"
-  checksum: ecd42455e4773f653595d28070295e7aaa8402db5f8ab21d0bec115a7cb4de5e207a5665514767da5f025c96597f1d3a0a4888aeb4dd49e03c996871a3aa05ef
-  languageName: node
-  linkType: hard
-
 "deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1, deepmerge@npm:~4.3.0":
   version: 4.3.1
   resolution: "deepmerge@npm:4.3.1"
@@ -27754,89 +27471,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:esbuild@>=0.17.6 <0.24.0":
-  version: 0.23.1
-  resolution: "esbuild@npm:0.23.1"
-  dependencies:
-    "@esbuild/aix-ppc64": 0.23.1
-    "@esbuild/android-arm": 0.23.1
-    "@esbuild/android-arm64": 0.23.1
-    "@esbuild/android-x64": 0.23.1
-    "@esbuild/darwin-arm64": 0.23.1
-    "@esbuild/darwin-x64": 0.23.1
-    "@esbuild/freebsd-arm64": 0.23.1
-    "@esbuild/freebsd-x64": 0.23.1
-    "@esbuild/linux-arm": 0.23.1
-    "@esbuild/linux-arm64": 0.23.1
-    "@esbuild/linux-ia32": 0.23.1
-    "@esbuild/linux-loong64": 0.23.1
-    "@esbuild/linux-mips64el": 0.23.1
-    "@esbuild/linux-ppc64": 0.23.1
-    "@esbuild/linux-riscv64": 0.23.1
-    "@esbuild/linux-s390x": 0.23.1
-    "@esbuild/linux-x64": 0.23.1
-    "@esbuild/netbsd-x64": 0.23.1
-    "@esbuild/openbsd-arm64": 0.23.1
-    "@esbuild/openbsd-x64": 0.23.1
-    "@esbuild/sunos-x64": 0.23.1
-    "@esbuild/win32-arm64": 0.23.1
-    "@esbuild/win32-ia32": 0.23.1
-    "@esbuild/win32-x64": 0.23.1
-  dependenciesMeta:
-    "@esbuild/aix-ppc64":
-      optional: true
-    "@esbuild/android-arm":
-      optional: true
-    "@esbuild/android-arm64":
-      optional: true
-    "@esbuild/android-x64":
-      optional: true
-    "@esbuild/darwin-arm64":
-      optional: true
-    "@esbuild/darwin-x64":
-      optional: true
-    "@esbuild/freebsd-arm64":
-      optional: true
-    "@esbuild/freebsd-x64":
-      optional: true
-    "@esbuild/linux-arm":
-      optional: true
-    "@esbuild/linux-arm64":
-      optional: true
-    "@esbuild/linux-ia32":
-      optional: true
-    "@esbuild/linux-loong64":
-      optional: true
-    "@esbuild/linux-mips64el":
-      optional: true
-    "@esbuild/linux-ppc64":
-      optional: true
-    "@esbuild/linux-riscv64":
-      optional: true
-    "@esbuild/linux-s390x":
-      optional: true
-    "@esbuild/linux-x64":
-      optional: true
-    "@esbuild/netbsd-x64":
-      optional: true
-    "@esbuild/openbsd-arm64":
-      optional: true
-    "@esbuild/openbsd-x64":
-      optional: true
-    "@esbuild/sunos-x64":
-      optional: true
-    "@esbuild/win32-arm64":
-      optional: true
-    "@esbuild/win32-ia32":
-      optional: true
-    "@esbuild/win32-x64":
-      optional: true
-  bin:
-    esbuild: bin/esbuild
-  checksum: 0413c3b9257327fb598427688b7186ea335bf1693746fe5713cc93c95854d6388b8ed4ad643fddf5b5ace093f7dcd9038dd58e087bf2da1f04dfb4c5571660af
-  languageName: node
-  linkType: hard
-
 "escalade@npm:^3.1.1, escalade@npm:^3.2.0":
   version: 3.2.0
   resolution: "escalade@npm:3.2.0"
@@ -28369,16 +28003,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eval@npm:0.1.8":
-  version: 0.1.8
-  resolution: "eval@npm:0.1.8"
-  dependencies:
-    "@types/node": "*"
-    require-like: ">= 0.1.1"
-  checksum: d005567f394cfbe60948e34982e4637d2665030f9aa7dcac581ea6f9ec6eceb87133ed3dc0ae21764aa362485c242a731dbb6371f1f1a86807c58676431e9d1a
-  languageName: node
-  linkType: hard
-
 "event-emitter@npm:^0.3.5":
   version: 0.3.5
   resolution: "event-emitter@npm:0.3.5"
@@ -29456,15 +29080,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flat@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "flat@npm:5.0.2"
-  bin:
-    flat: cli.js
-  checksum: 12a1536ac746db74881316a181499a78ef953632ddd28050b7a3a43c62ef5462e3357c8c29d76072bb635f147f7a9a1f0c02efef6b4be28f8db62ceb3d5c7f5d
-  languageName: node
-  linkType: hard
-
 "flatstr@npm:^1.0.12":
   version: 1.0.12
   resolution: "flatstr@npm:1.0.12"
@@ -32826,13 +32441,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"javascript-stringify@npm:^2.0.1":
-  version: 2.1.0
-  resolution: "javascript-stringify@npm:2.1.0"
-  checksum: 009981ec84299da88795fc764221ed213e3d52251cc93a396430a7a02ae09f1163a9be36a36808689681a8e6113cf00fe97ec2eea2552df48111f79be59e9358
-  languageName: node
-  linkType: hard
-
 "jest-changed-files@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-changed-files@npm:29.7.0"
@@ -35012,7 +34620,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^10.0.0, lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0, lru-cache@npm:^10.4.3":
+"lru-cache@npm:^10.0.0, lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
   version: 10.4.3
   resolution: "lru-cache@npm:10.4.3"
   checksum: 6476138d2125387a6d20f100608c2583d415a4f64a0fecf30c9e2dda976614f09cad4baa0842447bd37dd459a7bd27f57d9d8f8ce558805abd487c583f3d774a
@@ -35523,15 +35131,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"media-query-parser@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "media-query-parser@npm:2.0.2"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-  checksum: 8ef956d9e63fe6f4041988beda69843b3a6bb48228ea2923a066f6e7c8f7c5dba75fae357318c48a97ed5beae840b8425cb7e727fc1bb77acc65f2005f8945ab
-  languageName: node
-  linkType: hard
-
 "media-typer@npm:0.3.0":
   version: 0.3.0
   resolution: "media-typer@npm:0.3.0"
@@ -36478,18 +36077,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mlly@npm:^1.4.2, mlly@npm:^1.7.2":
-  version: 1.7.3
-  resolution: "mlly@npm:1.7.3"
-  dependencies:
-    acorn: ^8.14.0
-    pathe: ^1.1.2
-    pkg-types: ^1.2.1
-    ufo: ^1.5.4
-  checksum: 60d309c7ce2ac162224a087fcd683a891260511f57011b2f436b54dfef146b8aae7473013958a58d5b6039f2a8692c32a2599c8390c5b307d1119ad0d917b414
-  languageName: node
-  linkType: hard
-
 "mock-socket@npm:^9.3.0":
   version: 9.3.1
   resolution: "mock-socket@npm:9.3.1"
@@ -36598,13 +36185,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"modern-ahocorasick@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "modern-ahocorasick@npm:1.1.0"
-  checksum: 78b99840c9af086c1e36a594ee85bebd8c19d48e2ef31a67d1bad0e673ac12fc931e5961abb5b16daaf820af4923e700f76b1793b7413e18782230162866a0af
-  languageName: node
-  linkType: hard
-
 "module-details-from-path@npm:^1.0.3":
   version: 1.0.3
   resolution: "module-details-from-path@npm:1.0.3"
@@ -38790,13 +38370,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pathe@npm:^1.1.1, pathe@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "pathe@npm:1.1.2"
-  checksum: ec5f778d9790e7b9ffc3e4c1df39a5bb1ce94657a4e3ad830c1276491ca9d79f189f47609884671db173400256b005f4955f7952f52a2aeb5834ad5fb4faf134
-  languageName: node
-  linkType: hard
-
 "pathval@npm:^2.0.0":
   version: 2.0.0
   resolution: "pathval@npm:2.0.0"
@@ -39131,17 +38704,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pkg-types@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "pkg-types@npm:1.2.1"
-  dependencies:
-    confbox: ^0.1.8
-    mlly: ^1.7.2
-    pathe: ^1.1.2
-  checksum: d2e3ad7aef36cc92b17403e61c04db521bf0beb175ccb4d432c284239f00ec32ff37feb072a260613e9ff727911cff1127a083fd52f91b9bec6b62970f385702
-  languageName: node
-  linkType: hard
-
 "pkg-up@npm:^3.1.0":
   version: 3.1.0
   resolution: "pkg-up@npm:3.1.0"
@@ -41772,13 +41334,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"require-like@npm:>= 0.1.1":
-  version: 0.1.2
-  resolution: "require-like@npm:0.1.2"
-  checksum: edb8331f05fd807381a75b76f6cca9f0ce8acaa2e910b7e116541799aa970bfbc64fde5fd6adb3a6917dba346f8386ebbddb81614c24e8dad1b4290c7af9535e
-  languageName: node
-  linkType: hard
-
 "requires-port@npm:^1.0.0":
   version: 1.0.0
   resolution: "requires-port@npm:1.0.0"
@@ -45619,13 +45174,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ufo@npm:^1.5.4":
-  version: 1.5.4
-  resolution: "ufo@npm:1.5.4"
-  checksum: f244703b7d4f9f0df4f9af23921241ab73410b591f4e5b39c23e3147f3159b139a4b1fb5903189c306129f7a16b55995dac0008e0fbae88a37c3e58cbc34d833
-  languageName: node
-  linkType: hard
-
 "uglify-js@npm:^3.1.4":
   version: 3.17.0
   resolution: "uglify-js@npm:3.17.0"
@@ -46525,21 +46073,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-node@npm:^1.2.0":
-  version: 1.6.0
-  resolution: "vite-node@npm:1.6.0"
-  dependencies:
-    cac: ^6.7.14
-    debug: ^4.3.4
-    pathe: ^1.1.1
-    picocolors: ^1.0.0
-    vite: ^5.0.0
-  bin:
-    vite-node: vite-node.mjs
-  checksum: ce111c5c7a4cf65b722baa15cbc065b7bfdbf1b65576dd6372995f6a72b2b93773ec5df59f6c5f08cfe1284806597b44b832efcea50d5971102428159ff4379f
-  languageName: node
-  linkType: hard
-
 "vite-plugin-html@npm:^3.2.2":
   version: 3.2.2
   resolution: "vite-plugin-html@npm:3.2.2"
@@ -46574,7 +46107,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.0.0, vite@npm:^5.0.11":
+"vite@npm:^5.0.0":
   version: 5.4.11
   resolution: "vite@npm:5.4.11"
   dependencies:
@@ -46904,17 +46437,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-merge@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "webpack-merge@npm:6.0.1"
-  dependencies:
-    clone-deep: ^4.0.1
-    flat: ^5.0.2
-    wildcard: ^2.0.1
-  checksum: e8a604c686b944605a1c57cc7b75e886ab902dc5ffdd15259a092c5c2dd5f58868fe39f995ea4bad4f189e38843b061c4ae1eb22822d7169813f4adab571dc3d
-  languageName: node
-  linkType: hard
-
 "webpack-sources@npm:^1.4.3":
   version: 1.4.3
   resolution: "webpack-sources@npm:1.4.3"
@@ -47185,13 +46707,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wildcard@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "wildcard@npm:2.0.1"
-  checksum: e0c60a12a219e4b12065d1199802d81c27b841ed6ad6d9d28240980c73ceec6f856771d575af367cbec2982d9ae7838759168b551776577f155044f5a5ba843c
-  languageName: node
-  linkType: hard
-
 "winston-transport@npm:^4.5.0, winston-transport@npm:^4.7.0":
   version: 4.8.0
   resolution: "winston-transport@npm:4.8.0"

From 7404c0954bfc8be096ae2ffc18c0ea0f326eb640 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 19 Dec 2024 15:15:33 +0000
Subject: [PATCH 08/10] Fix Inline + Stack props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Inline/Inline.stories.tsx  | 51 +++++++++++++++----
 .../canon/src/components/Inline/Inline.tsx    | 44 ++++++++++++++--
 packages/canon/src/components/Inline/types.ts | 22 +++++---
 .../src/components/Stack/Stack.stories.tsx    | 10 ++--
 packages/canon/src/components/Stack/Stack.tsx | 23 ++++++++-
 packages/canon/src/components/Stack/types.ts  | 13 ++++-
 6 files changed, 134 insertions(+), 29 deletions(-)

diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx
index 32c03bc8c6..b6653a3067 100644
--- a/packages/canon/src/components/Inline/Inline.stories.tsx
+++ b/packages/canon/src/components/Inline/Inline.stories.tsx
@@ -46,6 +46,41 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const fakeBlockList = [
+  { width: 45, height: 60 },
+  { width: 150, height: 75 },
+  { width: 80, height: 50 },
+  { width: 120, height: 70 },
+  { width: 95, height: 65 },
+  { width: 110, height: 55 },
+  { width: 130, height: 60 },
+  { width: 100, height: 80 },
+  { width: 140, height: 45 },
+  { width: 85, height: 70 },
+  { width: 125, height: 50 },
+  { width: 105, height: 75 },
+  { width: 115, height: 65 },
+  { width: 135, height: 55 },
+  { width: 90, height: 60 },
+  { width: 145, height: 80 },
+  { width: 75, height: 45 },
+  { width: 155, height: 70 },
+  { width: 60, height: 50 },
+  { width: 160, height: 75 },
+  { width: 70, height: 65 },
+  { width: 150, height: 55 },
+  { width: 95, height: 60 },
+  { width: 120, height: 80 },
+  { width: 85, height: 45 },
+  { width: 130, height: 70 },
+  { width: 100, height: 50 },
+  { width: 140, height: 75 },
+  { width: 110, height: 65 },
+  { width: 125, height: 55 },
+  { width: 105, height: 60 },
+  { width: 145, height: 80 },
+];
+
 const FakeBox = ({
   width = 120,
   height = 80,
@@ -63,12 +98,8 @@ export const Default: Story = {
   args: {
     children: (
       <>
-        {Array.from({ length: 32 }).map((_, index) => (
-          <FakeBox
-            key={index}
-            width={Math.floor(Math.random() * (160 - 40 + 1)) + 40}
-            height={Math.floor(Math.random() * (80 - 40 + 1)) + 40}
-          />
+        {fakeBlockList.map((block, index) => (
+          <FakeBox key={index} width={block.width} height={block.height} />
         ))}
       </>
     ),
@@ -78,7 +109,7 @@ export const Default: Story = {
 export const AlignLeft: Story = {
   args: {
     ...Default.args,
-    align: 'start',
+    align: 'left',
   },
 };
 
@@ -92,14 +123,14 @@ export const AlignCenter: Story = {
 export const AlignRight: Story = {
   args: {
     ...Default.args,
-    align: 'end',
+    align: 'right',
   },
 };
 
 export const VerticalAlignTop: Story = {
   args: {
     ...Default.args,
-    alignY: 'start',
+    alignY: 'top',
   },
 };
 
@@ -113,7 +144,7 @@ export const VerticalAlignCenter: Story = {
 export const VerticalAlignBottom: Story = {
   args: {
     ...Default.args,
-    alignY: 'end',
+    alignY: 'bottom',
   },
 };
 
diff --git a/packages/canon/src/components/Inline/Inline.tsx b/packages/canon/src/components/Inline/Inline.tsx
index 5283fbf067..b3aaeaf082 100644
--- a/packages/canon/src/components/Inline/Inline.tsx
+++ b/packages/canon/src/components/Inline/Inline.tsx
@@ -17,14 +17,50 @@
 import { createElement, forwardRef } from 'react';
 import type { InlineProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
+import { JustifyContent, Breakpoint, AlignItems } from '../../types';
+
+// Function to map align values
+const mapAlignValue = (value?: InlineProps['align']) => {
+  if (typeof value === 'string') {
+    let returnedValue: JustifyContent = 'stretch';
+    if (value === 'left') returnedValue = 'start';
+    if (value === 'center') returnedValue = 'center';
+    if (value === 'right') returnedValue = 'end';
+    return returnedValue;
+  } else if (typeof value === 'object') {
+    const returnedValue: Partial<Record<Breakpoint, JustifyContent>> = {};
+    for (const [key, val] of Object.entries(value)) {
+      returnedValue[key as Breakpoint] = mapAlignValue(val) as JustifyContent;
+    }
+    return returnedValue;
+  }
+  return 'stretch';
+};
+
+const mapAlignYValue = (value?: InlineProps['alignY']) => {
+  if (typeof value === 'string') {
+    let returnedValue: AlignItems = 'stretch';
+    if (value === 'top') returnedValue = 'start';
+    if (value === 'center') returnedValue = 'center';
+    if (value === 'bottom') returnedValue = 'end';
+    return returnedValue;
+  } else if (typeof value === 'object') {
+    const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
+    for (const [key, val] of Object.entries(value)) {
+      returnedValue[key as Breakpoint] = mapAlignYValue(val) as AlignItems;
+    }
+    return returnedValue;
+  }
+  return 'stretch';
+};
 
 /** @public */
 export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
   const {
     as = 'div',
     children,
-    align = 'start',
-    alignY = 'start',
+    align = 'left',
+    alignY = 'top',
     gap = 'xs',
     className,
     style,
@@ -34,8 +70,8 @@ export const Inline = forwardRef<HTMLElement, InlineProps>((props, ref) => {
   // Generate utility class names
   const utilityClassNames = getClassNames({
     gap,
-    alignItems: alignY,
-    justifyContent: align,
+    alignItems: mapAlignYValue(alignY),
+    justifyContent: mapAlignValue(align),
     ...restProps,
   });
 
diff --git a/packages/canon/src/components/Inline/types.ts b/packages/canon/src/components/Inline/types.ts
index 32a48f52a5..c86f500018 100644
--- a/packages/canon/src/components/Inline/types.ts
+++ b/packages/canon/src/components/Inline/types.ts
@@ -14,18 +14,28 @@
  * limitations under the License.
  */
 
-import type { SpaceProps, UtilityProps, AsProps } from '../../types';
+import type {
+  SpaceProps,
+  UtilityProps,
+  AsProps,
+  Breakpoint,
+} from '../../types';
 
 /** @public */
 export interface InlineProps extends SpaceProps {
   children: React.ReactNode;
   as?: AsProps;
   gap?: UtilityProps['gap'];
-  align?: Omit<
-    UtilityProps['justifyContent'],
-    'stretch' | 'around' | 'between'
-  >;
-  alignY?: UtilityProps['alignItems'];
+  align?:
+    | 'left'
+    | 'center'
+    | 'right'
+    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
+  alignY?:
+    | 'top'
+    | 'center'
+    | 'bottom'
+    | Partial<Record<Breakpoint, 'top' | 'center' | 'bottom'>>;
   className?: string;
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx
index 47eb0fb46a..7e77bc861d 100644
--- a/packages/canon/src/components/Stack/Stack.stories.tsx
+++ b/packages/canon/src/components/Stack/Stack.stories.tsx
@@ -38,7 +38,7 @@ const meta = {
     },
   },
   args: {
-    align: 'start',
+    align: 'left',
     gap: 'xs',
   },
 } satisfies Meta<typeof Stack>;
@@ -72,7 +72,7 @@ export const Default: Story = {
 export const AlignLeft: Story = {
   args: {
     ...Default.args,
-    align: 'start',
+    align: 'left',
   },
 };
 
@@ -86,7 +86,7 @@ export const AlignCenter: Story = {
 export const AlignRight: Story = {
   args: {
     ...Default.args,
-    align: 'end',
+    align: 'right',
   },
 };
 
@@ -94,9 +94,9 @@ export const ResponsiveAlign: Story = {
   args: {
     ...Default.args,
     align: {
-      xs: 'start',
+      xs: 'left',
       md: 'center',
-      lg: 'end',
+      lg: 'right',
     },
   },
 };
diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx
index 08525bcd92..9de0cd3777 100644
--- a/packages/canon/src/components/Stack/Stack.tsx
+++ b/packages/canon/src/components/Stack/Stack.tsx
@@ -17,13 +17,32 @@
 import { createElement, forwardRef } from 'react';
 import { StackProps } from './types';
 import { getClassNames } from '../../utils/getClassNames';
+import type { AlignItems, Breakpoint } from '../../types';
+
+// Function to map align values
+const mapAlignValue = (value?: StackProps['align']) => {
+  if (typeof value === 'string') {
+    let returnedValue: AlignItems = 'stretch';
+    if (value === 'left') returnedValue = 'start';
+    if (value === 'center') returnedValue = 'center';
+    if (value === 'right') returnedValue = 'end';
+    return returnedValue;
+  } else if (typeof value === 'object') {
+    const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
+    for (const [key, val] of Object.entries(value)) {
+      returnedValue[key as Breakpoint] = mapAlignValue(val) as AlignItems;
+    }
+    return returnedValue;
+  }
+  return 'stretch';
+};
 
 /** @public */
 export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
   const {
     as = 'div',
     children,
-    align = 'start',
+    align = 'left',
     gap = 'xs',
     className,
     style,
@@ -33,7 +52,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
   // Generate utility class names
   const utilityClassNames = getClassNames({
     gap,
-    alignItems: align === 'start' ? 'stretch' : align,
+    alignItems: mapAlignValue(align),
     ...restProps,
   });
 
diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts
index eb8aff7d32..bccdc59a57 100644
--- a/packages/canon/src/components/Stack/types.ts
+++ b/packages/canon/src/components/Stack/types.ts
@@ -14,14 +14,23 @@
  * limitations under the License.
  */
 
-import type { SpaceProps, UtilityProps, AsProps } from '../../types';
+import type {
+  SpaceProps,
+  UtilityProps,
+  AsProps,
+  Breakpoint,
+} from '../../types';
 
 /** @public */
 export interface StackProps extends SpaceProps {
   children: React.ReactNode;
   as?: AsProps;
   gap?: UtilityProps['gap'];
-  align?: UtilityProps['alignItems'];
+  align?:
+    | 'left'
+    | 'center'
+    | 'right'
+    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
   className?: string;
   style?: React.CSSProperties;
 }

From 9b61fb6421bccac24cc2bf9bbeae5fc062161816 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 19 Dec 2024 15:25:07 +0000
Subject: [PATCH 09/10] Fix API report

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/report.api.md                  | 21 +++++++++++++------
 packages/canon/src/components/Stack/Stack.tsx |  2 +-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index cd6a727ff9..e725d0ac8b 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -240,12 +240,17 @@ export const Inline: ForwardRefExoticComponent<
 // @public (undocumented)
 export interface InlineProps extends SpaceProps {
   // (undocumented)
-  align?: Omit<
-    UtilityProps['justifyContent'],
-    'stretch' | 'around' | 'between'
-  >;
+  align?:
+    | 'left'
+    | 'center'
+    | 'right'
+    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
   // (undocumented)
-  alignY?: UtilityProps['alignItems'];
+  alignY?:
+    | 'top'
+    | 'center'
+    | 'bottom'
+    | Partial<Record<Breakpoint, 'top' | 'center' | 'bottom'>>;
   // (undocumented)
   as?: AsProps;
   // (undocumented)
@@ -310,7 +315,11 @@ export const Stack: ForwardRefExoticComponent<
 // @public (undocumented)
 export interface StackProps extends SpaceProps {
   // (undocumented)
-  align?: UtilityProps['alignItems'];
+  align?:
+    | 'left'
+    | 'center'
+    | 'right'
+    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
   // (undocumented)
   as?: AsProps;
   // (undocumented)
diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx
index 9de0cd3777..522782daac 100644
--- a/packages/canon/src/components/Stack/Stack.tsx
+++ b/packages/canon/src/components/Stack/Stack.tsx
@@ -23,7 +23,7 @@ import type { AlignItems, Breakpoint } from '../../types';
 const mapAlignValue = (value?: StackProps['align']) => {
   if (typeof value === 'string') {
     let returnedValue: AlignItems = 'stretch';
-    if (value === 'left') returnedValue = 'start';
+    if (value === 'left') returnedValue = 'stretch';
     if (value === 'center') returnedValue = 'center';
     if (value === 'right') returnedValue = 'end';
     return returnedValue;

From 208f9a27fad2691d9650f57be53430e90220849f Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 19 Dec 2024 16:17:41 +0000
Subject: [PATCH 10/10] Update spaceProps.ts

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/docs/spaceProps.ts | 82 ++++++++++---------------------
 1 file changed, 25 insertions(+), 57 deletions(-)

diff --git a/packages/canon/docs/spaceProps.ts b/packages/canon/docs/spaceProps.ts
index 132ccce699..3eb6961bc1 100644
--- a/packages/canon/docs/spaceProps.ts
+++ b/packages/canon/docs/spaceProps.ts
@@ -13,61 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export const spacePropsList = {
-  margin: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
+
+export const spacePropsList = [
+  'margin',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  'marginTop',
+  'marginX',
+  'marginY',
+  'padding',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  'paddingX',
+  'paddingY',
+].reduce(
+  (acc: { [key: string]: { type: string[]; responsive: boolean } }, prop) => {
+    acc[prop] = {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    };
+    return acc;
   },
-  marginBottom: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  marginLeft: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  marginRight: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  marginTop: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  marginX: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  marginY: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  padding: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  paddingBottom: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  paddingLeft: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  paddingRight: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  paddingTop: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  paddingX: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-  paddingY: {
-    type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
-    responsive: true,
-  },
-};
+  {},
+);