From f1f6f087c6da307ee508b8b340ba092dc97faec9 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 3 Dec 2024 14:19:40 +0000
Subject: [PATCH 1/5] Update Button component

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/package.json                   |  16 +-
 .../src/components/Button/Button.stories.tsx  |  54 ++-
 .../canon/src/components/Button/Button.tsx    |  61 ++--
 .../canon/src/components/Button/styles.css    |  92 +++--
 packages/canon/src/components/Icon/icons.ts   |  16 +
 packages/canon/src/components/Icon/types.ts   |   8 +
 .../src/components/Stack/Stack.stories.tsx    |   2 +-
 packages/canon/src/layout/properties.ts       |  14 +-
 packages/canon/src/theme/theme.css            |  58 ++-
 yarn.lock                                     | 340 +++++++++---------
 10 files changed, 365 insertions(+), 296 deletions(-)

diff --git a/packages/canon/package.json b/packages/canon/package.json
index 4ec11b31fb..c8a8f79a6f 100644
--- a/packages/canon/package.json
+++ b/packages/canon/package.json
@@ -47,15 +47,15 @@
   "devDependencies": {
     "@backstage/cli": "workspace:^",
     "@chromatic-com/storybook": "^3.2.2",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-interactions": "^8.4.6",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.4.5",
+    "@storybook/addon-themes": "^8.4.6",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/react": "^8.4.5",
-    "@storybook/react-webpack5": "^8.4.5",
-    "@storybook/test": "^8.4.5",
+    "@storybook/blocks": "^8.4.6",
+    "@storybook/react": "^8.4.6",
+    "@storybook/react-webpack5": "^8.4.6",
+    "@storybook/test": "^8.4.6",
     "@testing-library/jest-dom": "^6.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -67,7 +67,7 @@
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router-dom": "^6.3.0",
-    "storybook": "^8.4.5",
+    "storybook": "^8.4.6",
     "webpack-merge": "^6.0.1"
   },
   "peerDependencies": {
diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index 7dddbd033b..fe3b1d58f6 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -17,7 +17,8 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
-import { Box } from '../Box/Box';
+import { Inline } from '../Inline';
+import { Stack } from '../Stack';
 
 const meta = {
   title: 'Components/Button',
@@ -53,15 +54,22 @@ export const Secondary: Story = {
   },
 };
 
+export const Tertiary: Story = {
+  args: {
+    children: 'Tertiary button',
+    variant: 'tertiary',
+  },
+};
+
 export const Sizes: Story = {
   args: {
     children: 'Button',
   },
   render: args => (
-    <div style={{ display: 'flex', gap: '10px' }}>
-      <Button {...args} size="small" />
+    <Inline alignY="center">
       <Button {...args} size="medium" />
-    </div>
+      <Button {...args} size="small" />
+    </Inline>
   ),
 };
 
@@ -70,11 +78,11 @@ export const WithIcons: Story = {
     children: 'Button',
   },
   render: args => (
-    <div style={{ display: 'flex', gap: '10px' }}>
+    <Inline alignY="center">
       <Button {...args} iconStart="cloud" />
-      <Button {...args} iconEnd="arrowRight" />
-      <Button {...args} iconStart="cloud" iconEnd="arrowRight" />
-    </div>
+      <Button {...args} iconEnd="chevronRight" />
+      <Button {...args} iconStart="cloud" iconEnd="chevronRight" />
+    </Inline>
   ),
 };
 
@@ -83,11 +91,11 @@ export const FullWidth: Story = {
     children: 'Button',
   },
   render: args => (
-    <Box>
+    <Stack style={{ width: '300px' }}>
       <Button {...args} iconStart="cloud" />
-      <Button {...args} iconEnd="arrowRight" />
-      <Button {...args} iconStart="cloud" iconEnd="arrowRight" />
-    </Box>
+      <Button {...args} iconEnd="chevronRight" />
+      <Button {...args} iconStart="cloud" iconEnd="chevronRight" />
+    </Stack>
   ),
 };
 
@@ -97,25 +105,3 @@ export const Disabled: Story = {
     disabled: true,
   },
 };
-
-export const CustomTheme: Story = {
-  args: {
-    children: 'Custom Button',
-  },
-  decorators: [
-    Story => (
-      <div
-        style={
-          {
-            '--button-primary-background-color': 'blue',
-            '--button-primary-border-color': 'blue',
-            '--button-primary-text-color': 'white',
-            '--button-primary-border-radius': '8px',
-          } as React.CSSProperties
-        }
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};
diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index 020d0adce4..3807c60f7e 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { button } from './button.css';
-import { Icon } from '../Icon/Icon';
+import React, { forwardRef } from 'react';
+import { Icon } from '../Icon';
 import type { IconNames } from '../Icon/types';
 
 /**
@@ -26,7 +25,7 @@ import type { IconNames } from '../Icon/types';
  */
 export interface ButtonProps {
   size?: 'small' | 'medium';
-  variant?: 'primary' | 'secondary';
+  variant?: 'primary' | 'secondary' | 'tertiary';
   children: React.ReactNode;
   disabled?: boolean;
   iconStart?: IconNames;
@@ -34,26 +33,38 @@ export interface ButtonProps {
 }
 
 /** @public */
-export const Button = ({
-  size = 'medium',
-  variant = 'primary',
-  children,
-  disabled,
-  iconStart,
-  iconEnd,
-  ...props
-}: ButtonProps) => {
-  return (
-    <button
-      {...props}
-      disabled={disabled}
-      className={button({ size, variant, disabled })}
-    >
-      {iconStart && <Icon name={iconStart} />}
-      {children}
-      {iconEnd && <Icon name={iconEnd} />}
-    </button>
-  );
-};
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      size = 'medium',
+      variant = 'primary',
+      children,
+      disabled,
+      iconStart,
+      iconEnd,
+      ...props
+    }: ButtonProps,
+    ref,
+  ) => {
+    return (
+      <button
+        {...props}
+        ref={ref}
+        disabled={disabled}
+        className={`button ${variant} ${size}`}
+      >
+        <span
+          className={['button-content', iconStart && iconEnd ? 'icon-both' : '']
+            .filter(Boolean)
+            .join(' ')}
+        >
+          {iconStart && <Icon name={iconStart} />}
+          {children}
+        </span>
+        {iconEnd && <Icon name={iconEnd} />}
+      </button>
+    );
+  },
+);
 
 export default Button;
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index 766390a862..07d3048397 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -14,44 +14,60 @@
  * limitations under the License.
  */
 
