@tui-cruises/mein-schiff-web-react-component-library 3.0.7 → 3.1.1

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 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.
 
+### [3.1.1](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.1.0...v3.1.1) (2025-10-30)
+
+
+### Features
+
+* **Chip:** add Chip component (EC-2491) ([3b7efbe](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/3b7efbe4c8edccb9187bcae9dd72fee1d7cadc07))
+
+
+### Bug Fixes
+
+* **Calendar:** typography ([77578c0](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/77578c01e26b6544f124e427a3a51072d6d9d315))
+* **Tabs:** add hover border style ([e9e45e5](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/e9e45e54cdcb3efd5d5e11bddaeda9106707b499))
+
+## [3.1.0](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.0.7...v3.1.0) (2025-10-28)
+
+
+### Features
+
+* **Accordion:** update Radix UI dependency ([a17bc66](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/a17bc66e4564b9fa09abff135733358a4d6bfaf0))
+* **Calendar:** update based on latest web composition variant ([c9d480b](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/c9d480ba84873350844ee9400f0180cbb36ff7e2))
+* **NextFontMeinSchiffSansPro:** delete 'NextFontMeinSchiffSansPro' from core components ([87299aa](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/87299aa78cb362447c93ebc9d502256cc72d14be))
+* **Storybook:** Storybook 9.x upgrade ([82a34fa](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/82a34fa6048f2f8a46cc99cc456b1688ac38e8a5))
+* **Tracking:** use local Tealium types ([d7ae1ab](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/d7ae1ab35eccbe87d586dcf40f9d5d63e9624502))
+* **UniversalCarousel:** delete 'UniversalCarousel' from core components ([5b1023b](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/5b1023bc3d420c93556ad582604bdd0d44cb548c))
+
+
+### Bug Fixes
+
+* **Storybook:** preview background colors ([cfbbfa0](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/cfbbfa000dbd7ae0c63ea95ff9a82d6f8a681e59))
+* **Tabs:** remove UniversalCarousel and fully refactor component ([4e8dd4b](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/4e8dd4b16dffe7931c14f3809814e5e7d52f7d50))
+* **twMerge:** use tailwind-merge ([431d126](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/431d126e890c6251b8258f77f9d5ee946ecbb105))
+
 ### [3.0.7](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.0.6...v3.0.7) (2025-10-23)
 
 ### [3.0.6](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.11...v3.0.6) (2025-10-23)

package/README.md

@@ -7,8 +7,7 @@ The **Mein Schiff® Web React Component Library** is built with **Next.js** and
 To install the component library, run:
 
 ```bash
-git submodule update --init --recursive
-npm install
+npm install --legacy-peer-deps
 ```
 
 ## Storybook

package/index.tsx

@@ -10,6 +10,7 @@ export * from './src/components/core/ButtonGroup';
 export * from './src/components/core/Calendar';
 export * from './src/components/core/Checkbox';
 export * from './src/components/core/CheckboxField';
+export * from './src/components/core/Chip';
 export * from './src/components/core/Countdown';
 export * from './src/components/core/DataTable';
 export * from './src/components/core/Dialog';
@@ -47,10 +48,6 @@ export * from './src/components/core/Tabs';
 export * from './src/components/core/TextButton';
 export * from './src/components/core/Toast';
 
-// Shared Components
-export * from './src/components/shared/NextFontMeinSchiffSansPro'; // @revisit: Utils
-export * from './src/components/shared/UniversalCarousel';
-
 /**
  * Hooks
  */
@@ -58,7 +55,6 @@ export * from './src/hooks/use-active-screen-names';
 export * from './src/hooks/use-screen-name';
 export * from './src/hooks/use-screen-name-at-least';
 export * from './src/hooks/use-toasts';
