@orangesk/orange-design-system 3.0.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -55,7 +55,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.2.9",
+    "@next/mdx": "16.2.10",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -67,11 +67,11 @@
     "html-react-parser": "6.1.3",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.2.9",
+    "next": "16.2.10",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
-    "query-string": "^9.4.0",
+    "query-string": "^9.4.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-element-to-jsx-string": "^17.0.1",
@@ -80,7 +80,7 @@
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "12.2.0",
+    "swiper": "14.0.1",
     "tabbable": "^6.5.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
@@ -114,15 +114,15 @@
     "@vitest/coverage-v8": "^4.1.9",
     "@vitest/ui": "^4.1.9",
     "canvas": "^3.2.3",
-    "fs-extra": "^11.3.5",
+    "fs-extra": "^11.3.6",
     "glob": "13.0.6",
-    "html-validate": "11.5.3",
+    "html-validate": "11.5.4",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "29.1.1",
     "lint-staged": "17.0.8",
     "playwright": "^1.61.1",
-    "prettier": "^3.8.4",
+    "prettier": "^3.9.4",
     "rollup": "^4.62.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.4.1",

package/src/assets/icons/add.svg

@@ -1 +1,4 @@
-<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path d="M46.667 33.333h18A4.333 4.333 0 0 1 69 37.667V42a4.331 4.331 0 0 1-4.333 4.667h-18v18A4.333 4.333 0 0 1 42.333 69h-4.666a4.333 4.333 0 0 1-4.334-4.333v-18h-18A4.335 4.335 0 0 1 11 42v-4.333c0-2.334 2-4.334 4.334-4.334h18v-18c0-2.666 2-4.666 4.333-4.666h4.666a4.333 4.333 0 0 1 4.334 4.666v18Z" /></svg>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M27 21H40V27H27V40H21V27H8V21H21V8H27V21Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/close.svg