-:root {
-  --button-primary-background-color: #1ed760;
-  --button-primary-background-color-hover: #3be477;
-  --button-primary-background-color-active: #1abc54;
-  --button-primary-border-color: #1ed760;
-  --button-primary-border-color-hover: #3be477;
-  --button-primary-border-color-active: #1abc54;
-  --button-primary-text-color: #000;
-  --button-primary-border-radius: 9999px;
-  --button-secondary-background-color: transparent;
-  --button-secondary-background-color-hover: transparent;
-  --button-secondary-background-color-active: rgba(0, 0, 0, 0.03);
-  --button-secondary-border-color: #000;
-  --button-secondary-border-color-hover: #000;
-  --button-secondary-border-color-active: #000;
-  --button-secondary-text-color: #000;
-  --button-secondary-border-radius: 9999px;
-  --button-size-small: 32px;
-  --button-size-medium: 48px;
+.button {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  font-family: var(--canon-font-sans);
+  font-weight: var(--canon-font-bold);
+  font-size: var(--canon-font-sizes-md);
+  padding: 0;
+  transition: all 150ms ease;
+  cursor: pointer;
+  border-radius: 8px;
 }
 
-[data-theme='dark'] {
-  --button-primary-background-color: #1ed760;
-  --button-primary-background-color-hover: #3be477;
-  --button-primary-background-color-active: #1abc54;
-  --button-primary-border-color: #1ed760;
-  --button-primary-border-color-hover: #3be477;
-  --button-primary-border-color-active: #1abc54;
-  --button-primary-text-color: #000;
-  --button-primary-border-radius: 9999px;
-  --button-secondary-background-color: transparent;
-  --button-secondary-background-color-hover: transparent;
-  --button-secondary-background-color-active: rgba(255, 255, 255, 0.1);
-  --button-secondary-border-color: #fff;
-  --button-secondary-border-color-hover: #fff;
-  --button-secondary-border-color-active: #fff;
-  --button-secondary-text-color: #fff;
-  --button-secondary-border-radius: 9999px;
-  --button-size-small: 32px;
-  --button-size-medium: 48px;
+.button.primary {
+  background-color: var(--canon-accent);
+  color: var(--canon-text-primary-on-accent);
+}
+
+.button.primary:hover {
+  background-color: transparent;
+  box-shadow: 0 0 0 1px var(--canon-outline-focus);
+  color: var(--canon-text-primary);
+}
+
+.button.secondary {
+  background-color: transparent;
+  box-shadow: 0 0 0 1px var(--canon-outline);
+  color: var(--canon-text-primary);
+}
+
+.button.secondary:hover {
+  box-shadow: 0 0 0 1px var(--canon-outline-focus);
+}
+
+.button.small {
+  padding-left: 6px;
+  padding-right: 6px;
+  height: 32px;
+}
+
+.button.medium {
+  padding-left: 8px;
+  padding-right: 8px;
+  height: 40px;
+}
+
+.button-content {
+  display: flex;
+  align-items: center;
+  gap: var(--canon-spacing-xs);
+}
+
+.button-content.icon-both {
+  flex: 1;
 }
diff --git a/packages/canon/src/components/Icon/icons.ts b/packages/canon/src/components/Icon/icons.ts
index 8c6a1248cb..7fe2bf0056 100644
--- a/packages/canon/src/components/Icon/icons.ts
+++ b/packages/canon/src/components/Icon/icons.ts
@@ -26,6 +26,14 @@ import {
   RiArrowUpFill,
   RiDeleteBin6Line,
   RiAddLine,
+  RiArrowDownSLine,
+  RiArrowUpSLine,
+  RiArrowLeftSLine,
+  RiArrowRightSLine,
+  RiArrowDownCircleLine,
+  RiArrowLeftCircleLine,
+  RiArrowRightCircleLine,
+  RiArrowUpCircleLine,
 } from '@remixicon/react';
 
 // List of default icons
@@ -34,6 +42,14 @@ export const defaultIcons: IconMap = {
   arrowLeft: RiArrowLeftFill,
   arrowRight: RiArrowRightFill,
   arrowUp: RiArrowUpFill,
+  arrowDownCircle: RiArrowDownCircleLine,
+  arrowLeftCircle: RiArrowLeftCircleLine,
+  arrowRightCircle: RiArrowRightCircleLine,
+  arrowUpCircle: RiArrowUpCircleLine,
+  chevronDown: RiArrowDownSLine,
+  chevronUp: RiArrowUpSLine,
+  chevronLeft: RiArrowLeftSLine,
+  chevronRight: RiArrowRightSLine,
   cloud: RiCloudFill,
   heart: RiHeartFill,
   plus: RiAddLine,
diff --git a/packages/canon/src/components/Icon/types.ts b/packages/canon/src/components/Icon/types.ts
index 6e16e627d4..d60eaca020 100644
--- a/packages/canon/src/components/Icon/types.ts
+++ b/packages/canon/src/components/Icon/types.ts
@@ -20,6 +20,14 @@ export type IconNames =
   | 'arrowLeft'
   | 'arrowRight'
   | 'arrowUp'
+  | 'arrowDownCircle'
+  | 'arrowLeftCircle'
+  | 'arrowRightCircle'
+  | 'arrowUpCircle'
+  | 'chevronDown'
+  | 'chevronLeft'
+  | 'chevronRight'
+  | 'chevronUp'
   | 'cloud'
   | 'heart'
   | 'plus'
diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx
index 601f6b847f..331c2ee1e1 100644
--- a/packages/canon/src/components/Stack/Stack.stories.tsx
+++ b/packages/canon/src/components/Stack/Stack.stories.tsx
@@ -110,7 +110,7 @@ export const ResponsiveGap: Story = {
     gap: {
       xs: 'xs',
       md: 'md',
-      lg: 'xxl',
+      lg: '2xl',
     },
   },
 };
diff --git a/packages/canon/src/layout/properties.ts b/packages/canon/src/layout/properties.ts
index 37cb53666c..d41bbddbeb 100644
--- a/packages/canon/src/layout/properties.ts
+++ b/packages/canon/src/layout/properties.ts
@@ -33,11 +33,11 @@ export const themes = {
 /** @public */
 export const space = {
   none: 0,
-  xxs: 'var(--canon-space-xxs)',
-  xs: 'var(--canon-space-xs)',
-  sm: 'var(--canon-space-sm)',
-  md: 'var(--canon-space-md)',
-  lg: 'var(--canon-space-lg)',
-  xl: 'var(--canon-space-xl)',
-  xxl: 'var(--canon-space-xxl)',
+  '2xs': 'var(--canon-spacing-2xs)',
+  xs: 'var(--canon-spacing-xs)',
+  sm: 'var(--canon-spacing-sm)',
+  md: 'var(--canon-spacing-md)',
+  lg: 'var(--canon-spacing-lg)',
+  xl: 'var(--canon-spacing-xl)',
+  '2xl': 'var(--canon-spacing-2xl)',
 };
diff --git a/packages/canon/src/theme/theme.css b/packages/canon/src/theme/theme.css
index 7a7f440252..0bb95d4270 100644
--- a/packages/canon/src/theme/theme.css
+++ b/packages/canon/src/theme/theme.css
@@ -16,42 +16,74 @@
 
 /* Light theme */
 :root {
-  --canon-accent: #1ed760;
+  /* Colors */
+  --canon-accent: #000;
   --canon-background: #f8f8f8;
   --canon-surface-1: #fff;
   --canon-surface-2: #f4f4f4;
-  --canon-outline: #666;
-  --canon-outline-focus: #ccc;
+
+  /* Outlines */
+  --canon-outline: rgba(0, 0, 0, 0.1);
+  --canon-outline-hover: rgba(0, 0, 0, 0.2);
+  --canon-outline-focus: #000;
+
+  /* States - Add more states */
   --canon-error: #f50000;
+
+  /* Text colors */
   --canon-text-primary: #000;
+  --canon-text-primary-on-accent: #fff;
   --canon-text-secondary: #646464;
+
+  /* Box shadows */
   --canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05);
   --canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1);
   --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2);
 
+  /* Font families */
   --canon-font-sans: 'Geist', serif;
   --canon-font-monospace: 'Monospace', monospace;
   --canon-font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
     'Noto Color Emoji';
 
-  --canon-space-unit: 1em;
-  --canon-space-xxs: calc(0.25 * var(--canon-space-unit));
-  --canon-space-xs: calc(0.5 * var(--canon-space-unit));
-  --canon-space-sm: calc(0.75 * var(--canon-space-unit));
-  --canon-space-md: calc(1.25 * var(--canon-space-unit));
-  --canon-space-lg: calc(2 * var(--canon-space-unit));
-  --canon-space-xl: calc(3.25 * var(--canon-space-unit));
-  --canon-space-xxl: calc(5.25 * var(--canon-space-unit));
+  /* Font weights */
+  --canon-font-regular: 400;
+  --canon-font-bold: 600;
+
+  /* Font sizes */
+  --canon-font-sizes-2xs: 0.625rem;
+  --canon-font-sizes-xs: 0.75rem;
+  --canon-font-sizes-sm: 0.875rem;
+  --canon-font-sizes-md: 1rem;
+  --canon-font-sizes-lg: 1.125rem;
+  --canon-font-sizes-xl: 1.25rem;
+  --canon-font-sizes-2xl: 1.5rem;
+  --canon-font-sizes-3xl: 1.875rem;
+  --canon-font-sizes-4xl: 2.25rem;
+  --canon-font-sizes-5xl: 3rem;
+  --canon-font-sizes-6xl: 3.75rem;
+  --canon-font-sizes-7xl: 4.5rem;
+  --canon-font-sizes-8xl: 6rem;
+  --canon-font-sizes-9xl: 8rem;
+
+  /* Spacing */
+  --canon-spacing-2xs: 0.25rem;
+  --canon-spacing-xs: 0.5rem;
+  --canon-spacing-sm: 0.75rem;
+  --canon-spacing-md: 1.25rem;
+  --canon-spacing-lg: 2rem;
+  --canon-spacing-xl: 3.25rem;
+  --canon-spacing-2xl: 5.25rem;
 }
 
 /* Dark theme */
 [data-theme='dark'] {
-  --canon-accent: #1ed760;
+  --canon-accent: #fff;
   --canon-background: #000;
   --canon-surface-1: #121212;
   --canon-surface-2: #292929;
   --canon-outline: #666;
   --canon-outline-focus: #ccc;
-  --canon-text-primary: #f0f0f0;
+  --canon-text-primary: #000;
   --canon-text-secondary: #666;
 }