-export * from './src/hooks/use-intersection-observer';
 export * from './src/hooks/use-store';
 
 /** 
@@ -68,6 +64,5 @@ export * from './src/helpers/store';
 export * from './src/helpers/screen';
 export * from './src/helpers/responsive-property';
 export { expandString } from './src/helpers/i18n';
-export * from './src/helpers/elementVisibility';
 
 export * from '@radix-ui/react-slot';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tui-cruises/mein-schiff-web-react-component-library",
-  "version": "3.0.7",
+  "version": "3.1.1",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "type": "module",
@@ -11,8 +11,6 @@
     "dev": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "release": "standard-version",
-    "pack:public": "node scripts/prepare-pack.mjs",
-    "prepack": "npm run pack:public",
     "generate-icon-components": "node icons-import-svgs/generate-icons.cjs && prettier --write icons"
   },
   "config": {
@@ -37,7 +35,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
@@ -52,16 +50,12 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tui-cruises/mein-schiff-web-tailwind-config": "^2.0.16",
-    "@tuic/i18n": "^1.0.0",
-    "@tuic/lib": "^1.0.0",
-    "@tuic/logger": "^1.0.0",
-    "@tuic/tailwind-config": "^1.0.0",
-    "@tuic/tracking": "^1.0.0",
+    "ajv": "^8.17.1",
+    "ajv-keywords": "^5.1.0",
     "d3": "^7.9.0",
     "date-fns": "^3.4.0",
     "dompurify": "^3.0.6",
     "eslint-config-next": "^13.4.8",
-    "friendly-challenge": "^0.9.16",
     "libphonenumber-js": "^1.10.54",
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
@@ -70,29 +64,19 @@
     "react-country-flag": "^3.1.0",
     "react-day-picker": "^9.9.0",
     "react-dom": "^19.1.1",
-    "react-is": "^18.2.0",
-    "react-slider": "^2.0.6",
+    "react-is": "*",
     "react-youtube": "^10.1.0",
-    "tailwind-merge": "^3.2.0"
+    "tailwind-merge": "^3.2.0",
+    "react-slider": "^2.0.6"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@geometricpanda/storybook-addon-badges": "^2.0.5",
-    "@storybook/addon-a11y": "^8.6.12",
-    "@storybook/addon-controls": "^8.6.12",
-    "@storybook/addon-designs": "^8.2.1",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-mdx-gfm": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/nextjs": "^8.6.12",
-    "@storybook/preview-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@storybook/addon-a11y": "9.1.15",
+    "@storybook/addon-designs": "^10.0.2",
+    "@storybook/addon-docs": "9.1.15",
+    "@storybook/nextjs": "9.1.15",
     "@svgr/cli": "^8.0.1",
     "@types/d3": "^7.4.3",
     "@types/lodash": "^4.17.13",
@@ -102,20 +86,20 @@
     "@types/react-slider": "^1.3.6",
     "autoprefixer": "^10.4.14",
     "chromatic": "^11.27.0",
-    "commitizen": "^4.3.1",
-    "esbuild": "^0.19.12",
+    "commitizen": "^3.0.0",
+    "esbuild": "^0.25.11",
     "eslint": "^8.47.0",
+    "eslint-plugin-storybook": "9.1.15",
     "postcss": "^8.4.26",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.4.1",
-    "prop-types": "^15.8.1",
     "react-markdown": "^10.0.0",
     "standard-version": "^9.5.0",
-    "storybook": "^8.6.12",
-    "storybook-version": "^0.1.2",
+    "storybook": "9.1.15",
+    "storybook-version": "^0.1.4",
     "tailwindcss": "^3.4.17",
     "ts-loader": "^9.5.2",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "^5.7.3"
   }
-}
+}

package/src/components/core/Accordion/Accordion.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { EventClickElement } from '@tuic/lib/tracking/tealium';
+import { EventClickElement } from '../../../libs/tracking';
 import {
   FC,
   cloneElement,

package/src/components/core/Accordion/AccordionItem.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { EventClickElement } from '@tuic/lib/tracking/tealium';
+import { EventClickElement } from '../../../libs/tracking';
 import { type ElementType, FC, LiHTMLAttributes, ReactNode } from 'react';
 import { Divider } from '../../core/Divider';
 import { IconButton } from '../../core/IconButton';

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

@@ -11,7 +11,7 @@ import type {
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Button } from '../../core/Button';
 import { ButtonGroup } from '../../core/ButtonGroup';
-import { EventClickArea, EventClickElement } from '@tuic/lib/tracking/tealium';
+import { EventClickArea, EventClickElement } from '../../../libs/tracking';
 import { twJoin } from 'tailwind-merge';
 
 type ActionBase = {

package/src/components/core/Button/Button.tsx

@@ -1,13 +1,10 @@
 import { Icon, IconName } from '../../core/Icon';
-import {
-  ButtonHTMLAttributes,
-  RefObject
-} from 'react';
+import { ButtonHTMLAttributes, RefObject } from 'react';
 import { twJoin, twMerge } from 'tailwind-merge';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import { Skeleton, SkeletonTextLines } from '../../core/Skeleton';
 import { LoadingSpinner } from '../../core/LoadingSpinner';
-import { DataAttributes } from '../../../helpers/types';
+import { DataAttributes } from '../../../libs/tracking';
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
   DataAttributes & {
@@ -20,7 +17,7 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
     active?: boolean;
     hasFullWidthOnMobile?: boolean;
     indicating?: boolean;
-    ref?: RefObject<HTMLButtonElement>
+    ref?: RefObject<HTMLButtonElement>;
   };
 
 const ButtonRenderFunction = (props: ButtonProps) => {
@@ -188,4 +185,4 @@ const ButtonRenderFunction = (props: ButtonProps) => {
   );
 };
 
-export const Button = ButtonRenderFunction
+export const Button = ButtonRenderFunction;

package/src/components/core/Calendar/Calendar.tsx

@@ -4,21 +4,21 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 import {
   DayPicker,
-  PropsBase,
-  DayPickerMultipleProps,
-  DayPickerRangeProps,
-  DayPickerSingleProps,
   Matcher,
+  useDayPicker,
+  UI,
+  SelectionState,
+  DayFlag,
 } from 'react-day-picker';
 import { de, enGB } from 'date-fns/locale';
-
 import { twJoin } from 'tailwind-merge';
-import { Icon } from '../Icon';
-import { TextButton } from '../TextButton';
-import { differenceInMonths, type Locale } from 'date-fns';
+import { IconButton, TextButton } from '../../../../index';
+import { Locale as I18nLocale } from '../../../helpers/locale';
+import { differenceInMonths } from 'date-fns';
+import { Locale } from 'date-fns';
 
-type BaseProps = Omit<PropsBase, 'locale' | 'fromDate'> & {
-  localeCode?: string;
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+  localeCode?: I18nLocale;
   useShowMoreButtonOnMobile?: boolean;
   showPrevMonthsButtonLabel?: string;
   showNextMonthsButtonLabel?: string;
@@ -26,12 +26,7 @@ type BaseProps = Omit<PropsBase, 'locale' | 'fromDate'> & {
   pastIsPickable?: boolean;
 };
 
-export type CalendarProps =
-  | (BaseProps & DayPickerSingleProps)
-  | (BaseProps & DayPickerMultipleProps)
-  | (BaseProps & DayPickerRangeProps);
-
-const DEFAULT_LOCALE: string = 'de';
+const DEFAULT_LOCALE: I18nLocale = 'de';
 
 /**
  * Calendar integration
@@ -176,27 +171,17 @@ function Calendar({
         setNoMoreMonthsToAddNext(false);
       }
     }
-  }, [useShowMoreButtonOnMobile]);
+  }, [
+    useShowMoreButtonOnMobile,
+    getAmountOfPreviousMonthsToLoad,
+    getAmountOfNextMonthsToLoad,
+  ]);
 
   const disabledMatchers: Matcher[] = [];
   const today = new Date();
   if (currentMonth && !pastIsPickable) {
-    const firstDayOfMonth = new Date(
-      currentMonth.getFullYear(),
-      currentMonth.getMonth(),
-      1,
-    );
-    const yesterday = new Date(
-      today.getFullYear(),
-      today.getMonth(),
-      today.getDate(),
-    );
-    let currentDate = new Date(firstDayOfMonth);
-    while (currentDate < yesterday) {
-      disabledMatchers.push(new Date(currentDate));
-      currentDate.setDate(currentDate.getDate() + 1);
-    }
   }
+  disabledMatchers.push({ before: new Date() });
 
   if (props.disabled) {
     const disabledNormalized = Array.isArray(props.disabled)
@@ -205,6 +190,13 @@ function Calendar({
     disabledMatchers.push(...disabledNormalized);
   }
 
+  const navButtonClasses = twJoin(
+    'h-11 bg-transparent p-0 opacity-50',
+    'disabled:opacity-30',
+    'hover:opacity-100',
+    'focus:outline-none focus-visible:shadow-focus-state',
+  );
+
   return (
     <>
       {useShowMoreButtonOnMobile && !noMoreMonthsToAddBefore && (
@@ -217,80 +209,93 @@ function Calendar({
 
       <DayPicker
         month={currentMonth}
-        toMonth={toMonth}
+        endMonth={toMonth}
         numberOfMonths={currentNumberOfMonths}
         showOutsideDays={showOutsideDays}
-        className={twJoin('w-full pb-3 pt-3', className)}
-        fromDate={fromMonth}
+        startMonth={fromMonth}
         disabled={disabledMatchers}
         classNames={{
-          months: 'flex flex-col lg:flex-row lg:flex-nowrap gap-8 lg:gap-4',
-          month: 'space-y-4 lg:w-1/2',
-          caption: 'flex justify-center pt-1 relative items-center',
-          caption_label: 'label-md',
-          nav: 'space-x-1 flex items-center',
-          nav_button: twJoin(
-            'flex h-11 w-1/7 flex-row items-center justify-center bg-transparent p-0 opacity-50',
-            'disabled:opacity-10',
-            'hover:opacity-100',
-            'focus:outline-none focus-visible:shadow-focus-state',
+          [UI.Months]:
+            'flex flex-col lg:flex-row lg:flex-nowrap gap-8 lg:gap-4',
+          [UI.Month]: 'space-y-4 lg:w-1/2',
+          [UI.MonthCaption]:
+            'flex justify-center pt-1 relative items-center pointer-events-none',
+          [UI.CaptionLabel]:
+            'font-semibold text-base text-marine-high-emphasis',
+          [UI.Nav]: 'space-x-1 flex items-center',
+          [UI.MonthGrid]: 'w-full border-collapse space-y-1',
+          [UI.Weekdays]: 'flex w-full flex-row',
+          [UI.Weekday]:
+            'inline-flex items-center justify-center h-11 w-1/7 font-normal text-base rounded-sm',
+          [UI.DayButton]: twJoin(
+            'h-11 w-full p-0 font-normal aria-selected:opacity-100',
           ),
-          nav_button_previous: twJoin(
-            'absolute left-0 pl-4',
-            useShowMoreButtonOnMobile ? 'hidden lg:block' : '!block',
-          ),
-          nav_button_next: twJoin(
-            'absolute right-0 pr-4',
-            useShowMoreButtonOnMobile ? 'hidden lg:block' : '!block',
-          ),
-          table: 'w-full border-collapse space-y-1',
-          head_row: 'flex flex-row nowrap gap-x-0.5',
-          head_cell:
-            'flex justify-center items-center w-1/7 h-11 text-marine-high-emphasis font-normal text-xs rounded-sm',
-          row: 'flex flex-row nowrap gap-x-0.5 w-full mt-0.5',
-          cell: twJoin(
-            'relative w-1/7 p-0 text-center text-xs focus-within:relative focus-within:z-20' +
-              '[&:has([aria-selected].day-range-end)]:rounded-r-lg [&:has([aria-selected])]:bg-surface-secondary-7 [&:has([aria-selected].day-outside)]:bg-surface-secondary-7',
-            (props.mode as string) === 'range'
-              ? '[&:has(>.day-range-end)]:rounded-r-lg [&:has(>.day-range-start)]:rounded-l-lg first:[&:has([aria-selected])]:rounded-l-lg last:[&:has([aria-selected])]:rounded-r-lg'
-              : '[&:has([aria-selected])]:rounded-sm',
-          ),
-          day: twJoin(
-            'h-11 w-full rounded-sm p-0 font-normal text-marine-high-emphasis aria-selected:opacity-100',
-            'hover:border-stroke-primary-100 hover:bg-surface-primary-60 disabled:hover:border-transparent disabled:hover:bg-transparent disabled:hover:text-secondary-marine-48',
+          [UI.Week]: 'flex flex-row nowrap gap-x-0.5 w-full mt-0.5',
+          [UI.Day]: twJoin(
+            'relative w-1/7 rounded-sm p-0 text-center text-base focus-within:relative focus-within:z-20',
+            'hover:border-stroke-primary-100 hover:bg-surface-primary-60 data-[disabled]:hover:bg-transparent',
             'active:border-stroke-primary-100 active:bg-surface-primary-60',
             'focus:outline-none focus-visible:shadow-focus-state',
+            'disabled:text-secondary-marine-48',
           ),
-          day_range_start:
-            'day-range-start bg-surface-primary-100 hover:bg-surface-primary-120 active:bg-surface-primary-120 focus:bg-surface-primary-100 text-marine-high-emphasis rounded-l-lg rounded-r-none',
-          day_range_end:
-            'day-range-end bg-surface-primary-100 hover:bg-surface-primary-120 active:bg-surface-primary-120 focus:bg-surface-primary-100 text-marine-high-emphasis rounded-r-lg',
-          day_range_middle:
-            'aria-selected:bg-surface-primary-60 aria-selected:text-marine-high-emphasis',
-          day_selected: twJoin(
-            'rounded-none bg-surface-primary-100 text-marine-high-emphasis',
+          [SelectionState.selected]: twJoin(
+            'bg-surface-primary-100 text-marine-high-emphasis',
             'hover:bg-surface-primary-120 hover:text-marine-high-emphasis',
             'active:bg-surface-primary-120 active:text-marine-high-emphasis',
             'focus:bg-surface-primary-120 focus:text-marine-high-emphasis',
           ),
-          day_outside:
-            'day-outside text-secondary-marine-48 aria-selected:bg-surface-secondary-7 relative aria-selected:text-secondary-marine-48',
-          day_disabled: 'text-secondary-marine-48',
-          day_hidden: 'invisible',
+          [SelectionState.range_start]:
+            'day-range-start bg-surface-primary-100 hover:bg-surface-primary-120 active:bg-surface-primary-120 focus:bg-surface-primary-100 text-marine-high-emphasis',
+          [SelectionState.range_end]:
+            'day-range-end bg-surface-primary-100 hover:bg-surface-primary-120 active:bg-surface-primary-120 focus:bg-surface-primary-100 text-marine-high-emphasis',
+          [SelectionState.range_middle]: 'aria-selected:bg-surface-primary-60',
+          [DayFlag.outside]:
+            'day-outside [&>button]:text-secondary-marine-48 aria-selected:bg-surface-secondary-7 relative aria-selected:text-secondary-marine-48',
+          [DayFlag.hidden]: 'invisible',
+          [DayFlag.disabled]: 'text-secondary-marine-48',
           ...classNames,
         }}
-        // components={{
-        //   IconLeft: ({ ...props }) => (
-        //     <Icon className="-ml-2 h-5 w-5" name="nav-arrow-left" size="lg" />
-        //   ),
-        //   IconRight: ({ ...props }) => (
-        //     <Icon
-        //       className="-mr-2 ml-auto h-5 w-5"
-        //       name="nav-arrow-right"
-        //       size="lg"
-        //     />
-        //   ),
-        // }}
+        components={{
+          Root: ({ children }) => {
+            const { components, goToMonth, nextMonth, previousMonth } =
+              useDayPicker();
+
+            return (
+              <div className={twJoin('relative w-full pb-3 pt-3', className)}>
+                <div className="absolute mt-2 flex w-full items-center justify-between gap-x-1">
+                  <components.PreviousMonthButton
+                    onClick={() => previousMonth && goToMonth(previousMonth)}
+                    disabled={!previousMonth}
+                  />
+                  <components.NextMonthButton
+                    onClick={() => nextMonth && goToMonth(nextMonth)}
+                    disabled={!nextMonth}
+                  />
+                </div>
+                {children}
+              </div>
+            );
+          },
+          Nav: () => <></>,
+          NextMonthButton: props => (
+            <IconButton
+              iconName="nav-arrow-right"
+              variant="secondary"
+              className={twJoin('!mr-4 h-5 w-5', navButtonClasses)}
+              size="sm"
+              {...props}
+            />
+          ),
+          PreviousMonthButton: props => (
+            <IconButton
+              className={twJoin('h-5 w-5', navButtonClasses)}
+              variant="secondary"
+              iconName="nav-arrow-left"
+              size="sm"
+              {...props}
+            />
+          ),
+        }}
         locale={usedLocale}
         {...props}
       />

package/src/components/core/Chip/Chip.tsx

@@ -0,0 +1,101 @@
+import type { ReactNode, RefObject } from 'react';
+import { twJoin, twMerge } from 'tailwind-merge';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import { Pictogram, PictogramName } from '../Pictogram';
+
+/**
+ * All allowed variants for the Chip component.
+ */
+type Variant = 'text' | 'pictogram';
+
+/**
+ * Props for the Chip component.
+ */
+export type ChipProps = {
+  asChild?: boolean;
+  className?: string;
+  variant?: Variant;
+  pictogram?: PictogramName;
+  on?: 'white' | 'gray';
+  children?: ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  ref?: RefObject<HTMLButtonElement>;
+};
+
+/**
+ * A Chip component designed for basic labeling or marking destinations
+ */
+const Chip = ({
+  asChild,
+  className,
+  variant = 'text',
+  pictogram,
+  on = 'white',
+  active = false,
+  disabled = false,
+  children,
+  ref,
+  ...args
+}: ChipProps) => {
+  const Element = asChild ? Slot : 'button';
+
+  const borderRadius = variant === 'text' ? 'rounded-full' : 'rounded-md';
+  const padding = variant === 'text' ? 'px-4 py-3' : 'p-3 lg:p-2';
+  const variantClasses = twMerge(
+    'border-none text-center text-sm font-semibold transition-all',
+
+    // Variants
+    variant === 'text' && [
+      // Shared
+      'text-marine-high-emphasis hover:bg-surface-primary-100',
+
+      // On surfaces
+      on === 'white' && 'bg-surface-secondary-7',
+      on === 'gray' && 'bg-surface-white',
+
+      // States
+      active && 'bg-surface-primary-100',
+      disabled &&
+        'bg-surface-secondary-7 shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-20)]',
+      on === 'gray' &&
+        disabled &&
+        'bg-surface-white shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-20)]',
+    ],
+
+    variant === 'pictogram' && [
+      // Shared
+      'bg-surface-white shadow-[inset_0_0_0_2px_theme(colors.stroke.primary-100)] hover:shadow-[inset_0_0_0_4px_theme(colors.stroke.primary-100)]',
+
+      // States
+      active && 'bg-surface-primary-100',
+      disabled && 'bg-surface-secondary-7 shadow-none',
+      on === 'gray' && disabled && 'bg-surface-white shadow-none',
+    ],
+
+    // States
+    'focus:outline-none focus-visible:shadow-focus-state',
+    disabled && '!pointer-events-none !text-secondary-marine-48',
+  );
+
+  return (
+    <Element
+      ref={ref}
+      {...args}
+      className={twJoin(
+        'inline-flex items-center justify-center',
+        borderRadius,
+        padding,
+        variantClasses,
+        className,
+      )}
+    >
+      <Slottable>{children ?? ''}</Slottable>
+      {pictogram && <Pictogram name={pictogram} size="sm" />}
+    </Element>
+  );
+};
+
+Chip.displayName = 'Chip';
+
+export { Chip };