@@ -1,5 +1,5 @@
-<svg width="80" height="80" viewBox="0 0 80 80"
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <path d="M59.9997 66.6666L33.333 39.9999L59.9997 13.3333L66.6663 19.9999L46.6663 39.9999L66.6663 59.9999L59.9997 66.6666Z" />
-  <path d="M19.9997 13.3333L46.6663 39.9999L19.9997 66.6666L13.333 59.9999L33.333 39.9999L13.333 19.9999L19.9997 13.3333Z" />
+  <path d="M36 40L20 24L36 8L40 12L28 24L40 36L36 40Z" fill="currentColor"/>
+  <path d="M12 8L28 24L12 40L8 36L20 24L8 12L12 8Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/communication-settings.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M28.8016 6C36.2601 6 42.4961 10.2276 44.0366 15.878C44.2756 16.7546 44.4016 17.6654 44.4016 18.6C44.4016 19.4848 44.2886 20.3484 44.0738 21.1817C43.421 23.7137 41.8274 25.967 39.6016 27.6923V33.6L36.664 30.653C37.0151 29.4837 37.2016 28.26 37.2016 27C37.2016 18.7156 29.1427 12 19.2016 12C17.8416 12 16.5168 12.1257 15.2431 12.3639C17.9289 8.56249 22.9947 6 28.8016 6Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2016 14.4C11.743 14.4 5.50699 18.6276 3.96652 24.278C3.72754 25.1546 3.60156 26.0654 3.60156 27C3.60156 27.8848 3.71449 28.7484 3.92934 29.5817C4.98715 33.6849 8.51576 37.0561 13.2016 38.6343V44.4L18.0323 39.5651C18.4183 39.5882 18.8082 39.6 19.2016 39.6C27.8172 39.6 34.8016 33.9589 34.8016 27C34.8016 20.0411 27.8172 14.4 19.2016 14.4ZM10.8016 29.424C12.127 29.424 13.2016 28.3495 13.2016 27.024C13.2016 25.6985 12.127 24.624 10.8016 24.624C9.47608 24.624 8.40156 25.6985 8.40156 27.024C8.40156 28.3495 9.47608 29.424 10.8016 29.424ZM19.2016 29.424C20.527 29.424 21.6016 28.3495 21.6016 27.024C21.6016 25.6985 20.527 24.624 19.2016 24.624C17.8761 24.624 16.8016 25.6985 16.8016 27.024C16.8016 28.3495 17.8761 29.424 19.2016 29.424ZM27.6016 29.424C28.927 29.424 30.0016 28.3495 30.0016 27.024C30.0016 25.6985 28.927 24.624 27.6016 24.624C26.2761 24.624 25.2016 25.6985 25.2016 27.024C25.2016 28.3495 26.2761 29.424 27.6016 29.424Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/cookies.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M28.0816 6.07023C28.0816 4.88411 27.2155 3.87154 26.0364 3.74271C25.3215 3.6646 24.5592 3.59961 24.0016 3.59961C12.735 3.59961 3.60156 12.733 3.60156 23.9996C3.60156 35.2662 12.735 44.3996 24.0016 44.3996C35.2682 44.3996 44.4016 35.2662 44.4016 23.9996C44.4016 23.442 44.3366 22.6797 44.2585 21.9648C44.1296 20.7857 43.1171 19.9196 41.9309 19.9196H38.9296V16.8476C38.9296 15.5221 37.855 14.4476 36.5296 14.4476H33.5536V11.4716C33.5536 10.1461 32.479 9.07161 31.1536 9.07161H28.0816V6.07023ZM21.6016 13.2476C21.6016 14.5731 20.527 15.6476 19.2016 15.6476C17.8761 15.6476 16.8016 14.5731 16.8016 13.2476C16.8016 11.9221 17.8761 10.8476 19.2016 10.8476C20.527 10.8476 21.6016 11.9221 21.6016 13.2476ZM25.2016 35.9996C25.2016 37.3251 24.127 38.3996 22.8016 38.3996C21.4761 38.3996 20.4016 37.3251 20.4016 35.9996C20.4016 34.6741 21.4761 33.5996 22.8016 33.5996C24.127 33.5996 25.2016 34.6741 25.2016 35.9996ZM15.6016 25.7996C15.6016 27.4565 14.2584 28.7996 12.6016 28.7996C10.9447 28.7996 9.60156 27.4565 9.60156 25.7996C9.60156 24.1428 10.9447 22.7996 12.6016 22.7996C14.2584 22.7996 15.6016 24.1428 15.6016 25.7996ZM37.2016 29.3996C37.2016 31.0565 35.8584 32.3996 34.2016 32.3996C32.5447 32.3996 31.2016 31.0565 31.2016 29.3996C31.2016 27.7428 32.5447 26.3996 34.2016 26.3996C35.8584 26.3996 37.2016 27.7428 37.2016 29.3996ZM27.6016 23.3996C27.6016 25.0565 26.2584 26.3996 24.6016 26.3996C22.9447 26.3996 21.6016 25.0565 21.6016 23.3996C21.6016 21.7428 22.9447 20.3996 24.6016 20.3996C26.2584 20.3996 27.6016 21.7428 27.6016 23.3996Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/device-mobile-package.svg