diff --git a/yarn.lock b/yarn.lock
index 5dfb4fb31f..dbbbcb7c02 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3829,15 +3829,15 @@ __metadata:
     "@base_ui/react": ^1.0.0-alpha.3
     "@chromatic-com/storybook": ^3.2.2
     "@remixicon/react": ^4.5.0
-    "@storybook/addon-essentials": ^8.4.5
-    "@storybook/addon-interactions": ^8.4.5
+    "@storybook/addon-essentials": ^8.4.6
+    "@storybook/addon-interactions": ^8.4.6
     "@storybook/addon-styling-webpack": ^1.0.1
-    "@storybook/addon-themes": ^8.4.5
+    "@storybook/addon-themes": ^8.4.6
     "@storybook/addon-webpack5-compiler-swc": ^1.0.5
-    "@storybook/blocks": ^8.4.5
-    "@storybook/react": ^8.4.5
-    "@storybook/react-webpack5": ^8.4.5
-    "@storybook/test": ^8.4.5
+    "@storybook/blocks": ^8.4.6
+    "@storybook/react": ^8.4.6
+    "@storybook/react-webpack5": ^8.4.6
+    "@storybook/test": ^8.4.6
     "@testing-library/jest-dom": ^6.0.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
@@ -3853,7 +3853,7 @@ __metadata:
     react: ^18.0.2
     react-dom: ^18.0.2
     react-router-dom: ^6.3.0
-    storybook: ^8.4.5
+    storybook: ^8.4.6
     webpack-merge: ^6.0.1
   peerDependencies:
     "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
@@ -17173,9 +17173,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-actions@npm:8.4.5"
+"@storybook/addon-actions@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-actions@npm:8.4.6"
   dependencies:
     "@storybook/global": ^5.0.0
     "@types/uuid": ^9.0.1
@@ -17183,121 +17183,121 @@ __metadata:
     polished: ^4.2.2
     uuid: ^9.0.0
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: 7bc9b3091b62419170aa841d2006b88cffa111557f3451b96f9f61310c83138a131f3e400b05fbd5c774d5e93b15ebd629844844b6ba099ee968fed2e5085d54
+    storybook: ^8.4.6
+  checksum: 93a453321f14eddf7f58e4c235e6ebbee5a9b680453834cc5593ff59d7607d9e99c53d5fac9bf59f6072c3a6f64a5f53174078c9e6c9054b125dc4c25be43842
   languageName: node
   linkType: hard
 
