@tui-cruises/mein-schiff-web-react-component-library 2.2.2 → 2.2.4

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.2.4](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.3.0...v2.2.4) (2025-07-23)
+
+
+### Features
+
+* **icons:** add mail and pause icons, update circle, plus-circle and phone ([3c2291b](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/3c2291b0f829c88be2f9a5e13f400419c134c32a))
+* **Tabs:** add `on` prop to control background context ([127dd83](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/127dd8319d205d6ec84c85c89e3b1959f3bfa9d7))
+
+
+### Bug Fixes
+
+* **EC-2101:** set IconButton as 'use client' to fix import problems ([9cd7b87](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/9cd7b8743309953e97a4768c9933a561ca3920e1))
+* **EC-2101:** set IconButton as 'use client' to fix import problems ([6a1c421](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/6a1c42100b9f38fd3b6ed7c9b8d931afe4774b7c))
+* **OM-2207:** form label with error style for data-invalid attribute ([285587c](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/285587cee026b4dc5c9d9ca5efa8fc87080244c8))
+* remove FieldSetVariant from InputFieldInput.tsx ([75ba4f0](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/75ba4f03c80a43115e98c0d6c5cb0f913c824f1b))
+* remove FieldSetVariant from InputFieldInput.tsx ([918af78](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/918af7869d319b3a00bd6aae4ee540907ef976d5))
+* **Stepper:** update tracking parameter (EC-2069) ([ed64438](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/ed644389bfb5bd76ade919515598c015bb702a7d))
+
+### [2.2.3](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.2...v2.2.3) (2025-07-21)
+
+
+### Features
+
+* add responsive sizes to Icons, Pictograms and IconButtons. Removed numeric size properties ([49704b69](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/75ba4f03c80a43115e98c0d6c5cb0f913c824f1b))
+
 ### [2.2.2](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.1...v2.2.2) (2025-07-18)
 
 

package/icons/icons/circle.tsx

@@ -10,10 +10,10 @@ const SvgCircle = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10"
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M1.25 12C1.25 6.063 6.063 1.25 12 1.25S22.75 6.063 22.75 12 17.937 22.75 12 22.75 1.25 17.937 1.25 12M12 2.75a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 0 0 0-18.5"
+      clipRule="evenodd"
     />
   </svg>
 );

package/icons/icons/index.ts

