@orangesk/orange-design-system 2.2.0 → 3.1.0

package/src/assets/icons/pictogram-tariffs--dark.svg

@@ -1,9 +1,5 @@
-<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_3153_368" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="61" height="60">
-<path d="M60.9375 0H0V60H60.9375V0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_3153_368)">
-<path d="M45.0009 52.5C45.0009 54.0532 43.7415 55.3123 42.1884 55.3125H18.2812C16.7279 55.3125 15.4688 54.0533 15.4688 52.5V51.0938H45.0009V52.5ZM45.0009 49.6865H15.4688V10.3115H45.0009V49.6865ZM42.1884 4.6875C43.7415 4.68769 45.0009 5.94682 45.0009 7.5V8.90625H15.4688V7.5C15.4688 5.9467 16.7279 4.6875 18.2812 4.6875H42.1884Z" fill="#DA8436"/>
-<path d="M33.5927 33.4381C30.8936 30.7332 28.3136 27.6002 29.5475 26.3652C32.6498 23.2568 32.8566 23.4989 29.7228 19.5941C26.582 15.6857 26.7082 16.3874 22.7752 20.401C20.707 22.6323 22.67 29.7684 29.9612 37.0658C37.2593 44.3632 44.5785 46.2437 46.6187 44.2615C50.8076 40.097 51.1371 40.3321 47.4249 37.3149C43.5234 34.1714 43.7513 34.3959 40.6595 37.4903C39.4257 38.7218 36.2954 36.1361 33.5927 33.4346V33.4381Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
+<svg width="64" height="63" viewBox="0 0 64 63" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M47.9845 55.2031C47.9845 56.834 46.6632 58.156 45.0337 58.1562H19.9507C18.321 58.1562 17 56.8341 17 55.2031V53.7266H47.9845V55.2031ZM47.9845 52.2489H17V10.9052H47.9845V52.2489ZM45.0337 5C46.6632 5.0002 47.9845 6.32229 47.9845 7.95312V9.42969H17V7.95312C17 6.32216 18.321 5 19.9507 5H45.0337Z" fill="#DA8436"/>
+  <path d="M28.3955 16.9315C29.3106 16.7289 30.0633 17.1272 30.6885 17.6636C31.2915 18.1809 31.9623 18.9853 32.7725 19.9943C33.5799 21.0011 34.2246 21.8033 34.6516 22.4624C35.073 23.1128 35.409 23.8066 35.3637 24.5819C35.3178 25.3658 34.8962 25.9905 34.4324 26.5332C33.9708 27.0731 33.2937 27.7204 32.5133 28.503C32.5044 28.5119 32.4993 28.5179 32.4938 28.545C32.4858 28.5855 32.479 28.6799 32.5153 28.8475C32.5918 29.1997 32.8178 29.6957 33.2254 30.3241C34.0282 31.5617 35.3405 33.0219 36.7377 34.4246C36.7439 34.4305 36.751 34.4359 36.7571 34.442C38.1641 35.8495 39.631 37.1732 40.8729 37.9827C41.5008 38.392 41.9966 38.6194 42.3483 38.6964C42.5163 38.7331 42.61 38.7259 42.6496 38.7179C42.6761 38.7126 42.6801 38.7079 42.6885 38.6995C43.4656 37.9211 44.1105 37.2441 44.6485 36.782C45.1896 36.3174 45.8133 35.8948 46.5963 35.8468C47.3718 35.7994 48.0664 36.1341 48.7182 36.5564C49.2135 36.8773 49.7883 37.3209 50.4692 37.8648L51.1864 38.4411L51.1895 38.4441C52.1357 39.2138 52.9199 39.8499 53.4324 40.4129C53.9576 40.99 54.4029 41.7113 54.2479 42.6288C54.1159 43.4096 53.5679 44.0935 52.9877 44.7247C52.3772 45.3887 51.4918 46.232 50.4211 47.2974L50.4129 47.3056C49.5955 48.1003 48.3873 48.3917 47.1137 48.3781C45.8155 48.3643 44.2904 48.0363 42.6403 47.4112C39.5407 46.2369 35.8701 43.9651 32.1977 40.458L31.4631 39.7392C27.5573 35.827 25.0365 31.9182 23.7735 28.6301C23.1431 26.9887 22.8118 25.4648 22.8033 24.1512C22.7948 22.8512 23.1056 21.6399 23.8965 20.7859L23.916 20.7644C24.907 19.7522 25.7243 18.8633 26.3535 18.2563C26.9605 17.6706 27.6259 17.1018 28.3955 16.9315ZM28.8483 18.9812C28.7232 19.009 28.4417 19.1586 27.8104 19.7677C27.2048 20.3521 26.495 21.1283 25.4344 22.2122C25.1405 22.5296 24.8952 23.1339 24.9016 24.1369C24.908 25.1265 25.1633 26.3943 25.7326 27.8765C26.8693 30.8359 29.2031 34.5046 32.9467 38.2544C36.6886 41.999 40.4006 44.3165 43.3832 45.4465C44.8776 46.0127 46.1533 46.2677 47.1362 46.2781C48.0173 46.2875 48.5518 46.1025 48.8412 45.8916L48.9508 45.7993C50.0729 44.683 50.8764 43.9194 51.4436 43.3024C52.0419 42.6517 52.1622 42.3794 52.1793 42.2791C52.1806 42.2715 52.1852 42.2639 52.166 42.2186C52.1375 42.1519 52.0637 42.0275 51.8811 41.8269C51.5003 41.4086 50.8668 40.8877 49.8658 40.0735C48.8275 39.2363 48.1245 38.6743 47.5778 38.3201C47.0225 37.9602 46.8063 37.9378 46.7244 37.9427C46.6502 37.9473 46.4686 37.9864 46.0143 38.3765C45.5573 38.769 45.0161 39.3399 44.1721 40.1853L44.1711 40.1863C43.5047 40.8519 42.6372 40.9087 41.8996 40.7472C41.1828 40.5902 40.4368 40.2047 39.7274 39.7423C38.3051 38.8151 36.7249 37.3767 35.3043 35.9576C35.294 35.9481 35.2825 35.9399 35.2725 35.9299C33.8457 34.4989 32.3971 32.9026 31.4662 31.4674C31.0053 30.7568 30.6197 30.0104 30.4641 29.2925C30.304 28.5535 30.3636 27.6854 31.0287 27.0192C31.8753 26.1703 32.4463 25.6257 32.8381 25.1674C33.2273 24.7119 33.2652 24.5318 33.2694 24.4588C33.2742 24.3772 33.251 24.1614 32.8903 23.6047C32.535 23.0564 31.9737 22.3519 31.1373 21.3088C30.3001 20.2663 29.7516 19.6252 29.3237 19.2581C29.1183 19.0819 28.9918 19.0146 28.9262 18.9904C28.8816 18.974 28.8683 18.9768 28.8483 18.9812Z" fill="white"/>
 </svg>

