Merged in feat/sw-3218-move-sidepeek-to-design-system (pull request #2598)

feat(SW-3218): Move SidePeek to design-system

* Remove SidePeekProvider dependency on Next

* Remove dependency on i18n in sidepeek

* Inline types

* Move SidePeek to design-system

* Fix align-items value


Approved-by: Bianca Widstam

packages/design-system/lib/components/SidePeek/sidePeek.module.css

@@ -0,0 +1,91 @@
+.modal {
+  --sidepeek-desktop-width: 560px;
+}
+
+@keyframes slide-in {
+  from {
+    right: calc(-1 * var(--sidepeek-desktop-width));
+  }
+
+  to {
+    right: 0;
+  }
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--sidepeek-z-index);
+  background-color: var(--UI-Opacity-Almost-Black-30);
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: var(--Background-Primary);
+  z-index: var(--sidepeek-z-index);
+  outline: none;
+}
+
+.modal[data-entering] {
+  animation: slide-in 250ms;
+}
+
+.modal[data-exiting] {
+  animation: slide-in 250ms reverse;
+}
+
+.dialog {
+  height: 100%;
+  outline: none;
+}
+
+.sidePeek {
+  position: relative;
+  display: grid;
+  grid-template-rows: min-content auto;
+  height: 100dvh;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+  align-items: flex-start;
+  padding: var(--Spacing-x4);
+}
+
+.header:has(> h2) {
+  justify-content: space-between;
+}
+
+.closeButton {
+  padding: 0;
+}
+
+.heading {
+  color: var(--Text-Heading);
+  text-wrap: balance;
+  hyphens: auto;
+}
+
+.sidePeekContent {
+  padding: var(--Spacing-x4);
+  overflow-y: auto;
+}
+
+@media screen and (min-width: 1367px) {
+  .modal {
+    top: 0;
+    right: 0px;
+    width: var(--sidepeek-desktop-width);
+    height: 100vh;
+  }
+}