@@ -66,6 +66,7 @@ export const dynamicComponents = {
   'log-in': dynamic(() => import('./log-in'), { ssr: false }),
   'log-out': dynamic(() => import('./log-out'), { ssr: false }),
   'mail-open': dynamic(() => import('./mail-open'), { ssr: false }),
+  mail: dynamic(() => import('./mail'), { ssr: false }),
   map: dynamic(() => import('./map'), { ssr: false }),
   'maps-arrow-diagonal': dynamic(() => import('./maps-arrow-diagonal'), {
     ssr: false,
@@ -89,6 +90,7 @@ export const dynamicComponents = {
   'nav-arrow-up': dynamic(() => import('./nav-arrow-up'), { ssr: false }),
   'no-wifi': dynamic(() => import('./no-wifi'), { ssr: false }),
   'old-trips': dynamic(() => import('./old-trips'), { ssr: false }),
+  pause: dynamic(() => import('./pause'), { ssr: false }),
   percentage: dynamic(() => import('./percentage'), { ssr: false }),
   phone: dynamic(() => import('./phone'), { ssr: false }),
   pin: dynamic(() => import('./pin'), { ssr: false }),

package/icons/icons/mail.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react';
+const SvgMail = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    color="currentColor"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M2.75 7c0-.69.56-1.25 1.25-1.25h16c.69 0 1.25.56 1.25 1.25v10c0 .69-.56 1.25-1.25 1.25H4c-.69 0-1.25-.56-1.25-1.25zM4 4.25A2.75 2.75 0 0 0 1.25 7v10A2.75 2.75 0 0 0 4 19.75h16A2.75 2.75 0 0 0 22.75 17V7A2.75 2.75 0 0 0 20 4.25zm3.43 4.136a.75.75 0 1 0-.86 1.228l5 3.5a.75.75 0 0 0 .86 0l5-3.5a.75.75 0 1 0-.86-1.228L12 11.585z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgMail;

package/icons/icons/pause.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react';
+const SvgPause = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    color="currentColor"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M9.25 4a.75.75 0 0 0-.75.75v14.5a.75.75 0 0 0 1.5 0V4.75A.75.75 0 0 0 9.25 4m5.5 0a.75.75 0 0 0-.75.75v14.5a.75.75 0 0 0 1.5 0V4.75a.75.75 0 0 0-.75-.75"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgPause;

package/icons/icons/phone.tsx

@@ -10,10 +10,10 @@ const SvgPhone = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M18.118 14.702 14 15.5c-2.782-1.396-4.5-3-5.5-5.5l.77-4.13L7.815 2H4.064c-1.128 0-2.016.932-1.847 2.047.42 2.783 1.66 7.83 5.283 11.453 3.805 3.805 9.286 5.456 12.302 6.113 1.165.253 2.198-.655 2.198-1.848v-3.584z"
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M2.028 4.73C1.798 3.214 3.016 2 4.458 2h3.521c.293 0 .556.182.66.456l1.366 3.633c.045.12.056.25.033.377l-.685 3.672c.841 1.98 2.231 3.31 4.537 4.502l3.628-.703a.7.7 0 0 1 .385.033l3.644 1.389a.7.7 0 0 1 .453.658v3.365c0 1.525-1.344 2.764-2.917 2.422l.15-.688-.15.688c-2.867-.624-8.177-2.21-11.897-5.929l.498-.498-.498.498C3.623 12.312 2.43 7.391 2.028 4.731l.696-.106zm2.43-1.322c-.675 0-1.125.537-1.038 1.112.388 2.566 1.521 7.119 4.762 10.36 3.425 3.424 8.404 4.94 11.2 5.548.614.133 1.21-.334 1.21-1.046v-2.88l-3.003-1.144-3.67.71a.7.7 0 0 1-.449-.062c-2.717-1.363-4.48-2.98-5.501-5.53a.7.7 0 0 1-.038-.39L8.617 6.4 7.492 3.408z"
+      clipRule="evenodd"
     />
   </svg>
 );

package/icons/icons/plus-circle.tsx

@@ -10,10 +10,16 @@ const SvgPlusCircle = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M8 12h4m4 0h-4m0 0V8m0 4v4M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10"
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12 7.25a.75.75 0 0 1 .75.75v3.25H16a.75.75 0 0 1 0 1.5h-3.25V16a.75.75 0 0 1-1.5 0v-3.25H8a.75.75 0 0 1 0-1.5h3.25V8a.75.75 0 0 1 .75-.75"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12 2.75a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 0 0 0-18.5M1.25 12C1.25 6.063 6.063 1.25 12 1.25S22.75 6.063 22.75 12 17.937 22.75 12 22.75 1.25 17.937 1.25 12"
+      clipRule="evenodd"
     />
   </svg>
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tui-cruises/mein-schiff-web-react-component-library",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "type": "module",

package/src/components/core/AlertDialog/AlertDialog.tsx

@@ -47,6 +47,11 @@ type Props = PropsWithChildren<{
    */
   open?: boolean;
 
+  /**
+   * A React node that will be rendered as the trigger for the modal.
+   */
+  trigger?: ReactNode;
+
   /**
    * Callback fired when the modal's open state changes.
    */
@@ -254,9 +259,15 @@ export const AlertDialog: FC<Props> = ({
   container,
   centerItems = true,
   containerClassName,
+  trigger,
 }) => {
   return (
     <AlertDialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      {trigger && (
+        <AlertDialogPrimitive.Trigger asChild>
+          {trigger}
+        </AlertDialogPrimitive.Trigger>
+      )}
       <AlertDialogPrimitive.Portal container={container || undefined}>
         <AlertDialogPrimitive.Overlay
           className={twJoin(

package/src/components/core/Icon/Icon.tsx

@@ -2,7 +2,12 @@
 
 import { dynamicComponents as dynamicComponentsIcons } from '../../../../icons/icons';
 import type { ComponentType, SVGProps } from 'react';
-import { twJoin } from 'tailwind-merge';
+import { twJoin, twMerge } from 'tailwind-merge';
+import {
+  ResponsiveValueClassMap,
+  getClassNamesFromMap,
+  ResponsiveValue,
+} from '../../../helpers/responsive-property';
 
 // Type for local icons
 type DynamicComponentIconName = keyof typeof dynamicComponentsIcons;
@@ -10,6 +15,15 @@ type DynamicComponentIconName = keyof typeof dynamicComponentsIcons;
 // Union of both types to create a comprehensive IconName type
 export type IconName = DynamicComponentIconName;
 
+/**
+ * The size of the icon.
+ * 'xs' (16x16), 'sm' (20x20),
+ * 'md' (24x24), 'lg' (32x32).
+ *
+ * @default 'md'
+ */
+type IconSize = 'xs' | 'sm' | 'md' | 'lg';
+
 export type IconProps = {
   /**
    * Additional TailwindCSS utilities can be added with this prop.
@@ -27,56 +41,90 @@ export type IconProps = {
    *
    * @default 'md'
    */
-  size?: number | 'xs' | 'sm' | 'md' | 'lg';
+  size?: ResponsiveValue<IconSize>;
 };
 
 /**
- *  Component to display an icon, based on the [local icon library](/docs/foundation-icons-pictograms--docs).
+ *  Component to display an icon, based on the [Iconoir icon library](https://iconoir.com/)
+ *  or a custom local icon library.
  *
  *  @component
  *  @param {IconProps} props - The props for the Icon component.
  *  @returns {JSX.Element | null} The rendered icon component or null if the icon is not found.
  */
 const Icon = (props: IconProps) => {
-  const { className, name, size = 'md' } = props;
+  const { name, size } = props;
 
   const IconComponent = getIconComponent(name);
   if (!IconComponent) {
     return null;
   }
 
-  const iconSize = getIconSize(size);
+  let classNameContainsSize = ['size-', 'h-', 'w-'].some(prefix =>
+    props.className?.includes(prefix),
+  );
 
   return (
-    <IconComponent
-      className={twJoin('pointer-events-none', className)}
-      width={iconSize}
-      height={iconSize}
-    />
+    <span
+      className={twMerge(
+        'block',
+        !classNameContainsSize && getClassNamesFromMap(sizeCssMap, size, 'md'),
+        props.className,
+      )}
+    >
+      <IconComponent
+        className={twJoin(
+          'pointer-events-none block size-full',
+          name === 'loading' && 'animate-spin',
+        )}
+      />
+    </span>
   );
 };
 
-/**
- * Helper function to get the icon size in pixels.
- *
- * @param {NonNullable<IconProps['size']>} size - The size prop, either a number or a predefined size string.
- * @returns {number} The size in pixels.
- */
-const getIconSize = (size: NonNullable<IconProps['size']>) => {
-  if (typeof size === 'number') {
-    return size;
-  }
-
-  switch (size) {
-    case 'xs':
-      return 16;
-    case 'sm':
-      return 20;
-    case 'lg':
-      return 32;
-    default:
-      return 24;
-  }
+const sizeCssMap: ResponsiveValueClassMap<IconSize> = {
+  initial: {
+    xs: 'size-[16px]',
+    sm: 'size-[20px]',
+    md: 'size-[24px]',
+    lg: 'size-[32px]',
+  },
+  xs: {
+    xs: 'xs:size-[16px]',
+    sm: 'xs:size-[20px]',
+    md: 'xs:size-[24px]',
+    lg: 'xs:size-[32px]',
+  },
+  sm: {
+    xs: 'sm:size-[16px]',
+    sm: 'sm:size-[20px]',
+    md: 'sm:size-[24px]',
+    lg: 'sm:size-[32px]',
+  },
+  md: {
+    xs: 'md:size-[16px]',
+    sm: 'md:size-[20px]',
+    md: 'md:size-[24px]',
+    lg: 'md:size-[32px]',
+  },
+  lg: {
+    xs: 'lg:size-[16px]',
+    sm: 'lg:size-[20px]',
+    md: 'lg:size-[24px]',
+    lg: 'lg:size-[32px]',
+  },
+  xl: {
+    xs: 'xl:size-[16px]',
+    sm: 'xl:size-[20px]',
+    md: 'xl:size-[24px]',
+    lg: 'xl:size-[32px]',
+  },
+  xxl: {
+    xs: '2xl:size-[16px]',
+    sm: '2xl:size-[20px]',
+    md: '2xl:size-[24px]',
+    lg: '2xl:size-[32px]',
+  },
 };
 
 /**

package/src/components/core/IconButton/IconButton.tsx

@@ -9,7 +9,11 @@ import {
 import { twJoin, twMerge } from 'tailwind-merge';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { wrapSlottableChildren } from '../../../helpers/slot';
-import { useScreenNameAtLeast } from '../../../hooks/use-screen-name-at-least';
+import {
+  getClassNamesFromMap,
+  ResponsiveValue,
+  ResponsiveValueClassMap,
+} from '../../../helpers/responsive-property';
 
 type CommonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   asChild?: boolean;
@@ -18,14 +22,18 @@ type CommonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   on?: 'white' | 'gray' | 'ocean' | 'image';
 };
 
+type RegularSize = 'sm' | 'md' | 'lg';
+type GhostButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
 export type IconButtonPrimaryAndSecondaryProps = CommonProps & {
   variant?: 'primary' | 'secondary';
-  size?: 'sm' | 'md' | 'lg';
+  /** The button's size. Defaults to `sm`. */
+  size?: ResponsiveValue<RegularSize>;
 };
 
 export type IconButtonGhostProps = CommonProps & {
   variant: 'ghost';
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: ResponsiveValue<GhostButtonSize>;
 };
 
 export type IconButtonProps =
@@ -37,7 +45,7 @@ const IconButtonRenderFunction: ForwardRefRenderFunction<
   IconButtonProps
 > = (props, ref) => {
   const {
-    size = 'md',
+    size,
     variant = 'primary',
     on = 'white',
     iconName,
@@ -47,20 +55,10 @@ const IconButtonRenderFunction: ForwardRefRenderFunction<
     ...rest
   } = props;
 
-  // Assuming `useScreenNameAtLeast` is returning a screen size string
-  const isMdOrAbove = useScreenNameAtLeast('md', 'md');
-
-  let resolvedIconSize = size;
-  if (size === 'xs' && isMdOrAbove) {
-    resolvedIconSize = 'md';
-  }
-
   const buttonClassNames = twMerge(
     'inline-flex rounded-full transition-all',
 
-    size === 'xs' && 'p-0.5', // 20px
-    size === 'sm' && 'p-3 md:p-2', // 36px
-    size === 'md' && 'p-3.5 md:p-3', // 52px md:48px
+    getClassNamesFromMap(iconCssMap, size, 'md'),
 
     // Variants
     variant === 'primary' && [
@@ -130,20 +128,17 @@ const IconButtonRenderFunction: ForwardRefRenderFunction<
         'focus:outline-none',
         'disabled:!pointer-events-none disabled:text-secondary-marine-48',
 
-        size === 'md' ? 'text-base' : 'text-sm',
+        getClassNamesFromMap(buttonCssMap, size, 'md'),
         variant !== 'ghost' && ['gap-2'],
-        variant === 'ghost' && [
-          size === 'xs' && 'gap-0.5',
-          size === 'sm' && 'gap-1',
-          size === 'md' && 'gap-1',
-        ],
+        variant === 'ghost' &&
+          getClassNamesFromMap(ghostButtonCssMap, size, 'md'),
         iconPosition === 'right' && 'flex-row-reverse',
 
         rest.className,
       )}
     >
       <div className={buttonClassNames}>
-        <Icon name={iconName} size={resolvedIconSize} />
+        <Icon name={iconName} size={size} />
       </div>
 
       <Slottable>
@@ -159,6 +154,80 @@ const IconButtonRenderFunction: ForwardRefRenderFunction<
   );
 };
 
+/**
+ * The css map for the responsive value css used in icon.
+ */
+const iconCssMap: ResponsiveValueClassMap<GhostButtonSize> = {
+  initial: {
+    xs: 'p-0.5',
+    sm: 'p-2',
+    md: 'p-3',
+    lg: undefined,
+  },
+  xs: {
+    xs: 'xs:p-0.5',
+    sm: 'xs:p-2',
+    md: 'xs:p-3',
+    lg: undefined,
+  },
+  sm: {
+    xs: 'sm:p-0.5',
+    sm: 'sm:p-2',
+    md: 'sm:p-3',
+    lg: undefined,
+  },
+  md: {
+    xs: 'md:p-0.5',
+    sm: 'md:p-2',
+    md: 'md:p-3',
+    lg: undefined,
+  },
+  lg: {
+    xs: 'lg:p-0.5',
+    sm: 'lg:p-2',
+    md: 'lg:p-3',
+    lg: undefined,
+  },
+  xl: {
+    xs: 'xl:p-0.5',
+    sm: 'xl:p-2',
+    md: 'xl:p-3',
+    lg: undefined,
+  },
+  xxl: {
+    xs: '2xl:p-0.5',
+    sm: '2xl:p-2',
+    md: '2xl:p-3',
+    lg: undefined,
+  },
+};
+
+/**
+ * The css map for the responsive value css used in button.
+ */
+const buttonCssMap: ResponsiveValueClassMap<GhostButtonSize> = {
+  initial: size => (size === 'md' ? 'text-base' : 'text-sm'),
+  xs: size => (size === 'md' ? 'xs:text-base' : 'xs:text-sm'),
+  sm: size => (size === 'md' ? 'sm:text-base' : 'sm:text-sm'),
+  md: size => (size === 'md' ? 'md:text-base' : 'md:text-sm'),
+  lg: size => (size === 'md' ? 'lg:text-base' : 'lg:text-sm'),
+  xl: size => (size === 'md' ? 'xl:text-base' : 'xl:text-sm'),
+  xxl: size => (size === 'md' ? '2xl:text-base' : '2xl:text-sm'),
+};
+
+/**
+ * The css map for the responsive value css used in the ghost button variant.
+ */
+const ghostButtonCssMap: ResponsiveValueClassMap<GhostButtonSize> = {
+  initial: { xs: 'gap-0.5', sm: 'gap-1', md: 'gap-1', lg: undefined },
+  xs: { xs: 'xs:gap-0.5', sm: 'xs:gap-1', md: 'xs:gap-1', lg: undefined },
+  sm: { xs: 'sm:gap-0.5', sm: 'sm:gap-1', md: 'sm:gap-1', lg: undefined },
+  md: { xs: 'md:gap-0.5', sm: 'md:gap-1', md: 'md:gap-1', lg: undefined },
+  lg: { xs: 'lg:gap-0.5', sm: 'lg:gap-1', md: 'lg:gap-1', lg: undefined },
+  xl: { xs: 'xl:gap-0.5', sm: 'xl:gap-1', md: 'xl:gap-1', lg: undefined },
+  xxl: { xs: '2xl:gap-0.5', sm: '2xl:gap-1', md: '2xl:gap-1', lg: undefined },
+};
+
 /**
  * IconButton is a simple round button component, displaying one icon with an optional label.
  *

package/src/components/core/Pictogram/Pictogram.tsx

@@ -1,6 +1,11 @@
 import type { FC } from 'react';
 import { dynamicComponents as dynamicComponentsPictograms } from '../../../../icons/pictograms';
 import { twMerge } from 'tailwind-merge';
+import {
+    getClassNamesFromMap,
+    ResponsiveValue,
+    ResponsiveValueClassMap,
+} from '../../../helpers/responsive-property';
 
 type CollectionPictograms = typeof dynamicComponentsPictograms;
 
@@ -8,58 +13,87 @@ export type PictogramName = keyof CollectionPictograms;
 
 type IconComponent = CollectionPictograms[PictogramName];
 
-export type PictogramProps = {
-  className?: string;
-  name: PictogramName;
-  size?: number | 'sm' | 'md';
-};
-
 /**
- * Determines and returns width and height attributes based on the size parameter.
+ * The size of the icon.
+ * 'sm' (40x40),
+ * 'md' (60x60)
+ *
+ * @default 'sm'
  */
-const getSizeAttributes = (size: PictogramProps['size']) => {
-  switch (size) {
-    case 'sm':
-      return { width: '40', height: '40' };
-    case 'md':
-      return { width: '60', height: '60' };
-    default:
-      return {
-        width: size?.toString() || '40',
-        height: size?.toString() || '40',
-      };
-  }
+type PictogramSize = 'sm' | 'md';
+
+export type PictogramProps = {
+    className?: string;
+    name: PictogramName;
+    size?: ResponsiveValue<PictogramSize>;
 };
 
 /**
  * Renders the icon.
  */
 const renderIcon = (
-  Element: IconComponent,
-  wrapperAttrs: Record<string, string>,
-  svgAttrs?: Record<string, string>,
+    Element: IconComponent,
+    size: PictogramProps['size'],
+    wrapperAttrs: Record<string, string>,
 ) => {
-  const className = twMerge('inline-block', wrapperAttrs.className);
+    let classNameContainsSize = ['size-', 'h-', 'w-'].some(prefix =>
+        wrapperAttrs.className?.includes(prefix),
+    );
+
+    const className = twMerge(
+        'inline-block',
+        !classNameContainsSize && getClassNamesFromMap(sizeCssMap, size, 'sm'),
+        wrapperAttrs.className,
+    );
 
-  return (
-    <div {...wrapperAttrs} className={className}>
-      <Element {...svgAttrs} />
-    </div>
-  );
+    return (
+        <div {...wrapperAttrs} className={className}>
+            <Element className="block size-full" viewBox="0 0 40 40" />
+        </div>
+    );
 };
 
 /**
- * Component to display an pictogram, based on the [local pictogram library](/docs/foundation-icons-pictograms--docs).
+ * Renders a pictogram with the specified size and icon.
  */
-const Pictogram: FC<PictogramProps> = ({ size = 'sm', name, ...rest }) => {
-  const Element = dynamicComponentsPictograms[name];
-  if (!Element) {
-    return null;
-  }
+const Pictogram: FC<PictogramProps> = ({ size, name, ...rest }) => {
+    const Element = dynamicComponentsPictograms[name];
+    if (!Element) {
+        return null;
+    }
 
-  const { width, height } = getSizeAttributes(size);
+    return renderIcon(Element, size, rest);
+};
 
-  return renderIcon(Element, rest, { width, height, viewBox: '0 0 40 40' });
+const sizeCssMap: ResponsiveValueClassMap<PictogramSize> = {
+    initial: {
+        sm: 'size-[40px]',
+        md: 'size-[60px]',
+    },
+    xs: {
+        sm: 'xs:size-[40px]',
+        md: 'xs:size-[60px]',
+    },
+    sm: {
+        sm: 'sm:size-[40px]',
+        md: 'sm:size-[60px]',
+    },
+    md: {
+        sm: 'md:size-[40px]',
+        md: 'md:size-[60px]',
+    },
+    lg: {
+        sm: 'lg:size-[40px]',
+        md: 'lg:size-[60px]',
+    },
+    xl: {
+        sm: 'xl:size-[40px]',
+        md: 'xl:size-[60px]',
+    },
+    xxl: {
+        sm: '2xl:size-[40px]',
+        md: '2xl:size-[60px]',
+    },
 };
 
 Pictogram.displayName = 'Pictogram';

package/src/components/core/Stepper/Stepper.tsx

@@ -87,7 +87,7 @@ const Stepper = (props: StepperProps) => {
         variant="secondary"
         on={on}
         data-track-click-element={EventClickElement.Button}
-        data-track-click-label={`${trackingName}stepper-decrease`}
+        data-track-click-label={`${trackingName}-stepper-decrease`}
         aria-label={i18n?.stepperDecrease ?? 'Anzahl verringern'}
       />
       <div

package/src/helpers/responsive-property.ts

@@ -4,21 +4,42 @@ import { ScreenName } from './screen';
 
 export type ResponsiveValue<T> = T | [T, ScreenNameIndexedValues<T>?];
 
+type ScreenNameWithInitial = ScreenName | 'initial';
+
 type ScreenNameIndexedValues<T> = {
   [screenName in ScreenName]?: T;
 };
 
+type OptionalScreenNameIndexedValuesWithInitial<T> = {
+  [screenName in ScreenNameWithInitial]: T | undefined;
+};
+
 type ScreenNameIndexedValuesWithInitial<T> = {
-  [screenName in ScreenName | 'initial']?: T;
+  [screenName in ScreenNameWithInitial]: T;
 };
 
+// export type ResponsiveValueClassMap<T extends string | number> = {
+//   [key in ScreenNameWithInitial]?: Record<T, string | undefined> | ((value: T) => string | undefined)
+// }
+
+/**
+ * Responsive value class map.
+ * Provides a mapping for each screen name to a responsive value or a function that resolves the value.
+ * You can use this to create responsive styles based on the screen size when you want to avoid any hook based solutions.
+ * This is a more complex approach than using a simple responsive value, but it enables server side rendering and avoids any layout shifts based on initial screen name resolution.
+ */
+export type ResponsiveValueClassMap<T extends string | number> = Record<
+  ScreenNameWithInitial,
+  Record<T, string | undefined> | ((value: T) => string | undefined)
+>;
+
 /**
  * Resolves given responsive property value to screen name indexed values including an initial key for the initial screen.
  */
 export const getScreenIndexedResponsiveValue = <T extends any = any>(
   propValue: ResponsiveValue<T> | undefined,
   defaultValue: T,
-): ScreenNameIndexedValuesWithInitial<T> => {
+): OptionalScreenNameIndexedValuesWithInitial<T> => {
   if (typeof propValue === 'undefined' || !Array.isArray(propValue)) {
     return {
       initial: propValue ?? defaultValue,
@@ -64,29 +85,33 @@ export const getScreenIndexedResponsiveValueForEachScreen = <
 >(
   propValue: ResponsiveValue<T> | undefined,
   defaultValue: T,
-): ScreenNameIndexedValues<T> => {
+): ScreenNameIndexedValuesWithInitial<T> => {
   const screenNameIndexedValues = getScreenIndexedResponsiveValue(
     propValue,
     defaultValue,
   );
 
-  const screens: Record<ScreenName, T | undefined> = {
-    xs: screenNameIndexedValues.xs,
-    sm: screenNameIndexedValues.sm,
-    md: screenNameIndexedValues.md,
-    lg: screenNameIndexedValues.lg,
-    xl: screenNameIndexedValues.xl,
-    xxl: screenNameIndexedValues.xxl,
+  const screens: Record<ScreenNameWithInitial, T | undefined> = {
+    ...screenNameIndexedValues,
   };
 
-  screens.xs = screens.xs ?? screenNameIndexedValues.initial;
+  screens.initial = screens.initial ?? defaultValue;
+  screens.xs = screens.xs ?? screens.initial;
   screens.sm = screens.sm ?? screens.xs;
   screens.md = screens.md ?? screens.sm;
   screens.lg = screens.lg ?? screens.md;
   screens.xl = screens.xl ?? screens.lg;
   screens.xxl = screens.xxl ?? screens.xl;
 
-  return screens;
+  return {
+    initial: screens.initial ?? defaultValue,
+    xs: screens.xs ?? screens.initial,
+    sm: screens.sm ?? screens.xs,
+    md: screens.md ?? screens.sm,
+    lg: screens.lg ?? screens.md,
+    xl: screens.xl ?? screens.lg,
+    xxl: screens.xxl ?? screens.xl,
+  };
 };
 
 /**
@@ -116,3 +141,44 @@ export const getResponsiveValue = <T extends any = any>(
 
   return propValue[0];
 };
+
+/**
+ * Generates css for each responsive value based on the rules from the given screen/value map.
+ * See the `Icon` component for a simple example of how to use this or the `IconButton` component for a more complex example.
+ */
+export const getClassNamesFromMap = <T extends string | number = string>(
+  map: ResponsiveValueClassMap<T>,
+  value: ResponsiveValue<T> | undefined,
+  defaultValue: T,
+): string => {
+  let screenIndexed = getScreenIndexedResponsiveValue<T>(value, defaultValue);
+
+  let classList = Object.entries(screenIndexed).reduce<string[]>(
+    (list, [screenArg, value]) => {
+      if (typeof value === 'undefined') {
+        return list;
+      }
+
+      let screen = screenArg as keyof typeof screenIndexed;
+      let resolvedScreenIndexedValues = map[screen];
+
+      if (typeof resolvedScreenIndexedValues === 'undefined') {
+        return list;
+      }
+
+      let screenValue =
+        typeof resolvedScreenIndexedValues === 'function'
+          ? resolvedScreenIndexedValues(value)
+          : resolvedScreenIndexedValues?.[value];
+
+      if (typeof screenValue === 'undefined') {
+        return list;
+      }
+
+      return [...list, screenValue];
+    },
+    [],
+  );
+
+  return classList.join(' ');
+};