-"@storybook/addon-backgrounds@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-backgrounds@npm:8.4.5"
+"@storybook/addon-backgrounds@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-backgrounds@npm:8.4.6"
   dependencies:
     "@storybook/global": ^5.0.0
     memoizerific: ^1.11.3
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: a8b68fc20463087cc66d52c933825c9ba73f81c4ab14eea607271f20ad0e108581bb75dddd06fd01a8a55637b48a14342543174bbacbc7609388c659f0257906
+    storybook: ^8.4.6
+  checksum: acedc2b2b74dafc6cd236ec815f568b33f9cbf2eb714209f3ef8594df9bff29b72cf3d3aba3e778cb0cd962acaa7352657de353914353fbbd235d0ff37acfbd2
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-controls@npm:8.4.5"
+"@storybook/addon-controls@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-controls@npm:8.4.6"
   dependencies:
     "@storybook/global": ^5.0.0
     dequal: ^2.0.2
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: 673cdec1c5b174a317c295bcbbcb464f0d2778e6c403b3ae591a96d59510a96b9a97121b250d13e83886168396e5ee6877104e04da957950c3d87145ec76007b
+    storybook: ^8.4.6
+  checksum: bd0804d54d7dbcf4a557738240aaf07c4cc1f022141c85f13d62a0029d8d363b1a7435330f0ee161cc3519e597a0bcfe4f7c16285447cca4eda23148d6a1cb4c
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-docs@npm:8.4.5"
+"@storybook/addon-docs@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-docs@npm:8.4.6"
   dependencies:
     "@mdx-js/react": ^3.0.0
-    "@storybook/blocks": 8.4.5
-    "@storybook/csf-plugin": 8.4.5
-    "@storybook/react-dom-shim": 8.4.5
+    "@storybook/blocks": 8.4.6
+    "@storybook/csf-plugin": 8.4.6
+    "@storybook/react-dom-shim": 8.4.6
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: 04b15137c082e5b6f6d55f5a251a4a34a08c44f7ad926615f5a99093bd26b044ad40cbdb314a3a76154de00dd2434c61f893ca2ce697193addd03e0650c6d4da
+    storybook: ^8.4.6
+  checksum: 767bdbc9c83ac10129ec5863ccf2b658ad1807e1a22def2f734d4edde1791291d66186eca30a31ce57cf1863601a03dde075441ef60a9b0e66080a16ca9ed481
   languageName: node
   linkType: hard
 
-"@storybook/addon-essentials@npm:^8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-essentials@npm:8.4.5"
+"@storybook/addon-essentials@npm:^8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-essentials@npm:8.4.6"
   dependencies:
-    "@storybook/addon-actions": 8.4.5
-    "@storybook/addon-backgrounds": 8.4.5
-    "@storybook/addon-controls": 8.4.5
-    "@storybook/addon-docs": 8.4.5
-    "@storybook/addon-highlight": 8.4.5
-    "@storybook/addon-measure": 8.4.5
-    "@storybook/addon-outline": 8.4.5
-    "@storybook/addon-toolbars": 8.4.5
-    "@storybook/addon-viewport": 8.4.5
+    "@storybook/addon-actions": 8.4.6
+    "@storybook/addon-backgrounds": 8.4.6
+    "@storybook/addon-controls": 8.4.6
+    "@storybook/addon-docs": 8.4.6
+    "@storybook/addon-highlight": 8.4.6
+    "@storybook/addon-measure": 8.4.6
+    "@storybook/addon-outline": 8.4.6
+    "@storybook/addon-toolbars": 8.4.6
+    "@storybook/addon-viewport": 8.4.6
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: a00c0e13763076b2bdf9923b75ff57b3f88c9ef64cebc405bb129f02fb9e69a4e69aa0d277a4d98cb181c11681eb8db488585a1dcf8f92f1ff8b371b4c6810fb
+    storybook: ^8.4.6
+  checksum: 72915e83a3cbae4c302d76721f1b3446455f7dbc49f76234e8b25f673cf69f448a1c3aeae121e800bec4aee35c55031ef1b430a0827e358c6dce4ee17375704a
   languageName: node
   linkType: hard
 
-"@storybook/addon-highlight@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-highlight@npm:8.4.5"
+"@storybook/addon-highlight@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-highlight@npm:8.4.6"
   dependencies:
     "@storybook/global": ^5.0.0
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: 8caa57aaee1a6704e757d4711899683d83778ad426015871f93cbb4e44ffb07a7a5e81a1bed7c36b335fa3687ce36f7a6f41738aa040bfbeea623100ed831090
+    storybook: ^8.4.6
+  checksum: 6549a3e859f3ed20a7defe73fa91eda0753d6412210a1c0fdcbc51c48f55a963064743224b56285b4c9d7d42a8fc195cbd5c052ac992c34fbcec798de9368e98
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:^8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-interactions@npm:8.4.5"
+"@storybook/addon-interactions@npm:^8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-interactions@npm:8.4.6"
   dependencies:
     "@storybook/global": ^5.0.0
-    "@storybook/instrumenter": 8.4.5
-    "@storybook/test": 8.4.5
+    "@storybook/instrumenter": 8.4.6
+    "@storybook/test": 8.4.6
     polished: ^4.2.2
     ts-dedent: ^2.2.0
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: ded85ef9b78e657a919bfaf7de4b616419e28d89ea74d9990016f699194ad02bb65116a950d6a5b6de6127c44932066ad020898be0fdf50a19dea4e9a662f2bd
+    storybook: ^8.4.6
+  checksum: 7ab3e92943b4073c54546a4fb6e1760524f8af60b3acd18ddac57b164094984f3331b76b9b35ee5d05c820bcf34d6e254ad93346fbf352030641a7b599deff89
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-measure@npm:8.4.5"
+"@storybook/addon-measure@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-measure@npm:8.4.6"
   dependencies:
     "@storybook/global": ^5.0.0
     tiny-invariant: ^1.3.1
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: c6e177f8c2ae68984cde8502cf303c4ee69798cd3b9453aea9a8df5c30d42f4ec8b58d416ee8fdd2f5110c3d837c871e96953bf62225b13476da0dc8cfe6e7e0
+    storybook: ^8.4.6
+  checksum: 30a73659f2eafea2cfcd4727c6af159739e33d8de6e7aa9703311d4de1c752f512a0cdbea76079a6169f5bcbdd0519771284d18d050374e3e4721d12d780fe9b
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-outline@npm:8.4.5"
+"@storybook/addon-outline@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-outline@npm:8.4.6"
   dependencies:
     "@storybook/global": ^5.0.0
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: 41567f91cee84920d66f657b40f262c95a9a046aed6e9db161624d6adcf77ce9acb7d433c7f9e929da4dee048e0842015d0bc51a63fb8468f69f560067e5234f
+    storybook: ^8.4.6
+  checksum: 82b864ecc476d1c8b2ff8ccb587868b7a81610f527706873fbe4846a31f865b5c8bc17c3f59991ba73b0c200ecd06b1a4d75c5903024f7763cd0a0d1efcba322
   languageName: node
   linkType: hard
 
