@orangesk/orange-design-system 3.4.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "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.0",
+    "@next/mdx": "16.3.2",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -64,15 +35,15 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.4.13",
-    "html-react-parser": "6.1.5",
+    "dompurify": "^3.4.14",
+    "html-react-parser": "6.1.7",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.3.0",
+    "next": "16.3.2",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
-    "query-string": "^9.4.1",
+    "query-string": "^9.5.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-element-to-jsx-string": "^17.0.1",
@@ -81,7 +52,7 @@
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "14.0.7",
+    "swiper": "14.1.0",
     "tabbable": "^6.5.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
@@ -102,22 +73,22 @@
     "@rollup/plugin-url": "^8.0.2",
     "@rollup/rollup-darwin-arm64": "^4.62.4",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "7.0.0",
+    "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.3",
-    "@types/node": "26.1.2",
+    "@testing-library/user-event": "^14.6.5",
+    "@types/node": "26.2.0",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",
     "@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",
+    "@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.6.2",
+    "html-validate": "11.8.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "30.0.1",
@@ -131,12 +102,40 @@
     "sass": "^1.102.0",
     "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",
+    "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",
+    "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/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.static.ts

@@ -14,6 +14,7 @@ import Tooltip from "../Tooltip/Tooltip.static";
 import {
   CLASS_ACTIVE,
   CLASS_BLEED_RIGHT,
+  CLASS_BLEED_RIGHT_NO_LEFT,
   CLASS_DOT,
   CLASS_SCROLLBAR_DRAG,
   CLASS_SCROLLBAR_HORIZONTAL,
@@ -113,6 +114,13 @@ export default class Carousel {
     ) as HTMLElement | null;
   }
 
+  private isBleedRight(): boolean {
+    return (
+      this.element.classList.contains(CLASS_BLEED_RIGHT) ||
+      this.element.classList.contains(CLASS_BLEED_RIGHT_NO_LEFT)
+    );
+  }
+
   private getSlidesPerView(): number {
     return Number(this.instance?.params?.slidesPerView) || 1;
   }
