@orangesk/orange-design-system 3.5.0 → 3.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.5.0",
+  "version": "3.6.1",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -23,40 +23,11 @@
     "./src/*": "./src/*",
     "./public/*": "./public/*"
   },
-  "scripts": {
-    "dev": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next dev",
-    "build": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next build && npm run sprite",
-    "build:bundle": "npm run build:scss-exports && pnpm exec rollup -c && npm run build:megamenu && npm run build:footer",
-    "build:preview-iframe": "node scripts/build-preview-iframe-bundle.mjs",
-    "build:megamenu": "npm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs",
-    "dev:megamenu": "npm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs --watch",
-    "build:footer": "npm run build:scss-exports && pnpm exec rollup -c rollup.footer.config.mjs",
-    "dev:footer": "npm run build:scss-exports && pnpm exec rollup -c rollup.footer.config.mjs --watch",
-    "build:scss-exports": "node scripts/build-scss-exports.js",
-    "build:search-index": "node scripts/mdx-search-index.js",
-    "start": "next start",
-    "lint": "biome lint .",
-    "lint:fix": "biome lint --write .",
-    "lint:fix:unsafe": "biome lint --write --unsafe .",
-    "check": "biome check .",
-    "check:fix": "biome check --write .",
-    "imports:fix": "biome check --write --only=assist/source/organizeImports .",
-    "format": "biome format --write . && prettier --write '**/*.{mdx,scss}'",
-    "format:biome": "biome format --write .",
-    "format:prettier": "prettier --write '**/*.{mdx,scss}'",
-    "test": "vitest",
-    "test:visual:docker": "docker run --rm --init --ipc=host -e CI=1 -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble bash -lc \"corepack enable && pnpm install --frozen-lockfile --ignore-scripts && pnpm run test:visual\"",
-    "test:visual:docker:update": "docker run --rm --init --ipc=host -e CI=1 -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble bash -lc \"corepack enable && pnpm install --frozen-lockfile --ignore-scripts && pnpm run test:visual:update\"",
-    "test:ui": "vitest --ui",
-    "coverage": "vitest run --coverage",
-    "prepare": "husky",
-    "sprite": "svg-sprite --symbol --symbol-dest public --symbol-sprite sprite.svg src/assets/icons/*.svg"
-  },
   "dependencies": {
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.3.1",
+    "@next/mdx": "16.3.3",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -64,11 +35,11 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.4.13",
+    "dompurify": "^3.4.14",
     "html-react-parser": "6.1.7",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.3.1",
+    "next": "16.3.3",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
@@ -81,7 +52,7 @@
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "14.1.0",
+    "swiper": "14.2.0",
     "tabbable": "^6.5.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
@@ -100,43 +71,72 @@
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@rollup/rollup-darwin-arm64": "^4.62.4",
+    "@rollup/rollup-darwin-arm64": "^4.63.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.5",
-    "@types/node": "26.2.0",
+    "@testing-library/user-event": "^14.6.6",
+    "@types/node": "26.4.0",
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
+    "@types/react-dom": "19.2.5",
     "@types/wnumb": "^1.2.3",
-    "@vitejs/plugin-react": "6.0.5",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
-    "@vitest/coverage-v8": "^4.1.10",
-    "@vitest/ui": "^4.1.10",
+    "@vitejs/plugin-react": "6.1.0",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.11",
+    "@vitest/ui": "^4.1.11",
     "canvas": "^3.2.3",
     "fs-extra": "^11.4.0",
     "glob": "13.0.6",
-    "html-validate": "11.8.0",
+    "html-validate": "11.10.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "30.0.1",
     "lint-staged": "17.3.0",
     "playwright": "^1.62.1",
     "prettier": "^3.9.6",
-    "rollup": "^4.62.4",
+    "rollup": "^4.63.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.5.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.102.0",
+    "sass": "^1.103.1",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.3",
-    "vitest": "^4.1.10",
+    "vitest": "^4.1.11",
     "vitest-axe": "^0.1.0",
     "vitest-browser-react": "^2.2.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,css}": "biome check --write --no-errors-on-unmatched",
     "*.{mdx,scss}": "prettier --write"
+  },
+  "scripts": {
+    "dev": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next dev",
+    "build": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next build && npm run sprite",
+    "build:bundle": "pnpm run build:scss-exports && pnpm exec rollup -c && pnpm run build:megamenu && pnpm run build:footer && pnpm run verify:production-bundle",
+    "build:preview-iframe": "node scripts/build-preview-iframe-bundle.mjs",
+    "build:megamenu": "pnpm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs",
+    "dev:megamenu": "npm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs --watch",
+    "build:footer": "pnpm run build:scss-exports && pnpm exec rollup -c rollup.footer.config.mjs",
+    "verify:production-bundle": "node scripts/verify-production-bundle.mjs",
+    "dev:footer": "npm run build:scss-exports && pnpm exec rollup -c rollup.footer.config.mjs --watch",
+    "build:scss-exports": "node scripts/build-scss-exports.js",
+    "build:search-index": "node scripts/mdx-search-index.js",
+    "start": "next start",
+    "lint": "biome lint .",
+    "lint:fix": "biome lint --write .",
+    "lint:fix:unsafe": "biome lint --write --unsafe .",
+    "check": "biome check .",
+    "check:fix": "biome check --write .",
+    "imports:fix": "biome check --write --only=assist/source/organizeImports .",
+    "format": "biome format --write . && prettier --write '**/*.{mdx,scss}'",
+    "format:biome": "biome format --write .",
+    "format:prettier": "prettier --write '**/*.{mdx,scss}'",
+    "test": "vitest",
+    "test:visual:docker": "docker run --rm --init --ipc=host -e CI=1 -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble bash -lc \"corepack enable && pnpm install --frozen-lockfile --ignore-scripts && pnpm run test:visual\"",
+    "test:visual:docker:update": "docker run --rm --init --ipc=host -e CI=1 -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble bash -lc \"corepack enable && pnpm install --frozen-lockfile --ignore-scripts && pnpm run test:visual:update\"",
+    "test:ui": "vitest --ui",
+    "coverage": "vitest run --coverage",
+    "sprite": "svg-sprite --symbol --symbol-dest public --symbol-sprite sprite.svg src/assets/icons/*.svg"
   }
