@orangesk/orange-design-system 3.1.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -24,9 +24,10 @@
     "./public/*": "./public/*"
   },
   "scripts": {
-    "dev": "npm run build:scss-exports && npm run build:search-index && next dev",
-    "build": "npm run build:scss-exports && npm run build:search-index && next build && npm run sprite",
+    "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",
@@ -55,7 +56,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.12",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -63,24 +64,24 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.4.11",
-    "html-react-parser": "6.1.3",
+    "dompurify": "^3.4.12",
+    "html-react-parser": "6.1.5",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.2.9",
+    "next": "16.2.12",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
-    "query-string": "^9.4.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "query-string": "^9.4.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-element-to-jsx-string": "^17.0.1",
-    "react-is": "^19.2.7",
+    "react-is": "^19.2.8",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "12.2.0",
+    "swiper": "14.0.7",
     "tabbable": "^6.5.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
@@ -99,38 +100,38 @@
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@rollup/rollup-darwin-arm64": "^4.62.2",
+    "@rollup/rollup-darwin-arm64": "^4.62.3",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/jest-dom": "7.0.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "26.0.1",
+    "@types/node": "26.1.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
-    "@vitejs/plugin-react": "6.0.3",
-    "@vitest/browser": "^4.1.9",
-    "@vitest/browser-playwright": "^4.1.9",
-    "@vitest/coverage-v8": "^4.1.9",
-    "@vitest/ui": "^4.1.9",
+    "@vitejs/plugin-react": "6.0.4",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/ui": "^4.1.10",
     "canvas": "^3.2.3",
-    "fs-extra": "^11.3.5",
+    "fs-extra": "^11.4.0",
     "glob": "13.0.6",
-    "html-validate": "11.5.3",
+    "html-validate": "11.6.0",
     "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",
-    "rollup": "^4.62.2",
+    "jsdom": "30.0.1",
+    "lint-staged": "17.2.0",
+    "playwright": "^1.62.0",
+    "prettier": "^3.9.6",
+    "rollup": "^4.62.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.101.0",
+    "sass": "^1.102.0",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.3",
-    "vitest": "^4.1.9",
+    "vitest": "^4.1.10",
     "vitest-axe": "^0.1.0",
     "vitest-browser-react": "^2.2.0"
   },

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/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/quote.svg

@@ -1,4 +1,4 @@
 <svg width="80" height="80" viewBox="0 0 80 80" fill="none"
   xmlns="http://www.w3.org/2000/svg">