@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M30 8.25586C30.6628 8.25586 31.2 8.79312 31.2 9.45586V10.4278C30.5065 10.6417 29.9177 11.1665 29.6503 11.9011L28.8 14.2373V10.6559H19.2V28.7999H23.4997L21.7948 33.4839C21.7779 33.5304 21.7625 33.5771 21.7486 33.6239H18C17.3373 33.6239 16.8 33.0866 16.8 32.4239V9.45586C16.8 8.79312 17.3373 8.25586 18 8.25586H30Z" fill="currentColor"/>
+  <path d="M22.4529 36.097C22.0749 35.76 21.8152 35.3122 21.7066 34.8239H18C17.0162 34.8239 16.1707 34.232 15.8001 33.3849L12.5602 34.5641L6.35459 17.5143L15.6 14.1493V11.5952L4.40611 15.6695C3.78334 15.8962 3.46224 16.5848 3.68891 17.2075L11.5444 38.7904C11.7711 39.4132 12.4597 39.7343 13.0825 39.5076L22.4529 36.097Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M44.3095 17.2365C44.5362 16.6138 44.2151 15.9252 43.5923 15.6985L32.316 11.5942C31.6932 11.3676 31.0046 11.6887 30.778 12.3114L22.9224 33.8943C22.6958 34.5171 23.0169 35.2057 23.6397 35.4324L34.916 39.5366C35.5387 39.7633 36.2274 39.4422 36.454 38.8194L44.3095 17.2365ZM35.4382 34.5931L26.4172 31.3097L32.6228 14.2599L41.6439 17.5433L35.4382 34.5931ZM31.2345 35.6171C31.0078 36.2399 30.3192 36.561 29.6964 36.3343C29.0737 36.1076 28.7526 35.419 28.9792 34.7963C29.2059 34.1735 29.8945 33.8524 30.5173 34.0791C31.1401 34.3057 31.4612 34.9943 31.2345 35.6171Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/identity-protection.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M39.5079 8.39961C33.6893 8.39961 28.3199 6.61262 24.0002 3.59961C19.6804 6.61262 14.3111 8.39827 8.4925 8.39827L7.2002 8.39961V21.5996C7.2002 27.4862 9.4754 34.0096 14.4002 38.7864C15.6675 40.0152 17.0726 41.0934 18.5875 41.9996C20.2891 43.0135 22.1064 43.8193 24.0002 44.3996C25.894 43.8193 27.7113 43.0135 29.4129 41.9996C30.9278 41.0934 32.3329 40.0152 33.6002 38.7863C38.525 34.0096 40.8002 27.4862 40.8002 21.5996V8.39961H39.5079ZM24.0002 10.7996C25.243 10.7996 26.4579 11.1681 27.4912 11.8586C28.5245 12.549 29.3299 13.5304 29.8055 14.6786C30.2811 15.8268 30.4055 17.0902 30.1631 18.3091C29.9206 19.528 29.3222 20.6477 28.4434 21.5264C27.5646 22.4052 26.445 23.0037 25.2261 23.2461C24.0072 23.4886 22.7437 23.3642 21.5956 22.8886C20.4474 22.413 19.466 21.6076 18.7755 20.5742C18.0851 19.5409 17.7166 18.326 17.7166 17.0832C17.7166 15.4167 18.3786 13.8185 19.557 12.6401C20.7354 11.4616 22.3337 10.7996 24.0002 10.7996ZM24.0482 41.9804C19.91 40.6618 16.7186 38.3203 14.4002 35.4729V29.6505H14.4024C14.4327 28.2688 14.8271 26.9196 15.5458 25.7392C16.2645 24.5588 17.2819 23.5889 18.4954 22.9276C19.9848 24.3309 21.954 25.1124 24.0004 25.1123C26.0468 25.1123 28.0159 24.3307 29.5053 22.9273C30.7448 23.6028 31.7793 24.6 32.5 25.8139C33.2206 27.0277 33.6006 28.4134 33.6002 29.8251V35.547C31.3058 38.3609 28.1504 40.6732 24.0482 41.9804Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/menu.svg

@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewbox="0 0 80 80" ><path  d="M13.333 16.667h53.333v6.666H13.333v-6.666ZM13.333 36.667h53.333v6.666H13.333v-6.666ZM13.333 56.667h53.333v6.666H13.333v-6.666Z"/></svg>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 8H42V13.9998H6V8ZM6 21H42V27H6V21ZM6 34.0002H42V40H6V34.0002Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/pause.svg

@@ -1,5 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <path d="M16.5 5.5L16.5 18.5H13.5L13.5 5.5L16.5 5.5Z" fill="currentColor"/>
-  <path d="M10.5 5.5L10.5 18.5H7.5L7.5 5.5L10.5 5.5Z" fill="currentColor"/>
+  <path d="M33 11L33 37H27L27 11L33 11Z" fill="currentColor"/>
+  <path d="M21 11L21 37H15L15 11L21 11Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/play.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <path d="M18.5 11.9997L8 18.0619L8 5.9375L18.5 11.9997Z" fill="currentColor"/>
+  <path d="M37 24.0003L16 36.1247L16 11.876L37 24.0003Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/remove.svg

@@ -1 +1,4 @@
-<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path d="M64.634 32.667H15.367C12.9 32.667 10.9 34.7 10.9 37.2v4.533c0 2.5 2 4.5 4.467 4.5h49.3c2.467 0 4.467-2 4.467-4.5V37.2c0-2.5-2-4.533-4.467-4.533h-.033Z" /></svg>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 21H40V27H8V21Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/search.svg

@@ -1 +1,4 @@
-<svg width="80" height="80" viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M77.66 70.66 55.996 49A29.984 29.984 0 1 0 49 56l21.664 21.66a2.405 2.405 0 0 0 3.392 0l3.608-3.608c.447-.451.698-1.06.698-1.696 0-.635-.255-1.245-.702-1.696ZM31.584 51.976a20.39 20.39 0 1 1 0-40.78 20.39 20.39 0 0 1 0 40.78Z" /></svg>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M22 5C31.3888 5 39 12.6112 39 22C39 25.6106 37.8725 28.9569 35.9531 31.71L43.8496 39.6064L39.6064 43.8496L31.7109 35.9531C28.9578 37.8728 25.6109 39 22 39C12.6112 39 5 31.3888 5 22C5 12.6112 12.6112 5 22 5ZM22 11C15.9249 11 11 15.9249 11 22C11 28.0751 15.9249 33 22 33C28.0751 33 33 28.0751 33 22C33 15.9249 28.0751 11 22 11Z" fill="currentColor"/>
+</svg>

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