package/src/assets/icons/pictogram-tariffs.svg

@@ -1,9 +1,5 @@
-<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_3153_361" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="61" height="60">
-<path d="M60.9375 0H0V60H60.9375V0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_3153_361)">
-<path d="M45.0009 52.5C45.0009 54.0532 43.7415 55.3123 42.1884 55.3125H18.2812C16.7279 55.3125 15.4688 54.0533 15.4688 52.5V51.0938H45.0009V52.5ZM45.0009 49.6865H15.4688V10.3115H45.0009V49.6865ZM42.1884 4.6875C43.7415 4.68769 45.0009 5.94682 45.0009 7.5V8.90625H15.4688V7.5C15.4688 5.9467 16.7279 4.6875 18.2812 4.6875H42.1884Z" fill="#FFC48F"/>
-<path d="M33.5927 33.4381C30.8936 30.7332 28.3136 27.6002 29.5475 26.3652C32.6498 23.2568 32.8566 23.4989 29.7228 19.5941C26.582 15.6857 26.7082 16.3874 22.7752 20.401C20.707 22.6323 22.67 29.7684 29.9612 37.0658C37.2593 44.3632 44.5785 46.2437 46.6187 44.2615C50.8076 40.097 51.1371 40.3321 47.4249 37.3149C43.5234 34.1714 43.7513 34.3959 40.6595 37.4903C39.4257 38.7218 36.2954 36.1361 33.5927 33.4346V33.4381Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
+<svg width="64" height="63" viewBox="0 0 64 63" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M47.9845 55.2031C47.9845 56.834 46.6632 58.156 45.0337 58.1562H19.9507C18.321 58.1562 17 56.8341 17 55.2031V53.7266H47.9845V55.2031ZM47.9845 52.2489H17V10.9052H47.9845V52.2489ZM45.0337 5C46.6632 5.0002 47.9845 6.32229 47.9845 7.95312V9.42969H17V7.95312C17 6.32216 18.321 5 19.9507 5H45.0337Z" fill="#FFC48F"/>
+  <path d="M28.3954 16.9315C29.3106 16.7289 30.0632 17.1272 30.6884 17.6636C31.2915 18.1809 31.9623 18.9853 32.7725 19.9943C33.5798 21.0011 34.2245 21.8033 34.6516 22.4624C35.0729 23.1128 35.409 23.8066 35.3637 24.5819C35.3177 25.3658 34.8962 25.9905 34.4323 26.5332C33.9708 27.0731 33.2936 27.7204 32.5132 28.503C32.5043 28.5119 32.4993 28.5179 32.4938 28.545C32.4857 28.5855 32.479 28.6799 32.5153 28.8475C32.5917 29.1997 32.8178 29.6957 33.2253 30.3241C34.0281 31.5617 35.3405 33.0219 36.7376 34.4246C36.7439 34.4305 36.751 34.4359 36.7571 34.442C38.1641 35.8495 39.6309 37.1732 40.8729 37.9827C41.5008 38.392 41.9966 38.6194 42.3483 38.6964C42.5162 38.7331 42.6099 38.7259 42.6495 38.7179C42.6761 38.7126 42.68 38.7079 42.6885 38.6995C43.4655 37.9211 44.1104 37.2441 44.6485 36.782C45.1896 36.3174 45.8132 35.8948 46.5962 35.8468C47.3717 35.7994 48.0663 36.1341 48.7182 36.5564C49.2135 36.8773 49.7883 37.3209 50.4692 37.8648L51.1864 38.4411L51.1895 38.4441C52.1357 39.2138 52.9199 39.8499 53.4323 40.4129C53.9576 40.99 54.4028 41.7113 54.2479 42.6288C54.1159 43.4096 53.5679 44.0935 52.9876 44.7247C52.3771 45.3887 51.4918 46.232 50.421 47.2974L50.4128 47.3056C49.5955 48.1003 48.3873 48.3917 47.1137 48.3781C45.8155 48.3643 44.2903 48.0363 42.6403 47.4112C39.5407 46.2369 35.87 43.9651 32.1977 40.458L31.463 39.7392C27.5572 35.827 25.0364 31.9182 23.7735 28.6301C23.143 26.9887 22.8118 25.4648 22.8032 24.1512C22.7948 22.8512 23.1056 21.6399 23.8964 20.7859L23.9159 20.7644C24.907 19.7522 25.7243 18.8633 26.3534 18.2563C26.9604 17.6706 27.6259 17.1018 28.3954 16.9315ZM28.8483 18.9812C28.7231 19.009 28.4416 19.1586 27.8104 19.7677C27.2047 20.3521 26.495 21.1283 25.4344 22.2122C25.1404 22.5296 24.8951 23.1339 24.9016 24.1369C24.908 25.1265 25.1632 26.3943 25.7325 27.8765C26.8692 30.8359 29.2031 34.5046 32.9466 38.2544C36.6886 41.999 40.4006 44.3165 43.3831 45.4465C44.8776 46.0127 46.1532 46.2677 47.1362 46.2781C48.0173 46.2875 48.5517 46.1025 48.8411 45.8916L48.9507 45.7993C50.0728 44.683 50.8764 43.9194 51.4436 43.3024C52.0419 42.6517 52.1622 42.3794 52.1792 42.2791C52.1805 42.2715 52.1852 42.2639 52.1659 42.2186C52.1374 42.1519 52.0636 42.0275 51.8811 41.8269C51.5003 41.4086 50.8667 40.8877 49.8657 40.0735C48.8275 39.2363 48.1245 38.6743 47.5778 38.3201C47.0224 37.9602 46.8062 37.9378 46.7243 37.9427C46.6501 37.9473 46.4685 37.9864 46.0143 38.3765C45.5573 38.769 45.016 39.3399 44.1721 40.1853L44.171 40.1863C43.5047 40.8519 42.6371 40.9087 41.8995 40.7472C41.1828 40.5902 40.4367 40.2047 39.7274 39.7423C38.305 38.8151 36.7249 37.3767 35.3042 35.9576C35.294 35.9481 35.2824 35.9399 35.2725 35.9299C33.8456 34.4989 32.3971 32.9026 31.4661 31.4674C31.0052 30.7568 30.6197 30.0104 30.4641 29.2925C30.3039 28.5535 30.3635 27.6854 31.0286 27.0192C31.8753 26.1703 32.4463 25.6257 32.838 25.1674C33.2273 24.7119 33.2651 24.5318 33.2694 24.4588C33.2741 24.3772 33.251 24.1614 32.8903 23.6047C32.535 23.0564 31.9736 22.3519 31.1372 21.3088C30.3001 20.2663 29.7515 19.6252 29.3237 19.2581C29.1183 19.0819 28.9917 19.0146 28.9262 18.9904C28.8815 18.974 28.8682 18.9768 28.8483 18.9812Z" fill="black"/>
 </svg>

