✨(react) introduce large and extra-large new modal sizes

We realized it was missing an in between medium and large existing
modal sizes. The old large now become extra-large.

Closes #313

packages/react/src/components/Modal/index.scss

@@ -139,6 +139,22 @@
   &--large {
     width: var(--c--components--modal--width-large);
 
+    @include media(lg) {
+      width: calc(100vw - 4rem);
+    }
+
+    @include media(md) {
+      width: calc(100vw - 2rem);
+    }
+
+    .c__modal__title-icon {
+        --icon-size: 4rem;
+    }
+  }
+
+  &--extra-large {
+    width: var(--c--components--modal--width-extra-large);
+
     @include media(md) {
       width: calc(100vw - 1rem);
     }

packages/react/src/components/Modal/index.stories.tsx

@@ -56,6 +56,11 @@ export const Large: Story = {
     size: ModalSize.LARGE,
   },
 };
+export const ExtraLarge: Story = {
+  args: {
+    size: ModalSize.EXTRA_LARGE,
+  },
+};
 export const Full: Story = {
   args: {
     size: ModalSize.FULL,

packages/react/src/components/Modal/index.tsx

@@ -9,6 +9,7 @@ export enum ModalSize {
   SMALL = "small",
   MEDIUM = "medium",
   LARGE = "large",
+  EXTRA_LARGE = "extra-large",
   FULL = "full",
 }
 

packages/react/src/components/Modal/tokens.ts

@@ -15,6 +15,7 @@ export const tokens = (defaults: DefaultTokens) => {
     "content-color": defaults.theme.colors["greyscale-800"],
     "width-small": "300px",
     "width-medium": "600px",
-    "width-large": "75%",
+    "width-large": "800px",
+    "width-extra-large": "75%",
   };
 };