-}
+}

package/src/components/Accordion/Accordion.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 import { useStatic } from "@/utils/hooks";
 import AccordionStatic from "./Accordion.static";
 import HeadingContext from "./HeadingContext";

package/src/components/Accordion/AccordionItem.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 
 import { useHydrationSafeId } from "../../utils/hooks";
 

package/src/components/Alert/Alert.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { JSX } from "react";
+import type { JSX } from "react";
+import React from "react";
 import ConditionalWrapper from "../../utils/ConditionalWrapper";
 import { Buttons } from "../Buttons";
 import { Icon } from "../Icon";

package/src/components/Avatar/Avatar.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
+import React from "react";
 
 import { Icon } from "../Icon";
 

package/src/components/BlockAction/BlockAction.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { ReactElement } from "react";
+import type { ReactElement } from "react";
+import React from "react";
 
 import { CloneElementWithClassName } from "./CloneElementWithClassName";
 import { Provider } from "./Context";

package/src/components/BlockAction/BlockActionControl.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { ReactElement, useContext } from "react";
+import type { ReactElement } from "react";
+import React, { useContext } from "react";
 import { CloneElementWithClassName } from "./CloneElementWithClassName";
 import { Context } from "./Context";
 

package/src/components/BlockAction/BlockActionIndicator.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactElement, useContext } from "react";
+import type { ReactElement } from "react";
+import React, { useContext } from "react";
 import { CloneElementWithClassName } from "./CloneElementWithClassName";
 import { Context } from "./Context";
 