-  <path d="M33.8776 61.8775H15V43C15 39.5986 15.3402 36.424 16.0205 33.4762C16.8141 30.415 17.9479 27.7506 19.4218 25.483C21.0091 23.2154 22.9933 21.4014 25.3742 20.0408C27.7552 18.6803 30.5329 18 33.7075 18V26.5034C31.78 26.5034 30.1928 27.0136 28.9456 28.034C27.6984 28.941 26.678 30.1882 25.8844 31.7755C25.0907 33.3628 24.5238 35.1769 24.1837 37.2177C23.957 39.1451 23.8436 41.0725 23.8436 43H33.8776V61.8775ZM65 61.8775H46.1225V43C46.1225 39.5986 46.4626 36.424 47.1429 33.4762C47.9365 30.415 49.0703 27.7506 50.5442 25.483C52.1315 23.2154 54.1157 21.4014 56.4966 20.0408C58.8776 18.6803 61.6554 18 64.83 18V26.5034C62.9025 26.5034 61.3152 27.0136 60.068 28.034C58.8208 28.941 57.8004 30.1882 57.0068 31.7755C56.2131 33.3628 55.6462 35.1769 55.3061 37.2177C55.0794 39.1451 54.966 41.0725 54.966 43H65V61.8775Z" fill="currentColor"/>
+  <path d="M31.8256 67.9366H8.3335V44.4446C8.3335 40.2118 8.75685 36.2612 9.60341 32.5927C10.5911 28.7832 12.002 25.4675 13.8362 22.6457C15.8115 19.8238 18.2807 17.5663 21.2436 15.8732C24.2066 14.1801 27.6633 13.3335 31.6139 13.3335V23.9155C29.2153 23.9155 27.24 24.5504 25.688 25.8203C24.136 26.949 22.8662 28.501 21.8785 30.4763C20.8909 32.4517 20.1854 34.7091 19.7621 37.2488C19.4799 39.6474 19.3388 42.046 19.3388 44.4446H31.8256V67.9366ZM70.5557 67.9366H47.0637V44.4446C47.0637 40.2118 47.4869 36.2612 48.3335 32.5927C49.3212 28.7832 50.7321 25.4675 52.5663 22.6457C54.5416 19.8238 57.0108 17.5663 59.9737 15.8732C62.9367 14.1801 66.3935 13.3335 70.3441 13.3335V23.9155C67.9455 23.9155 65.9701 24.5504 64.4181 25.8203C62.8661 26.949 61.5963 28.501 60.6086 30.4763C59.621 32.4517 58.9155 34.7091 58.4922 37.2488C58.21 39.6474 58.0689 42.046 58.0689 44.4446H70.5557V67.9366Z" 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/assets/icons/star-empty-thin.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.5175 11.5451L19.6298 11.7785L19.8857 11.8215L28.454 13.2482L22.0361 18.9543L21.8095 19.1555L21.8827 19.4494L24.0058 27.9426L16.2079 23.6887L15.9677 23.5588L15.7284 23.6887L7.92961 27.9426L10.0536 19.4494L10.1269 19.1555L9.90031 18.9543L3.48137 13.2482L12.0507 11.8215L12.3066 11.7785L12.4189 11.5451L15.9677 4.16132L19.5175 11.5451Z" stroke="currentColor"/>
+</svg>

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,36 @@
+import cx from "classnames";
+import React, { HTMLAttributes } from "react";
+
+import { Icon } from "../Icon";
+
+const CLASS_ROOT = "avatar";
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  alt?: string;
+  iconName?: string;
+  src: string;
+}
+
+export const Avatar: React.FC<AvatarProps> = ({
+  alt = "",
+  className,
+  iconName,
+  src,
+  ...other
+}) => {
+  const hasDecoration = Boolean(iconName);
+  const classes = cx(CLASS_ROOT, className);
+
+  return (
+    <div className={classes} {...other}>
+      {hasDecoration && (
+        <span className={`${CLASS_ROOT}__icon`} aria-hidden="true">
+          <Icon name={iconName!} size="small" />
+        </span>
+      )}
+      <img className={`${CLASS_ROOT}__image`} src={src} alt={alt} />
+    </div>
+  );
+};
+
+Avatar.displayName = "Avatar";

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export type { AvatarProps } from "./Avatar";
+export { Avatar } from "./Avatar";

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

@@ -0,0 +1,11 @@
+@use "sass:math";
+@use "../../../styles/tools/convert";
+
+$avatar-size: convert.to-rem(64px);
+$badge-size: convert.to-rem(24px);
+$badge-offset: convert.to-rem(4px);
+$badge-top: -$badge-offset;
+$badge-right: -$badge-offset;
+$badge-anchor-x: math.div($badge-size, 2) - $badge-offset;
+$badge-anchor-y: math.div($badge-size, 2) - $badge-offset;
+$badge-cutout-radius: convert.to-rem(12px);

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