@@ -146,7 +154,7 @@ export default class Carousel {
   }
 
   private getOverflowWidth(viewportWrapper?: HTMLElement): number {
-    const isBleedRight = this.element.classList.contains(CLASS_BLEED_RIGHT);
+    const isBleedRight = this.isBleedRight();
     const containerWidth = isBleedRight
       ? this.element.clientWidth || viewportWrapper?.clientWidth || 0
       : this.viewport?.clientWidth || 0;
@@ -223,7 +231,7 @@ export default class Carousel {
       this.getCustomOptions();
     }
 
-    const isBleedRight = this.element.classList.contains(CLASS_BLEED_RIGHT);
+    const isBleedRight = this.isBleedRight();
 
     this.instance = new Swiper(this.viewport, {
       ...this.config,
@@ -248,7 +256,7 @@ export default class Carousel {
 
     this.updateCarouselEnabledState();
 
-    if (this.element.classList.contains(CLASS_BLEED_RIGHT)) {
+    if (this.isBleedRight()) {
       this.adjustConfigForBleedRight();
       this.fixBleedRightScrollbar();
     }
@@ -480,13 +488,18 @@ export default class Carousel {
       document.documentElement?.clientWidth || window.innerWidth || 0;
     const wrapperRect = viewportWrapper.getBoundingClientRect();
     const rootRect = this.element.getBoundingClientRect();
+    const isBleedRightNoLeft = this.element.classList.contains(
+      CLASS_BLEED_RIGHT_NO_LEFT,
+    );
     const stableLeftInsetSource =
       rootRect.left > 0 ? rootRect.left : wrapperRect.left;
     const leftInset = Math.max(Math.floor(stableLeftInsetSource), 0);
-    const shellWidth = Math.max(Math.floor(viewportWidth), containerWidth, 0);
-    const shellMarginLeft = -leftInset;
+    const shellWidth = isBleedRightNoLeft
+      ? Math.max(Math.floor(viewportWidth - leftInset), containerWidth, 0)
+      : Math.max(Math.floor(viewportWidth), containerWidth, 0);
+    const shellMarginLeft = isBleedRightNoLeft ? 0 : -leftInset;
     const bleedViewportWidth = Math.max(
-      shellWidth - leftInset,
+      isBleedRightNoLeft ? shellWidth : shellWidth - leftInset,
       containerWidth,
       0,
     );
@@ -501,11 +514,12 @@ export default class Carousel {
         : slidesCount > slidesPerView;
     const shouldDisableBleed = !hasIntrinsicOverflow;
     const shouldEnableBleedClass = !shouldDisableBleed;
-    const hadBleedClass = this.element.classList.contains(CLASS_BLEED_RIGHT);
+    const hadBleedClass = this.isBleedRight();
     const nextBleedViewportWidth = shouldDisableBleed
       ? "100%"
       : `${bleedViewportWidth}px`;
-    const nextBleedMarginLeft = shouldDisableBleed ? "0px" : `${leftInset}px`;
+    const nextBleedMarginLeft =
+      shouldDisableBleed || isBleedRightNoLeft ? "0px" : `${leftInset}px`;
     const nextBleedShellWidth = shouldDisableBleed ? "100%" : `${shellWidth}px`;
     const nextBleedShellMarginLeft = shouldDisableBleed
       ? "0px"
@@ -524,7 +538,9 @@ export default class Carousel {
         "--carousel-bleed-shell-margin-left",
       ) !== nextBleedShellMarginLeft;
 
-    this.element.classList.toggle(CLASS_BLEED_RIGHT, shouldEnableBleedClass);
+    if (!isBleedRightNoLeft) {
+      this.element.classList.toggle(CLASS_BLEED_RIGHT, shouldEnableBleedClass);
+    }
 
     const baseWidth = shouldDisableBleed ? undefined : containerWidth;
     this.instance.params.width = baseWidth;

package/src/components/Carousel/Carousel.tsx

@@ -1,12 +1,14 @@
 "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";
 import { CarouselItem } from "./CarouselItem";
 import {
+  CLASS_BLEED_RIGHT_NO_LEFT,
   CLASS_CONTROLS,
   CLASS_DOTS,
   CLASS_NAVIGATION,
@@ -33,6 +35,8 @@ interface CarouselProps<T = ReactNode> extends HTMLAttributes<HTMLDivElement> {
   showScrollbar?: boolean;
   /** Make carousel bleed to the right edge of screen while keeping left aligned with container */
   bleedRight?: boolean;
+  /** Make carousel bleed right from its root edge without bleeding left */
+  bleedRightNoLeft?: boolean;
   className?: string;
 }
 
@@ -48,6 +52,7 @@ const Carousel = <T,>({
   renderItems,
   showScrollbar = false,
   bleedRight = false,
+  bleedRightNoLeft = false,
   ...other
 }: CarouselProps<T>) => {
   const [carouselRef] = useStatic(CarouselStatic);
@@ -71,6 +76,7 @@ const Carousel = <T,>({
   const classes = cx(CLASS_ROOT, className, {
     [`${CLASS_ROOT}--scrollbar`]: showScrollbar,
     [`${CLASS_ROOT}--bleed-right`]: bleedRight,
+    [CLASS_BLEED_RIGHT_NO_LEFT]: bleedRightNoLeft,
   });
 
   const elementClasses = {

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/Carousel/constants.ts

@@ -18,6 +18,7 @@ export const CLASS_SCROLLBAR_DRAG = `${CLASS_ROOT}__scrollbar-drag`;
 export const CLASS_ACTIVE = "is-active";
 export const CLASS_SCROLLBAR_VARIANT = `${CLASS_ROOT}--scrollbar`;
 export const CLASS_BLEED_RIGHT = `${CLASS_ROOT}--bleed-right`;
+export const CLASS_BLEED_RIGHT_NO_LEFT = `${CLASS_ROOT}--bleed-right-no-left`;
 
 export const SELECTOR_VIEWPORT = `.${CLASS_VIEWPORT}`;
 export const SELECTOR_TRACK = `.${CLASS_TRACK}`;

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

@@ -9,7 +9,8 @@
       @include mixins.scrollbar-variant;
     }
 
-    &--bleed-right {
+    &--bleed-right,
+    &--bleed-right-no-left {
       @include mixins.bleed-right-variant;
     }
 

package/src/components/Carousel/tests/Carousel.static.test.jsx

@@ -901,6 +901,91 @@ describe("Carousel Static - Auto-Disable Feature", () => {
       });
     });
 
+    it("should keep the left edge fixed for no-left bleed geometry", () => {
+      const originalInnerWidth = window.innerWidth;
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: 1000,
+      });
+
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 1.2;
+
+      document.body.innerHTML = `
+        <div class="carousel carousel--bleed-right-no-left" data-carousel-id="test-carousel" id="test-carousel">
+          <div class="carousel__viewport-wrapper">
+            <div class="carousel__viewport">
+              <div class="carousel__track">
+                <div class="carousel__slide">Slide 1</div>
+                <div class="carousel__slide">Slide 2</div>
+                <div class="carousel__slide">Slide 3</div>
+              </div>
+            </div>
+          </div>
+          <div class="carousel__pagination"></div>
+        </div>
+      `;
+
+      carouselElement = document.querySelector(".carousel");
+      const viewportWrapper = carouselElement.querySelector(
+        ".carousel__viewport-wrapper",
+      );
+      const track = carouselElement.querySelector(".carousel__track");
+
+      Object.defineProperty(viewportWrapper, "clientWidth", {
+        configurable: true,
+        value: 800,
+      });
+      Object.defineProperty(track, "scrollWidth", {
+        configurable: true,
+        value: 1200,
+      });
+      Object.defineProperty(viewportWrapper, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          right: 920,
+          bottom: 200,
+          left: 120,
+          width: 800,
+          height: 200,
+          x: 120,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(
+        carouselElement.style.getPropertyValue(
+          "--carousel-bleed-viewport-width",
+        ),
+      ).toBe("880px");
+      expect(
+        carouselElement.style.getPropertyValue("--carousel-bleed-margin-left"),
+      ).toBe("0px");
+      expect(
+        carouselElement.style.getPropertyValue("--carousel-bleed-shell-width"),
+      ).toBe("880px");
+      expect(
+        carouselElement.style.getPropertyValue(
+          "--carousel-bleed-shell-margin-left",
+        ),
+      ).toBe("0px");
+
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: originalInnerWidth,
+      });
+    });
+
     it("should calculate bleed-right scrollbar drag from logical viewport, not shell width", () => {
       mockSwiperInstance.slides = [
         document.createElement("div"),

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

@@ -365,6 +365,15 @@ describe("rendering Carousel", () => {
       expect(carousel).toHaveClass("carousel--bleed-right");
     });
 
+    it("should support right bleed without left bleed", () => {
+      const { container } = render(
+        <Carousel items={items} bleedRightNoLeft showScrollbar />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveClass("carousel--bleed-right-no-left");
+      expect(carousel).not.toHaveClass("carousel--bleed-right");
+    });
+
     it("should support minimal slides for testing auto-disable", () => {
       const minimalItems = [<p key="item1">item1</p>];
       const { container } = render(<Carousel items={minimalItems} />);

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,