@@ -17312,34 +17312,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-themes@npm:^8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-themes@npm:8.4.5"
+"@storybook/addon-themes@npm:^8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-themes@npm:8.4.6"
   dependencies:
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: 0f76936ce687d126d886cc8f7080a15717cee3fe4ff7286f4a0a5da302edf38c14d5feb9c536078d982d268b118a9f38ea97ad310ce43326da959210450995f7
+    storybook: ^8.4.6
+  checksum: 6f41a7c2de3158320e3af3ce134e1b4d0dd26ba34fd7545c02e87557348498fd815dfba4f350d5c98c078768e773d43bd1a84d06110e0d55dac7897e68d2d58f
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-toolbars@npm:8.4.5"
+"@storybook/addon-toolbars@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-toolbars@npm:8.4.6"
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: fa914838d23b68199c355672674ad6f84bd3db0f2b961fd05ebba916a8c1dd1026ed9568ae97b34e9b0d657d4d4d9d64d69431d6c6a04b2e4bb39d4ddc93446c
+    storybook: ^8.4.6
+  checksum: 7b5737c2d1eb62ab8ce3245b3791ab0000b745aab9094beca52a146af335c4caf9df9429d9f868184e3ff05ba8952a5f2d5bc82f7a863a67fec24f22abf90d4d
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/addon-viewport@npm:8.4.5"
+"@storybook/addon-viewport@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/addon-viewport@npm:8.4.6"
   dependencies:
     memoizerific: ^1.11.3
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: 72d70129e8d4c223608a66a7e6630be21ee05f403ef54afc72344489655e38256d644503f74ed9f363a18d967f22fa9da36ce4bc082b6a464c4fdb5e50d598ce
+    storybook: ^8.4.6
+  checksum: ada45a76dc0311a7c8b8740ef6ca5f7f78201252d2157595a01c50f7de3773ebda4daf3a7ad0744687c8d6cbf730fc8c731b229029068ff6020eb09d9ed03e93
   languageName: node
   linkType: hard
 
@@ -17353,9 +17353,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/blocks@npm:8.4.5, @storybook/blocks@npm:^8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/blocks@npm:8.4.5"
+"@storybook/blocks@npm:8.4.6, @storybook/blocks@npm:^8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/blocks@npm:8.4.6"
   dependencies:
     "@storybook/csf": ^0.1.11
     "@storybook/icons": ^1.2.12
@@ -17363,21 +17363,21 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.4.5
+    storybook: ^8.4.6
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: f80d320d75fc74cd15c7b3a4d58de286f617120829bb5c319f845d2e2310ef2f2e159e69cf3fd3906c8be47e34cd95e879c565d09f0bfe360e73df694c90bd79
+  checksum: 355c242c2dbc0ae11816b1882673db4e2c2ffe354284a023717d29ef23a623f1b0ff945798018293c20092c7a2d89d302f8ac48e6156deb90f313a426a9d1c74
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack5@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/builder-webpack5@npm:8.4.5"
+"@storybook/builder-webpack5@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/builder-webpack5@npm:8.4.6"
   dependencies:
-    "@storybook/core-webpack": 8.4.5
+    "@storybook/core-webpack": 8.4.6
     "@types/node": ^22.0.0
     "@types/semver": ^7.3.4
     browser-assert: ^1.2.1
@@ -17403,38 +17403,38 @@ __metadata:
     webpack-hot-middleware: ^2.25.1
     webpack-virtual-modules: ^0.6.0
   peerDependencies:
-    storybook: ^8.4.5
+    storybook: ^8.4.6
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 7cc0ae634687d75a0a955b9182ddf3341c4eb3197c8e9e772029a5a3c7da8018da9484361fa2a44e1fcaa43728432cd1bc842b05acb7595e929c6850d48d09f7
+  checksum: 8a45e5089ff5d644426fe5131718d53aefc2c4d638cfaa07cef7bfcec325cac000932d18e732df7899bb89f100e401c32b6a06f0787fd290153d949087daf2d4
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/components@npm:8.4.5"
+"@storybook/components@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/components@npm:8.4.6"
   peerDependencies:
     storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: dd14e0a2d40f6590fd92204f3b40d4437403b7be311fa797250bd71fe4b38ade78389d41d2617fa5e75cfa0e1538366ca1154149c0894433245c23cebc4dfc73
+  checksum: 66b08f840017e279274a0be2d9cba9edaa50139d5d7cdd9f148ff815f693db0026531e3e15efc9706c9e32aeccb0a97717aca7b81a2119b79f5875a69f0b81a3
   languageName: node
   linkType: hard
 
-"@storybook/core-webpack@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/core-webpack@npm:8.4.5"
+"@storybook/core-webpack@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/core-webpack@npm:8.4.6"
   dependencies:
     "@types/node": ^22.0.0
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: 72760a54f3b6c7e87889e773e062ea8d7543375a950396f03e8a979fa586ebbe766b9d629432cbc8a07f74e24b0d9fdbe4bbdc39fe1269d706fce0ce3c0aeeae
+    storybook: ^8.4.6
+  checksum: d42870e9225d561618115631240728df16cc36e08a7a8e4b68701f28341a289cfb110b4333158e24ea975d18df30412d11808b5be407141db704dd932e59d531
   languageName: node
   linkType: hard
 
-"@storybook/core@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/core@npm:8.4.5"
+"@storybook/core@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/core@npm:8.4.6"
   dependencies:
     "@storybook/csf": ^0.1.11
     better-opn: ^3.0.2
@@ -17452,18 +17452,18 @@ __metadata:
   peerDependenciesMeta:
     prettier:
       optional: true
-  checksum: cfc7c93508befaed12314c61a64d892f543c16cff61b841ab5d74f666b88f6778aa3dd84095325074d4bc85bfde99a69ffc674e93200b457e33784b3ceccf730
+  checksum: c9c4b5aa1f49ee8e3b51c2e179cbafd6826415e6a788a0b11a04bf0dedbbb56b81dd187719086cdeb695fa31c46709dc6184027e2938eb5fc9ab41c4ed2b15d7
   languageName: node
   linkType: hard
 
-"@storybook/csf-plugin@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/csf-plugin@npm:8.4.5"
+"@storybook/csf-plugin@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/csf-plugin@npm:8.4.6"
   dependencies:
     unplugin: ^1.3.1
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: df59430f3f212ad8a11efdfa3ef01d8fa73322233338488fb97a9e2e031c4846a6b307acbf16edd72ab8edb02e86740b5a0fff0e0dec4dd15850573a92831c98
+    storybook: ^8.4.6
+  checksum: e09a2175bc3af950668a307626bcc68b51c88b8404e39f2a57942097ff638b5c997aafaaf694493dac611b11572863f8a9cb6246c0b117a07c0d650299fff620
   languageName: node
   linkType: hard
 