@@ -17,7 +17,11 @@
     [style*="--color-fill"],
     [style*="--color-surface"]
   ) {
-    border: 1px solid var(--color-border-subtle);
+    border: 1px solid var(--color-border-strong);
+  }
+
+  &.background-accent {
+    border: 1px solid var(--color-border-accent);
   }
 
   &.grid {

package/src/components/Carousel/Carousel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import React, { HTMLAttributes, ReactElement, ReactNode } from "react";
 import { useStatic } from "@/utils/hooks";
 import { Icon } from "../Icon";
 import CarouselStatic from "./Carousel.static";
@@ -18,11 +18,15 @@ import {
   CLASS_VIEWPORT_WRAPPER,
 } from "./constants";
 
-interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+type CarouselRenderItem<T> = (item: T, index: number) => ReactNode;
+
+interface CarouselProps<T = ReactNode> extends HTMLAttributes<HTMLDivElement> {
   /** Swiper.js (https://swiperjs.com/) options object */
   swiperOptions?: Record<string, any>;
   /** Carousel items */
-  items: ReactNode[];
+  items: T[];
+  /** Render carousel item content */
+  renderItems?: CarouselRenderItem<T>;
   /** Always show scrollbar and hide dots */
   showScrollbar?: boolean;
   /** Make carousel bleed to the right edge of screen while keeping left aligned with container */
@@ -30,23 +34,37 @@ interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
 }
 
-const Carousel: React.FC<CarouselProps> = ({
+const isCarouselItemElement = (
+  item: ReactNode,
+): item is ReactElement<React.ComponentProps<typeof CarouselItem>> =>
+  React.isValidElement(item) && item.type === CarouselItem;
+
+const Carousel = <T,>({
   className,
   swiperOptions,
   items,
+  renderItems,
   showScrollbar = false,
   bleedRight = false,
   ...other
-}) => {
+}: CarouselProps<T>) => {
   const [carouselRef] = useStatic(CarouselStatic);
   const { ["data-swiper-options"]: _dataSwiperOptionsAttr, ...domProps } =
     other as HTMLAttributes<HTMLDivElement> & {
       "data-swiper-options"?: string;
     };
 
-  const carouselItems = items.map((item, i) => (
-    <CarouselItem key={i.toString()}>{item}</CarouselItem>
-  ));
+  const carouselItems = items.map((item, i) => {
+    const content = renderItems ? renderItems(item, i) : (item as ReactNode);
+
+    if (isCarouselItemElement(content)) {
+      return React.cloneElement(content, {
+        key: content.key ?? i.toString(),
+      });
+    }
+
+    return <CarouselItem key={i.toString()}>{content}</CarouselItem>;
+  });
 
   const classes = cx(CLASS_ROOT, className, {
     [`${CLASS_ROOT}--scrollbar`]: showScrollbar,
@@ -113,4 +131,5 @@ const Carousel: React.FC<CarouselProps> = ({
 
 Carousel.displayName = "Carousel";
 
+export type { CarouselProps };
 export { Carousel };

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/Carousel/tests/Carousel.unit.test.jsx

@@ -1,6 +1,7 @@
 import { render } from "@testing-library/react";
 
 import { Carousel } from "../Carousel";
+import { CarouselItem } from "../CarouselItem";
 
 //items is required
 describe("rendering Carousel", () => {
@@ -137,6 +138,34 @@ describe("rendering Carousel", () => {
         expect(slides[i].querySelector("p").textContent).toBe(`item${i + 1}`);
       }
     });
+    it("uses renderItems callback when provided", () => {
+      const data = [{ title: "item1" }, { title: "item2" }, { title: "item3" }];
+      const { container } = render(
+        <Carousel
+          items={data}
+          renderItems={(item, index) => <p>{`${index + 1}-${item.title}`}</p>}
+        />,
+      );
+      const slides = container.getElementsByClassName("carousel__slide");
+      for (let i = 0; i < data.length; i++) {
+        expect(slides[i].querySelector("p").textContent).toBe(
+          `${i + 1}-${data[i].title}`,
+        );
+      }
+    });
+    it("does not double-wrap CarouselItem elements", () => {
+      const items = [
+        <CarouselItem key="item1" data-testid="slide-1">
+          item1
+        </CarouselItem>,
+      ];
+      const { container, getByTestId } = render(<Carousel items={items} />);
+
+      expect(container.getElementsByClassName("carousel__slide").length).toBe(
+        1,
+      );
+      expect(getByTestId("slide-1").textContent).toBe("item1");
+    });
   });
   describe("swiperOptions prop", () => {
     const items = [

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

@@ -114,10 +114,6 @@ $preview-height: convert.to-rem(480px);
     border-top: 4px solid var(--color-border-accent);
   }
 
-  .accordion__body {
-    margin-bottom: 0;
-  }
-
   @include breakpoint.get("lg", "down") {
     .accordion__header,
     .feature-accordion__content {

package/src/components/Forms/Autocomplete/styles/mixins.scss

@@ -7,7 +7,7 @@
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 1000;
+  z-index: 1;
   float: left;
   width: 100%;
   max-height: $height;
@@ -56,7 +56,7 @@
     top: 0;
     width: 100%;
     height: 100%;
-    z-index: 1001;
+    z-index: 2;
   }
 
   &:first-child {
@@ -73,6 +73,7 @@
 
 @mixin wrapper {
   position: relative;
+  isolation: isolate;
   width: 100%;
   max-width: convert.to-rem(350px);
 }

package/src/components/Forms/Autocomplete/tests/Autocomplete.styles.unit.test.jsx

@@ -0,0 +1,20 @@
+import path from "path";
+import sass from "sass";
+
+describe("Autocomplete styles", () => {
+  it("keeps autocomplete menu inside local stacking context", () => {
+    const result = sass.compile(
+      path.resolve(
+        process.cwd(),
+        "src/components/Forms/Autocomplete/styles/style.scss",
+      ),
+    );
+
+    expect(result.css).toContain(".autocomplete__wrapper");
+    expect(result.css).toContain("isolation: isolate;");
+    expect(result.css).toContain(".autocomplete__menu");
+    expect(result.css).toContain("z-index: 1;");
+    expect(result.css).toContain(".autocomplete__option::before");
+    expect(result.css).toContain("z-index: 2;");
+  });
+});

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/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;
+  }
 }

package/src/components/List/styles/config.scss

@@ -18,7 +18,7 @@ $color-palette: (
   ),
 
   gray: (
-    background-color: var(--color-surface-subtle),
+    background-color: var(--color-background-secondary),
     border-color: var(--color-border-strong),
   ),
 );

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

@@ -80,3 +80,9 @@
     }
   }
 }
+
+@mixin promo-banner-vertical() {
+  .promo-banner__item {
+    padding-top: 0 !important;
+  }
+}

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

@@ -26,6 +26,7 @@
     }
 
     &--vertical {
+      @include mixins.promo-banner-vertical;
       .promo-banner__item[class*="grid__col"],
       .promo-banner__image[class*="grid__col"]:not(
           .promo-banner__image--bleed-right

package/src/components/index.ts

@@ -19,7 +19,7 @@ import {
 } from "./Button";
 import { Buttons } from "./Buttons";
 import { Card, CardProductHeader, CardSection } from "./Card";
-import { Carousel } from "./Carousel";
+import { Carousel, CarouselItem } from "./Carousel";
 import { CarouselHero, CarouselHeroItem } from "./CarouselHero";
 import { CarouselPromotions } from "./CarouselPromotions";
 import { CartTable } from "./CartTable";
@@ -121,6 +121,7 @@ export {
   Carousel,
   CarouselHero,
   CarouselHeroItem,
+  CarouselItem,
   CarouselPromotions,
   CartTable,
   Checkbox,

package/src/styles/typography/mixins.scss

@@ -19,6 +19,10 @@
   max-width: none;
 }
 
+@mixin text-relaxed {
+  max-inline-size: clamp(40rem, 75vw, 70rem);
+}
+
 @mixin headings-base($heading-config, $selector-pattern, $base-styles) {
   $selector: ();
 

package/src/styles/utilities/text.scss

@@ -152,4 +152,7 @@
   .text-narrow {
     @include typographyMixins.text-narrow;
   }
+  .text-relaxed {
+    @include typographyMixins.text-relaxed;
+  }
 }