From 2ac861a7253085e131602275f1b87218af8f96d3 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Wed, 18 Dec 2024 14:13:07 +0000
Subject: [PATCH] Improve flex-wrap

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Box/Box.stories.tsx  | 120 ++-
 packages/canon/src/components/Box/types.ts    |  61 +-
 packages/canon/src/css/utilities/2xl.css      | 830 +++++++++---------
 packages/canon/src/css/utilities/lg.css       | 830 +++++++++---------
 packages/canon/src/css/utilities/md.css       | 830 +++++++++---------
 packages/canon/src/css/utilities/sm.css       | 830 +++++++++---------
 packages/canon/src/css/utilities/xl.css       | 830 +++++++++---------
 packages/canon/src/css/utilities/xs.css       | 830 +++++++++---------
 packages/canon/src/types.ts                   |  12 +-
 packages/canon/src/utils/getClassNames.ts     |   1 +
 10 files changed, 2453 insertions(+), 2721 deletions(-)

diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index 94255145e8..37e87484e3 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -205,7 +205,7 @@ export const AlignItems: Story = {
   ),
 };
 
-const stylePaddingBox = {
+const styleInsideBox = {
   background: 'rgb(196, 202, 251)',
   color: 'white',
   borderRadius: '4px',
@@ -223,27 +223,27 @@ export const Padding: Story = {
   render: args => (
     <Stack align="center" gap="md">
       <Inline alignY="center" gap="md">
-        <Box padding="md" style={stylePaddingBox}>
+        <Box padding="md" style={styleInsideBox}>
           <Box {...args}>Padding</Box>
         </Box>
-        <Box paddingX="md" style={stylePaddingBox}>
+        <Box paddingX="md" style={styleInsideBox}>
           <Box {...args}>Padding X</Box>
         </Box>
-        <Box paddingY="md" style={stylePaddingBox}>
+        <Box paddingY="md" style={styleInsideBox}>
           <Box {...args}>Padding Y</Box>
         </Box>
       </Inline>
       <Inline alignY="center" gap="md">
-        <Box paddingTop="md" style={stylePaddingBox}>
+        <Box paddingTop="md" style={styleInsideBox}>
           <Box {...args}>Padding Top</Box>
         </Box>
-        <Box paddingRight="md" style={stylePaddingBox}>
+        <Box paddingRight="md" style={styleInsideBox}>
           <Box {...args}>Padding Right</Box>
         </Box>
-        <Box paddingBottom="md" style={stylePaddingBox}>
+        <Box paddingBottom="md" style={styleInsideBox}>
           <Box {...args}>Padding Bottom</Box>
         </Box>
-        <Box paddingLeft="md" style={stylePaddingBox}>
+        <Box paddingLeft="md" style={styleInsideBox}>
           <Box {...args}>Padding Left</Box>
         </Box>
       </Inline>
@@ -251,19 +251,95 @@ export const Padding: Story = {
   ),
 };
 
-// Example showing different display values
-export const DisplayVariants: Story = {
-  render: () => (
-    <Box display="flex" flexDirection="column" gap="md">
-      <Box padding="md" background="background" display="block">
-        Display Block
-      </Box>
-      <Box padding="md" background="background" display="flex">
-        Display Flex
-      </Box>
-      <Box padding="md" background="background" display="inline">
-        Display Inline
-      </Box>
-    </Box>
+export const Margin: Story = {
+  args: {
+    style: {
+      background: '#1f47ff',
+      color: 'white',
+      borderRadius: '4px',
+      padding: '12px 12px',
+    },
+  },
+  render: args => (
+    <Stack align="center" gap="md">
+      <Inline alignY="center" gap="md">
+        <Box style={styleInsideBox}>
+          <Box margin="md" {...args}>
+            Margin
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box marginX="md" {...args}>
+            Margin X
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box marginY="md" {...args}>
+            Margin Y
+          </Box>
+        </Box>
+      </Inline>
+      <Inline alignY="center" gap="md">
+        <Box style={styleInsideBox}>
+          <Box marginTop="md" {...args}>
+            Margin Top
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box marginRight="md" {...args}>
+            Margin Right
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box marginBottom="md" {...args}>
+            Margin Bottom
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box marginLeft="md" {...args}>
+            Margin Left
+          </Box>
+        </Box>
+      </Inline>
+    </Stack>
+  ),
+};
+
+export const FlexWrap: Story = {
+  args: {
+    style: {
+      ...Basic.args?.style,
+      width: '200px',
+    },
+    display: 'flex',
+    gap: 'xs',
+  },
+  render: args => (
+    <Stack align="center">
+      <Box flexWrap="wrap" {...args}>
+        <span>One</span>
+        <span>Two</span>
+        <span>Three</span>
+        <span>Four</span>
+        <span>Five</span>
+        <span>Six</span>
+      </Box>
+      <Box flexWrap="nowrap" {...args}>
+        <span>One</span>
+        <span>Two</span>
+        <span>Three</span>
+        <span>Four</span>
+        <span>Five</span>
+        <span>Six</span>
+      </Box>
+      <Box flexWrap="wrap-reverse" {...args}>
+        <span>One</span>
+        <span>Two</span>
+        <span>Three</span>
+        <span>Four</span>
+        <span>Five</span>
+        <span>Six</span>
+      </Box>
+    </Stack>
   ),
 };
diff --git a/packages/canon/src/components/Box/types.ts b/packages/canon/src/components/Box/types.ts
index 35ebf3c4d3..a55c856caf 100644
--- a/packages/canon/src/components/Box/types.ts
+++ b/packages/canon/src/components/Box/types.ts
@@ -14,69 +14,12 @@
  * limitations under the License.
  */
 
-import { Breakpoint, SpaceProps, ColorProps } from '../../layout/types';
+import type { UtilityProps } from '../../types';
 
 /** @public */
-export type DisplayProps =
-  | 'flex'
-  | 'none'
-  | 'inline'
-  | 'block'
-  | Partial<Record<Breakpoint, 'flex' | 'none' | 'inline' | 'block'>>;
-
-/** @public */
-export type FlexDirectionProps =
-  | 'row'
-  | 'column'
-  | Partial<Record<Breakpoint, 'row' | 'column'>>;
-
-/** @public */
-export type FlexWrapProps =
-  | 'wrap'
-  | 'nowrap'
-  | Partial<Record<Breakpoint, 'wrap' | 'nowrap'>>;
-
-/** @public */
-export type JustifyContentProps =
-  | 'stretch'
-  | 'start'
-  | 'center'
-  | 'end'
-  | 'around'
-  | 'between'
-  | Partial<
-      Record<
-        Breakpoint,
-        'stretch' | 'start' | 'center' | 'end' | 'around' | 'between'
-      >
-    >;
-
-/** @public */
-export type AlignItemsProps =
-  | 'stretch'
-  | 'start'
-  | 'center'
-  | 'end'
-  | Partial<Record<Breakpoint, 'stretch' | 'start' | 'center' | 'end'>>;
-
-/** @public */
-export type BorderRadiusProps =
-  | 'none'
-  | 'small'
-  | 'medium'
-  | 'full'
-  | Partial<Record<Breakpoint, 'none' | 'small' | 'medium' | 'full'>>;
-
-/** @public */
-export interface BoxProps extends SpaceProps, ColorProps {
+export interface BoxProps extends UtilityProps {
   as?: keyof JSX.IntrinsicElements;
   children?: React.ReactNode;
-  display?: DisplayProps;
-  flexDirection?: FlexDirectionProps;
-  flexWrap?: FlexWrapProps;
-  justifyContent?: JustifyContentProps;
-  alignItems?: AlignItemsProps;
-  borderRadius?: BorderRadiusProps;
   className?: string;
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index 84217cfa9a..bad3f7a152 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -20,6 +20,62 @@
       display: block;
     }
 
+    .cu-2xl-flex {
+      display: flex;
+    }
+
+    .cu-2xl-flex-col {
+      flex-direction: column;
+    }
+
+    .cu-2xl-flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .cu-2xl-flex-row {
+      flex-direction: row;
+    }
+
+    .cu-2xl-flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .cu-2xl-flex-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .cu-2xl-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-gap-none {
+      gap: 0;
+    }
+
+    .cu-2xl-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-grid {
+      display: grid;
+    }
+
     .cu-2xl-hidden {
       display: none;
     }
@@ -32,36 +88,20 @@
       display: inline-block;
     }
 
-    .cu-2xl-flex {
-      display: flex;
+    .cu-2xl-items-center {
+      align-items: center;
     }
 
-    .cu-2xl-grid {
-      display: grid;
+    .cu-2xl-items-end {
+      align-items: flex-end;
     }
 
-    .cu-2xl-flex-row {
-      flex-direction: row;
+    .cu-2xl-items-start {
+      align-items: flex-start;
     }
 
-    .cu-2xl-flex-col {
-      flex-direction: column;
-    }
-
-    .cu-2xl-justify-stretch {
-      justify-content: stretch;
-    }
-
-    .cu-2xl-justify-start {
-      justify-content: flex-start;
-    }
-
-    .cu-2xl-justify-center {
-      justify-content: center;
-    }
-
-    .cu-2xl-justify-end {
-      justify-content: flex-end;
+    .cu-2xl-items-stretch {
+      align-items: stretch;
     }
 
     .cu-2xl-justify-around {
@@ -72,303 +112,195 @@
       justify-content: space-between;
     }
 
-    .cu-2xl-items-stretch {
-      align-items: stretch;
+    .cu-2xl-justify-center {
+      justify-content: center;
     }
 
-    .cu-2xl-items-center {
-      align-items: center;
+    .cu-2xl-justify-end {
+      justify-content: flex-end;
     }
 
-    .cu-2xl-items-start {
-      align-items: flex-start;
+    .cu-2xl-justify-start {
+      justify-content: flex-start;
     }
 
-    .cu-2xl-items-end {
-      align-items: flex-end;
-    }
-
-    .cu-2xl-p-none {
-      padding: 0;
-    }
-
-    .cu-2xl-p-2xs {
-      padding: var(--canon-spacing-2xs);
-    }
-
-    .cu-2xl-p-xs {
-      padding: var(--canon-spacing-xs);
-    }
-
-    .cu-2xl-p-sm {
-      padding: var(--canon-spacing-sm);
-    }
-
-    .cu-2xl-p-md {
-      padding: var(--canon-spacing-md);
-    }
-
-    .cu-2xl-p-lg {
-      padding: var(--canon-spacing-lg);
-    }
-
-    .cu-2xl-p-xl {
-      padding: var(--canon-spacing-xl);
-    }
-
-    .cu-2xl-p-2xl {
-      padding: var(--canon-spacing-2xl);
-    }
-
-    .cu-2xl-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-2xl-px-2xs {
-      padding-left: var(--canon-spacing-2xs);
-      padding-right: var(--canon-spacing-2xs);
-    }
-
-    .cu-2xl-px-xs {
-      padding-left: var(--canon-spacing-xs);
-      padding-right: var(--canon-spacing-xs);
-    }
-
-    .cu-2xl-px-sm {
-      padding-left: var(--canon-spacing-sm);
-      padding-right: var(--canon-spacing-sm);
-    }
-
-    .cu-2xl-px-md {
-      padding-left: var(--canon-spacing-md);
-      padding-right: var(--canon-spacing-md);
-    }
-
-    .cu-2xl-px-lg {
-      padding-left: var(--canon-spacing-lg);
-      padding-right: var(--canon-spacing-lg);
-    }
-
-    .cu-2xl-px-xl {
-      padding-left: var(--canon-spacing-xl);
-      padding-right: var(--canon-spacing-xl);
-    }
-
-    .cu-2xl-px-2xl {
-      padding-left: var(--canon-spacing-2xl);
-      padding-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-2xl-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-2xl-py-2xs {
-      padding-top: var(--canon-spacing-2xs);
-      padding-bottom: var(--canon-spacing-2xs);
-    }
-
-    .cu-2xl-py-xs {
-      padding-top: var(--canon-spacing-xs);
-      padding-bottom: var(--canon-spacing-xs);
-    }
-
-    .cu-2xl-py-sm {
-      padding-top: var(--canon-spacing-sm);
-      padding-bottom: var(--canon-spacing-sm);
-    }
-
-    .cu-2xl-py-md {
-      padding-top: var(--canon-spacing-md);
-      padding-bottom: var(--canon-spacing-md);
-    }
-
-    .cu-2xl-py-lg {
-      padding-top: var(--canon-spacing-lg);
-      padding-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-2xl-py-xl {
-      padding-top: var(--canon-spacing-xl);
-      padding-bottom: var(--canon-spacing-xl);
-    }
-
-    .cu-2xl-py-2xl {
-      padding-top: var(--canon-spacing-2xl);
-      padding-bottom: var(--canon-spacing-2xl);
-    }
-
-    .cu-2xl-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-2xl-pl-2xs {
-      padding-left: var(--canon-spacing-2xs);
-    }
-
-    .cu-2xl-pl-xs {
-      padding-left: var(--canon-spacing-xs);
-    }
-
-    .cu-2xl-pl-sm {
-      padding-left: var(--canon-spacing-sm);
-    }
-
-    .cu-2xl-pl-md {
-      padding-left: var(--canon-spacing-md);
-    }
-
-    .cu-2xl-pl-lg {
-      padding-left: var(--canon-spacing-lg);
-    }
-
-    .cu-2xl-pl-xl {
-      padding-left: var(--canon-spacing-xl);
-    }
-
-    .cu-2xl-pl-2xl {
-      padding-left: var(--canon-spacing-2xl);
-    }
-
-    .cu-2xl-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-2xl-pr-2xs {
-      padding-right: var(--canon-spacing-2xs);
-    }
-
-    .cu-2xl-pr-xs {
-      padding-right: var(--canon-spacing-xs);
-    }
-
-    .cu-2xl-pr-sm {
-      padding-right: var(--canon-spacing-sm);
-    }
-
-    .cu-2xl-pr-md {
-      padding-right: var(--canon-spacing-md);
-    }
-
-    .cu-2xl-pr-lg {
-      padding-right: var(--canon-spacing-lg);
-    }
-
-    .cu-2xl-pr-xl {
-      padding-right: var(--canon-spacing-xl);
-    }
-
-    .cu-2xl-pr-2xl {
-      padding-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-2xl-m-none {
-      margin: 0;
-    }
-
-    .cu-2xl-m-2xs {
-      margin: var(--canon-spacing-2xs);
-    }
-
-    .cu-2xl-m-xs {
-      margin: var(--canon-spacing-xs);
-    }
-
-    .cu-2xl-m-sm {
-      margin: var(--canon-spacing-sm);
-    }
-
-    .cu-2xl-m-md {
-      margin: var(--canon-spacing-md);
-    }
-
-    .cu-2xl-m-lg {
-      margin: var(--canon-spacing-lg);
-    }
-
-    .cu-2xl-m-xl {
-      margin: var(--canon-spacing-xl);
+    .cu-2xl-justify-stretch {
+      justify-content: stretch;
     }
 
     .cu-2xl-m-2xl {
       margin: var(--canon-spacing-2xl);
     }
 
-    .cu-2xl-mx-none {
-      margin-left: 0;
-      margin-right: 0;
+    .cu-2xl-m-lg {
+      margin: var(--canon-spacing-lg);
     }
 
-    .cu-2xl-mx-2xs {
-      margin-left: var(--canon-spacing-2xs);
-      margin-right: var(--canon-spacing-2xs);
+    .cu-2xl-m-md {
+      margin: var(--canon-spacing-md);
     }
 
-    .cu-2xl-mx-xs {
-      margin-left: var(--canon-spacing-xs);
-      margin-right: var(--canon-spacing-xs);
+    .cu-2xl-m-none {
+      margin: 0;
     }
 
-    .cu-2xl-mx-sm {
-      margin-left: var(--canon-spacing-sm);
-      margin-right: var(--canon-spacing-sm);
+    .cu-2xl-m-sm {
+      margin: var(--canon-spacing-sm);
     }
 
-    .cu-2xl-mx-md {
-      margin-left: var(--canon-spacing-md);
-      margin-right: var(--canon-spacing-md);
+    .cu-2xl-m-xl {
+      margin: var(--canon-spacing-xl);
     }
 
-    .cu-2xl-mx-lg {
+    .cu-2xl-m-xs {
+      margin: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-2xl-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-ml-2xl {
+      margin-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-ml-lg {
       margin-left: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-ml-md {
+      margin-left: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-2xl-ml-sm {
+      margin-left: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-ml-xl {
+      margin-left: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-ml-xs {
+      margin-left: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-mr-2xl {
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-mr-lg {
       margin-right: var(--canon-spacing-lg);
     }
 
-    .cu-2xl-mx-xl {
-      margin-left: var(--canon-spacing-xl);
+    .cu-2xl-mr-md {
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-2xl-mr-sm {
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-mr-xl {
       margin-right: var(--canon-spacing-xl);
     }
 
+    .cu-2xl-mr-xs {
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-2xl-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
     .cu-2xl-mx-2xl {
       margin-left: var(--canon-spacing-2xl);
       margin-right: var(--canon-spacing-2xl);
     }
 
-    .cu-2xl-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
+    .cu-2xl-mx-lg {
+      margin-left: var(--canon-spacing-lg);
+      margin-right: var(--canon-spacing-lg);
     }
 
-    .cu-2xl-my-2xs {
-      margin-top: var(--canon-spacing-2xs);
-      margin-bottom: var(--canon-spacing-2xs);
+    .cu-2xl-mx-md {
+      margin-left: var(--canon-spacing-md);
+      margin-right: var(--canon-spacing-md);
     }
 
-    .cu-2xl-my-xs {
-      margin-top: var(--canon-spacing-xs);
-      margin-bottom: var(--canon-spacing-xs);
+    .cu-2xl-mx-none {
+      margin-left: 0;
+      margin-right: 0;
     }
 
-    .cu-2xl-my-sm {
-      margin-top: var(--canon-spacing-sm);
-      margin-bottom: var(--canon-spacing-sm);
+    .cu-2xl-mx-sm {
+      margin-left: var(--canon-spacing-sm);
+      margin-right: var(--canon-spacing-sm);
     }
 
-    .cu-2xl-my-md {
-      margin-top: var(--canon-spacing-md);
-      margin-bottom: var(--canon-spacing-md);
+    .cu-2xl-mx-xl {
+      margin-left: var(--canon-spacing-xl);
+      margin-right: var(--canon-spacing-xl);
     }
 
-    .cu-2xl-my-lg {
-      margin-top: var(--canon-spacing-lg);
-      margin-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-2xl-my-xl {
-      margin-top: var(--canon-spacing-xl);
-      margin-bottom: var(--canon-spacing-xl);
+    .cu-2xl-mx-xs {
+      margin-left: var(--canon-spacing-xs);
+      margin-right: var(--canon-spacing-xs);
     }
 
     .cu-2xl-my-2xl {
@@ -376,228 +308,248 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
-    .cu-2xl-ml-none {
-      margin-left: 0;
+    .cu-2xl-my-lg {
+      margin-top: var(--canon-spacing-lg);
+      margin-bottom: var(--canon-spacing-lg);
     }
 
-    .cu-2xl-ml-2xs {
-      margin-left: var(--canon-spacing-2xs);
+    .cu-2xl-my-md {
+      margin-top: var(--canon-spacing-md);
+      margin-bottom: var(--canon-spacing-md);
     }
 
-    .cu-2xl-ml-xs {
-      margin-left: var(--canon-spacing-xs);
+    .cu-2xl-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
     }
 
-    .cu-2xl-ml-sm {
-      margin-left: var(--canon-spacing-sm);
+    .cu-2xl-my-sm {
+      margin-top: var(--canon-spacing-sm);
+      margin-bottom: var(--canon-spacing-sm);
     }
 
-    .cu-2xl-ml-md {
-      margin-left: var(--canon-spacing-md);
+    .cu-2xl-my-xl {
+      margin-top: var(--canon-spacing-xl);
+      margin-bottom: var(--canon-spacing-xl);
     }
 
-    .cu-2xl-ml-lg {
-      margin-left: var(--canon-spacing-lg);
+    .cu-2xl-my-xs {
+      margin-top: var(--canon-spacing-xs);
+      margin-bottom: var(--canon-spacing-xs);
     }
 
-    .cu-2xl-ml-xl {
-      margin-left: var(--canon-spacing-xl);
+    .cu-2xl-p-2xl {
+      padding: var(--canon-spacing-2xl);
     }
 
-    .cu-2xl-ml-2xl {
-      margin-left: var(--canon-spacing-2xl);
+    .cu-2xl-p-lg {
+      padding: var(--canon-spacing-lg);
     }
 
-    .cu-2xl-mr-none {
-      margin-right: 0;
+    .cu-2xl-p-md {
+      padding: var(--canon-spacing-md);
     }
 
-    .cu-2xl-mr-2xs {
-      margin-right: var(--canon-spacing-2xs);
+    .cu-2xl-p-none {
+      padding: 0;
     }
 
-    .cu-2xl-mr-xs {
-      margin-right: var(--canon-spacing-xs);
+    .cu-2xl-p-sm {
+      padding: var(--canon-spacing-sm);
     }
 
-    .cu-2xl-mr-sm {
-      margin-right: var(--canon-spacing-sm);
+    .cu-2xl-p-xl {
+      padding: var(--canon-spacing-xl);
     }
 
-    .cu-2xl-mr-md {
-      margin-right: var(--canon-spacing-md);
-    }
-
-    .cu-2xl-mr-lg {
-      margin-right: var(--canon-spacing-lg);
-    }
-
-    .cu-2xl-mr-xl {
-      margin-right: var(--canon-spacing-xl);
-    }
-
-    .cu-2xl-mr-2xl {
-      margin-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-2xl-gap-none {
-      gap: 0;
-    }
-
-    .cu-2xl-gap-2xs {
-      gap: var(--canon-spacing-2xs);
-    }
-
-    .cu-2xl-gap-xs {
-      gap: var(--canon-spacing-xs);
-    }
-
-    .cu-2xl-gap-sm {
-      gap: var(--canon-spacing-sm);
-    }
-
-    .cu-2xl-gap-md {
-      gap: var(--canon-spacing-md);
-    }
-
-    .cu-2xl-gap-lg {
-      gap: var(--canon-spacing-lg);
-    }
-
-    .cu-2xl-gap-xl {
-      gap: var(--canon-spacing-xl);
-    }
-
-    .cu-2xl-gap-2xl {
-      gap: var(--canon-spacing-2xl);
-    }
-
-    .cu-2xl-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-2xl-pt-2xs {
-      padding-top: var(--canon-spacing-2xs);
-    }
-
-    .cu-2xl-pt-xs {
-      padding-top: var(--canon-spacing-xs);
-    }
-
-    .cu-2xl-pt-sm {
-      padding-top: var(--canon-spacing-sm);
-    }
-
-    .cu-2xl-pt-md {
-      padding-top: var(--canon-spacing-md);
-    }
-
-    .cu-2xl-pt-lg {
-      padding-top: var(--canon-spacing-lg);
-    }
-
-    .cu-2xl-pt-xl {
-      padding-top: var(--canon-spacing-xl);
-    }
-
-    .cu-2xl-pt-2xl {
-      padding-top: var(--canon-spacing-2xl);
-    }
-
-    .cu-2xl-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-2xl-pb-2xs {
-      padding-bottom: var(--canon-spacing-2xs);
-    }
-
-    .cu-2xl-pb-xs {
-      padding-bottom: var(--canon-spacing-xs);
-    }
-
-    .cu-2xl-pb-sm {
-      padding-bottom: var(--canon-spacing-sm);
-    }
-
-    .cu-2xl-pb-md {
-      padding-bottom: var(--canon-spacing-md);
-    }
-
-    .cu-2xl-pb-lg {
-      padding-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-2xl-pb-xl {
-      padding-bottom: var(--canon-spacing-xl);
+    .cu-2xl-p-xs {
+      padding: var(--canon-spacing-xs);
     }
 
     .cu-2xl-pb-2xl {
       padding-bottom: var(--canon-spacing-2xl);
     }
 
-    .cu-2xl-mt-none {
-      margin-top: 0;
+    .cu-2xl-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
     }
 
-    .cu-2xl-mt-2xs {
-      margin-top: var(--canon-spacing-2xs);
+    .cu-2xl-pb-md {
+      padding-bottom: var(--canon-spacing-md);
     }
 
-    .cu-2xl-mt-xs {
-      margin-top: var(--canon-spacing-xs);
+    .cu-2xl-pb-none {
+      padding-bottom: 0;
     }
 
-    .cu-2xl-mt-sm {
-      margin-top: var(--canon-spacing-sm);
+    .cu-2xl-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
     }
 
-    .cu-2xl-mt-md {
-      margin-top: var(--canon-spacing-md);
+    .cu-2xl-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
     }
 
-    .cu-2xl-mt-lg {
-      margin-top: var(--canon-spacing-lg);
+    .cu-2xl-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
     }
 
-    .cu-2xl-mt-xl {
-      margin-top: var(--canon-spacing-xl);
+    .cu-2xl-pl-2xl {
+      padding-left: var(--canon-spacing-2xl);
     }
 
-    .cu-2xl-mt-2xl {
-      margin-top: var(--canon-spacing-2xl);
+    .cu-2xl-pl-lg {
+      padding-left: var(--canon-spacing-lg);
     }
 
-    .cu-2xl-mb-none {
-      margin-bottom: 0;
+    .cu-2xl-pl-md {
+      padding-left: var(--canon-spacing-md);
     }
 
-    .cu-2xl-mb-2xs {
-      margin-bottom: var(--canon-spacing-2xs);
+    .cu-2xl-pl-none {
+      padding-left: 0;
     }
 
-    .cu-2xl-mb-xs {
-      margin-bottom: var(--canon-spacing-xs);
+    .cu-2xl-pl-sm {
+      padding-left: var(--canon-spacing-sm);
     }
 
-    .cu-2xl-mb-sm {
-      margin-bottom: var(--canon-spacing-sm);
+    .cu-2xl-pl-xl {
+      padding-left: var(--canon-spacing-xl);
     }
 
-    .cu-2xl-mb-md {
-      margin-bottom: var(--canon-spacing-md);
+    .cu-2xl-pl-xs {
+      padding-left: var(--canon-spacing-xs);
     }
 
-    .cu-2xl-mb-lg {
-      margin-bottom: var(--canon-spacing-lg);
+    .cu-2xl-pr-2xl {
+      padding-right: var(--canon-spacing-2xl);
     }
 
-    .cu-2xl-mb-xl {
-      margin-bottom: var(--canon-spacing-xl);
+    .cu-2xl-pr-lg {
+      padding-right: var(--canon-spacing-lg);
     }
 
-    .cu-2xl-mb-2xl {
-      margin-bottom: var(--canon-spacing-2xl);
+    .cu-2xl-pr-md {
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-2xl-pr-sm {
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-pr-xl {
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-pr-xs {
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-2xl-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-px-2xl {
+      padding-left: var(--canon-spacing-2xl);
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-px-lg {
+      padding-left: var(--canon-spacing-lg);
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-px-md {
+      padding-left: var(--canon-spacing-md);
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-2xl-px-sm {
+      padding-left: var(--canon-spacing-sm);
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-px-xl {
+      padding-left: var(--canon-spacing-xl);
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-px-xs {
+      padding-left: var(--canon-spacing-xs);
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-py-2xl {
+      padding-top: var(--canon-spacing-2xl);
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-py-lg {
+      padding-top: var(--canon-spacing-lg);
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-py-md {
+      padding-top: var(--canon-spacing-md);
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-2xl-py-sm {
+      padding-top: var(--canon-spacing-sm);
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-py-xl {
+      padding-top: var(--canon-spacing-xl);
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-py-xs {
+      padding-top: var(--canon-spacing-xs);
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-wrap-reverse {
+      flex-wrap: wrap-reverse;
     }
   }
 }
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index 3c2a150365..40bca233ef 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -20,6 +20,62 @@
       display: block;
     }
 
+    .cu-lg-flex {
+      display: flex;
+    }
+
+    .cu-lg-flex-col {
+      flex-direction: column;
+    }
+
+    .cu-lg-flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .cu-lg-flex-row {
+      flex-direction: row;
+    }
+
+    .cu-lg-flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .cu-lg-flex-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .cu-lg-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-lg-gap-none {
+      gap: 0;
+    }
+
+    .cu-lg-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-grid {
+      display: grid;
+    }
+
     .cu-lg-hidden {
       display: none;
     }
@@ -32,36 +88,20 @@
       display: inline-block;
     }
 
-    .cu-lg-flex {
-      display: flex;
+    .cu-lg-items-center {
+      align-items: center;
     }
 
-    .cu-lg-grid {
-      display: grid;
+    .cu-lg-items-end {
+      align-items: flex-end;
     }
 
-    .cu-lg-flex-row {
-      flex-direction: row;
+    .cu-lg-items-start {
+      align-items: flex-start;
     }
 
-    .cu-lg-flex-col {
-      flex-direction: column;
-    }
-
-    .cu-lg-justify-stretch {
-      justify-content: stretch;
-    }
-
-    .cu-lg-justify-start {
-      justify-content: flex-start;
-    }
-
-    .cu-lg-justify-center {
-      justify-content: center;
-    }
-
-    .cu-lg-justify-end {
-      justify-content: flex-end;
+    .cu-lg-items-stretch {
+      align-items: stretch;
     }
 
     .cu-lg-justify-around {
@@ -72,303 +112,195 @@
       justify-content: space-between;
     }
 
-    .cu-lg-items-stretch {
-      align-items: stretch;
+    .cu-lg-justify-center {
+      justify-content: center;
     }
 
-    .cu-lg-items-center {
-      align-items: center;
+    .cu-lg-justify-end {
+      justify-content: flex-end;
     }
 
-    .cu-lg-items-start {
-      align-items: flex-start;
+    .cu-lg-justify-start {
+      justify-content: flex-start;
     }
 
-    .cu-lg-items-end {
-      align-items: flex-end;
-    }
-
-    .cu-lg-p-none {
-      padding: 0;
-    }
-
-    .cu-lg-p-2xs {
-      padding: var(--canon-spacing-2xs);
-    }
-
-    .cu-lg-p-xs {
-      padding: var(--canon-spacing-xs);
-    }
-
-    .cu-lg-p-sm {
-      padding: var(--canon-spacing-sm);
-    }
-
-    .cu-lg-p-md {
-      padding: var(--canon-spacing-md);
-    }
-
-    .cu-lg-p-lg {
-      padding: var(--canon-spacing-lg);
-    }
-
-    .cu-lg-p-xl {
-      padding: var(--canon-spacing-xl);
-    }
-
-    .cu-lg-p-2xl {
-      padding: var(--canon-spacing-2xl);
-    }
-
-    .cu-lg-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-lg-px-2xs {
-      padding-left: var(--canon-spacing-2xs);
-      padding-right: var(--canon-spacing-2xs);
-    }
-
-    .cu-lg-px-xs {
-      padding-left: var(--canon-spacing-xs);
-      padding-right: var(--canon-spacing-xs);
-    }
-
-    .cu-lg-px-sm {
-      padding-left: var(--canon-spacing-sm);
-      padding-right: var(--canon-spacing-sm);
-    }
-
-    .cu-lg-px-md {
-      padding-left: var(--canon-spacing-md);
-      padding-right: var(--canon-spacing-md);
-    }
-
-    .cu-lg-px-lg {
-      padding-left: var(--canon-spacing-lg);
-      padding-right: var(--canon-spacing-lg);
-    }
-
-    .cu-lg-px-xl {
-      padding-left: var(--canon-spacing-xl);
-      padding-right: var(--canon-spacing-xl);
-    }
-
-    .cu-lg-px-2xl {
-      padding-left: var(--canon-spacing-2xl);
-      padding-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-lg-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-lg-py-2xs {
-      padding-top: var(--canon-spacing-2xs);
-      padding-bottom: var(--canon-spacing-2xs);
-    }
-
-    .cu-lg-py-xs {
-      padding-top: var(--canon-spacing-xs);
-      padding-bottom: var(--canon-spacing-xs);
-    }
-
-    .cu-lg-py-sm {
-      padding-top: var(--canon-spacing-sm);
-      padding-bottom: var(--canon-spacing-sm);
-    }
-
-    .cu-lg-py-md {
-      padding-top: var(--canon-spacing-md);
-      padding-bottom: var(--canon-spacing-md);
-    }
-
-    .cu-lg-py-lg {
-      padding-top: var(--canon-spacing-lg);
-      padding-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-lg-py-xl {
-      padding-top: var(--canon-spacing-xl);
-      padding-bottom: var(--canon-spacing-xl);
-    }
-
-    .cu-lg-py-2xl {
-      padding-top: var(--canon-spacing-2xl);
-      padding-bottom: var(--canon-spacing-2xl);
-    }
-
-    .cu-lg-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-lg-pl-2xs {
-      padding-left: var(--canon-spacing-2xs);
-    }
-
-    .cu-lg-pl-xs {
-      padding-left: var(--canon-spacing-xs);
-    }
-
-    .cu-lg-pl-sm {
-      padding-left: var(--canon-spacing-sm);
-    }
-
-    .cu-lg-pl-md {
-      padding-left: var(--canon-spacing-md);
-    }
-
-    .cu-lg-pl-lg {
-      padding-left: var(--canon-spacing-lg);
-    }
-
-    .cu-lg-pl-xl {
-      padding-left: var(--canon-spacing-xl);
-    }
-
-    .cu-lg-pl-2xl {
-      padding-left: var(--canon-spacing-2xl);
-    }
-
-    .cu-lg-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-lg-pr-2xs {
-      padding-right: var(--canon-spacing-2xs);
-    }
-
-    .cu-lg-pr-xs {
-      padding-right: var(--canon-spacing-xs);
-    }
-
-    .cu-lg-pr-sm {
-      padding-right: var(--canon-spacing-sm);
-    }
-
-    .cu-lg-pr-md {
-      padding-right: var(--canon-spacing-md);
-    }
-
-    .cu-lg-pr-lg {
-      padding-right: var(--canon-spacing-lg);
-    }
-
-    .cu-lg-pr-xl {
-      padding-right: var(--canon-spacing-xl);
-    }
-
-    .cu-lg-pr-2xl {
-      padding-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-lg-m-none {
-      margin: 0;
-    }
-
-    .cu-lg-m-2xs {
-      margin: var(--canon-spacing-2xs);
-    }
-
-    .cu-lg-m-xs {
-      margin: var(--canon-spacing-xs);
-    }
-
-    .cu-lg-m-sm {
-      margin: var(--canon-spacing-sm);
-    }
-
-    .cu-lg-m-md {
-      margin: var(--canon-spacing-md);
-    }
-
-    .cu-lg-m-lg {
-      margin: var(--canon-spacing-lg);
-    }
-
-    .cu-lg-m-xl {
-      margin: var(--canon-spacing-xl);
+    .cu-lg-justify-stretch {
+      justify-content: stretch;
     }
 
     .cu-lg-m-2xl {
       margin: var(--canon-spacing-2xl);
     }
 
-    .cu-lg-mx-none {
-      margin-left: 0;
-      margin-right: 0;
+    .cu-lg-m-lg {
+      margin: var(--canon-spacing-lg);
     }
 
-    .cu-lg-mx-2xs {
-      margin-left: var(--canon-spacing-2xs);
-      margin-right: var(--canon-spacing-2xs);
+    .cu-lg-m-md {
+      margin: var(--canon-spacing-md);
     }
 
-    .cu-lg-mx-xs {
-      margin-left: var(--canon-spacing-xs);
-      margin-right: var(--canon-spacing-xs);
+    .cu-lg-m-none {
+      margin: 0;
     }
 
-    .cu-lg-mx-sm {
-      margin-left: var(--canon-spacing-sm);
-      margin-right: var(--canon-spacing-sm);
+    .cu-lg-m-sm {
+      margin: var(--canon-spacing-sm);
     }
 
-    .cu-lg-mx-md {
-      margin-left: var(--canon-spacing-md);
-      margin-right: var(--canon-spacing-md);
+    .cu-lg-m-xl {
+      margin: var(--canon-spacing-xl);
     }
 
-    .cu-lg-mx-lg {
+    .cu-lg-m-xs {
+      margin: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-lg-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-lg-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-ml-2xl {
+      margin-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-ml-lg {
       margin-left: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-ml-md {
+      margin-left: var(--canon-spacing-md);
+    }
+
+    .cu-lg-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-lg-ml-sm {
+      margin-left: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-ml-xl {
+      margin-left: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-ml-xs {
+      margin-left: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-mr-2xl {
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-mr-lg {
       margin-right: var(--canon-spacing-lg);
     }
 
-    .cu-lg-mx-xl {
-      margin-left: var(--canon-spacing-xl);
+    .cu-lg-mr-md {
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-lg-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-lg-mr-sm {
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-mr-xl {
       margin-right: var(--canon-spacing-xl);
     }
 
+    .cu-lg-mr-xs {
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-lg-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-lg-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
     .cu-lg-mx-2xl {
       margin-left: var(--canon-spacing-2xl);
       margin-right: var(--canon-spacing-2xl);
     }
 
-    .cu-lg-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
+    .cu-lg-mx-lg {
+      margin-left: var(--canon-spacing-lg);
+      margin-right: var(--canon-spacing-lg);
     }
 
-    .cu-lg-my-2xs {
-      margin-top: var(--canon-spacing-2xs);
-      margin-bottom: var(--canon-spacing-2xs);
+    .cu-lg-mx-md {
+      margin-left: var(--canon-spacing-md);
+      margin-right: var(--canon-spacing-md);
     }
 
-    .cu-lg-my-xs {
-      margin-top: var(--canon-spacing-xs);
-      margin-bottom: var(--canon-spacing-xs);
+    .cu-lg-mx-none {
+      margin-left: 0;
+      margin-right: 0;
     }
 
-    .cu-lg-my-sm {
-      margin-top: var(--canon-spacing-sm);
-      margin-bottom: var(--canon-spacing-sm);
+    .cu-lg-mx-sm {
+      margin-left: var(--canon-spacing-sm);
+      margin-right: var(--canon-spacing-sm);
     }
 
-    .cu-lg-my-md {
-      margin-top: var(--canon-spacing-md);
-      margin-bottom: var(--canon-spacing-md);
+    .cu-lg-mx-xl {
+      margin-left: var(--canon-spacing-xl);
+      margin-right: var(--canon-spacing-xl);
     }
 
-    .cu-lg-my-lg {
-      margin-top: var(--canon-spacing-lg);
-      margin-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-lg-my-xl {
-      margin-top: var(--canon-spacing-xl);
-      margin-bottom: var(--canon-spacing-xl);
+    .cu-lg-mx-xs {
+      margin-left: var(--canon-spacing-xs);
+      margin-right: var(--canon-spacing-xs);
     }
 
     .cu-lg-my-2xl {
@@ -376,228 +308,248 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
-    .cu-lg-ml-none {
-      margin-left: 0;
+    .cu-lg-my-lg {
+      margin-top: var(--canon-spacing-lg);
+      margin-bottom: var(--canon-spacing-lg);
     }
 
-    .cu-lg-ml-2xs {
-      margin-left: var(--canon-spacing-2xs);
+    .cu-lg-my-md {
+      margin-top: var(--canon-spacing-md);
+      margin-bottom: var(--canon-spacing-md);
     }
 
-    .cu-lg-ml-xs {
-      margin-left: var(--canon-spacing-xs);
+    .cu-lg-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
     }
 
-    .cu-lg-ml-sm {
-      margin-left: var(--canon-spacing-sm);
+    .cu-lg-my-sm {
+      margin-top: var(--canon-spacing-sm);
+      margin-bottom: var(--canon-spacing-sm);
     }
 
-    .cu-lg-ml-md {
-      margin-left: var(--canon-spacing-md);
+    .cu-lg-my-xl {
+      margin-top: var(--canon-spacing-xl);
+      margin-bottom: var(--canon-spacing-xl);
     }
 
-    .cu-lg-ml-lg {
-      margin-left: var(--canon-spacing-lg);
+    .cu-lg-my-xs {
+      margin-top: var(--canon-spacing-xs);
+      margin-bottom: var(--canon-spacing-xs);
     }
 
-    .cu-lg-ml-xl {
-      margin-left: var(--canon-spacing-xl);
+    .cu-lg-p-2xl {
+      padding: var(--canon-spacing-2xl);
     }
 
-    .cu-lg-ml-2xl {
-      margin-left: var(--canon-spacing-2xl);
+    .cu-lg-p-lg {
+      padding: var(--canon-spacing-lg);
     }
 
-    .cu-lg-mr-none {
-      margin-right: 0;
+    .cu-lg-p-md {
+      padding: var(--canon-spacing-md);
     }
 
-    .cu-lg-mr-2xs {
-      margin-right: var(--canon-spacing-2xs);
+    .cu-lg-p-none {
+      padding: 0;
     }
 
-    .cu-lg-mr-xs {
-      margin-right: var(--canon-spacing-xs);
+    .cu-lg-p-sm {
+      padding: var(--canon-spacing-sm);
     }
 
-    .cu-lg-mr-sm {
-      margin-right: var(--canon-spacing-sm);
+    .cu-lg-p-xl {
+      padding: var(--canon-spacing-xl);
     }
 
-    .cu-lg-mr-md {
-      margin-right: var(--canon-spacing-md);
-    }
-
-    .cu-lg-mr-lg {
-      margin-right: var(--canon-spacing-lg);
-    }
-
-    .cu-lg-mr-xl {
-      margin-right: var(--canon-spacing-xl);
-    }
-
-    .cu-lg-mr-2xl {
-      margin-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-lg-gap-none {
-      gap: 0;
-    }
-
-    .cu-lg-gap-2xs {
-      gap: var(--canon-spacing-2xs);
-    }
-
-    .cu-lg-gap-xs {
-      gap: var(--canon-spacing-xs);
-    }
-
-    .cu-lg-gap-sm {
-      gap: var(--canon-spacing-sm);
-    }
-
-    .cu-lg-gap-md {
-      gap: var(--canon-spacing-md);
-    }
-
-    .cu-lg-gap-lg {
-      gap: var(--canon-spacing-lg);
-    }
-
-    .cu-lg-gap-xl {
-      gap: var(--canon-spacing-xl);
-    }
-
-    .cu-lg-gap-2xl {
-      gap: var(--canon-spacing-2xl);
-    }
-
-    .cu-lg-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-lg-pt-2xs {
-      padding-top: var(--canon-spacing-2xs);
-    }
-
-    .cu-lg-pt-xs {
-      padding-top: var(--canon-spacing-xs);
-    }
-
-    .cu-lg-pt-sm {
-      padding-top: var(--canon-spacing-sm);
-    }
-
-    .cu-lg-pt-md {
-      padding-top: var(--canon-spacing-md);
-    }
-
-    .cu-lg-pt-lg {
-      padding-top: var(--canon-spacing-lg);
-    }
-
-    .cu-lg-pt-xl {
-      padding-top: var(--canon-spacing-xl);
-    }
-
-    .cu-lg-pt-2xl {
-      padding-top: var(--canon-spacing-2xl);
-    }
-
-    .cu-lg-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-lg-pb-2xs {
-      padding-bottom: var(--canon-spacing-2xs);
-    }
-
-    .cu-lg-pb-xs {
-      padding-bottom: var(--canon-spacing-xs);
-    }
-
-    .cu-lg-pb-sm {
-      padding-bottom: var(--canon-spacing-sm);
-    }
-
-    .cu-lg-pb-md {
-      padding-bottom: var(--canon-spacing-md);
-    }
-
-    .cu-lg-pb-lg {
-      padding-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-lg-pb-xl {
-      padding-bottom: var(--canon-spacing-xl);
+    .cu-lg-p-xs {
+      padding: var(--canon-spacing-xs);
     }
 
     .cu-lg-pb-2xl {
       padding-bottom: var(--canon-spacing-2xl);
     }
 
-    .cu-lg-mt-none {
-      margin-top: 0;
+    .cu-lg-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
     }
 
-    .cu-lg-mt-2xs {
-      margin-top: var(--canon-spacing-2xs);
+    .cu-lg-pb-md {
+      padding-bottom: var(--canon-spacing-md);
     }
 
-    .cu-lg-mt-xs {
-      margin-top: var(--canon-spacing-xs);
+    .cu-lg-pb-none {
+      padding-bottom: 0;
     }
 
-    .cu-lg-mt-sm {
-      margin-top: var(--canon-spacing-sm);
+    .cu-lg-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
     }
 
-    .cu-lg-mt-md {
-      margin-top: var(--canon-spacing-md);
+    .cu-lg-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
     }
 
-    .cu-lg-mt-lg {
-      margin-top: var(--canon-spacing-lg);
+    .cu-lg-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
     }
 
-    .cu-lg-mt-xl {
-      margin-top: var(--canon-spacing-xl);
+    .cu-lg-pl-2xl {
+      padding-left: var(--canon-spacing-2xl);
     }
 
-    .cu-lg-mt-2xl {
-      margin-top: var(--canon-spacing-2xl);
+    .cu-lg-pl-lg {
+      padding-left: var(--canon-spacing-lg);
     }
 
-    .cu-lg-mb-none {
-      margin-bottom: 0;
+    .cu-lg-pl-md {
+      padding-left: var(--canon-spacing-md);
     }
 
-    .cu-lg-mb-2xs {
-      margin-bottom: var(--canon-spacing-2xs);
+    .cu-lg-pl-none {
+      padding-left: 0;
     }
 
-    .cu-lg-mb-xs {
-      margin-bottom: var(--canon-spacing-xs);
+    .cu-lg-pl-sm {
+      padding-left: var(--canon-spacing-sm);
     }
 
-    .cu-lg-mb-sm {
-      margin-bottom: var(--canon-spacing-sm);
+    .cu-lg-pl-xl {
+      padding-left: var(--canon-spacing-xl);
     }
 
-    .cu-lg-mb-md {
-      margin-bottom: var(--canon-spacing-md);
+    .cu-lg-pl-xs {
+      padding-left: var(--canon-spacing-xs);
     }
 
-    .cu-lg-mb-lg {
-      margin-bottom: var(--canon-spacing-lg);
+    .cu-lg-pr-2xl {
+      padding-right: var(--canon-spacing-2xl);
     }
 
-    .cu-lg-mb-xl {
-      margin-bottom: var(--canon-spacing-xl);
+    .cu-lg-pr-lg {
+      padding-right: var(--canon-spacing-lg);
     }
 
-    .cu-lg-mb-2xl {
-      margin-bottom: var(--canon-spacing-2xl);
+    .cu-lg-pr-md {
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-lg-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-lg-pr-sm {
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-pr-xl {
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-pr-xs {
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-lg-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-lg-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-px-2xl {
+      padding-left: var(--canon-spacing-2xl);
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-px-lg {
+      padding-left: var(--canon-spacing-lg);
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-px-md {
+      padding-left: var(--canon-spacing-md);
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-lg-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-lg-px-sm {
+      padding-left: var(--canon-spacing-sm);
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-px-xl {
+      padding-left: var(--canon-spacing-xl);
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-px-xs {
+      padding-left: var(--canon-spacing-xs);
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-py-2xl {
+      padding-top: var(--canon-spacing-2xl);
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-py-lg {
+      padding-top: var(--canon-spacing-lg);
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-py-md {
+      padding-top: var(--canon-spacing-md);
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-lg-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-lg-py-sm {
+      padding-top: var(--canon-spacing-sm);
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-py-xl {
+      padding-top: var(--canon-spacing-xl);
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-py-xs {
+      padding-top: var(--canon-spacing-xs);
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-wrap-reverse {
+      flex-wrap: wrap-reverse;
     }
   }
 }
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index 40812b1cf3..f499061167 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -20,6 +20,62 @@
       display: block;
     }
 
+    .cu-md-flex {
+      display: flex;
+    }
+
+    .cu-md-flex-col {
+      flex-direction: column;
+    }
+
+    .cu-md-flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .cu-md-flex-row {
+      flex-direction: row;
+    }
+
+    .cu-md-flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .cu-md-flex-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .cu-md-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-md-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-md-gap-none {
+      gap: 0;
+    }
+
+    .cu-md-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-md-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-md-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-md-grid {
+      display: grid;
+    }
+
     .cu-md-hidden {
       display: none;
     }
@@ -32,36 +88,20 @@
       display: inline-block;
     }
 
-    .cu-md-flex {
-      display: flex;
+    .cu-md-items-center {
+      align-items: center;
     }
 
-    .cu-md-grid {
-      display: grid;
+    .cu-md-items-end {
+      align-items: flex-end;
     }
 
-    .cu-md-flex-row {
-      flex-direction: row;
+    .cu-md-items-start {
+      align-items: flex-start;
     }
 
-    .cu-md-flex-col {
-      flex-direction: column;
-    }
-
-    .cu-md-justify-stretch {
-      justify-content: stretch;
-    }
-
-    .cu-md-justify-start {
-      justify-content: flex-start;
-    }
-
-    .cu-md-justify-center {
-      justify-content: center;
-    }
-
-    .cu-md-justify-end {
-      justify-content: flex-end;
+    .cu-md-items-stretch {
+      align-items: stretch;
     }
 
     .cu-md-justify-around {
@@ -72,303 +112,195 @@
       justify-content: space-between;
     }
 
-    .cu-md-items-stretch {
-      align-items: stretch;
+    .cu-md-justify-center {
+      justify-content: center;
     }
 
-    .cu-md-items-center {
-      align-items: center;
+    .cu-md-justify-end {
+      justify-content: flex-end;
     }
 
-    .cu-md-items-start {
-      align-items: flex-start;
+    .cu-md-justify-start {
+      justify-content: flex-start;
     }
 
-    .cu-md-items-end {
-      align-items: flex-end;
-    }
-
-    .cu-md-p-none {
-      padding: 0;
-    }
-
-    .cu-md-p-2xs {
-      padding: var(--canon-spacing-2xs);
-    }
-
-    .cu-md-p-xs {
-      padding: var(--canon-spacing-xs);
-    }
-
-    .cu-md-p-sm {
-      padding: var(--canon-spacing-sm);
-    }
-
-    .cu-md-p-md {
-      padding: var(--canon-spacing-md);
-    }
-
-    .cu-md-p-lg {
-      padding: var(--canon-spacing-lg);
-    }
-
-    .cu-md-p-xl {
-      padding: var(--canon-spacing-xl);
-    }
-
-    .cu-md-p-2xl {
-      padding: var(--canon-spacing-2xl);
-    }
-
-    .cu-md-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-md-px-2xs {
-      padding-left: var(--canon-spacing-2xs);
-      padding-right: var(--canon-spacing-2xs);
-    }
-
-    .cu-md-px-xs {
-      padding-left: var(--canon-spacing-xs);
-      padding-right: var(--canon-spacing-xs);
-    }
-
-    .cu-md-px-sm {
-      padding-left: var(--canon-spacing-sm);
-      padding-right: var(--canon-spacing-sm);
-    }
-
-    .cu-md-px-md {
-      padding-left: var(--canon-spacing-md);
-      padding-right: var(--canon-spacing-md);
-    }
-
-    .cu-md-px-lg {
-      padding-left: var(--canon-spacing-lg);
-      padding-right: var(--canon-spacing-lg);
-    }
-
-    .cu-md-px-xl {
-      padding-left: var(--canon-spacing-xl);
-      padding-right: var(--canon-spacing-xl);
-    }
-
-    .cu-md-px-2xl {
-      padding-left: var(--canon-spacing-2xl);
-      padding-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-md-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-md-py-2xs {
-      padding-top: var(--canon-spacing-2xs);
-      padding-bottom: var(--canon-spacing-2xs);
-    }
-
-    .cu-md-py-xs {
-      padding-top: var(--canon-spacing-xs);
-      padding-bottom: var(--canon-spacing-xs);
-    }
-
-    .cu-md-py-sm {
-      padding-top: var(--canon-spacing-sm);
-      padding-bottom: var(--canon-spacing-sm);
-    }
-
-    .cu-md-py-md {
-      padding-top: var(--canon-spacing-md);
-      padding-bottom: var(--canon-spacing-md);
-    }
-
-    .cu-md-py-lg {
-      padding-top: var(--canon-spacing-lg);
-      padding-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-md-py-xl {
-      padding-top: var(--canon-spacing-xl);
-      padding-bottom: var(--canon-spacing-xl);
-    }
-
-    .cu-md-py-2xl {
-      padding-top: var(--canon-spacing-2xl);
-      padding-bottom: var(--canon-spacing-2xl);
-    }
-
-    .cu-md-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-md-pl-2xs {
-      padding-left: var(--canon-spacing-2xs);
-    }
-
-    .cu-md-pl-xs {
-      padding-left: var(--canon-spacing-xs);
-    }
-
-    .cu-md-pl-sm {
-      padding-left: var(--canon-spacing-sm);
-    }
-
-    .cu-md-pl-md {
-      padding-left: var(--canon-spacing-md);
-    }
-
-    .cu-md-pl-lg {
-      padding-left: var(--canon-spacing-lg);
-    }
-
-    .cu-md-pl-xl {
-      padding-left: var(--canon-spacing-xl);
-    }
-
-    .cu-md-pl-2xl {
-      padding-left: var(--canon-spacing-2xl);
-    }
-
-    .cu-md-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-md-pr-2xs {
-      padding-right: var(--canon-spacing-2xs);
-    }
-
-    .cu-md-pr-xs {
-      padding-right: var(--canon-spacing-xs);
-    }
-
-    .cu-md-pr-sm {
-      padding-right: var(--canon-spacing-sm);
-    }
-
-    .cu-md-pr-md {
-      padding-right: var(--canon-spacing-md);
-    }
-
-    .cu-md-pr-lg {
-      padding-right: var(--canon-spacing-lg);
-    }
-
-    .cu-md-pr-xl {
-      padding-right: var(--canon-spacing-xl);
-    }
-
-    .cu-md-pr-2xl {
-      padding-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-md-m-none {
-      margin: 0;
-    }
-
-    .cu-md-m-2xs {
-      margin: var(--canon-spacing-2xs);
-    }
-
-    .cu-md-m-xs {
-      margin: var(--canon-spacing-xs);
-    }
-
-    .cu-md-m-sm {
-      margin: var(--canon-spacing-sm);
-    }
-
-    .cu-md-m-md {
-      margin: var(--canon-spacing-md);
-    }
-
-    .cu-md-m-lg {
-      margin: var(--canon-spacing-lg);
-    }
-
-    .cu-md-m-xl {
-      margin: var(--canon-spacing-xl);
+    .cu-md-justify-stretch {
+      justify-content: stretch;
     }
 
     .cu-md-m-2xl {
       margin: var(--canon-spacing-2xl);
     }
 
-    .cu-md-mx-none {
-      margin-left: 0;
-      margin-right: 0;
+    .cu-md-m-lg {
+      margin: var(--canon-spacing-lg);
     }
 
-    .cu-md-mx-2xs {
-      margin-left: var(--canon-spacing-2xs);
-      margin-right: var(--canon-spacing-2xs);
+    .cu-md-m-md {
+      margin: var(--canon-spacing-md);
     }
 
-    .cu-md-mx-xs {
-      margin-left: var(--canon-spacing-xs);
-      margin-right: var(--canon-spacing-xs);
+    .cu-md-m-none {
+      margin: 0;
     }
 
-    .cu-md-mx-sm {
-      margin-left: var(--canon-spacing-sm);
-      margin-right: var(--canon-spacing-sm);
+    .cu-md-m-sm {
+      margin: var(--canon-spacing-sm);
     }
 
-    .cu-md-mx-md {
-      margin-left: var(--canon-spacing-md);
-      margin-right: var(--canon-spacing-md);
+    .cu-md-m-xl {
+      margin: var(--canon-spacing-xl);
     }
 
-    .cu-md-mx-lg {
+    .cu-md-m-xs {
+      margin: var(--canon-spacing-xs);
+    }
+
+    .cu-md-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-md-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-md-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-md-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-md-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-md-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-md-ml-2xl {
+      margin-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-ml-lg {
       margin-left: var(--canon-spacing-lg);
+    }
+
+    .cu-md-ml-md {
+      margin-left: var(--canon-spacing-md);
+    }
+
+    .cu-md-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-md-ml-sm {
+      margin-left: var(--canon-spacing-sm);
+    }
+
+    .cu-md-ml-xl {
+      margin-left: var(--canon-spacing-xl);
+    }
+
+    .cu-md-ml-xs {
+      margin-left: var(--canon-spacing-xs);
+    }
+
+    .cu-md-mr-2xl {
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-mr-lg {
       margin-right: var(--canon-spacing-lg);
     }
 
-    .cu-md-mx-xl {
-      margin-left: var(--canon-spacing-xl);
+    .cu-md-mr-md {
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-md-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-md-mr-sm {
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-md-mr-xl {
       margin-right: var(--canon-spacing-xl);
     }
 
+    .cu-md-mr-xs {
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-md-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-md-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-md-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-md-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-md-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-md-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
     .cu-md-mx-2xl {
       margin-left: var(--canon-spacing-2xl);
       margin-right: var(--canon-spacing-2xl);
     }
 
-    .cu-md-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
+    .cu-md-mx-lg {
+      margin-left: var(--canon-spacing-lg);
+      margin-right: var(--canon-spacing-lg);
     }
 
-    .cu-md-my-2xs {
-      margin-top: var(--canon-spacing-2xs);
-      margin-bottom: var(--canon-spacing-2xs);
+    .cu-md-mx-md {
+      margin-left: var(--canon-spacing-md);
+      margin-right: var(--canon-spacing-md);
     }
 
-    .cu-md-my-xs {
-      margin-top: var(--canon-spacing-xs);
-      margin-bottom: var(--canon-spacing-xs);
+    .cu-md-mx-none {
+      margin-left: 0;
+      margin-right: 0;
     }
 
-    .cu-md-my-sm {
-      margin-top: var(--canon-spacing-sm);
-      margin-bottom: var(--canon-spacing-sm);
+    .cu-md-mx-sm {
+      margin-left: var(--canon-spacing-sm);
+      margin-right: var(--canon-spacing-sm);
     }
 
-    .cu-md-my-md {
-      margin-top: var(--canon-spacing-md);
-      margin-bottom: var(--canon-spacing-md);
+    .cu-md-mx-xl {
+      margin-left: var(--canon-spacing-xl);
+      margin-right: var(--canon-spacing-xl);
     }
 
-    .cu-md-my-lg {
-      margin-top: var(--canon-spacing-lg);
-      margin-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-md-my-xl {
-      margin-top: var(--canon-spacing-xl);
-      margin-bottom: var(--canon-spacing-xl);
+    .cu-md-mx-xs {
+      margin-left: var(--canon-spacing-xs);
+      margin-right: var(--canon-spacing-xs);
     }
 
     .cu-md-my-2xl {
@@ -376,228 +308,248 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
-    .cu-md-ml-none {
-      margin-left: 0;
+    .cu-md-my-lg {
+      margin-top: var(--canon-spacing-lg);
+      margin-bottom: var(--canon-spacing-lg);
     }
 
-    .cu-md-ml-2xs {
-      margin-left: var(--canon-spacing-2xs);
+    .cu-md-my-md {
+      margin-top: var(--canon-spacing-md);
+      margin-bottom: var(--canon-spacing-md);
     }
 
-    .cu-md-ml-xs {
-      margin-left: var(--canon-spacing-xs);
+    .cu-md-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
     }
 
-    .cu-md-ml-sm {
-      margin-left: var(--canon-spacing-sm);
+    .cu-md-my-sm {
+      margin-top: var(--canon-spacing-sm);
+      margin-bottom: var(--canon-spacing-sm);
     }
 
-    .cu-md-ml-md {
-      margin-left: var(--canon-spacing-md);
+    .cu-md-my-xl {
+      margin-top: var(--canon-spacing-xl);
+      margin-bottom: var(--canon-spacing-xl);
     }
 
-    .cu-md-ml-lg {
-      margin-left: var(--canon-spacing-lg);
+    .cu-md-my-xs {
+      margin-top: var(--canon-spacing-xs);
+      margin-bottom: var(--canon-spacing-xs);
     }
 
-    .cu-md-ml-xl {
-      margin-left: var(--canon-spacing-xl);
+    .cu-md-p-2xl {
+      padding: var(--canon-spacing-2xl);
     }
 
-    .cu-md-ml-2xl {
-      margin-left: var(--canon-spacing-2xl);
+    .cu-md-p-lg {
+      padding: var(--canon-spacing-lg);
     }
 
-    .cu-md-mr-none {
-      margin-right: 0;
+    .cu-md-p-md {
+      padding: var(--canon-spacing-md);
     }
 
-    .cu-md-mr-2xs {
-      margin-right: var(--canon-spacing-2xs);
+    .cu-md-p-none {
+      padding: 0;
     }
 
-    .cu-md-mr-xs {
-      margin-right: var(--canon-spacing-xs);
+    .cu-md-p-sm {
+      padding: var(--canon-spacing-sm);
     }
 
-    .cu-md-mr-sm {
-      margin-right: var(--canon-spacing-sm);
+    .cu-md-p-xl {
+      padding: var(--canon-spacing-xl);
     }
 
-    .cu-md-mr-md {
-      margin-right: var(--canon-spacing-md);
-    }
-
-    .cu-md-mr-lg {
-      margin-right: var(--canon-spacing-lg);
-    }
-
-    .cu-md-mr-xl {
-      margin-right: var(--canon-spacing-xl);
-    }
-
-    .cu-md-mr-2xl {
-      margin-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-md-gap-none {
-      gap: 0;
-    }
-
-    .cu-md-gap-2xs {
-      gap: var(--canon-spacing-2xs);
-    }
-
-    .cu-md-gap-xs {
-      gap: var(--canon-spacing-xs);
-    }
-
-    .cu-md-gap-sm {
-      gap: var(--canon-spacing-sm);
-    }
-
-    .cu-md-gap-md {
-      gap: var(--canon-spacing-md);
-    }
-
-    .cu-md-gap-lg {
-      gap: var(--canon-spacing-lg);
-    }
-
-    .cu-md-gap-xl {
-      gap: var(--canon-spacing-xl);
-    }
-
-    .cu-md-gap-2xl {
-      gap: var(--canon-spacing-2xl);
-    }
-
-    .cu-md-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-md-pt-2xs {
-      padding-top: var(--canon-spacing-2xs);
-    }
-
-    .cu-md-pt-xs {
-      padding-top: var(--canon-spacing-xs);
-    }
-
-    .cu-md-pt-sm {
-      padding-top: var(--canon-spacing-sm);
-    }
-
-    .cu-md-pt-md {
-      padding-top: var(--canon-spacing-md);
-    }
-
-    .cu-md-pt-lg {
-      padding-top: var(--canon-spacing-lg);
-    }
-
-    .cu-md-pt-xl {
-      padding-top: var(--canon-spacing-xl);
-    }
-
-    .cu-md-pt-2xl {
-      padding-top: var(--canon-spacing-2xl);
-    }
-
-    .cu-md-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-md-pb-2xs {
-      padding-bottom: var(--canon-spacing-2xs);
-    }
-
-    .cu-md-pb-xs {
-      padding-bottom: var(--canon-spacing-xs);
-    }
-
-    .cu-md-pb-sm {
-      padding-bottom: var(--canon-spacing-sm);
-    }
-
-    .cu-md-pb-md {
-      padding-bottom: var(--canon-spacing-md);
-    }
-
-    .cu-md-pb-lg {
-      padding-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-md-pb-xl {
-      padding-bottom: var(--canon-spacing-xl);
+    .cu-md-p-xs {
+      padding: var(--canon-spacing-xs);
     }
 
     .cu-md-pb-2xl {
       padding-bottom: var(--canon-spacing-2xl);
     }
 
-    .cu-md-mt-none {
-      margin-top: 0;
+    .cu-md-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
     }
 
-    .cu-md-mt-2xs {
-      margin-top: var(--canon-spacing-2xs);
+    .cu-md-pb-md {
+      padding-bottom: var(--canon-spacing-md);
     }
 
-    .cu-md-mt-xs {
-      margin-top: var(--canon-spacing-xs);
+    .cu-md-pb-none {
+      padding-bottom: 0;
     }
 
-    .cu-md-mt-sm {
-      margin-top: var(--canon-spacing-sm);
+    .cu-md-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
     }
 
-    .cu-md-mt-md {
-      margin-top: var(--canon-spacing-md);
+    .cu-md-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
     }
 
-    .cu-md-mt-lg {
-      margin-top: var(--canon-spacing-lg);
+    .cu-md-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
     }
 
-    .cu-md-mt-xl {
-      margin-top: var(--canon-spacing-xl);
+    .cu-md-pl-2xl {
+      padding-left: var(--canon-spacing-2xl);
     }
 
-    .cu-md-mt-2xl {
-      margin-top: var(--canon-spacing-2xl);
+    .cu-md-pl-lg {
+      padding-left: var(--canon-spacing-lg);
     }
 
-    .cu-md-mb-none {
-      margin-bottom: 0;
+    .cu-md-pl-md {
+      padding-left: var(--canon-spacing-md);
     }
 
-    .cu-md-mb-2xs {
-      margin-bottom: var(--canon-spacing-2xs);
+    .cu-md-pl-none {
+      padding-left: 0;
     }
 
-    .cu-md-mb-xs {
-      margin-bottom: var(--canon-spacing-xs);
+    .cu-md-pl-sm {
+      padding-left: var(--canon-spacing-sm);
     }
 
-    .cu-md-mb-sm {
-      margin-bottom: var(--canon-spacing-sm);
+    .cu-md-pl-xl {
+      padding-left: var(--canon-spacing-xl);
     }
 
-    .cu-md-mb-md {
-      margin-bottom: var(--canon-spacing-md);
+    .cu-md-pl-xs {
+      padding-left: var(--canon-spacing-xs);
     }
 
-    .cu-md-mb-lg {
-      margin-bottom: var(--canon-spacing-lg);
+    .cu-md-pr-2xl {
+      padding-right: var(--canon-spacing-2xl);
     }
 
-    .cu-md-mb-xl {
-      margin-bottom: var(--canon-spacing-xl);
+    .cu-md-pr-lg {
+      padding-right: var(--canon-spacing-lg);
     }
 
-    .cu-md-mb-2xl {
-      margin-bottom: var(--canon-spacing-2xl);
+    .cu-md-pr-md {
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-md-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-md-pr-sm {
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-md-pr-xl {
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-md-pr-xs {
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-md-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-md-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-md-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-md-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-md-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-md-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-md-px-2xl {
+      padding-left: var(--canon-spacing-2xl);
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-px-lg {
+      padding-left: var(--canon-spacing-lg);
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-md-px-md {
+      padding-left: var(--canon-spacing-md);
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-md-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-md-px-sm {
+      padding-left: var(--canon-spacing-sm);
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-md-px-xl {
+      padding-left: var(--canon-spacing-xl);
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-md-px-xs {
+      padding-left: var(--canon-spacing-xs);
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-md-py-2xl {
+      padding-top: var(--canon-spacing-2xl);
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-py-lg {
+      padding-top: var(--canon-spacing-lg);
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-md-py-md {
+      padding-top: var(--canon-spacing-md);
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-md-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-md-py-sm {
+      padding-top: var(--canon-spacing-sm);
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-md-py-xl {
+      padding-top: var(--canon-spacing-xl);
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-md-py-xs {
+      padding-top: var(--canon-spacing-xs);
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-md-wrap-reverse {
+      flex-wrap: wrap-reverse;
     }
   }
 }
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index f2623bfae8..9a13babe35 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -20,6 +20,62 @@
       display: block;
     }
 
+    .cu-sm-flex {
+      display: flex;
+    }
+
+    .cu-sm-flex-col {
+      flex-direction: column;
+    }
+
+    .cu-sm-flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .cu-sm-flex-row {
+      flex-direction: row;
+    }
+
+    .cu-sm-flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .cu-sm-flex-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .cu-sm-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-sm-gap-none {
+      gap: 0;
+    }
+
+    .cu-sm-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-grid {
+      display: grid;
+    }
+
     .cu-sm-hidden {
       display: none;
     }
@@ -32,36 +88,20 @@
       display: inline-block;
     }
 
-    .cu-sm-flex {
-      display: flex;
+    .cu-sm-items-center {
+      align-items: center;
     }
 
-    .cu-sm-grid {
-      display: grid;
+    .cu-sm-items-end {
+      align-items: flex-end;
     }
 
-    .cu-sm-flex-row {
-      flex-direction: row;
+    .cu-sm-items-start {
+      align-items: flex-start;
     }
 
-    .cu-sm-flex-col {
-      flex-direction: column;
-    }
-
-    .cu-sm-justify-stretch {
-      justify-content: stretch;
-    }
-
-    .cu-sm-justify-start {
-      justify-content: flex-start;
-    }
-
-    .cu-sm-justify-center {
-      justify-content: center;
-    }
-
-    .cu-sm-justify-end {
-      justify-content: flex-end;
+    .cu-sm-items-stretch {
+      align-items: stretch;
     }
 
     .cu-sm-justify-around {
@@ -72,303 +112,195 @@
       justify-content: space-between;
     }
 
-    .cu-sm-items-stretch {
-      align-items: stretch;
+    .cu-sm-justify-center {
+      justify-content: center;
     }
 
-    .cu-sm-items-center {
-      align-items: center;
+    .cu-sm-justify-end {
+      justify-content: flex-end;
     }
 
-    .cu-sm-items-start {
-      align-items: flex-start;
+    .cu-sm-justify-start {
+      justify-content: flex-start;
     }
 
-    .cu-sm-items-end {
-      align-items: flex-end;
-    }
-
-    .cu-sm-p-none {
-      padding: 0;
-    }
-
-    .cu-sm-p-2xs {
-      padding: var(--canon-spacing-2xs);
-    }
-
-    .cu-sm-p-xs {
-      padding: var(--canon-spacing-xs);
-    }
-
-    .cu-sm-p-sm {
-      padding: var(--canon-spacing-sm);
-    }
-
-    .cu-sm-p-md {
-      padding: var(--canon-spacing-md);
-    }
-
-    .cu-sm-p-lg {
-      padding: var(--canon-spacing-lg);
-    }
-
-    .cu-sm-p-xl {
-      padding: var(--canon-spacing-xl);
-    }
-
-    .cu-sm-p-2xl {
-      padding: var(--canon-spacing-2xl);
-    }
-
-    .cu-sm-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-sm-px-2xs {
-      padding-left: var(--canon-spacing-2xs);
-      padding-right: var(--canon-spacing-2xs);
-    }
-
-    .cu-sm-px-xs {
-      padding-left: var(--canon-spacing-xs);
-      padding-right: var(--canon-spacing-xs);
-    }
-
-    .cu-sm-px-sm {
-      padding-left: var(--canon-spacing-sm);
-      padding-right: var(--canon-spacing-sm);
-    }
-
-    .cu-sm-px-md {
-      padding-left: var(--canon-spacing-md);
-      padding-right: var(--canon-spacing-md);
-    }
-
-    .cu-sm-px-lg {
-      padding-left: var(--canon-spacing-lg);
-      padding-right: var(--canon-spacing-lg);
-    }
-
-    .cu-sm-px-xl {
-      padding-left: var(--canon-spacing-xl);
-      padding-right: var(--canon-spacing-xl);
-    }
-
-    .cu-sm-px-2xl {
-      padding-left: var(--canon-spacing-2xl);
-      padding-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-sm-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-sm-py-2xs {
-      padding-top: var(--canon-spacing-2xs);
-      padding-bottom: var(--canon-spacing-2xs);
-    }
-
-    .cu-sm-py-xs {
-      padding-top: var(--canon-spacing-xs);
-      padding-bottom: var(--canon-spacing-xs);
-    }
-
-    .cu-sm-py-sm {
-      padding-top: var(--canon-spacing-sm);
-      padding-bottom: var(--canon-spacing-sm);
-    }
-
-    .cu-sm-py-md {
-      padding-top: var(--canon-spacing-md);
-      padding-bottom: var(--canon-spacing-md);
-    }
-
-    .cu-sm-py-lg {
-      padding-top: var(--canon-spacing-lg);
-      padding-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-sm-py-xl {
-      padding-top: var(--canon-spacing-xl);
-      padding-bottom: var(--canon-spacing-xl);
-    }
-
-    .cu-sm-py-2xl {
-      padding-top: var(--canon-spacing-2xl);
-      padding-bottom: var(--canon-spacing-2xl);
-    }
-
-    .cu-sm-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-sm-pl-2xs {
-      padding-left: var(--canon-spacing-2xs);
-    }
-
-    .cu-sm-pl-xs {
-      padding-left: var(--canon-spacing-xs);
-    }
-
-    .cu-sm-pl-sm {
-      padding-left: var(--canon-spacing-sm);
-    }
-
-    .cu-sm-pl-md {
-      padding-left: var(--canon-spacing-md);
-    }
-
-    .cu-sm-pl-lg {
-      padding-left: var(--canon-spacing-lg);
-    }
-
-    .cu-sm-pl-xl {
-      padding-left: var(--canon-spacing-xl);
-    }
-
-    .cu-sm-pl-2xl {
-      padding-left: var(--canon-spacing-2xl);
-    }
-
-    .cu-sm-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-sm-pr-2xs {
-      padding-right: var(--canon-spacing-2xs);
-    }
-
-    .cu-sm-pr-xs {
-      padding-right: var(--canon-spacing-xs);
-    }
-
-    .cu-sm-pr-sm {
-      padding-right: var(--canon-spacing-sm);
-    }
-
-    .cu-sm-pr-md {
-      padding-right: var(--canon-spacing-md);
-    }
-
-    .cu-sm-pr-lg {
-      padding-right: var(--canon-spacing-lg);
-    }
-
-    .cu-sm-pr-xl {
-      padding-right: var(--canon-spacing-xl);
-    }
-
-    .cu-sm-pr-2xl {
-      padding-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-sm-m-none {
-      margin: 0;
-    }
-
-    .cu-sm-m-2xs {
-      margin: var(--canon-spacing-2xs);
-    }
-
-    .cu-sm-m-xs {
-      margin: var(--canon-spacing-xs);
-    }
-
-    .cu-sm-m-sm {
-      margin: var(--canon-spacing-sm);
-    }
-
-    .cu-sm-m-md {
-      margin: var(--canon-spacing-md);
-    }
-
-    .cu-sm-m-lg {
-      margin: var(--canon-spacing-lg);
-    }
-
-    .cu-sm-m-xl {
-      margin: var(--canon-spacing-xl);
+    .cu-sm-justify-stretch {
+      justify-content: stretch;
     }
 
     .cu-sm-m-2xl {
       margin: var(--canon-spacing-2xl);
     }
 
-    .cu-sm-mx-none {
-      margin-left: 0;
-      margin-right: 0;
+    .cu-sm-m-lg {
+      margin: var(--canon-spacing-lg);
     }
 
-    .cu-sm-mx-2xs {
-      margin-left: var(--canon-spacing-2xs);
-      margin-right: var(--canon-spacing-2xs);
+    .cu-sm-m-md {
+      margin: var(--canon-spacing-md);
     }
 
-    .cu-sm-mx-xs {
-      margin-left: var(--canon-spacing-xs);
-      margin-right: var(--canon-spacing-xs);
+    .cu-sm-m-none {
+      margin: 0;
     }
 
-    .cu-sm-mx-sm {
-      margin-left: var(--canon-spacing-sm);
-      margin-right: var(--canon-spacing-sm);
+    .cu-sm-m-sm {
+      margin: var(--canon-spacing-sm);
     }
 
-    .cu-sm-mx-md {
-      margin-left: var(--canon-spacing-md);
-      margin-right: var(--canon-spacing-md);
+    .cu-sm-m-xl {
+      margin: var(--canon-spacing-xl);
     }
 
-    .cu-sm-mx-lg {
+    .cu-sm-m-xs {
+      margin: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-sm-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-sm-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-ml-2xl {
+      margin-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-ml-lg {
       margin-left: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-ml-md {
+      margin-left: var(--canon-spacing-md);
+    }
+
+    .cu-sm-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-sm-ml-sm {
+      margin-left: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-ml-xl {
+      margin-left: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-ml-xs {
+      margin-left: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-mr-2xl {
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-mr-lg {
       margin-right: var(--canon-spacing-lg);
     }
 
-    .cu-sm-mx-xl {
-      margin-left: var(--canon-spacing-xl);
+    .cu-sm-mr-md {
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-sm-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-sm-mr-sm {
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-mr-xl {
       margin-right: var(--canon-spacing-xl);
     }
 
+    .cu-sm-mr-xs {
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-sm-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-sm-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
     .cu-sm-mx-2xl {
       margin-left: var(--canon-spacing-2xl);
       margin-right: var(--canon-spacing-2xl);
     }
 
-    .cu-sm-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
+    .cu-sm-mx-lg {
+      margin-left: var(--canon-spacing-lg);
+      margin-right: var(--canon-spacing-lg);
     }
 
-    .cu-sm-my-2xs {
-      margin-top: var(--canon-spacing-2xs);
-      margin-bottom: var(--canon-spacing-2xs);
+    .cu-sm-mx-md {
+      margin-left: var(--canon-spacing-md);
+      margin-right: var(--canon-spacing-md);
     }
 
-    .cu-sm-my-xs {
-      margin-top: var(--canon-spacing-xs);
-      margin-bottom: var(--canon-spacing-xs);
+    .cu-sm-mx-none {
+      margin-left: 0;
+      margin-right: 0;
     }
 
-    .cu-sm-my-sm {
-      margin-top: var(--canon-spacing-sm);
-      margin-bottom: var(--canon-spacing-sm);
+    .cu-sm-mx-sm {
+      margin-left: var(--canon-spacing-sm);
+      margin-right: var(--canon-spacing-sm);
     }
 
-    .cu-sm-my-md {
-      margin-top: var(--canon-spacing-md);
-      margin-bottom: var(--canon-spacing-md);
+    .cu-sm-mx-xl {
+      margin-left: var(--canon-spacing-xl);
+      margin-right: var(--canon-spacing-xl);
     }
 
-    .cu-sm-my-lg {
-      margin-top: var(--canon-spacing-lg);
-      margin-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-sm-my-xl {
-      margin-top: var(--canon-spacing-xl);
-      margin-bottom: var(--canon-spacing-xl);
+    .cu-sm-mx-xs {
+      margin-left: var(--canon-spacing-xs);
+      margin-right: var(--canon-spacing-xs);
     }
 
     .cu-sm-my-2xl {
@@ -376,228 +308,248 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
-    .cu-sm-ml-none {
-      margin-left: 0;
+    .cu-sm-my-lg {
+      margin-top: var(--canon-spacing-lg);
+      margin-bottom: var(--canon-spacing-lg);
     }
 
-    .cu-sm-ml-2xs {
-      margin-left: var(--canon-spacing-2xs);
+    .cu-sm-my-md {
+      margin-top: var(--canon-spacing-md);
+      margin-bottom: var(--canon-spacing-md);
     }
 
-    .cu-sm-ml-xs {
-      margin-left: var(--canon-spacing-xs);
+    .cu-sm-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
     }
 
-    .cu-sm-ml-sm {
-      margin-left: var(--canon-spacing-sm);
+    .cu-sm-my-sm {
+      margin-top: var(--canon-spacing-sm);
+      margin-bottom: var(--canon-spacing-sm);
     }
 
-    .cu-sm-ml-md {
-      margin-left: var(--canon-spacing-md);
+    .cu-sm-my-xl {
+      margin-top: var(--canon-spacing-xl);
+      margin-bottom: var(--canon-spacing-xl);
     }
 
-    .cu-sm-ml-lg {
-      margin-left: var(--canon-spacing-lg);
+    .cu-sm-my-xs {
+      margin-top: var(--canon-spacing-xs);
+      margin-bottom: var(--canon-spacing-xs);
     }
 
-    .cu-sm-ml-xl {
-      margin-left: var(--canon-spacing-xl);
+    .cu-sm-p-2xl {
+      padding: var(--canon-spacing-2xl);
     }
 
-    .cu-sm-ml-2xl {
-      margin-left: var(--canon-spacing-2xl);
+    .cu-sm-p-lg {
+      padding: var(--canon-spacing-lg);
     }
 
-    .cu-sm-mr-none {
-      margin-right: 0;
+    .cu-sm-p-md {
+      padding: var(--canon-spacing-md);
     }
 
-    .cu-sm-mr-2xs {
-      margin-right: var(--canon-spacing-2xs);
+    .cu-sm-p-none {
+      padding: 0;
     }
 
-    .cu-sm-mr-xs {
-      margin-right: var(--canon-spacing-xs);
+    .cu-sm-p-sm {
+      padding: var(--canon-spacing-sm);
     }
 
-    .cu-sm-mr-sm {
-      margin-right: var(--canon-spacing-sm);
+    .cu-sm-p-xl {
+      padding: var(--canon-spacing-xl);
     }
 
-    .cu-sm-mr-md {
-      margin-right: var(--canon-spacing-md);
-    }
-
-    .cu-sm-mr-lg {
-      margin-right: var(--canon-spacing-lg);
-    }
-
-    .cu-sm-mr-xl {
-      margin-right: var(--canon-spacing-xl);
-    }
-
-    .cu-sm-mr-2xl {
-      margin-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-sm-gap-none {
-      gap: 0;
-    }
-
-    .cu-sm-gap-2xs {
-      gap: var(--canon-spacing-2xs);
-    }
-
-    .cu-sm-gap-xs {
-      gap: var(--canon-spacing-xs);
-    }
-
-    .cu-sm-gap-sm {
-      gap: var(--canon-spacing-sm);
-    }
-
-    .cu-sm-gap-md {
-      gap: var(--canon-spacing-md);
-    }
-
-    .cu-sm-gap-lg {
-      gap: var(--canon-spacing-lg);
-    }
-
-    .cu-sm-gap-xl {
-      gap: var(--canon-spacing-xl);
-    }
-
-    .cu-sm-gap-2xl {
-      gap: var(--canon-spacing-2xl);
-    }
-
-    .cu-sm-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-sm-pt-2xs {
-      padding-top: var(--canon-spacing-2xs);
-    }
-
-    .cu-sm-pt-xs {
-      padding-top: var(--canon-spacing-xs);
-    }
-
-    .cu-sm-pt-sm {
-      padding-top: var(--canon-spacing-sm);
-    }
-
-    .cu-sm-pt-md {
-      padding-top: var(--canon-spacing-md);
-    }
-
-    .cu-sm-pt-lg {
-      padding-top: var(--canon-spacing-lg);
-    }
-
-    .cu-sm-pt-xl {
-      padding-top: var(--canon-spacing-xl);
-    }
-
-    .cu-sm-pt-2xl {
-      padding-top: var(--canon-spacing-2xl);
-    }
-
-    .cu-sm-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-sm-pb-2xs {
-      padding-bottom: var(--canon-spacing-2xs);
-    }
-
-    .cu-sm-pb-xs {
-      padding-bottom: var(--canon-spacing-xs);
-    }
-
-    .cu-sm-pb-sm {
-      padding-bottom: var(--canon-spacing-sm);
-    }
-
-    .cu-sm-pb-md {
-      padding-bottom: var(--canon-spacing-md);
-    }
-
-    .cu-sm-pb-lg {
-      padding-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-sm-pb-xl {
-      padding-bottom: var(--canon-spacing-xl);
+    .cu-sm-p-xs {
+      padding: var(--canon-spacing-xs);
     }
 
     .cu-sm-pb-2xl {
       padding-bottom: var(--canon-spacing-2xl);
     }
 
-    .cu-sm-mt-none {
-      margin-top: 0;
+    .cu-sm-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
     }
 
-    .cu-sm-mt-2xs {
-      margin-top: var(--canon-spacing-2xs);
+    .cu-sm-pb-md {
+      padding-bottom: var(--canon-spacing-md);
     }
 
-    .cu-sm-mt-xs {
-      margin-top: var(--canon-spacing-xs);
+    .cu-sm-pb-none {
+      padding-bottom: 0;
     }
 
-    .cu-sm-mt-sm {
-      margin-top: var(--canon-spacing-sm);
+    .cu-sm-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
     }
 
-    .cu-sm-mt-md {
-      margin-top: var(--canon-spacing-md);
+    .cu-sm-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
     }
 
-    .cu-sm-mt-lg {
-      margin-top: var(--canon-spacing-lg);
+    .cu-sm-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
     }
 
-    .cu-sm-mt-xl {
-      margin-top: var(--canon-spacing-xl);
+    .cu-sm-pl-2xl {
+      padding-left: var(--canon-spacing-2xl);
     }
 
-    .cu-sm-mt-2xl {
-      margin-top: var(--canon-spacing-2xl);
+    .cu-sm-pl-lg {
+      padding-left: var(--canon-spacing-lg);
     }
 
-    .cu-sm-mb-none {
-      margin-bottom: 0;
+    .cu-sm-pl-md {
+      padding-left: var(--canon-spacing-md);
     }
 
-    .cu-sm-mb-2xs {
-      margin-bottom: var(--canon-spacing-2xs);
+    .cu-sm-pl-none {
+      padding-left: 0;
     }
 
-    .cu-sm-mb-xs {
-      margin-bottom: var(--canon-spacing-xs);
+    .cu-sm-pl-sm {
+      padding-left: var(--canon-spacing-sm);
     }
 
-    .cu-sm-mb-sm {
-      margin-bottom: var(--canon-spacing-sm);
+    .cu-sm-pl-xl {
+      padding-left: var(--canon-spacing-xl);
     }
 
-    .cu-sm-mb-md {
-      margin-bottom: var(--canon-spacing-md);
+    .cu-sm-pl-xs {
+      padding-left: var(--canon-spacing-xs);
     }
 
-    .cu-sm-mb-lg {
-      margin-bottom: var(--canon-spacing-lg);
+    .cu-sm-pr-2xl {
+      padding-right: var(--canon-spacing-2xl);
     }
 
-    .cu-sm-mb-xl {
-      margin-bottom: var(--canon-spacing-xl);
+    .cu-sm-pr-lg {
+      padding-right: var(--canon-spacing-lg);
     }
 
-    .cu-sm-mb-2xl {
-      margin-bottom: var(--canon-spacing-2xl);
+    .cu-sm-pr-md {
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-sm-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-sm-pr-sm {
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-pr-xl {
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-pr-xs {
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-sm-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-sm-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-px-2xl {
+      padding-left: var(--canon-spacing-2xl);
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-px-lg {
+      padding-left: var(--canon-spacing-lg);
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-px-md {
+      padding-left: var(--canon-spacing-md);
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-sm-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-sm-px-sm {
+      padding-left: var(--canon-spacing-sm);
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-px-xl {
+      padding-left: var(--canon-spacing-xl);
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-px-xs {
+      padding-left: var(--canon-spacing-xs);
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-py-2xl {
+      padding-top: var(--canon-spacing-2xl);
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-py-lg {
+      padding-top: var(--canon-spacing-lg);
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-py-md {
+      padding-top: var(--canon-spacing-md);
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-sm-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-sm-py-sm {
+      padding-top: var(--canon-spacing-sm);
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-py-xl {
+      padding-top: var(--canon-spacing-xl);
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-py-xs {
+      padding-top: var(--canon-spacing-xs);
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-wrap-reverse {
+      flex-wrap: wrap-reverse;
     }
   }
 }
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index 709820eb73..74e69959a3 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -20,6 +20,62 @@
       display: block;
     }
 
+    .cu-xl-flex {
+      display: flex;
+    }
+
+    .cu-xl-flex-col {
+      flex-direction: column;
+    }
+
+    .cu-xl-flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .cu-xl-flex-row {
+      flex-direction: row;
+    }
+
+    .cu-xl-flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .cu-xl-flex-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .cu-xl-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-xl-gap-none {
+      gap: 0;
+    }
+
+    .cu-xl-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-grid {
+      display: grid;
+    }
+
     .cu-xl-hidden {
       display: none;
     }
@@ -32,36 +88,20 @@
       display: inline-block;
     }
 
-    .cu-xl-flex {
-      display: flex;
+    .cu-xl-items-center {
+      align-items: center;
     }
 
-    .cu-xl-grid {
-      display: grid;
+    .cu-xl-items-end {
+      align-items: flex-end;
     }
 
-    .cu-xl-flex-row {
-      flex-direction: row;
+    .cu-xl-items-start {
+      align-items: flex-start;
     }
 
-    .cu-xl-flex-col {
-      flex-direction: column;
-    }
-
-    .cu-xl-justify-stretch {
-      justify-content: stretch;
-    }
-
-    .cu-xl-justify-start {
-      justify-content: flex-start;
-    }
-
-    .cu-xl-justify-center {
-      justify-content: center;
-    }
-
-    .cu-xl-justify-end {
-      justify-content: flex-end;
+    .cu-xl-items-stretch {
+      align-items: stretch;
     }
 
     .cu-xl-justify-around {
@@ -72,303 +112,195 @@
       justify-content: space-between;
     }
 
-    .cu-xl-items-stretch {
-      align-items: stretch;
+    .cu-xl-justify-center {
+      justify-content: center;
     }
 
-    .cu-xl-items-center {
-      align-items: center;
+    .cu-xl-justify-end {
+      justify-content: flex-end;
     }
 
-    .cu-xl-items-start {
-      align-items: flex-start;
+    .cu-xl-justify-start {
+      justify-content: flex-start;
     }
 
-    .cu-xl-items-end {
-      align-items: flex-end;
-    }
-
-    .cu-xl-p-none {
-      padding: 0;
-    }
-
-    .cu-xl-p-2xs {
-      padding: var(--canon-spacing-2xs);
-    }
-
-    .cu-xl-p-xs {
-      padding: var(--canon-spacing-xs);
-    }
-
-    .cu-xl-p-sm {
-      padding: var(--canon-spacing-sm);
-    }
-
-    .cu-xl-p-md {
-      padding: var(--canon-spacing-md);
-    }
-
-    .cu-xl-p-lg {
-      padding: var(--canon-spacing-lg);
-    }
-
-    .cu-xl-p-xl {
-      padding: var(--canon-spacing-xl);
-    }
-
-    .cu-xl-p-2xl {
-      padding: var(--canon-spacing-2xl);
-    }
-
-    .cu-xl-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-xl-px-2xs {
-      padding-left: var(--canon-spacing-2xs);
-      padding-right: var(--canon-spacing-2xs);
-    }
-
-    .cu-xl-px-xs {
-      padding-left: var(--canon-spacing-xs);
-      padding-right: var(--canon-spacing-xs);
-    }
-
-    .cu-xl-px-sm {
-      padding-left: var(--canon-spacing-sm);
-      padding-right: var(--canon-spacing-sm);
-    }
-
-    .cu-xl-px-md {
-      padding-left: var(--canon-spacing-md);
-      padding-right: var(--canon-spacing-md);
-    }
-
-    .cu-xl-px-lg {
-      padding-left: var(--canon-spacing-lg);
-      padding-right: var(--canon-spacing-lg);
-    }
-
-    .cu-xl-px-xl {
-      padding-left: var(--canon-spacing-xl);
-      padding-right: var(--canon-spacing-xl);
-    }
-
-    .cu-xl-px-2xl {
-      padding-left: var(--canon-spacing-2xl);
-      padding-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-xl-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-xl-py-2xs {
-      padding-top: var(--canon-spacing-2xs);
-      padding-bottom: var(--canon-spacing-2xs);
-    }
-
-    .cu-xl-py-xs {
-      padding-top: var(--canon-spacing-xs);
-      padding-bottom: var(--canon-spacing-xs);
-    }
-
-    .cu-xl-py-sm {
-      padding-top: var(--canon-spacing-sm);
-      padding-bottom: var(--canon-spacing-sm);
-    }
-
-    .cu-xl-py-md {
-      padding-top: var(--canon-spacing-md);
-      padding-bottom: var(--canon-spacing-md);
-    }
-
-    .cu-xl-py-lg {
-      padding-top: var(--canon-spacing-lg);
-      padding-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-xl-py-xl {
-      padding-top: var(--canon-spacing-xl);
-      padding-bottom: var(--canon-spacing-xl);
-    }
-
-    .cu-xl-py-2xl {
-      padding-top: var(--canon-spacing-2xl);
-      padding-bottom: var(--canon-spacing-2xl);
-    }
-
-    .cu-xl-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-xl-pl-2xs {
-      padding-left: var(--canon-spacing-2xs);
-    }
-
-    .cu-xl-pl-xs {
-      padding-left: var(--canon-spacing-xs);
-    }
-
-    .cu-xl-pl-sm {
-      padding-left: var(--canon-spacing-sm);
-    }
-
-    .cu-xl-pl-md {
-      padding-left: var(--canon-spacing-md);
-    }
-
-    .cu-xl-pl-lg {
-      padding-left: var(--canon-spacing-lg);
-    }
-
-    .cu-xl-pl-xl {
-      padding-left: var(--canon-spacing-xl);
-    }
-
-    .cu-xl-pl-2xl {
-      padding-left: var(--canon-spacing-2xl);
-    }
-
-    .cu-xl-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-xl-pr-2xs {
-      padding-right: var(--canon-spacing-2xs);
-    }
-
-    .cu-xl-pr-xs {
-      padding-right: var(--canon-spacing-xs);
-    }
-
-    .cu-xl-pr-sm {
-      padding-right: var(--canon-spacing-sm);
-    }
-
-    .cu-xl-pr-md {
-      padding-right: var(--canon-spacing-md);
-    }
-
-    .cu-xl-pr-lg {
-      padding-right: var(--canon-spacing-lg);
-    }
-
-    .cu-xl-pr-xl {
-      padding-right: var(--canon-spacing-xl);
-    }
-
-    .cu-xl-pr-2xl {
-      padding-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-xl-m-none {
-      margin: 0;
-    }
-
-    .cu-xl-m-2xs {
-      margin: var(--canon-spacing-2xs);
-    }
-
-    .cu-xl-m-xs {
-      margin: var(--canon-spacing-xs);
-    }
-
-    .cu-xl-m-sm {
-      margin: var(--canon-spacing-sm);
-    }
-
-    .cu-xl-m-md {
-      margin: var(--canon-spacing-md);
-    }
-
-    .cu-xl-m-lg {
-      margin: var(--canon-spacing-lg);
-    }
-
-    .cu-xl-m-xl {
-      margin: var(--canon-spacing-xl);
+    .cu-xl-justify-stretch {
+      justify-content: stretch;
     }
 
     .cu-xl-m-2xl {
       margin: var(--canon-spacing-2xl);
     }
 
-    .cu-xl-mx-none {
-      margin-left: 0;
-      margin-right: 0;
+    .cu-xl-m-lg {
+      margin: var(--canon-spacing-lg);
     }
 
-    .cu-xl-mx-2xs {
-      margin-left: var(--canon-spacing-2xs);
-      margin-right: var(--canon-spacing-2xs);
+    .cu-xl-m-md {
+      margin: var(--canon-spacing-md);
     }
 
-    .cu-xl-mx-xs {
-      margin-left: var(--canon-spacing-xs);
-      margin-right: var(--canon-spacing-xs);
+    .cu-xl-m-none {
+      margin: 0;
     }
 
-    .cu-xl-mx-sm {
-      margin-left: var(--canon-spacing-sm);
-      margin-right: var(--canon-spacing-sm);
+    .cu-xl-m-sm {
+      margin: var(--canon-spacing-sm);
     }
 
-    .cu-xl-mx-md {
-      margin-left: var(--canon-spacing-md);
-      margin-right: var(--canon-spacing-md);
+    .cu-xl-m-xl {
+      margin: var(--canon-spacing-xl);
     }
 
-    .cu-xl-mx-lg {
+    .cu-xl-m-xs {
+      margin: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-xl-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-xl-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-ml-2xl {
+      margin-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-ml-lg {
       margin-left: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-ml-md {
+      margin-left: var(--canon-spacing-md);
+    }
+
+    .cu-xl-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-xl-ml-sm {
+      margin-left: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-ml-xl {
+      margin-left: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-ml-xs {
+      margin-left: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-mr-2xl {
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-mr-lg {
       margin-right: var(--canon-spacing-lg);
     }
 
-    .cu-xl-mx-xl {
-      margin-left: var(--canon-spacing-xl);
+    .cu-xl-mr-md {
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-xl-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-xl-mr-sm {
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-mr-xl {
       margin-right: var(--canon-spacing-xl);
     }
 
+    .cu-xl-mr-xs {
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-xl-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-xl-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
     .cu-xl-mx-2xl {
       margin-left: var(--canon-spacing-2xl);
       margin-right: var(--canon-spacing-2xl);
     }
 
-    .cu-xl-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
+    .cu-xl-mx-lg {
+      margin-left: var(--canon-spacing-lg);
+      margin-right: var(--canon-spacing-lg);
     }
 
-    .cu-xl-my-2xs {
-      margin-top: var(--canon-spacing-2xs);
-      margin-bottom: var(--canon-spacing-2xs);
+    .cu-xl-mx-md {
+      margin-left: var(--canon-spacing-md);
+      margin-right: var(--canon-spacing-md);
     }
 
-    .cu-xl-my-xs {
-      margin-top: var(--canon-spacing-xs);
-      margin-bottom: var(--canon-spacing-xs);
+    .cu-xl-mx-none {
+      margin-left: 0;
+      margin-right: 0;
     }
 
-    .cu-xl-my-sm {
-      margin-top: var(--canon-spacing-sm);
-      margin-bottom: var(--canon-spacing-sm);
+    .cu-xl-mx-sm {
+      margin-left: var(--canon-spacing-sm);
+      margin-right: var(--canon-spacing-sm);
     }
 
-    .cu-xl-my-md {
-      margin-top: var(--canon-spacing-md);
-      margin-bottom: var(--canon-spacing-md);
+    .cu-xl-mx-xl {
+      margin-left: var(--canon-spacing-xl);
+      margin-right: var(--canon-spacing-xl);
     }
 
-    .cu-xl-my-lg {
-      margin-top: var(--canon-spacing-lg);
-      margin-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-xl-my-xl {
-      margin-top: var(--canon-spacing-xl);
-      margin-bottom: var(--canon-spacing-xl);
+    .cu-xl-mx-xs {
+      margin-left: var(--canon-spacing-xs);
+      margin-right: var(--canon-spacing-xs);
     }
 
     .cu-xl-my-2xl {
@@ -376,228 +308,248 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
-    .cu-xl-ml-none {
-      margin-left: 0;
+    .cu-xl-my-lg {
+      margin-top: var(--canon-spacing-lg);
+      margin-bottom: var(--canon-spacing-lg);
     }
 
-    .cu-xl-ml-2xs {
-      margin-left: var(--canon-spacing-2xs);
+    .cu-xl-my-md {
+      margin-top: var(--canon-spacing-md);
+      margin-bottom: var(--canon-spacing-md);
     }
 
-    .cu-xl-ml-xs {
-      margin-left: var(--canon-spacing-xs);
+    .cu-xl-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
     }
 
-    .cu-xl-ml-sm {
-      margin-left: var(--canon-spacing-sm);
+    .cu-xl-my-sm {
+      margin-top: var(--canon-spacing-sm);
+      margin-bottom: var(--canon-spacing-sm);
     }
 
-    .cu-xl-ml-md {
-      margin-left: var(--canon-spacing-md);
+    .cu-xl-my-xl {
+      margin-top: var(--canon-spacing-xl);
+      margin-bottom: var(--canon-spacing-xl);
     }
 
-    .cu-xl-ml-lg {
-      margin-left: var(--canon-spacing-lg);
+    .cu-xl-my-xs {
+      margin-top: var(--canon-spacing-xs);
+      margin-bottom: var(--canon-spacing-xs);
     }
 
-    .cu-xl-ml-xl {
-      margin-left: var(--canon-spacing-xl);
+    .cu-xl-p-2xl {
+      padding: var(--canon-spacing-2xl);
     }
 
-    .cu-xl-ml-2xl {
-      margin-left: var(--canon-spacing-2xl);
+    .cu-xl-p-lg {
+      padding: var(--canon-spacing-lg);
     }
 
-    .cu-xl-mr-none {
-      margin-right: 0;
+    .cu-xl-p-md {
+      padding: var(--canon-spacing-md);
     }
 
-    .cu-xl-mr-2xs {
-      margin-right: var(--canon-spacing-2xs);
+    .cu-xl-p-none {
+      padding: 0;
     }
 
-    .cu-xl-mr-xs {
-      margin-right: var(--canon-spacing-xs);
+    .cu-xl-p-sm {
+      padding: var(--canon-spacing-sm);
     }
 
-    .cu-xl-mr-sm {
-      margin-right: var(--canon-spacing-sm);
+    .cu-xl-p-xl {
+      padding: var(--canon-spacing-xl);
     }
 
-    .cu-xl-mr-md {
-      margin-right: var(--canon-spacing-md);
-    }
-
-    .cu-xl-mr-lg {
-      margin-right: var(--canon-spacing-lg);
-    }
-
-    .cu-xl-mr-xl {
-      margin-right: var(--canon-spacing-xl);
-    }
-
-    .cu-xl-mr-2xl {
-      margin-right: var(--canon-spacing-2xl);
-    }
-
-    .cu-xl-gap-none {
-      gap: 0;
-    }
-
-    .cu-xl-gap-2xs {
-      gap: var(--canon-spacing-2xs);
-    }
-
-    .cu-xl-gap-xs {
-      gap: var(--canon-spacing-xs);
-    }
-
-    .cu-xl-gap-sm {
-      gap: var(--canon-spacing-sm);
-    }
-
-    .cu-xl-gap-md {
-      gap: var(--canon-spacing-md);
-    }
-
-    .cu-xl-gap-lg {
-      gap: var(--canon-spacing-lg);
-    }
-
-    .cu-xl-gap-xl {
-      gap: var(--canon-spacing-xl);
-    }
-
-    .cu-xl-gap-2xl {
-      gap: var(--canon-spacing-2xl);
-    }
-
-    .cu-xl-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-xl-pt-2xs {
-      padding-top: var(--canon-spacing-2xs);
-    }
-
-    .cu-xl-pt-xs {
-      padding-top: var(--canon-spacing-xs);
-    }
-
-    .cu-xl-pt-sm {
-      padding-top: var(--canon-spacing-sm);
-    }
-
-    .cu-xl-pt-md {
-      padding-top: var(--canon-spacing-md);
-    }
-
-    .cu-xl-pt-lg {
-      padding-top: var(--canon-spacing-lg);
-    }
-
-    .cu-xl-pt-xl {
-      padding-top: var(--canon-spacing-xl);
-    }
-
-    .cu-xl-pt-2xl {
-      padding-top: var(--canon-spacing-2xl);
-    }
-
-    .cu-xl-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-xl-pb-2xs {
-      padding-bottom: var(--canon-spacing-2xs);
-    }
-
-    .cu-xl-pb-xs {
-      padding-bottom: var(--canon-spacing-xs);
-    }
-
-    .cu-xl-pb-sm {
-      padding-bottom: var(--canon-spacing-sm);
-    }
-
-    .cu-xl-pb-md {
-      padding-bottom: var(--canon-spacing-md);
-    }
-
-    .cu-xl-pb-lg {
-      padding-bottom: var(--canon-spacing-lg);
-    }
-
-    .cu-xl-pb-xl {
-      padding-bottom: var(--canon-spacing-xl);
+    .cu-xl-p-xs {
+      padding: var(--canon-spacing-xs);
     }
 
     .cu-xl-pb-2xl {
       padding-bottom: var(--canon-spacing-2xl);
     }
 
-    .cu-xl-mt-none {
-      margin-top: 0;
+    .cu-xl-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
     }
 
-    .cu-xl-mt-2xs {
-      margin-top: var(--canon-spacing-2xs);
+    .cu-xl-pb-md {
+      padding-bottom: var(--canon-spacing-md);
     }
 
-    .cu-xl-mt-xs {
-      margin-top: var(--canon-spacing-xs);
+    .cu-xl-pb-none {
+      padding-bottom: 0;
     }
 
-    .cu-xl-mt-sm {
-      margin-top: var(--canon-spacing-sm);
+    .cu-xl-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
     }
 
-    .cu-xl-mt-md {
-      margin-top: var(--canon-spacing-md);
+    .cu-xl-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
     }
 
-    .cu-xl-mt-lg {
-      margin-top: var(--canon-spacing-lg);
+    .cu-xl-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
     }
 
-    .cu-xl-mt-xl {
-      margin-top: var(--canon-spacing-xl);
+    .cu-xl-pl-2xl {
+      padding-left: var(--canon-spacing-2xl);
     }
 
-    .cu-xl-mt-2xl {
-      margin-top: var(--canon-spacing-2xl);
+    .cu-xl-pl-lg {
+      padding-left: var(--canon-spacing-lg);
     }
 
-    .cu-xl-mb-none {
-      margin-bottom: 0;
+    .cu-xl-pl-md {
+      padding-left: var(--canon-spacing-md);
     }
 
-    .cu-xl-mb-2xs {
-      margin-bottom: var(--canon-spacing-2xs);
+    .cu-xl-pl-none {
+      padding-left: 0;
     }
 
-    .cu-xl-mb-xs {
-      margin-bottom: var(--canon-spacing-xs);
+    .cu-xl-pl-sm {
+      padding-left: var(--canon-spacing-sm);
     }
 
-    .cu-xl-mb-sm {
-      margin-bottom: var(--canon-spacing-sm);
+    .cu-xl-pl-xl {
+      padding-left: var(--canon-spacing-xl);
     }
 
-    .cu-xl-mb-md {
-      margin-bottom: var(--canon-spacing-md);
+    .cu-xl-pl-xs {
+      padding-left: var(--canon-spacing-xs);
     }
 
-    .cu-xl-mb-lg {
-      margin-bottom: var(--canon-spacing-lg);
+    .cu-xl-pr-2xl {
+      padding-right: var(--canon-spacing-2xl);
     }
 
-    .cu-xl-mb-xl {
-      margin-bottom: var(--canon-spacing-xl);
+    .cu-xl-pr-lg {
+      padding-right: var(--canon-spacing-lg);
     }
 
-    .cu-xl-mb-2xl {
-      margin-bottom: var(--canon-spacing-2xl);
+    .cu-xl-pr-md {
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-xl-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-xl-pr-sm {
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-pr-xl {
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-pr-xs {
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-xl-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-xl-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-px-2xl {
+      padding-left: var(--canon-spacing-2xl);
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-px-lg {
+      padding-left: var(--canon-spacing-lg);
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-px-md {
+      padding-left: var(--canon-spacing-md);
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-xl-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-xl-px-sm {
+      padding-left: var(--canon-spacing-sm);
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-px-xl {
+      padding-left: var(--canon-spacing-xl);
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-px-xs {
+      padding-left: var(--canon-spacing-xs);
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-py-2xl {
+      padding-top: var(--canon-spacing-2xl);
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-py-lg {
+      padding-top: var(--canon-spacing-lg);
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-py-md {
+      padding-top: var(--canon-spacing-md);
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-xl-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-xl-py-sm {
+      padding-top: var(--canon-spacing-sm);
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-py-xl {
+      padding-top: var(--canon-spacing-xl);
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-py-xs {
+      padding-top: var(--canon-spacing-xs);
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-wrap-reverse {
+      flex-wrap: wrap-reverse;
     }
   }
 }
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index fd65d47de2..3cea2b279d 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -19,6 +19,62 @@
     display: block;
   }
 
+  .cu-flex {
+    display: flex;
+  }
+
+  .cu-flex-col {
+    flex-direction: column;
+  }
+
+  .cu-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .cu-flex-row {
+    flex-direction: row;
+  }
+
+  .cu-flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .cu-flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  .cu-gap-2xl {
+    gap: var(--canon-spacing-2xl);
+  }
+
+  .cu-gap-lg {
+    gap: var(--canon-spacing-lg);
+  }
+
+  .cu-gap-md {
+    gap: var(--canon-spacing-md);
+  }
+
+  .cu-gap-none {
+    gap: 0;
+  }
+
+  .cu-gap-sm {
+    gap: var(--canon-spacing-sm);
+  }
+
+  .cu-gap-xl {
+    gap: var(--canon-spacing-xl);
+  }
+
+  .cu-gap-xs {
+    gap: var(--canon-spacing-xs);
+  }
+
+  .cu-grid {
+    display: grid;
+  }
+
   .cu-hidden {
     display: none;
   }
@@ -31,36 +87,20 @@
     display: inline-block;
   }
 
-  .cu-flex {
-    display: flex;
+  .cu-items-center {
+    align-items: center;
   }
 
-  .cu-grid {
-    display: grid;
+  .cu-items-end {
+    align-items: flex-end;
   }
 
-  .cu-flex-row {
-    flex-direction: row;
+  .cu-items-start {
+    align-items: flex-start;
   }
 
-  .cu-flex-col {
-    flex-direction: column;
-  }
-
-  .cu-justify-stretch {
-    justify-content: stretch;
-  }
-
-  .cu-justify-start {
-    justify-content: flex-start;
-  }
-
-  .cu-justify-center {
-    justify-content: center;
-  }
-
-  .cu-justify-end {
-    justify-content: flex-end;
+  .cu-items-stretch {
+    align-items: stretch;
   }
 
   .cu-justify-around {
@@ -71,303 +111,195 @@
     justify-content: space-between;
   }
 
-  .cu-items-stretch {
-    align-items: stretch;
+  .cu-justify-center {
+    justify-content: center;
   }
 
-  .cu-items-center {
-    align-items: center;
+  .cu-justify-end {
+    justify-content: flex-end;
   }
 
-  .cu-items-start {
-    align-items: flex-start;
+  .cu-justify-start {
+    justify-content: flex-start;
   }
 
-  .cu-items-end {
-    align-items: flex-end;
-  }
-
-  .cu-p-none {
-    padding: 0;
-  }
-
-  .cu-p-2xs {
-    padding: var(--canon-spacing-2xs);
-  }
-
-  .cu-p-xs {
-    padding: var(--canon-spacing-xs);
-  }
-
-  .cu-p-sm {
-    padding: var(--canon-spacing-sm);
-  }
-
-  .cu-p-md {
-    padding: var(--canon-spacing-md);
-  }
-
-  .cu-p-lg {
-    padding: var(--canon-spacing-lg);
-  }
-
-  .cu-p-xl {
-    padding: var(--canon-spacing-xl);
-  }
-
-  .cu-p-2xl {
-    padding: var(--canon-spacing-2xl);
-  }
-
-  .cu-px-none {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .cu-px-2xs {
-    padding-left: var(--canon-spacing-2xs);
-    padding-right: var(--canon-spacing-2xs);
-  }
-
-  .cu-px-xs {
-    padding-left: var(--canon-spacing-xs);
-    padding-right: var(--canon-spacing-xs);
-  }
-
-  .cu-px-sm {
-    padding-left: var(--canon-spacing-sm);
-    padding-right: var(--canon-spacing-sm);
-  }
-
-  .cu-px-md {
-    padding-left: var(--canon-spacing-md);
-    padding-right: var(--canon-spacing-md);
-  }
-
-  .cu-px-lg {
-    padding-left: var(--canon-spacing-lg);
-    padding-right: var(--canon-spacing-lg);
-  }
-
-  .cu-px-xl {
-    padding-left: var(--canon-spacing-xl);
-    padding-right: var(--canon-spacing-xl);
-  }
-
-  .cu-px-2xl {
-    padding-left: var(--canon-spacing-2xl);
-    padding-right: var(--canon-spacing-2xl);
-  }
-
-  .cu-py-none {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .cu-py-2xs {
-    padding-top: var(--canon-spacing-2xs);
-    padding-bottom: var(--canon-spacing-2xs);
-  }
-
-  .cu-py-xs {
-    padding-top: var(--canon-spacing-xs);
-    padding-bottom: var(--canon-spacing-xs);
-  }
-
-  .cu-py-sm {
-    padding-top: var(--canon-spacing-sm);
-    padding-bottom: var(--canon-spacing-sm);
-  }
-
-  .cu-py-md {
-    padding-top: var(--canon-spacing-md);
-    padding-bottom: var(--canon-spacing-md);
-  }
-
-  .cu-py-lg {
-    padding-top: var(--canon-spacing-lg);
-    padding-bottom: var(--canon-spacing-lg);
-  }
-
-  .cu-py-xl {
-    padding-top: var(--canon-spacing-xl);
-    padding-bottom: var(--canon-spacing-xl);
-  }
-
-  .cu-py-2xl {
-    padding-top: var(--canon-spacing-2xl);
-    padding-bottom: var(--canon-spacing-2xl);
-  }
-
-  .cu-pl-none {
-    padding-left: 0;
-  }
-
-  .cu-pl-2xs {
-    padding-left: var(--canon-spacing-2xs);
-  }
-
-  .cu-pl-xs {
-    padding-left: var(--canon-spacing-xs);
-  }
-
-  .cu-pl-sm {
-    padding-left: var(--canon-spacing-sm);
-  }
-
-  .cu-pl-md {
-    padding-left: var(--canon-spacing-md);
-  }
-
-  .cu-pl-lg {
-    padding-left: var(--canon-spacing-lg);
-  }
-
-  .cu-pl-xl {
-    padding-left: var(--canon-spacing-xl);
-  }
-
-  .cu-pl-2xl {
-    padding-left: var(--canon-spacing-2xl);
-  }
-
-  .cu-pr-none {
-    padding-right: 0;
-  }
-
-  .cu-pr-2xs {
-    padding-right: var(--canon-spacing-2xs);
-  }
-
-  .cu-pr-xs {
-    padding-right: var(--canon-spacing-xs);
-  }
-
-  .cu-pr-sm {
-    padding-right: var(--canon-spacing-sm);
-  }
-
-  .cu-pr-md {
-    padding-right: var(--canon-spacing-md);
-  }
-
-  .cu-pr-lg {
-    padding-right: var(--canon-spacing-lg);
-  }
-
-  .cu-pr-xl {
-    padding-right: var(--canon-spacing-xl);
-  }
-
-  .cu-pr-2xl {
-    padding-right: var(--canon-spacing-2xl);
-  }
-
-  .cu-m-none {
-    margin: 0;
-  }
-
-  .cu-m-2xs {
-    margin: var(--canon-spacing-2xs);
-  }
-
-  .cu-m-xs {
-    margin: var(--canon-spacing-xs);
-  }
-
-  .cu-m-sm {
-    margin: var(--canon-spacing-sm);
-  }
-
-  .cu-m-md {
-    margin: var(--canon-spacing-md);
-  }
-
-  .cu-m-lg {
-    margin: var(--canon-spacing-lg);
-  }
-
-  .cu-m-xl {
-    margin: var(--canon-spacing-xl);
+  .cu-justify-stretch {
+    justify-content: stretch;
   }
 
   .cu-m-2xl {
     margin: var(--canon-spacing-2xl);
   }
 
-  .cu-mx-none {
-    margin-left: 0;
-    margin-right: 0;
+  .cu-m-lg {
+    margin: var(--canon-spacing-lg);
   }
 
-  .cu-mx-2xs {
-    margin-left: var(--canon-spacing-2xs);
-    margin-right: var(--canon-spacing-2xs);
+  .cu-m-md {
+    margin: var(--canon-spacing-md);
   }
 
-  .cu-mx-xs {
-    margin-left: var(--canon-spacing-xs);
-    margin-right: var(--canon-spacing-xs);
+  .cu-m-none {
+    margin: 0;
   }
 
-  .cu-mx-sm {
-    margin-left: var(--canon-spacing-sm);
-    margin-right: var(--canon-spacing-sm);
+  .cu-m-sm {
+    margin: var(--canon-spacing-sm);
   }
 
-  .cu-mx-md {
-    margin-left: var(--canon-spacing-md);
-    margin-right: var(--canon-spacing-md);
+  .cu-m-xl {
+    margin: var(--canon-spacing-xl);
   }
 
-  .cu-mx-lg {
+  .cu-m-xs {
+    margin: var(--canon-spacing-xs);
+  }
+
+  .cu-mb-2xl {
+    margin-bottom: var(--canon-spacing-2xl);
+  }
+
+  .cu-mb-lg {
+    margin-bottom: var(--canon-spacing-lg);
+  }
+
+  .cu-mb-md {
+    margin-bottom: var(--canon-spacing-md);
+  }
+
+  .cu-mb-none {
+    margin-bottom: 0;
+  }
+
+  .cu-mb-sm {
+    margin-bottom: var(--canon-spacing-sm);
+  }
+
+  .cu-mb-xl {
+    margin-bottom: var(--canon-spacing-xl);
+  }
+
+  .cu-mb-xs {
+    margin-bottom: var(--canon-spacing-xs);
+  }
+
+  .cu-ml-2xl {
+    margin-left: var(--canon-spacing-2xl);
+  }
+
+  .cu-ml-lg {
     margin-left: var(--canon-spacing-lg);
+  }
+
+  .cu-ml-md {
+    margin-left: var(--canon-spacing-md);
+  }
+
+  .cu-ml-none {
+    margin-left: 0;
+  }
+
+  .cu-ml-sm {
+    margin-left: var(--canon-spacing-sm);
+  }
+
+  .cu-ml-xl {
+    margin-left: var(--canon-spacing-xl);
+  }
+
+  .cu-ml-xs {
+    margin-left: var(--canon-spacing-xs);
+  }
+
+  .cu-mr-2xl {
+    margin-right: var(--canon-spacing-2xl);
+  }
+
+  .cu-mr-lg {
     margin-right: var(--canon-spacing-lg);
   }
 
-  .cu-mx-xl {
-    margin-left: var(--canon-spacing-xl);
+  .cu-mr-md {
+    margin-right: var(--canon-spacing-md);
+  }
+
+  .cu-mr-none {
+    margin-right: 0;
+  }
+
+  .cu-mr-sm {
+    margin-right: var(--canon-spacing-sm);
+  }
+
+  .cu-mr-xl {
     margin-right: var(--canon-spacing-xl);
   }
 
+  .cu-mr-xs {
+    margin-right: var(--canon-spacing-xs);
+  }
+
+  .cu-mt-2xl {
+    margin-top: var(--canon-spacing-2xl);
+  }
+
+  .cu-mt-lg {
+    margin-top: var(--canon-spacing-lg);
+  }
+
+  .cu-mt-md {
+    margin-top: var(--canon-spacing-md);
+  }
+
+  .cu-mt-none {
+    margin-top: 0;
+  }
+
+  .cu-mt-sm {
+    margin-top: var(--canon-spacing-sm);
+  }
+
+  .cu-mt-xl {
+    margin-top: var(--canon-spacing-xl);
+  }
+
+  .cu-mt-xs {
+    margin-top: var(--canon-spacing-xs);
+  }
+
   .cu-mx-2xl {
     margin-left: var(--canon-spacing-2xl);
     margin-right: var(--canon-spacing-2xl);
   }
 
-  .cu-my-none {
-    margin-top: 0;
-    margin-bottom: 0;
+  .cu-mx-lg {
+    margin-left: var(--canon-spacing-lg);
+    margin-right: var(--canon-spacing-lg);
   }
 
-  .cu-my-2xs {
-    margin-top: var(--canon-spacing-2xs);
-    margin-bottom: var(--canon-spacing-2xs);
+  .cu-mx-md {
+    margin-left: var(--canon-spacing-md);
+    margin-right: var(--canon-spacing-md);
   }
 
-  .cu-my-xs {
-    margin-top: var(--canon-spacing-xs);
-    margin-bottom: var(--canon-spacing-xs);
+  .cu-mx-none {
+    margin-left: 0;
+    margin-right: 0;
   }
 
-  .cu-my-sm {
-    margin-top: var(--canon-spacing-sm);
-    margin-bottom: var(--canon-spacing-sm);
+  .cu-mx-sm {
+    margin-left: var(--canon-spacing-sm);
+    margin-right: var(--canon-spacing-sm);
   }
 
-  .cu-my-md {
-    margin-top: var(--canon-spacing-md);
-    margin-bottom: var(--canon-spacing-md);
+  .cu-mx-xl {
+    margin-left: var(--canon-spacing-xl);
+    margin-right: var(--canon-spacing-xl);
   }
 
-  .cu-my-lg {
-    margin-top: var(--canon-spacing-lg);
-    margin-bottom: var(--canon-spacing-lg);
-  }
-
-  .cu-my-xl {
-    margin-top: var(--canon-spacing-xl);
-    margin-bottom: var(--canon-spacing-xl);
+  .cu-mx-xs {
+    margin-left: var(--canon-spacing-xs);
+    margin-right: var(--canon-spacing-xs);
   }
 
   .cu-my-2xl {
@@ -375,227 +307,247 @@
     margin-bottom: var(--canon-spacing-2xl);
   }
 
-  .cu-ml-none {
-    margin-left: 0;
+  .cu-my-lg {
+    margin-top: var(--canon-spacing-lg);
+    margin-bottom: var(--canon-spacing-lg);
   }
 
-  .cu-ml-2xs {
-    margin-left: var(--canon-spacing-2xs);
+  .cu-my-md {
+    margin-top: var(--canon-spacing-md);
+    margin-bottom: var(--canon-spacing-md);
   }
 
-  .cu-ml-xs {
-    margin-left: var(--canon-spacing-xs);
+  .cu-my-none {
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
-  .cu-ml-sm {
-    margin-left: var(--canon-spacing-sm);
+  .cu-my-sm {
+    margin-top: var(--canon-spacing-sm);
+    margin-bottom: var(--canon-spacing-sm);
   }
 
-  .cu-ml-md {
-    margin-left: var(--canon-spacing-md);
+  .cu-my-xl {
+    margin-top: var(--canon-spacing-xl);
+    margin-bottom: var(--canon-spacing-xl);
   }
 
-  .cu-ml-lg {
-    margin-left: var(--canon-spacing-lg);
+  .cu-my-xs {
+    margin-top: var(--canon-spacing-xs);
+    margin-bottom: var(--canon-spacing-xs);
   }
 
-  .cu-ml-xl {
-    margin-left: var(--canon-spacing-xl);
+  .cu-p-2xl {
+    padding: var(--canon-spacing-2xl);
   }
 
-  .cu-ml-2xl {
-    margin-left: var(--canon-spacing-2xl);
+  .cu-p-lg {
+    padding: var(--canon-spacing-lg);
   }
 
-  .cu-mr-none {
-    margin-right: 0;
+  .cu-p-md {
+    padding: var(--canon-spacing-md);
   }
 
-  .cu-mr-2xs {
-    margin-right: var(--canon-spacing-2xs);
+  .cu-p-none {
+    padding: 0;
   }
 
-  .cu-mr-xs {
-    margin-right: var(--canon-spacing-xs);
+  .cu-p-sm {
+    padding: var(--canon-spacing-sm);
   }
 
-  .cu-mr-sm {
-    margin-right: var(--canon-spacing-sm);
+  .cu-p-xl {
+    padding: var(--canon-spacing-xl);
   }
 
-  .cu-mr-md {
-    margin-right: var(--canon-spacing-md);
-  }
-
-  .cu-mr-lg {
-    margin-right: var(--canon-spacing-lg);
-  }
-
-  .cu-mr-xl {
-    margin-right: var(--canon-spacing-xl);
-  }
-
-  .cu-mr-2xl {
-    margin-right: var(--canon-spacing-2xl);
-  }
-
-  .cu-gap-none {
-    gap: 0;
-  }
-
-  .cu-gap-2xs {
-    gap: var(--canon-spacing-2xs);
-  }
-
-  .cu-gap-xs {
-    gap: var(--canon-spacing-xs);
-  }
-
-  .cu-gap-sm {
-    gap: var(--canon-spacing-sm);
-  }
-
-  .cu-gap-md {
-    gap: var(--canon-spacing-md);
-  }
-
-  .cu-gap-lg {
-    gap: var(--canon-spacing-lg);
-  }
-
-  .cu-gap-xl {
-    gap: var(--canon-spacing-xl);
-  }
-
-  .cu-gap-2xl {
-    gap: var(--canon-spacing-2xl);
-  }
-
-  .cu-pt-none {
-    padding-top: 0;
-  }
-
-  .cu-pt-2xs {
-    padding-top: var(--canon-spacing-2xs);
-  }
-
-  .cu-pt-xs {
-    padding-top: var(--canon-spacing-xs);
-  }
-
-  .cu-pt-sm {
-    padding-top: var(--canon-spacing-sm);
-  }
-
-  .cu-pt-md {
-    padding-top: var(--canon-spacing-md);
-  }
-
-  .cu-pt-lg {
-    padding-top: var(--canon-spacing-lg);
-  }
-
-  .cu-pt-xl {
-    padding-top: var(--canon-spacing-xl);
-  }
-
-  .cu-pt-2xl {
-    padding-top: var(--canon-spacing-2xl);
-  }
-
-  .cu-pb-none {
-    padding-bottom: 0;
-  }
-
-  .cu-pb-2xs {
-    padding-bottom: var(--canon-spacing-2xs);
-  }
-
-  .cu-pb-xs {
-    padding-bottom: var(--canon-spacing-xs);
-  }
-
-  .cu-pb-sm {
-    padding-bottom: var(--canon-spacing-sm);
-  }
-
-  .cu-pb-md {
-    padding-bottom: var(--canon-spacing-md);
-  }
-
-  .cu-pb-lg {
-    padding-bottom: var(--canon-spacing-lg);
-  }
-
-  .cu-pb-xl {
-    padding-bottom: var(--canon-spacing-xl);
+  .cu-p-xs {
+    padding: var(--canon-spacing-xs);
   }
 
   .cu-pb-2xl {
     padding-bottom: var(--canon-spacing-2xl);
   }
 
-  .cu-mt-none {
-    margin-top: 0;
+  .cu-pb-lg {
+    padding-bottom: var(--canon-spacing-lg);
   }
 
-  .cu-mt-2xs {
-    margin-top: var(--canon-spacing-2xs);
+  .cu-pb-md {
+    padding-bottom: var(--canon-spacing-md);
   }
 
-  .cu-mt-xs {
-    margin-top: var(--canon-spacing-xs);
+  .cu-pb-none {
+    padding-bottom: 0;
   }
 
-  .cu-mt-sm {
-    margin-top: var(--canon-spacing-sm);
+  .cu-pb-sm {
+    padding-bottom: var(--canon-spacing-sm);
   }
 
-  .cu-mt-md {
-    margin-top: var(--canon-spacing-md);
+  .cu-pb-xl {
+    padding-bottom: var(--canon-spacing-xl);
   }
 
-  .cu-mt-lg {
-    margin-top: var(--canon-spacing-lg);
+  .cu-pb-xs {
+    padding-bottom: var(--canon-spacing-xs);
   }
 
-  .cu-mt-xl {
-    margin-top: var(--canon-spacing-xl);
+  .cu-pl-2xl {
+    padding-left: var(--canon-spacing-2xl);
   }
 
-  .cu-mt-2xl {
-    margin-top: var(--canon-spacing-2xl);
+  .cu-pl-lg {
+    padding-left: var(--canon-spacing-lg);
   }
 
-  .cu-mb-none {
-    margin-bottom: 0;
+  .cu-pl-md {
+    padding-left: var(--canon-spacing-md);
   }
 
-  .cu-mb-2xs {
-    margin-bottom: var(--canon-spacing-2xs);
+  .cu-pl-none {
+    padding-left: 0;
   }
 
-  .cu-mb-xs {
-    margin-bottom: var(--canon-spacing-xs);
+  .cu-pl-sm {
+    padding-left: var(--canon-spacing-sm);
   }
 
-  .cu-mb-sm {
-    margin-bottom: var(--canon-spacing-sm);
+  .cu-pl-xl {
+    padding-left: var(--canon-spacing-xl);
   }
 
-  .cu-mb-md {
-    margin-bottom: var(--canon-spacing-md);
+  .cu-pl-xs {
+    padding-left: var(--canon-spacing-xs);
   }
 
-  .cu-mb-lg {
-    margin-bottom: var(--canon-spacing-lg);
+  .cu-pr-2xl {
+    padding-right: var(--canon-spacing-2xl);
   }
 
-  .cu-mb-xl {
-    margin-bottom: var(--canon-spacing-xl);
+  .cu-pr-lg {
+    padding-right: var(--canon-spacing-lg);
   }
 
-  .cu-mb-2xl {
-    margin-bottom: var(--canon-spacing-2xl);
+  .cu-pr-md {
+    padding-right: var(--canon-spacing-md);
+  }
+
+  .cu-pr-none {
+    padding-right: 0;
+  }
+
+  .cu-pr-sm {
+    padding-right: var(--canon-spacing-sm);
+  }
+
+  .cu-pr-xl {
+    padding-right: var(--canon-spacing-xl);
+  }
+
+  .cu-pr-xs {
+    padding-right: var(--canon-spacing-xs);
+  }
+
+  .cu-pt-2xl {
+    padding-top: var(--canon-spacing-2xl);
+  }
+
+  .cu-pt-lg {
+    padding-top: var(--canon-spacing-lg);
+  }
+
+  .cu-pt-md {
+    padding-top: var(--canon-spacing-md);
+  }
+
+  .cu-pt-none {
+    padding-top: 0;
+  }
+
+  .cu-pt-sm {
+    padding-top: var(--canon-spacing-sm);
+  }
+
+  .cu-pt-xl {
+    padding-top: var(--canon-spacing-xl);
+  }
+
+  .cu-pt-xs {
+    padding-top: var(--canon-spacing-xs);
+  }
+
+  .cu-px-2xl {
+    padding-left: var(--canon-spacing-2xl);
+    padding-right: var(--canon-spacing-2xl);
+  }
+
+  .cu-px-lg {
+    padding-left: var(--canon-spacing-lg);
+    padding-right: var(--canon-spacing-lg);
+  }
+
+  .cu-px-md {
+    padding-left: var(--canon-spacing-md);
+    padding-right: var(--canon-spacing-md);
+  }
+
+  .cu-px-none {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .cu-px-sm {
+    padding-left: var(--canon-spacing-sm);
+    padding-right: var(--canon-spacing-sm);
+  }
+
+  .cu-px-xl {
+    padding-left: var(--canon-spacing-xl);
+    padding-right: var(--canon-spacing-xl);
+  }
+
+  .cu-px-xs {
+    padding-left: var(--canon-spacing-xs);
+    padding-right: var(--canon-spacing-xs);
+  }
+
+  .cu-py-2xl {
+    padding-top: var(--canon-spacing-2xl);
+    padding-bottom: var(--canon-spacing-2xl);
+  }
+
+  .cu-py-lg {
+    padding-top: var(--canon-spacing-lg);
+    padding-bottom: var(--canon-spacing-lg);
+  }
+
+  .cu-py-md {
+    padding-top: var(--canon-spacing-md);
+    padding-bottom: var(--canon-spacing-md);
+  }
+
+  .cu-py-none {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .cu-py-sm {
+    padding-top: var(--canon-spacing-sm);
+    padding-bottom: var(--canon-spacing-sm);
+  }
+
+  .cu-py-xl {
+    padding-top: var(--canon-spacing-xl);
+    padding-bottom: var(--canon-spacing-xl);
+  }
+
+  .cu-py-xs {
+    padding-top: var(--canon-spacing-xs);
+    padding-bottom: var(--canon-spacing-xs);
+  }
+
+  .cu-wrap-reverse {
+    flex-wrap: wrap-reverse;
   }
 }
diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts
index 2565c140fd..6a319a6308 100644
--- a/packages/canon/src/types.ts
+++ b/packages/canon/src/types.ts
@@ -25,15 +25,15 @@ export interface Breakpoints {
 export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type Display = 'none' | 'flex' | 'block' | 'inline';
 export type FlexDirection = 'row' | 'column';
-export type FlexWrap = 'wrap' | 'nowrap';
+export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 export type JustifyContent =
   | 'stretch'
-  | 'flex-start'
+  | 'start'
   | 'center'
-  | 'flex-end'
-  | 'space-around'
-  | 'space-between';
-export type AlignItems = 'stretch' | 'flex-start' | 'center' | 'flex-end';
+  | 'end'
+  | 'around'
+  | 'between';
+export type AlignItems = 'stretch' | 'start' | 'center' | 'end';
 export type BorderRadius = 'none' | 'small' | 'medium' | 'full';
 export type BoxShadow = 'small' | 'medium' | 'large';
 
diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts
index 48d7c36549..1391590bd6 100644
--- a/packages/canon/src/utils/getClassNames.ts
+++ b/packages/canon/src/utils/getClassNames.ts
@@ -40,6 +40,7 @@ const valueMap: Record<string, Record<string, string>> = {
   flexWrap: {
     wrap: 'flex-wrap',
     nowrap: 'flex-nowrap',
+    'wrap-reverse': 'flex-wrap-reverse',
   },
   justifyContent: {
     stretch: 'justify-stretch',