@@ -17493,24 +17493,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/instrumenter@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/instrumenter@npm:8.4.5"
+"@storybook/instrumenter@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/instrumenter@npm:8.4.6"
   dependencies:
     "@storybook/global": ^5.0.0
     "@vitest/utils": ^2.1.1
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: 14093e36b14871e74331074b7261f9103ddfe1233dffa7f722a8e36c955cb5812d7e3a202b8a7673dbdceb10853d0989cef1ff8e928b058635b2032188905842
+    storybook: ^8.4.6
+  checksum: faa8e6ec52a4e8ef0313601e477cc1a8097960774f5d98bc2e928539dc785eaf5c7e0659fe8013f0c18c09222de92fb68667e728219d73d3b39b3bafe3bb815c
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/manager-api@npm:8.4.5"
+"@storybook/manager-api@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/manager-api@npm:8.4.6"
   peerDependencies:
     storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: f6bc0ef3703afceedb862b77f22e169a173525c6d0483ba4ae5d1daf5b19c8077b33ef3fd634571e3ded93b2d4bd4a9e182c23d4395d1bfe8fdb6c98bdcc119f
+  checksum: f6deb13cc36852681a54a0a7ec4fed17dab7ae496f07b667e5550950186fd5569b53a21ea0a1416997cda202d47710684bc2da251cb3ea495f59160199e52076
   languageName: node
   linkType: hard
 
@@ -17523,12 +17523,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/preset-react-webpack@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/preset-react-webpack@npm:8.4.5"
+"@storybook/preset-react-webpack@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/preset-react-webpack@npm:8.4.6"
   dependencies:
-    "@storybook/core-webpack": 8.4.5
-    "@storybook/react": 8.4.5
+    "@storybook/core-webpack": 8.4.6
+    "@storybook/react": 8.4.6
     "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0
     "@types/node": ^22.0.0
     "@types/semver": ^7.3.4
@@ -17542,20 +17542,20 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.4.5
+    storybook: ^8.4.6
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 059e35135c7770daf49338bf72d999b277cadec1c7f21175eac962448789fc1c2964e37973d8c18bf4a374a8838bdf369e0c2935cb188ffbd860d60cadda3c2e
+  checksum: 90d2e9ce23354117442f8aec01ee4af819d94ec170befe25cf2477e11bdf480c2cbcb3736547f82b58f4261cc78fe47060d635eb1d5138ff317c4d684a00d534
   languageName: node
   linkType: hard
 
-"@storybook/preview-api@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/preview-api@npm:8.4.5"
+"@storybook/preview-api@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/preview-api@npm:8.4.6"
   peerDependencies:
     storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: 832bee373583fb55102459445ae7f3e8bca0ff80a4220aa656bf6baf8661e0c65184f080b1e10695f8fbb948fd8d48cc9728d19d1bc6993418251126380d4818
+  checksum: 9771ea6d3e3a6d48ca926293d6521caeec370f7c51527400ec9d184c9b41c580567f00661a568d66eb5d34b9a7e8703e3c2cc9b1cf91be6acb324d134c7c9f02
   languageName: node
   linkType: hard
 
@@ -17577,86 +17577,86 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/react-dom-shim@npm:8.4.5"
+"@storybook/react-dom-shim@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/react-dom-shim@npm:8.4.6"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.4.5
-  checksum: b1f176b85783bfa9c43f49a7ef69c04ff92079e5ba8ca76b1b9f46b814c19db6e882137c35ebd91424e2e51bfa0d34eb3f0b84d4ed9e8a2b93875b7f5563b310
+    storybook: ^8.4.6
+  checksum: d64daafa29ec8e1cfc29fbfd75ade6ae3287c69d28022cd1d7966bc2cbd75911237cf53db68e5c8c787452e69f36f7ba1aba2f981732684343d16b79cb3c5d07
   languageName: node
   linkType: hard
 
-"@storybook/react-webpack5@npm:^8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/react-webpack5@npm:8.4.5"
+"@storybook/react-webpack5@npm:^8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/react-webpack5@npm:8.4.6"
   dependencies:
-    "@storybook/builder-webpack5": 8.4.5
-    "@storybook/preset-react-webpack": 8.4.5
-    "@storybook/react": 8.4.5
+    "@storybook/builder-webpack5": 8.4.6
+    "@storybook/preset-react-webpack": 8.4.6
+    "@storybook/react": 8.4.6
     "@types/node": ^22.0.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.4.5
+    storybook: ^8.4.6
     typescript: ">= 4.2.x"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: d15986993f0353b7a4a88945f560e47b24849cc202f16e5ab7ce469bfdc507377d58d638f1ae04c34a506ec6343327920fdb225be5621b44f659ca4073da3d24
+  checksum: 2f030a55c57effc813e242349ce5317e5b425f422af1786d2b4eabc5d7175009223c14b43dced04e2ab9554cde5c886a5318fc4c68fcccdf2cdf5f5eaef24c62
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:8.4.5, @storybook/react@npm:^8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/react@npm:8.4.5"
+"@storybook/react@npm:8.4.6, @storybook/react@npm:^8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/react@npm:8.4.6"
   dependencies:
-    "@storybook/components": 8.4.5
+    "@storybook/components": 8.4.6
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 8.4.5
-    "@storybook/preview-api": 8.4.5
-    "@storybook/react-dom-shim": 8.4.5
-    "@storybook/theming": 8.4.5
+    "@storybook/manager-api": 8.4.6
+    "@storybook/preview-api": 8.4.6
+    "@storybook/react-dom-shim": 8.4.6
+    "@storybook/theming": 8.4.6
   peerDependencies:
-    "@storybook/test": 8.4.5
+    "@storybook/test": 8.4.6
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.4.5
+    storybook: ^8.4.6
     typescript: ">= 4.2.x"
   peerDependenciesMeta:
     "@storybook/test":
       optional: true
     typescript:
       optional: true
-  checksum: ea3f2008186d7b3556cdb1b0942ce2cb0b7d52ee322e3680f6f32f5a723a2d676fe4ba2bc2ea0060112453cd8652861c0b2d154a5c34e7d5b69ead9603c2ce68
+  checksum: 43f9cf0d35a1a87c0295305f6eb43be135de86d70b16ba197e474ac854b53b3232c369f392f4023587ec83ce2e9055b0c93e42fd3851e1652f6c5614bafc4827
   languageName: node
   linkType: hard
 
-"@storybook/test@npm:8.4.5, @storybook/test@npm:^8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/test@npm:8.4.5"
+"@storybook/test@npm:8.4.6, @storybook/test@npm:^8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/test@npm:8.4.6"
   dependencies:
     "@storybook/csf": ^0.1.11
     "@storybook/global": ^5.0.0