package/src/components/core/Chip/index.ts

@@ -0,0 +1 @@
+export * from './Chip';

package/src/components/core/Dialog/Dialog.tsx

@@ -1,8 +1,11 @@
 'use client';
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { formatTrackingString, trackEvent } from '@tuic/lib/helpers/tracking';
-import { EventClickArea } from '@tuic/lib/tracking/tealium';
+import {
+  EventClickArea,
+  formatTrackingString,
+  trackEvent,
+} from '../../../libs/tracking';
 import { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
 import { twJoin } from 'tailwind-merge';
 import { IconButton } from '../../core/IconButton';

package/src/components/core/FormLabel/FormLabel.tsx

@@ -1,7 +1,4 @@
-import {
-  LabelHTMLAttributes,
-  RefObject
-} from 'react';
+import { LabelHTMLAttributes, RefObject } from 'react';
 import { twJoin } from 'tailwind-merge';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 
@@ -10,7 +7,7 @@ export type FormLabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
   /** Indicates if the associated field is required. */
   required?: boolean;
   'data-invalid'?: boolean;
-  ref?: RefObject<HTMLLabelElement>
+  ref?: RefObject<HTMLLabelElement>;
 };
 
 const FormLabelImplementation = (props: FormLabelProps) => {

package/src/components/core/Pagination/Pagination.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { EventClickElement } from '@tuic/lib/tracking/tealium';
+import { EventClickElement } from '../../../libs/tracking';
 import {
   cloneElement,
   ComponentPropsWithoutRef,

package/src/components/core/PhoneNumberInput/PhoneNumberInput.tsx

@@ -12,7 +12,7 @@ import {
   getPhoneNumberCountry,
   getDefaultPhoneNumberCountry,
   guessPhoneNumberCountryFromPhoneNumber,
-} from '@tuic/lib/src/data';
+} from '../../../libs/phone-number/types';
 import { CountryCode, parsePhoneNumber } from 'libphonenumber-js';
 
 type PhoneNumberInputProps = InputHTMLAttributes<HTMLInputElement> & {