@@ -0,0 +1,53 @@
+@use "./config";
+
+@mixin base {
+  position: relative;
+  display: inline-flex;
+  width: config.$avatar-size;
+  height: config.$avatar-size;
+  flex-shrink: 0;
+  vertical-align: top;
+  border-radius: 50%;
+}
+
+@mixin image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: center;
+}
+
+@mixin image-with-decoration {
+  -webkit-mask-image: radial-gradient(
+    circle at calc(100% - #{config.$badge-anchor-x}) #{config.$badge-anchor-y},
+    transparent #{config.$badge-cutout-radius},
+    black calc(#{config.$badge-cutout-radius} + 1px)
+  );
+  mask-image: radial-gradient(
+    circle at calc(100% - #{config.$badge-anchor-x}) #{config.$badge-anchor-y},
+    transparent #{config.$badge-cutout-radius},
+    black calc(#{config.$badge-cutout-radius} + 1px)
+  );
+}
+
+@mixin icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: config.$badge-size;
+  height: config.$badge-size;
+  background-color: transparent;
+  color: var(--color-icon-default);
+  line-height: 1;
+}
+
+@mixin badge {
+  position: absolute;
+  top: config.$badge-top;
+  right: config.$badge-right;
+  z-index: 1;
+  width: config.$badge-size;
+  height: config.$badge-size;
+}

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

@@ -0,0 +1,20 @@
+@use "./mixins";
+
+@layer components {
+  .avatar {
+    @include mixins.base;
+
+    &__image {
+      @include mixins.image;
+    }
+
+    &__icon {
+      @include mixins.icon;
+      @include mixins.badge;
+    }
+
+    &__icon ~ &__image {
+      @include mixins.image-with-decoration;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { Avatar } from "../";
+
+const example = (
+  <Avatar
+    className="surface-secondary"
+    src="/avatar.png"
+    alt="Person avatar"
+    iconName="quote"
+  />
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,45 @@
+import { render } from "@testing-library/react";
+
+import { Avatar } from "../Avatar";
+
+describe("rendering Avatar", () => {
+  it("has default avatar class", () => {
+    const { getByTestId } = render(
+      <Avatar src="/avatar.png" alt="Person avatar" data-testid="test-id" />,
+    );
+    expect(getByTestId("test-id")).toHaveClass("avatar");
+  });
+
+  it("renders image when src is set", () => {
+    const { getByAltText } = render(
+      <Avatar src="/avatar.png" alt="Person avatar" />,
+    );
+    expect(getByAltText("Person avatar")).toHaveAttribute("src", "/avatar.png");
+  });
+
+  it("does not render decoration by default", () => {
+    const { container } = render(
+      <Avatar src="/avatar.png" alt="Person avatar" />,
+    );
+    expect(container.getElementsByClassName("avatar__icon").length).toBe(0);
+  });
+
+  it("renders decoration when image and iconName are set", () => {
+    const { container } = render(
+      <Avatar src="/avatar.png" alt="Person avatar" iconName="quote" />,
+    );
+    expect(container.getElementsByClassName("avatar__icon").length).toBe(1);
+  });
+
+  it("passes custom classes through", () => {
+    const { getByTestId } = render(
+      <Avatar
+        src="/avatar.png"
+        alt="Person avatar"
+        data-testid="test-id"
+        className="surface-secondary"
+      />,
+    );
+    expect(getByTestId("test-id")).toHaveClass("surface-secondary");
+  });
+});

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.static.ts

@@ -177,6 +177,19 @@ export default class Carousel {
   }
 
   constructor(element: HTMLElement, config?: Partial<SwiperOptions>) {
+    const scrollbarEl = element.querySelector(
+      SELECTOR_SCROLLBAR,
+    ) as HTMLElement | null;
+    const configScrollbar =
+      typeof config?.scrollbar === "object" && config.scrollbar !== null
+        ? config.scrollbar
+        : undefined;
+    const defaultScrollbar =
+      typeof defaultConfig.scrollbar === "object" &&
+      defaultConfig.scrollbar !== null
+        ? defaultConfig.scrollbar
+        : undefined;
+
     this.element = element;
     this.config = {
       ...defaultConfig,
@@ -184,9 +197,10 @@ export default class Carousel {
       scrollbar: {
         ...((defaultConfig.scrollbar ?? {}) as object),
         ...((config?.scrollbar ?? {}) as object),
-        el: this.element.querySelector(
-          SELECTOR_SCROLLBAR,
-        ) as HTMLElement | null,
+        el: scrollbarEl,
+        enabled: scrollbarEl
+          ? (configScrollbar?.enabled ?? defaultScrollbar?.enabled)
+          : false,
       },
     };
 

package/src/components/Carousel/Carousel.tsx

@@ -1,13 +1,15 @@
 "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 { Controls } from "../Controls";
 import CarouselStatic from "./Carousel.static";
 import { CarouselItem } from "./CarouselItem";
 import {
+  CLASS_CONTROLS,
   CLASS_DOTS,
+  CLASS_NAVIGATION,
   CLASS_NEXT,
   CLASS_PREV,
   CLASS_ROOT,
@@ -18,11 +20,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 +36,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,
@@ -54,9 +74,11 @@ const Carousel: React.FC<CarouselProps> = ({
   });
 
   const elementClasses = {
+    navigation: cx(CLASS_NAVIGATION),
+    controls: cx(CLASS_CONTROLS),
     prev: cx(CLASS_PREV),
     next: cx(CLASS_NEXT),
-    dots: cx(CLASS_DOTS, showScrollbar ? "hide" : "show-md"),
+    dots: cx(CLASS_DOTS),
   };
 
   const customSwiperOptions = showScrollbar
@@ -82,35 +104,36 @@ const Carousel: React.FC<CarouselProps> = ({
         <div className={CLASS_VIEWPORT}>
           <div className={CLASS_TRACK}>{carouselItems}</div>
         </div>
-        {showScrollbar ? null : (
-          <>
-            <button
-              type="button"
-              aria-label="Naspäť"
-              className={elementClasses.prev}
-            >
-              <Icon size="medium" name="chevron-left" />
-            </button>
-            <button
-              type="button"
-              aria-label="Ďalej"
-              className={elementClasses.next}
-            >
-              <Icon size="medium" name="chevron-right" />
-            </button>
-          </>
-        )}
       </div>
 
-      {!showScrollbar && <div role="tablist" className={elementClasses.dots} />}
+      {!showScrollbar && (
+        <div className={elementClasses.navigation}>
+          <div role="tablist" className={elementClasses.dots} />
+          <div className={elementClasses.controls}>
+            <Controls
+              className={elementClasses.prev}
+              icon="chevron-left"
+              aria-label="Naspäť"
+            />
+            <Controls
+              className={elementClasses.next}
+              icon="chevron-right"
+              aria-label="Ďalej"
+            />
+          </div>
+        </div>
+      )}
 
-      <div className={cx(CLASS_SCROLLBAR, !showScrollbar && "hide-md")}>
-        <div className={CLASS_SCROLLBAR_DRAG} />
-      </div>
+      {showScrollbar && (
+        <div className={CLASS_SCROLLBAR}>
+          <div className={CLASS_SCROLLBAR_DRAG} />
+        </div>
+      )}
     </div>
   );
 };
 
 Carousel.displayName = "Carousel";
 
+export type { CarouselProps };
 export { Carousel };

package/src/components/Carousel/constants.ts

@@ -9,6 +9,8 @@ export const CLASS_SLIDE_PREV = `${CLASS_ROOT}__slide-prev`;
 export const CLASS_PREV = `${CLASS_ROOT}__prev`;
 export const CLASS_NEXT = `${CLASS_ROOT}__next`;
 export const CLASS_DOTS = `${CLASS_ROOT}__pagination`;
+export const CLASS_NAVIGATION = `${CLASS_ROOT}__navigation`;
+export const CLASS_CONTROLS = `${CLASS_ROOT}__controls`;
 export const CLASS_DOT = `${CLASS_ROOT}__pagination-item`;
 export const CLASS_SCROLLBAR = `${CLASS_ROOT}__scrollbar`;
 export const CLASS_SCROLLBAR_HORIZONTAL = `${CLASS_ROOT}__scrollbar-horizontal`;

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

@@ -6,11 +6,13 @@
 $space: space.get();
 
 $dot-layout: (
-  width: space.get("medium"),
-  height: space.get("medium"),
-  margin: space.get("small"),
+  width: convert.to-rem(10px),
+  height: convert.to-rem(10px),
+  margin: convert.to-rem(8px),
 );
 
+$navigation-gap: convert.to-rem(16px);
+
 $dot: (
   default: var(--color-icon-default),
   hover: var(--color-icon-brand),
@@ -23,8 +25,3 @@ $breakout-buttons-breakpoints: (
   (1340px, 1379px),
   (1460px)
 );
-
-$viewport-horizontal-spacing: (
-  // button dimension + space - slide padding,
-  "md": convert.to-rem(50px)
-);