-    "@storybook/instrumenter": 8.4.5
+    "@storybook/instrumenter": 8.4.6
     "@testing-library/dom": 10.4.0
     "@testing-library/jest-dom": 6.5.0
     "@testing-library/user-event": 14.5.2
     "@vitest/expect": 2.0.5
     "@vitest/spy": 2.0.5
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: b04d3ee38cf60557d9ac1fe58f4cdbaee72d3fe2818530fc360fae7edfb18794e2b7be4748d00511c4682727743f8828efefe1bae7fffb28ad05b53f821bb5e9
+    storybook: ^8.4.6
+  checksum: 0d8f1c5cb2d15aa2a86e4beae596b8ce34a34ab09cb4470fcdb6cee7454f60f86166ad0c42a7b1889a29a144c11627a898cf3f838a1fde0c75818c59f7aa6b19
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/theming@npm:8.4.5"
+"@storybook/theming@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/theming@npm:8.4.6"
   peerDependencies:
     storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: 0eefd3a3bea58e557f1e303270910046f05aa971ceba6ca6c1cd706c25b537243be6663dba5b2b3aa2edb7fc40279e93403131d76eae7da26da70f8a1c8d1c96
+  checksum: 364c7c8d66f523d5dec020157ae5dd86ac976b988f1c61cff61ae141ed906d4c8693f2361eb3b1709409c62f246537e68a3ad6c8d7c7d5c39d7df5bd1c39a815
   languageName: node
   linkType: hard
 
@@ -43647,11 +43647,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:^8.4.5":
-  version: 8.4.5
-  resolution: "storybook@npm:8.4.5"
+"storybook@npm:^8.4.6":
+  version: 8.4.6
+  resolution: "storybook@npm:8.4.6"
   dependencies:
-    "@storybook/core": 8.4.5
+    "@storybook/core": 8.4.6
   peerDependencies:
     prettier: ^2 || ^3
   peerDependenciesMeta:
@@ -43661,7 +43661,7 @@ __metadata:
     getstorybook: ./bin/index.cjs
     sb: ./bin/index.cjs
     storybook: ./bin/index.cjs
-  checksum: 3495183749b760da077b2ede7607884c62f6707412e91defbe20328b275b78528fcef350453ad95642a52b97eded50f2c5374e94fb422a3b39587de364d87ee8
+  checksum: af1295778a99d504f6200d9594a517a58e0e8ccf2d5f2706e9716eb2e60ac4475bb558d811d4b51bc7feb0c21701a3801e09a4d52b453e1f94ce28b13be1a50f
   languageName: node
   linkType: hard
 

From ad1af818f7e8d6f0559ee17b53783b77568724a7 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 3 Dec 2024 14:36:02 +0000
Subject: [PATCH 2/5] Update API report

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/.storybook/manager.ts |  4 +---
 packages/canon/report.api.md         | 26 ++++++++++++++------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/canon/.storybook/manager.ts b/packages/canon/.storybook/manager.ts