package/src/components/Accordion/styles/mixins.scss

@@ -5,6 +5,7 @@
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/generate";
 @use "../../../styles/tools/convert";
+@use "../../../styles/tools/layout";
 @use "../../../styles/typography/mixins" as typoMixins;
 @use "./config";
 @use "sass:math";
@@ -82,10 +83,7 @@
 @mixin body {
   margin-top: space.get();
   margin-bottom: space.get("large");
-
-  p:last-child {
-    margin-bottom: 0;
-  }
+  @include layout.reset-last-child-margin-bottom;
 }
 
 @mixin icon {

package/src/components/Card/styles/mixins.scss

@@ -1,5 +1,6 @@
 @use "./config";
 @use "../../../styles/tools/generate";
+@use "../../../styles/tools/layout";
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
@@ -37,6 +38,7 @@
 
 @mixin card-section($spacing) {
   @include card-spacing($spacing);
+  @include layout.reset-last-child-margin-bottom;
 }
 
 @mixin card-section-actions() {

package/src/components/Carousel/styles/mixins.scss

@@ -18,7 +18,6 @@
   flex-direction: column;
   margin: 0 auto;
   position: relative;
-  margin-bottom: space.get("large");
 }
 
 @mixin viewport-wrapper {

package/src/components/CarouselHero/styles/mixins.scss

@@ -1,7 +1,6 @@
 @use "sass:map" as sass-map;
 @use "sass:math";
 @use "../../../styles/tokens/base";
-@use "../../../styles/tokens/space";
 @use "../../../styles/tools/convert";
 @use "../../../styles/tools/generate";
 @use "../../../styles/tokens/breakpoint";
@@ -14,7 +13,6 @@
 @mixin base {
   margin: 0 auto;
   position: relative;
-  margin-bottom: space.get("large");
   background: var(--color-surface-primary);
   border-bottom: 1px solid var(--color-border-subtle);
 }

package/src/components/Cover/styles/mixins.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../../styles/tokens/color";
 @use "../../../styles/tools/generate";
+@use "../../../styles/tools/layout";
 @use "./config";
 
 @mixin base {
@@ -13,6 +14,7 @@
   transform: translate3d(0, 0, 0);
   z-index: 1;
   width: 100%;
+  @include layout.reset-last-child-margin-bottom;
 }
 
 @mixin content-size($size, $config: config.$sizes) {

package/src/components/FeatureAccordion/FeatureAccordion.static.ts

@@ -3,13 +3,11 @@ import toggle from "../../scripts/modules/toggleUtil";
 interface FeatureAccordionConfig {
   bodiesSelector: string;
   buttonSelector: string;
-  imageSelector: string;
 }
 
 const defaultConfig: FeatureAccordionConfig = {
   bodiesSelector: ".accordion__body",
   buttonSelector: "[data-feature-accordion-toggle]",
-  imageSelector: "[data-feature-accordion-image]",
 };
 
 export default class FeatureAccordion {
@@ -18,7 +16,6 @@ export default class FeatureAccordion {
   private bodies: HTMLElement[] = [];
   private buttons: HTMLElement[] = [];
   private images: HTMLElement[] = [];
-  private activeId: string | null = null;
 
   constructor(element: HTMLElement, config?: Partial<FeatureAccordionConfig>) {
     this.element = element;
@@ -35,8 +32,9 @@ export default class FeatureAccordion {
     this.buttons = Array.from(
       this.element.querySelectorAll(this.config.buttonSelector),
     );
-
-    this.generateImagesFromDataAttributes();
+    this.images = Array.from(
+      this.element.querySelectorAll("[data-feature-accordion-image]"),
+    ) as HTMLElement[];
 
     this.setActive(0);
 
@@ -45,71 +43,6 @@ export default class FeatureAccordion {
     });
   }
 
-  private generateImagesFromDataAttributes(): void {
-    const desktopPreview = this.element.querySelector(
-      ".feature-accordion__preview.show-md",
-    );
-
-    if (!desktopPreview) return;
-
-    const existingImages = desktopPreview.querySelectorAll(
-      this.config.imageSelector,
-    );
-
-    if (existingImages.length > 0) {
-      this.images = Array.from(existingImages) as HTMLElement[];
-      return;
-    }
-
-    this.images = [];
-
-    this.buttons.forEach((button) => {
-      const imageUrl = button.getAttribute("data-image-url");
-      const imageAlt = button.getAttribute("data-image-alt") || "";
-      const imageSrcSet = button.getAttribute("data-image-srcset");
-
-      if (!imageUrl) return;
-
-      const img = document.createElement("img");
-      img.setAttribute("data-feature-accordion-image", "");
-      img.src = imageUrl;
-      img.alt = imageAlt;
-      if (imageSrcSet) {
-        img.srcset = imageSrcSet;
-      }
-
-      desktopPreview.appendChild(img);
-      this.images.push(img);
-
-      const bodyId = button.getAttribute("aria-controls");
-      if (bodyId) {
-        const body = document.getElementById(bodyId);
-        if (body) {
-          let mobilePreview = body.querySelector(
-            ".feature-accordion__preview.hide-md",
-          );
-
-          if (!mobilePreview) {
-            mobilePreview = document.createElement("div");
-            mobilePreview.className = "feature-accordion__preview hide-md";
-            body.appendChild(mobilePreview);
-          }
-
-          const mobileImg = document.createElement("img");
-          mobileImg.setAttribute("data-feature-accordion-image", "");
-          mobileImg.src = imageUrl;
-          mobileImg.alt = imageAlt;
-          mobileImg.className = "feature-accordion__image--mobile";
-          if (imageSrcSet) {
-            mobileImg.srcset = imageSrcSet;
-          }
-
-          mobilePreview.appendChild(mobileImg);
-        }
-      }
-    });
-  }
-
   private onClick = (e: Event): void => {
     const button = e.currentTarget as HTMLElement;
     const index = this.buttons.indexOf(button);
@@ -118,7 +51,6 @@ export default class FeatureAccordion {
 
   private setActive(index: number): void {
     if (index < 0 || index >= this.buttons.length) return;
-    this.activeId = this.buttons[index].getAttribute("id");
 
     this.bodies.forEach((body) => {
       body.setAttribute("hidden", "");

package/src/components/FeatureAccordion/FeatureAccordion.tsx

@@ -4,8 +4,6 @@ import cx from "classnames";
 import React, { RefCallback, useMemo } from "react";
 import { useStatic } from "../../utils/hooks";
 import { Accordion } from "../Accordion/Accordion";
-import { Grid } from "../Grid/Grid";
-import { GridCol } from "../Grid/GridCol";
 import { Image } from "../Image";
 import FeatureAccordionStatic from "./FeatureAccordion.static";
 
@@ -19,6 +17,7 @@ export interface FeatureAccordionImageSrc {
 export interface FeatureAccordionImageResponsive {
   default: string;
   sm?: string;
+  md?: string;
   lg?: string;
   xl?: string;
   xxl?: string;
@@ -32,12 +31,21 @@ export type FeatureAccordionImage =
 interface AccordionProps {
   /** Additional CSS classes */
   className?: string;
+  /** Additional CSS classes for preview area */
+  previewClassName?: string;
 }
 
+const getImageData = (props: Record<string, any>) => ({
+  id: props.id,
+  imageSrc: props.image || props.imageUrl,
+  imageAlt: props.imageAlt,
+  imageSrcSet: props.imageSrcSet,
+});
+
 const FeatureAccordion = (
   props: AccordionProps & { children: React.ReactNode },
 ) => {
-  const { className, children, ...other } = props;
+  const { className, previewClassName, children, ...other } = props;
   const [featureAccordionRef] = useStatic(FeatureAccordionStatic);
 
   const classes = cx(CLASS_ROOT, className);
@@ -50,73 +58,29 @@ const FeatureAccordion = (
   // Extract image data once to avoid duplication
   const childrenWithImageData = useMemo(
     () =>
-      childrenArray.map((child) => ({
-        child,
-        id: child.props.id,
-        imageSrc:
-          child.props["data-image"] ||
-          child.props.image ||
-          child.props["data-image-url"] ||
-          child.props.imageUrl,
-        imageAlt: child.props["data-image-alt"] || child.props.imageAlt,
-        imageSrcSet:
-          child.props["data-image-srcset"] || child.props.imageSrcSet,
-        imageUrl: child.props["data-image-url"] || child.props.imageUrl,
-      })),
+      childrenArray.map((child) => ({ child, ...getImageData(child.props) })),
     [childrenArray],
   );
 
   return (
-    <Grid
+    <div
       className={classes}
       data-feature-accordion
       ref={featureAccordionRef as RefCallback<HTMLDivElement>}
       {...other}
     >
-      <GridCol
-        size={{
-          xs: 12,
-          md: 6,
-        }}
-        className={`${CLASS_ROOT}__accordion`}
-      >
+      <div className={`${CLASS_ROOT}__accordion`}>
         <Accordion>
-          {childrenWithImageData.map(
-            ({ child, id, imageSrc, imageAlt, imageSrcSet, imageUrl }) => {
-              if (!imageSrc) return null;
+          {childrenWithImageData.map(({ child, imageSrc }) => {
+            if (!imageSrc) return null;
 
-              return React.cloneElement(child, {
-                children: (
-                  <>
-                    <div className={`${CLASS_ROOT}__content`}>
-                      {child.props.children}
-                    </div>
-                    <div className={cx(`${CLASS_ROOT}__preview`, "hide-md")}>
-                      <Image
-                        key={id}
-                        data-feature-accordion-image
-                        src={imageSrc}
-                        alt={imageAlt}
-                        srcSet={imageSrcSet}
-                        className={`${CLASS_ROOT}__image--mobile`}
-                      />
-                    </div>
-                  </>
-                ),
-              });
-            },
-          )}
+            return child;
+          })}
         </Accordion>
-      </GridCol>
-      <GridCol
-        size={{
-          xs: 12,
-          md: 6,
-        }}
-        className={cx(`${CLASS_ROOT}__preview`, "show-md")}
-      >
+      </div>
+      <div className={cx(`${CLASS_ROOT}__preview`, previewClassName)}>
         {childrenWithImageData.map(
-          ({ id, imageSrc, imageAlt, imageSrcSet, imageUrl }, index) => {
+          ({ id, imageSrc, imageAlt, imageSrcSet }, index) => {
             if (!imageSrc) return null;
 
             return (
@@ -131,8 +95,8 @@ const FeatureAccordion = (
             );
           },
         )}
-      </GridCol>
-    </Grid>
+      </div>
+    </div>
   );
 };
 

package/src/components/FeatureAccordion/FeatureAccordionItem.tsx

@@ -3,11 +3,13 @@
 import cx from "classnames";
 import React from "react";
 import { AccordionItem, AccordionItemProps } from "../Accordion/AccordionItem";
+import type { FeatureAccordionImage } from "./FeatureAccordion";
 
 const CLASS_ROOT = "feature-accordion__item";
+const CLASS_CONTENT = "feature-accordion__content";
 
 interface FeatureAccordionItemProps extends AccordionItemProps {
-  image?: string | object;
+  image?: string | FeatureAccordionImage;
   imageUrl?: string;
   imageAlt?: string;
   imageSrcSet?: string;
@@ -15,25 +17,18 @@ interface FeatureAccordionItemProps extends AccordionItemProps {
 }
 
 const FeatureAccordionItem: React.FC<FeatureAccordionItemProps> = ({
-  image,
-  imageUrl,
-  imageAlt,
-  imageSrcSet,
+  image: _image,
+  imageUrl: _imageUrl,
+  imageAlt: _imageAlt,
+  imageSrcSet: _imageSrcSet,
   className,
+  children,
   ...props
 }) => {
-  const dataImageUrl = props["data-image-url"] || imageUrl;
-  const dataImageAlt = props["data-image-alt"] || imageAlt;
-  const dataImage = props["data-image"] || image;
-  const dataImageSrcSet = props["data-image-srcset"] || imageSrcSet;
-
   return (
     <AccordionItem
       className={cx(CLASS_ROOT, className)}
-      data-image-url={dataImageUrl}
-      data-image-alt={dataImageAlt}
-      data-image={dataImage}
-      data-image-srcset={dataImageSrcSet}
+      children={<div className={CLASS_CONTENT}>{children}</div>}
       toggleAttribute="data-feature-accordion-toggle"
       {...props}
     />

package/src/components/FeatureAccordion/styles/mixins.scss

@@ -1,48 +1,92 @@
-@use "sass:map" as sass-map;
 @use "../../../styles/tools/convert";
-@use "../../../styles/tools/generate";
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
 
+$preview-width: convert.to-rem(640px);
+$preview-height: convert.to-rem(480px);
+
+@mixin desktop-layout {
+  @include breakpoint.get("xl") {
+    display: flex;
+    align-items: flex-start;
+    min-height: $preview-height;
+  }
+}
+
 @mixin base {
   color: var(--color-text-default);
   background-color: var(--color-background-secondary);
-  margin-left: 0 !important;
-  margin-right: 0 !important;
+  width: 100%;
+  @include desktop-layout();
 }
 
 @mixin accordion {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
+  width: 100%;
+
+  @include breakpoint.get("xl") {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: $preview-height;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: convert.to-rem(40px) convert.to-rem(60px);
+  }
 
   .accordion {
-    margin: convert.to-rem(87px) space.get("xlarge");
-
-    @include breakpoint.get("md", "down") {
-      margin: space.get("xlarge") space.get("large");
-    }
-
-    @include breakpoint.get("sm", "down") {
-      margin: 0;
-    }
+    width: 100%;
+    margin: 0;
   }
 }
 
 @mixin preview {
-  display: flex;
-  padding: 0px !important;
+  display: block;
+  justify-content: center;
+  overflow: hidden;
+  width: 100%;
+
+  @include breakpoint.get("xl") {
+    display: flex;
+    flex: 0 0 $preview-width;
+    width: $preview-width;
+    align-self: flex-start;
+  }
+
+  @include breakpoint.get("xl") {
+    align-items: stretch;
+  }
+
+  @include breakpoint.get("xl", "down") {
+    display: block;
+    height: auto;
+  }
 
   .img {
-    margin-bottom: 0px;
+    margin-bottom: 0;
     width: 100%;
+
+    @include breakpoint.get("xl") {
+      width: 100%;
+      height: auto;
+    }
   }
 
   img {
+    display: block;
+    max-width: 100%;
     width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: left center;
-    margin: 0px !important;
+    object-fit: contain;
+    object-position: right center;
+    margin: 0 !important;
+
+    @include breakpoint.get("xl") {
+      height: auto;
+    }
+
+    @include breakpoint.get("xl", "down") {
+      height: auto;
+      width: 100%;
+    }
   }
 }
 
@@ -70,11 +114,7 @@
     border-top: 4px solid var(--color-border-accent);
   }
 
-  .accordion__body {
-    margin-bottom: 0;
-  }
-
-  @include breakpoint.get("sm", "down") {
+  @include breakpoint.get("lg", "down") {
     .accordion__header,
     .feature-accordion__content {
       padding-left: convert.to-rem(15px);

package/src/components/FeatureAccordion/tests/FeatureAccordion.unit.test.jsx

@@ -92,4 +92,13 @@ describe("FeatureAccordion", () => {
     const { container } = renderAccordion({ "data-testid": "fa" });
     expect(container.firstChild).toHaveAttribute("data-testid", "fa");
   });
+
+  it("applies previewClassName to preview area", () => {
+    const { container } = renderAccordion({
+      previewClassName: "align-self-middle--xl",
+    });
+    expect(container.querySelector(".feature-accordion__preview")).toHaveClass(
+      "align-self-middle--xl",
+    );
+  });
 });

package/src/components/Grid/styles/mixins.scss

@@ -1,12 +1,33 @@
 @use "sass:map";
 @use "sass:math";
 
+@use "./../../Container/styles/config" as container;
 @use "./../../../styles/tools/generate";
 @use "./../../../styles/tools/layout";
 @use "./../../../styles/tokens/breakpoint";
 @use "./../../../styles/tokens/space";
 @use "./config";
 
+@function safe-md-grid-gap($gap) {
+  @return min(
+    #{$gap},
+    calc(
+      (100vw - #{map.get(container.$container-widths, "md")}) / 2 +
+        #{container.$container-padding}
+    )
+  );
+}
+
+@function safe-md-negative-grid-margin($gap) {
+  @return max(
+    -#{$gap},
+    calc(
+      (#{map.get(container.$container-widths, "md")} - 100vw) / 2 -
+        #{container.$container-padding}
+    )
+  );
+}
+
 @mixin grid-base() {
   display: flex;
   max-width: none;
@@ -39,7 +60,13 @@
       margin-right: -$gap !important;
     }
   } @else {
-    @include breakpoint.get("md") {
+    // Clamp bleed only in md band where large gutters can exceed container side room.
+    @include breakpoint.get("md", "only") {
+      margin-left: safe-md-negative-grid-margin($gap) !important;
+      margin-right: safe-md-negative-grid-margin($gap) !important;
+    }
+
+    @include breakpoint.get("lg") {
       margin-left: -$gap !important;
       margin-right: -$gap !important;
     }
@@ -107,7 +134,12 @@
     padding-left: $gap !important;
     padding-right: $gap !important;
   } @else {
-    @include breakpoint.get("md") {
+    @include breakpoint.get("md", "only") {
+      padding-left: safe-md-grid-gap($gap) !important;
+      padding-right: safe-md-grid-gap($gap) !important;
+    }
+
+    @include breakpoint.get("lg") {
       padding-left: $gap !important;
       padding-right: $gap !important;
     }

package/src/components/IconList/styles/mixins.scss

@@ -1,11 +1,13 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tools/convert";
 @use "../../../styles/typography/mixins" as typoMixins;
+@use "../../../styles/tools/layout";
 @use "./config";
 
 @mixin base() {
   @include typoMixins.list-unstyled;
   @include typoMixins.text-readable;
+  @include layout.reset-last-child-margin-bottom;
 
   margin: 0 0 space.get("large") 0;
   padding: 0;
@@ -25,7 +27,6 @@
 
 @mixin content() {
   flex: 1 0 1px;
-  margin-top: convert.to-rem(2px);
 }
 
 @mixin content-text() {

package/src/components/Link/styles/style.scss

@@ -46,4 +46,12 @@
   .link__icon-right {
     @include mixins.icon-right;
   }
+
+  a:has(.link__icon-left),
+  .link:has(.link__icon-left),
+  a:has(.link__icon-right),
+  .link:has(.link__icon-right) {
+    display: inline-flex;
+    align-items: center;
+  }
 }