package/src/components/BlockAction/CloneElementWithClassName.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { ReactElement } from "react";
+import type { ReactElement } from "react";
+import React from "react";
 
 interface CloneElementWithClassNameProps {
   className?: string;

package/src/components/BlockAction/Context.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { Dispatch, ReactNode, SetStateAction, useState } from "react";
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+import React, { useState } from "react";
 
 interface ContextType {
   isIndicating: boolean;

package/src/components/BlockAction/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement } from "react";
+import type { ReactElement } from "react";
+import React from "react";
 import { BlockAction } from "./BlockAction";
 import { BlockActionControl } from "./BlockActionControl";
 import { BlockActionIndicator } from "./BlockActionIndicator";

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

@@ -28,6 +28,14 @@
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
+
+  @include breakpoint.get("sm", "down") {
+    &:not(.body-banner--large) {
+      .body-banner__button .btn {
+        width: 100%;
+      }
+    }
+  }
 }
 
 @mixin content {
@@ -72,6 +80,10 @@
   padding: 0 !important;
   flex-shrink: 0;
 
+  @include breakpoint.get("sm", "down") {
+    width: 100%;
+  }
+
   img,
   svg {
     max-height: convert.to-rem(120px);
@@ -79,7 +91,9 @@
     margin: space.get("large") 0 space.get("large") space.get("large") !important;
 
     @include breakpoint.get("sm", "down") {
-      margin: convert.to-rem(15px) 0 convert.to-rem(15px) convert.to-rem(15px) !important;
+      width: calc(100% - #{convert.to-rem(30px)});
+      max-height: none;
+      margin: convert.to-rem(15px) !important;
     }
   }
 }

package/src/components/BodyBanner/tests/BodyBanner.conformance.test.jsx

@@ -14,7 +14,10 @@ const example = (
       size="large"
       buttonText="Get Started"
       image={
-        <img src="https://picsum.photos/seed/test/640/380" alt="Large banner" />
+        <img
+          src="https://placehold.co/640x480?text=Large+banner"
+          alt="Large banner"
+        />
       }
     >
       <h3>Large Banner Example</h3>
@@ -27,7 +30,7 @@ const example = (
       buttonText="Discover"
       image={
         <img
-          src="https://picsum.photos/seed/test2/640/380"
+          src="https://placehold.co/640x480?text=Accent+banner"
           alt="Accent banner"
         />
       }
@@ -42,7 +45,7 @@ const example = (
       buttonText="Explore"
       image={
         <img
-          src="https://picsum.photos/seed/test3/640/380"
+          src="https://placehold.co/640x480?text=Subtle+banner"
           alt="Subtle banner"
         />
       }
@@ -62,7 +65,7 @@ const example = (
       buttonText="Start Now"
       image={
         <img
-          src="https://picsum.photos/seed/test4/640/380"
+          src="https://placehold.co/640x480?text=Primary+banner"
           alt="Primary banner"
         />
       }

package/src/components/Button/IconButton.tsx

@@ -2,7 +2,8 @@ import cx from "classnames";
 import React from "react";
 
 import { Icon } from "../Icon";
-import { Button, ButtonSize } from "./Button";
+import type { ButtonSize } from "./Button";
+import { Button } from "./Button";
 
 export type IconPosition = "left" | "right";
 

package/src/components/Button/index.tsx

@@ -1,4 +1,5 @@
-import { Button, ButtonProps } from "./Button";
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
 import { IconButton } from "./IconButton";
 
 export const ButtonPrimary = (props: ButtonProps) => (

package/src/components/Carousel/Carousel.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { HTMLAttributes, ReactElement, ReactNode } from "react";
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import React from "react";
 import { useStatic } from "@/utils/hooks";
 import { Controls } from "../Controls";
 import CarouselStatic from "./Carousel.static";

package/src/components/Carousel/CarouselItem.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 
 import { CLASS_SLIDE } from "./constants";
 

package/src/components/CarouselHero/CarouselHero.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode, useId } from "react";
+import type { ReactNode } from "react";
+import React, { useId } from "react";
 import { useStatic } from "@/utils/hooks";
 import { Container } from "../Container";
 import { Controls } from "../Controls";

package/src/components/CarouselHero/CarouselHeroItem.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 import { Image } from "@/components/Image";
 import { Container } from "../Container";
 import {

package/src/components/CarouselPromotions/CarouselPromotions.static.ts

@@ -59,7 +59,7 @@ export default class CarouselPromotions {
   viewport!: HTMLElement;
   instance!: Swiper;
   interval: number = 0;
-  autoplayTimer?: NodeJS.Timeout;
+  autoplayTimer?: ReturnType<typeof setTimeout>;
   private resizeRafId?: number;
   private boundWindowResizeHandler: () => void;
   private boundPaginationClickHandler: () => void;

package/src/components/CarouselPromotions/CarouselPromotions.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 import { useStatic } from "@/utils/hooks";
 import CarouselPromotionsStatic from "./CarouselPromotions.static";
 import {

package/src/components/CarouselPromotions/CarouselPromotionsItem.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { ReactElement } from "react";
+import type { ReactElement } from "react";
+import React from "react";
 
 import {
   CLASS_IMAGE,

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

@@ -85,9 +85,8 @@
 
 @function get-breakout-media-query($min, $max) {
   @return if(
-    $max,
-    "(min-width: #{$min}) and (max-width: #{$max})",
-    "(min-width: #{$min})"
+    sass($max): "(min-width: #{$min}) and (max-width: #{$max})";
+      else: "(min-width: #{$min})"
   );
 }
 

package/src/components/Countdown/Countdown.react.ts

@@ -1,9 +1,9 @@
-import {
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
-  countdownUnits,
 } from "./Countdown.static";
+import { countdownUnits } from "./Countdown.static";
 
 const defaultCountdownLabels: Required<CountdownLabels> = {
   days: {

package/src/components/Countdown/Countdown.static.ts

@@ -1,11 +1,13 @@
-import {
-  BaseCountdownStatic,
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
+  DayLabels,
+} from "./Countdown.shared";
+import {
+  BaseCountdownStatic,
   calculateState,
   countdownUnits,
-  DayLabels,
   getVisibleUnits,
   normalizeDayLabels,
 } from "./Countdown.shared";

package/src/components/Countdown/Countdown.tsx

@@ -12,12 +12,12 @@ import {
   getLabelText,
   normalizeUnits,
 } from "./Countdown.react";
-import CountdownStatic, {
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
-  countdownUnits,
 } from "./Countdown.static";
+import CountdownStatic, { countdownUnits } from "./Countdown.static";
 import {
   ATTR_COUNTDOWN,
   ATTR_COUNTDOWN_CONFIG,

package/src/components/Countdown/CountdownTag.static.ts

@@ -1,10 +1,12 @@
-import {
-  BaseCountdownStatic,
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
-  calculateState,
   DayLabels,
+} from "./Countdown.shared";
+import {
+  BaseCountdownStatic,
+  calculateState,
   getVisibleUnits,
   normalizeDayLabels,
 } from "./Countdown.shared";

package/src/components/Countdown/CountdownTag.tsx

@@ -12,7 +12,7 @@ import {
   getLabelText,
   normalizeUnits,
 } from "./Countdown.react";
-import {
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,

package/src/components/Divider/Divider.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 
 import { Icon } from "../Icon";
 

package/src/components/Dropdown/Dropdown.static.ts

@@ -1,5 +1,6 @@
 import { transitionHiddenElement } from "@cloudfour/transition-hidden-element";
-import { createPopper, Instance, Options } from "@popperjs/core";
+import type { Instance, Options } from "@popperjs/core";
+import { createPopper } from "@popperjs/core";
 
 import { keys } from "../../utils";
 

package/src/components/Dropdown/Dropdown.tsx

@@ -1,15 +1,17 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 import { useStatic } from "@/utils/hooks";
 import { Bar, BarItem } from "../Bar";
 import { IconButton } from "../Button";
-import { ButtonProps } from "../Button/Button";
+import type { ButtonProps } from "../Button/Button";
+import { CLASS_ROOT } from "./constants";
 import DropdownButtonStatic from "./Dropdown.static";
 import { DropdownToggleButton } from "./DropdownToggleButton";
 
-export const CLASS_ROOT = "dropdown";
+export { CLASS_ROOT } from "./constants";
 
 export type DropdownButtonProps = {
   className?: string;

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { AnchorHTMLAttributes, ReactNode } from "react";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import React from "react";
 
 const CLASS_ROOT = "dropdown__item";
 

package/src/components/Dropdown/DropdownToggleButton.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import ToggleButton from "../../docs/utils/ToggleButton";
 
-import { CLASS_ROOT } from "./Dropdown";
+import { CLASS_ROOT } from "./constants";
 
 interface DropdownToggleButtonProps
   extends React.HTMLAttributes<HTMLButtonElement> {

package/src/components/Dropdown/constants.ts

@@ -0,0 +1 @@
+export const CLASS_ROOT = "dropdown";

package/src/components/FeatureAccordion/FeatureAccordion.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { RefCallback, useMemo } from "react";
+import type { RefCallback } from "react";
+import React, { useMemo } from "react";
 import { useStatic } from "../../utils/hooks";
 import { Accordion } from "../Accordion/Accordion";
 import { Image } from "../Image";