index 8557b339b0..c88b10b392 100644
--- a/packages/canon/.storybook/manager.ts
+++ b/packages/canon/.storybook/manager.ts
@@ -3,10 +3,8 @@ import { create } from '@storybook/theming';
 
 const theme = create({
   base: 'light',
-  brandTitle: 'My custom Storybook',
-  brandUrl: 'https://example.com',
+  brandTitle: 'Canon',
   brandImage: 'logo.svg',
-  brandTarget: '_self',
 });
 
 addons.setConfig({
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index e98d57a13d..baa4a99d3f 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -115,15 +115,9 @@ export const breakpoints: {
 };
 
 // @public (undocumented)
-export const Button: ({
-  size,
-  variant,
-  children,
-  disabled,
-  iconStart,
-  iconEnd,
-  ...props
-}: ButtonProps) => React_2.JSX.Element;
+export const Button: React_2.ForwardRefExoticComponent<
+  ButtonProps & React_2.RefAttributes<HTMLButtonElement>
+>;
 
 // @public
 export interface ButtonProps {
@@ -138,7 +132,7 @@ export interface ButtonProps {
   // (undocumented)
   size?: 'small' | 'medium';
   // (undocumented)
-  variant?: 'primary' | 'secondary';
+  variant?: 'primary' | 'secondary' | 'tertiary';
 }
 
 // @public (undocumented)
@@ -191,6 +185,14 @@ export type IconNames =
   | 'arrowLeft'
   | 'arrowRight'
   | 'arrowUp'
+  | 'arrowDownCircle'
+  | 'arrowLeftCircle'
+  | 'arrowRightCircle'
+  | 'arrowUpCircle'
+  | 'chevronDown'
+  | 'chevronLeft'
+  | 'chevronRight'
+  | 'chevronUp'
   | 'cloud'
   | 'heart'
   | 'plus'
@@ -264,13 +266,13 @@ export type Space = keyof typeof space;
 // @public (undocumented)
 export const space: {
   none: number;
-  xxs: string;
+  '2xs': string;
   xs: string;
   sm: string;
   md: string;
   lg: string;
   xl: string;
-  xxl: string;
+  '2xl': string;
 };
 
 // @public (undocumented)

From 6bdc5a7d7609cb755c6ef1ff9bd1af0f56f2ccdb Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 3 Dec 2024 17:49:32 +0000
Subject: [PATCH 3/5] Delete button.css.ts

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Button/button.css.ts | 75 -------------------
 1 file changed, 75 deletions(-)
 delete mode 100644 packages/canon/src/components/Button/button.css.ts

diff --git a/packages/canon/src/components/Button/button.css.ts b/packages/canon/src/components/Button/button.css.ts
deleted file mode 100644
index 9d6c8867c3..0000000000
--- a/packages/canon/src/components/Button/button.css.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { recipe } from '@vanilla-extract/recipes';
-
-export const button = recipe({
-  base: {
-    all: 'unset',
-    display: 'inline-flex',
-    alignItems: 'center',
-    userSelect: 'none',
-    fontFamily: 'var(--canon-font-sans)',
-    fontWeight: 600,
-    fontSize: '0.875rem',
-    lineHeight: '1.5',
-    padding: 0,
-    transition: 'all 150ms ease',
-    cursor: 'pointer',
-  },
-  variants: {
-    variant: {
-      primary: {
-        backgroundColor: 'var(--button-primary-background-color)',
-        color: 'var(--button-primary-text-color)',
-        borderRadius: 'var(--button-primary-border-radius)',
-        border: `1px solid var(--button-primary-border-color)`,
-        '&:hover': {
-          backgroundColor: 'var(--button-primary-background-color-hover)',
-          borderColor: 'var(--button-primary-border-color-hover)',
-        },
-      },
-      secondary: {
-        backgroundColor: 'transparent',
-        color: 'var(--button-secondary-text-color)',
-        borderRadius: 'var(--button-secondary-border-radius)',
-        border: `1px solid var(--button-secondary-border-color)`,
-        '&:hover': {
-          backgroundColor: 'var(--button-secondary-background-color-hover)',
-          borderColor: 'var(--button-secondary-border-color-hover)',
-        },
-      },
-    },
-    size: {
-      small: {
-        paddingLeft: '16px',
-        paddingRight: '16px',
-        height: 'var(--button-size-small)',
-      },
-      medium: {
-        paddingLeft: '32px',
-        paddingRight: '32px',
-        height: 'var(--button-size-medium)',
-      },
-    },
-    disabled: {
-      true: {
-        opacity: 0.3,
-        cursor: 'not-allowed',
-      },
-    },
-  },
-});

From d3268ab4fa9085729abc050b6dd2da18afb2ba19 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 5 Dec 2024 12:36:37 +0000
Subject: [PATCH 4/5] Fix dark mode

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/docs/Theme.mdx                 |  6 ++---
 .../LayoutComponents/layout-components.css.ts |  4 ++--
 packages/canon/src/components/Box/box.css.ts  |  2 +-
 .../canon/src/components/Button/styles.css    | 13 ++++++++--
 packages/canon/src/theme/theme.css            | 24 +++++++++++++------
 5 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/packages/canon/docs/Theme.mdx b/packages/canon/docs/Theme.mdx
index cab948c6ba..3d76b4e998 100644
--- a/packages/canon/docs/Theme.mdx
+++ b/packages/canon/docs/Theme.mdx
@@ -38,7 +38,7 @@ import * as Table from './components/Table';
   --canon-outline-focus: #ccc;
   --canon-text-primary: #f0f0f0;
   --canon-text-secondary: #666;
-  --canon-font-sans: 'Geist', serif;
+  --canon-font-regular: 'Geist', serif;
   --canon-font-mono: 'Monospace', monospace;
   /* ... other values */
 }
@@ -53,7 +53,7 @@ import * as Table from './components/Table';
   --canon-outline-focus: #ccc;
   --canon-text-primary: #fff;
   --canon-text-secondary: #666;
-  --canon-font-sans: 'Geist', serif;
+  --canon-font-regular: 'Geist', serif;
   --canon-font-mono: 'Monospace', monospace;
   /* ... other values */
 }
@@ -144,7 +144,7 @@ import * as Table from './components/Table';
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-font-sans</Chip>
+        <Chip head>--canon-font-regular</Chip>
       </Table.Cell>
       <Table.Cell>The sans-serif font for the theme.</Table.Cell>
     </Table.Row>
diff --git a/packages/canon/docs/components/LayoutComponents/layout-components.css.ts b/packages/canon/docs/components/LayoutComponents/layout-components.css.ts
index a8440dd01f..dcdaff2662 100644
--- a/packages/canon/docs/components/LayoutComponents/layout-components.css.ts
+++ b/packages/canon/docs/components/LayoutComponents/layout-components.css.ts
@@ -52,7 +52,7 @@ export const content = style({
 
 export const title = style({
   fontSize: '16px',
-  fontFamily: 'var(--canon-font-sans)',
+  fontFamily: 'var(--canon-font-regular)',
   transition: 'color 0.2s ease-in-out',
   marginBottom: '0.25rem',
   selectors: {
@@ -64,7 +64,7 @@ export const title = style({
 
 export const description = style({
   fontSize: '16px',
-  fontFamily: 'var(--canon-font-sans)',
+  fontFamily: 'var(--canon-font-regular)',
   color: '#9e9e9e',
 });
 
diff --git a/packages/canon/src/components/Box/box.css.ts b/packages/canon/src/components/Box/box.css.ts
index 92af783eec..a3e49162fd 100644
--- a/packages/canon/src/components/Box/box.css.ts
+++ b/packages/canon/src/components/Box/box.css.ts
@@ -17,6 +17,6 @@
 import { style } from '@vanilla-extract/css';
 
 export const base = style({
-  fontFamily: 'var(--canon-font-sans)',
+  fontFamily: 'var(--canon-font-regular)',
   color: 'var(--canon-text-primary)',
 });
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index 07d3048397..aaf1cae8bf 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -20,7 +20,7 @@
   align-items: center;
   justify-content: center;
   user-select: none;
-  font-family: var(--canon-font-sans);
+  font-family: var(--canon-font-regular);
   font-weight: var(--canon-font-bold);
   font-size: var(--canon-font-sizes-md);
   padding: 0;
@@ -47,7 +47,16 @@
 }
 
 .button.secondary:hover {
-  box-shadow: 0 0 0 1px var(--canon-outline-focus);
+  box-shadow: 0 0 0 1px var(--canon-outline-hover);
+}
+
+.button.tertiary {
+  background-color: transparent;
+  color: var(--canon-text-primary);
+}
+
+.button.tertiary:hover {
+  color: var(--canon-text-secondary);
 }
 
 .button.small {
diff --git a/packages/canon/src/theme/theme.css b/packages/canon/src/theme/theme.css
index 0bb95d4270..6784cb336f 100644
--- a/packages/canon/src/theme/theme.css
+++ b/packages/canon/src/theme/theme.css
@@ -41,13 +41,13 @@
   --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2);
 
   /* Font families */
-  --canon-font-sans: 'Geist', serif;
+  --canon-font-regular: 'Geist', serif;
   --canon-font-monospace: 'Monospace', monospace;
   --canon-font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
     'Noto Color Emoji';
 
   /* Font weights */
-  --canon-font-regular: 400;
+  --canon-font-normal: 400;
   --canon-font-bold: 600;
 
   /* Font sizes */
@@ -78,12 +78,22 @@
 
 /* Dark theme */
 [data-theme='dark'] {
+  /* Colors */
   --canon-accent: #fff;
   --canon-background: #000;
   --canon-surface-1: #121212;
-  --canon-surface-2: #292929;
-  --canon-outline: #666;
-  --canon-outline-focus: #ccc;
-  --canon-text-primary: #000;
-  --canon-text-secondary: #666;
+  --canon-surface-2: #1a1a1a;
+
+  /* Outlines */
+  --canon-outline: rgba(255, 255, 255, 0.1);
+  --canon-outline-hover: rgba(255, 255, 255, 0.2);
+  --canon-outline-focus: #fff;
+
+  /* States - Add more states */
+  --canon-error: #f50000;
+
+  /* Text colors */
+  --canon-text-primary: #fff;
+  --canon-text-primary-on-accent: #000;
+  --canon-text-secondary: #b3b3b3;
 }

From 347ec8b0f2f92b5535a9199907c3feb2871c8773 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 5 Dec 2024 12:39:50 +0000
Subject: [PATCH 5/5] Move props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/src/components/Button/Button.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index 3807c60f7e..b168705952 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -34,18 +34,16 @@ export interface ButtonProps {
 
 /** @public */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
+  (props: ButtonProps, ref) => {
+    const {
       size = 'medium',
       variant = 'primary',
-      children,
       disabled,
       iconStart,
       iconEnd,
-      ...props
-    }: ButtonProps,
-    ref,
-  ) => {
+      children,
+    } = props;
+
     return (
       <button
         {...props}