mautourco-components 0.2.30 → 0.2.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.30",
+  "version": "0.2.32",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",
@@ -25,6 +25,8 @@
     "motorco"
   ],
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -46,8 +48,9 @@
     "react": "^19.1.1",
     "react-day-picker": "^9.11.2",
     "react-dom": "^19.1.1",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "react-hook-form": "^7.70.0",
+    "web-vitals": "^2.1.4",
+    "zod": "^4.3.5"
   },
   "scripts": {
     "start": "concurrently \"npm run watch-tokens\" \"vite\"",
@@ -106,6 +109,7 @@
     "style-dictionary": "^5.0.4",
     "tailwindcss": "^3.4.17",
     "tsc-alias": "^1.8.10",
+    "typescript": "^5.9.3",
     "vite": "^7.2.6",
     "vitest": "^2.1.8"
   }

package/src/components/atoms/Icon/icons/Info2Icon.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { IconBaseProps } from './registry';
+
+const Info2Icon: React.FC<IconBaseProps> = ({ size = 'md', className = '', color }) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs':
+        return 'w-3 h-3';
+      case 'sm':
+        return 'w-4 h-4';
+      case 'md':
+        return 'w-5 h-5';
+      case 'lg':
+        return 'w-6 h-6';
+      case 'xl':
+        return 'w-8 h-8';
+      default:
+        return 'w-5 h-5';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M20.9949 11.9999C20.9949 11.4964 20.8685 11.0011 20.6267 10.5594C20.3849 10.1177 20.0354 9.74382 19.6111 9.47253C19.2566 9.24585 19.0824 8.82151 19.1746 8.41101C19.2855 7.91752 19.2694 7.40367 19.1287 6.91785C18.9879 6.43206 18.7265 5.98941 18.3689 5.63171C18.0112 5.27399 17.5687 5.01184 17.0828 4.87097C16.5969 4.73014 16.0832 4.71511 15.5896 4.82605C15.179 4.91837 14.7538 4.74315 14.5271 4.38855C14.2559 3.96443 13.8827 3.61473 13.4412 3.37292C12.9995 3.13107 12.5033 3.00476 11.9998 3.00476C11.4964 3.00479 11.0009 3.13121 10.5593 3.37292C10.1176 3.61477 9.74369 3.96431 9.47241 4.38855C9.2458 4.74296 8.82136 4.91808 8.41089 4.82605C7.91814 4.71561 7.40571 4.7315 6.92065 4.87195C6.43548 5.01246 5.99304 5.27297 5.6355 5.62976C5.27809 5.98651 5.01625 6.4282 4.87476 6.91296C4.73337 7.39766 4.71652 7.9103 4.82593 8.4032C4.9173 8.81478 4.74078 9.23926 4.38452 9.46472C3.95712 9.73521 3.6051 10.1096 3.36108 10.5526C3.11708 10.9958 2.98903 11.494 2.98901 11.9999C2.98901 12.5058 3.11706 13.0039 3.36108 13.4471C3.60508 13.8902 3.95712 14.2645 4.38452 14.535C4.74075 14.7605 4.91726 15.185 4.82593 15.5966C4.71646 16.0897 4.73323 16.6029 4.87476 17.0878C5.01625 17.5724 5.27819 18.0133 5.6355 18.37C5.99304 18.7268 6.43548 18.9883 6.92065 19.1288C7.40559 19.2692 7.91826 19.2851 8.41089 19.1747L8.56519 19.1522C8.92525 19.1287 9.27532 19.3019 9.47339 19.6132C9.74432 20.0391 10.1188 20.3898 10.5613 20.6327C11.0036 20.8755 11.5 21.0028 12.0046 21.0028C12.5094 21.0028 13.0065 20.8756 13.449 20.6327C13.8913 20.3898 14.265 20.039 14.5359 19.6132C14.7617 19.2582 15.1858 19.0826 15.5964 19.1737C16.0895 19.2832 16.6028 19.2664 17.0876 19.1249C17.5724 18.9833 18.0141 18.7216 18.3708 18.3641C18.7275 18.0067 18.9882 17.5649 19.1287 17.08C19.2692 16.5948 19.285 16.0816 19.1746 15.5887C19.0825 15.1783 19.2567 14.7538 19.6111 14.5272C20.0354 14.2559 20.3849 13.882 20.6267 13.4403C20.8684 12.9987 20.9949 12.5033 20.9949 11.9999ZM12.0095 14.9999C12.5618 14.9999 13.0095 15.4476 13.0095 15.9999C13.0095 16.5522 12.5618 16.9999 12.0095 16.9999H11.9998C11.4476 16.9998 10.9998 16.5521 10.9998 15.9999C10.9998 15.4477 11.4476 15 11.9998 14.9999H12.0095ZM10.9998 11.9999V7.99988C10.9998 7.4477 11.4476 6.99998 11.9998 6.99988C12.552 6.99988 12.9997 7.44764 12.9998 7.99988V11.9999C12.9998 12.5522 12.552 12.9999 11.9998 12.9999C11.4476 12.9998 10.9998 12.5521 10.9998 11.9999ZM22.9949 11.9999C22.9949 12.8392 22.7837 13.6651 22.3806 14.4012C22.0852 14.9408 21.6927 15.4182 21.2263 15.8134C21.2793 16.4247 21.2213 17.0425 21.0496 17.6356C20.8154 18.4442 20.3805 19.1813 19.7859 19.7772C19.1914 20.3729 18.4561 20.8089 17.6482 21.0448C17.0554 21.2178 16.4374 21.2771 15.8259 21.2255C15.4306 21.6943 14.9518 22.0886 14.4109 22.3856C13.6735 22.7904 12.8458 23.0028 12.0046 23.0028C11.1635 23.0028 10.3357 22.7905 9.59839 22.3856C9.05786 22.0888 8.57952 21.6949 8.18433 21.2264C7.57358 21.2791 6.9565 21.2213 6.36401 21.0497C5.55545 20.8155 4.81927 20.3806 4.22339 19.786C3.62758 19.1914 3.19074 18.4563 2.95483 17.6483C2.78193 17.0559 2.72169 16.4381 2.77319 15.827C2.30288 15.4318 1.90726 14.9525 1.60913 14.411C1.20254 13.6724 0.989014 12.843 0.989014 11.9999C0.98903 11.1567 1.2025 10.3274 1.60913 9.58875C1.90738 9.04703 2.30263 8.56704 2.77319 8.17175C2.72188 7.56114 2.78212 6.94431 2.95483 6.35242C3.19071 5.54429 3.62749 4.8084 4.22339 4.21375C4.81925 3.6192 5.55549 3.18423 6.36401 2.95007C6.95708 2.77833 7.57495 2.71939 8.18628 2.77234C8.58136 2.30622 9.05913 1.9143 9.59839 1.61902C10.3345 1.21596 11.1605 1.00479 11.9998 1.00476C12.839 1.00476 13.665 1.21598 14.4011 1.61902C14.9404 1.91427 15.4182 2.30626 15.8132 2.77234C16.4259 2.71894 17.0451 2.7778 17.6394 2.95007C18.4492 3.18481 19.1867 3.62049 19.783 4.21667C20.3791 4.81285 20.8148 5.55046 21.0496 6.36023C21.2218 6.9545 21.2797 7.57382 21.2263 8.1864C21.6927 8.58158 22.0852 9.05901 22.3806 9.59851C22.7837 10.3347 22.9949 11.1606 22.9949 11.9999Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default Info2Icon;

package/src/components/atoms/Icon/icons/registry.tsx

@@ -29,6 +29,7 @@ import DepartureIcon from './DepartureIcon';
 import EyeIcon from './EyeIcon';
 import FacebookIcon from './FacebookIcon';
 import HomeIcon from './HomeIcon';
+import Info2Icon from './Info2Icon';
 import InfoIcon from './InfoIcon';
 import LandIcon from './Land';
 import LineIcon from './LineIcon';
@@ -150,6 +151,7 @@ export const ICONS = {
   booking: BookingIcon as unknown as IconComponent,
   'close-circle': CloseCircleIcon as unknown as IconComponent,
   clock: ClockIcon as unknown as IconComponent,
+  'info-2': Info2Icon as unknown as IconComponent,
 } as const satisfies Record<string, IconComponent>;
 
 export type IconName = keyof typeof ICONS;

package/src/components/atoms/Inputs/Input/Input.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { HTMLInputTypeAttribute } from 'react';
 import Icon, { IconName } from '../../Icon/Icon';
 
 export interface InputProps {
@@ -12,6 +12,7 @@ export interface InputProps {
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
   icon?: IconName;
   iconPosition?: 'leading' | 'trailing';
+  type?: HTMLInputTypeAttribute;
 }
 
 const Input: React.FC<InputProps> = ({
@@ -25,6 +26,7 @@ const Input: React.FC<InputProps> = ({
   onBlur,
   icon,
   iconPosition = 'trailing',
+  type = 'text',
 }) => {
   const baseClasses = 'input-field';
   const variantClasses = {
@@ -46,7 +48,7 @@ const Input: React.FC<InputProps> = ({
         </span>
       )}
       <input
-        type="text"
+        type={type}
         className={inputClasses}
         placeholder={placeholder}
         value={value}

package/src/components/molecules/Calendar/DateTime.tsx

@@ -6,6 +6,11 @@ import { Button } from '../../ui/button';
 import { Calendar } from '../../ui/calendar';
 import TimePicker from './TimePicker';
 
+export interface DateTimeOnChangePayload {
+  dateRange?: DateRange;
+  time?: { hour: string; minute: string; meridiem: 'AM' | 'PM' };
+}
+
 export interface DateTimeProps {
   mode?: 'calendar' | 'time' | 'both';
   selectionMode?: 'single' | 'range';
@@ -14,10 +19,7 @@ export interface DateTimeProps {
   disableToday?: boolean;
   defaultDateRange?: DateRange;
   defaultTime?: { hour: string; minute: string; meridiem: 'AM' | 'PM' };
-  onChange?: (payload: {
-    dateRange?: DateRange;
-    time?: { hour: string; minute: string; meridiem: 'AM' | 'PM' };
-  }) => void;
+  onChange?: (payload: DateTimeOnChangePayload) => void;
 }
 
 const DateTime: React.FC<DateTimeProps> = ({

package/src/components/molecules/DialogContentPolicy/DialogCancellationList.tsx

@@ -9,7 +9,7 @@ import {
 } from './DialogCancellationExcursion';
 import { DialogContentPolicy } from './DialogContentPolicy';
 
-export interface CancellationItem {
+export interface CancellationPolicyItem {
   /**
    * The type of the cancellation.
    */
@@ -24,22 +24,22 @@ export interface DialogCancellationListProps {
   /**
    * The cancellations to display.
    */
-  cancellations: CancellationItem[];
+  cancellations: CancellationPolicyItem[];
 }
 
 const isAccommodation = (
-  data: CancellationItem['data']
+  data: CancellationPolicyItem['data']
 ): data is DialogCancellationAccomProps => {
   return 'hotelName' in data;
 };
 
 const isExcursion = (
-  data: CancellationItem['data']
+  data: CancellationPolicyItem['data']
 ): data is DialogCancellationExcursionProps => {
   return 'excursionName' in data;
 };
 
-export const DialogCancellations = (props: DialogCancellationListProps) => {
+export const CancellationsList = (props: DialogCancellationListProps) => {
   const { cancellations } = props;
   return (
     <>
@@ -70,7 +70,7 @@ export const DialogCancellations = (props: DialogCancellationListProps) => {
 export const DialogCancellationList: React.FC<DialogCancellationListProps> = (props) => {
   return (
     <DialogContentPolicy>
-      <DialogCancellations {...props} />
+      <CancellationsList {...props} />
     </DialogContentPolicy>
   );
 };

package/src/components/molecules/DialogContentPolicy/DialogContentPolicy.tsx

@@ -35,7 +35,7 @@ export const DialogContentPolicy = (props: DialogContentPolicyProps) => {
   return (
     <div className="cancellation-policy">
       {children}
-      <div className="flex justify-end gap-x-5 py-9">
+      <div className="flex justify-end gap-x-5 pt-9 pb-2">
         <div className="flex gap-x-2.5 items-center">
           <Checkbox
             checked={accepted}

package/src/components/molecules/MultiSelectDropdown/MultiSelectDropdown.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import Checkbox from '../../atoms/Checkbox/Checkbox';
 import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
 import Input from '../../atoms/Inputs/Input/Input';
-import Checkbox from '../../atoms/Checkbox/Checkbox';
 import SelectedValue from '../../atoms/SelectedValue/SelectedValue';
 import { Text } from '../../atoms/Typography/Typography';
 
@@ -28,6 +28,7 @@ export interface MultiSelectDropdownProps {
   error?: boolean;
   className?: string;
   maxDisplayedChips?: number;
+  useTextForMaxDisplayedChips?: boolean;
   selectedValueVariant?: 'filled' | 'text';
   searchable?: boolean;
   searchPlaceholder?: string;
@@ -46,7 +47,8 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
   selectedValueVariant = 'filled',
   searchable = false,
   searchPlaceholder = 'Search',
-  groups
+  useTextForMaxDisplayedChips = false,
+  groups,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [query, setQuery] = useState('');
@@ -79,33 +81,30 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
     let newSelectedValues: string[];
 
     if (isSelected) {
-      newSelectedValues = selectedValues.filter(id => id !== optionId);
+      newSelectedValues = selectedValues.filter((id) => id !== optionId);
     } else {
       newSelectedValues = [...selectedValues, optionId];
     }
 
-
     onSelectionChange(newSelectedValues);
   };
 
   const handleRemoveChip = (optionId: string) => {
     if (disabled) return;
-    
-    const newSelectedValues = selectedValues.filter(id => id !== optionId);
+
+    const newSelectedValues = selectedValues.filter((id) => id !== optionId);
     onSelectionChange(newSelectedValues);
   };
 
-
   const getSelectedOptions = () => {
-    return options.filter(option => selectedValues.includes(option.id));
+    return options.filter((option) => selectedValues.includes(option.id));
   };
   const getFilteredOptions = () => {
     if (!searchable || query.trim() === '') return options;
     const q = query.toLowerCase();
-    return options.filter(o => o.label.toLowerCase().includes(q));
+    return options.filter((o) => o.label.toLowerCase().includes(q));
   };
 
-
   const getDisplayedChips = () => {
     const selectedOptions = getSelectedOptions();
     return selectedOptions.slice(0, maxDisplayedChips);
@@ -122,6 +121,20 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
     return 'default';
   };
 
+  const displayChips = () => {
+    return getDisplayedChips().map((option) => (
+      <SelectedValue
+        key={option.id}
+        value={option.label}
+        onRemove={() => handleRemoveChip(option.id)}
+        className="multiselect-dropdown__chip"
+        size="xs"
+        iconSize="xs"
+        variant={selectedValueVariant}
+      />
+    ));
+  };
+
   return (
     <div ref={dropdownRef} className={`multiselect-dropdown ${className}`}>
       <div className="multiselect-dropdown__input-container">
@@ -131,26 +144,34 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
           onClick={handleToggleDropdown}
           className="multiselect-dropdown__input"
         />
-        
+
         {/* Display selected chips */}
         {selectedValues.length > 0 && (
           <div className="multiselect-dropdown__chips">
-            {getDisplayedChips().map((option) => (
-              <SelectedValue
-                key={option.id}
-                value={option.label}
-                onRemove={() => handleRemoveChip(option.id)}
-                className="multiselect-dropdown__chip"
-                size="xs"
-                iconSize="xs"
-                variant={selectedValueVariant}
-              />
-            ))}
-            {getHiddenCount() > 0 && (
-              <div className="multiselect-dropdown__hidden-count">
-                +{getHiddenCount()}
-              </div>
+            {!useTextForMaxDisplayedChips && (
+              <>
+                {displayChips()}
+                {getHiddenCount() > 0 && (
+                  <div className="multiselect-dropdown__hidden-count">
+                    +{getHiddenCount()}
+                  </div>
+                )}
+              </>
             )}
+            {useTextForMaxDisplayedChips &&
+              (getHiddenCount() > 0 ? (
+                <>
+                  <Text
+                    size="sm"
+                    variant="regular"
+                    leading="5"
+                    className="multiselect-dropdown__footer-text">
+                    {selectedValues.length} item selected
+                  </Text>
+                </>
+              ) : (
+                displayChips()
+              ))}
           </div>
         )}
       </div>
@@ -170,69 +191,83 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
               </div>
             )}
             <div className="multiselect-dropdown__options">
-              {groups && groups.length > 0 ? (
-                groups.map((group) => (
-                  <div key={group.id} className="multiselect-dropdown__group">
-                    <div className="multiselect-dropdown__group-header">
-                      {group.imageUrl && (
-                        <span className="multiselect-dropdown__group-icon" aria-hidden="true">
-                          <img src={group.imageUrl} alt="" />
-                        </span>
-                      )}
-                      <Text size="sm" variant="medium">{group.label}</Text>
-                    </div>
-                    <div className="multiselect-dropdown__group-options">
-                      {getFilteredOptions()
-                        .filter(o => group.options.some(go => go.id === o.id))
-                        .map((option) => (
-                          <div key={option.id} className="multiselect-dropdown__option">
-                            <Checkbox
-                              checked={selectedValues.includes(option.id)}
-                              disabled={option.disabled || disabled}
-                              label={option.label}
-                              leadingContent={option.imageUrl ? (
-                                <span className="multiselect-dropdown__option-icon" aria-hidden="true">
-                                  <img src={option.imageUrl} alt="" />
-                                </span>
-                              ) : undefined}
-                              onChange={(checked) => {
-                                if (checked !== selectedValues.includes(option.id)) {
-                                  handleOptionToggle(option.id);
+              {groups && groups.length > 0
+                ? groups.map((group) => (
+                    <div key={group.id} className="multiselect-dropdown__group">
+                      <div className="multiselect-dropdown__group-header">
+                        {group.imageUrl && (
+                          <span
+                            className="multiselect-dropdown__group-icon"
+                            aria-hidden="true">
+                            <img src={group.imageUrl} alt="" />
+                          </span>
+                        )}
+                        <Text size="sm" variant="medium">
+                          {group.label}
+                        </Text>
+                      </div>
+                      <div className="multiselect-dropdown__group-options">
+                        {getFilteredOptions()
+                          .filter((o) => group.options.some((go) => go.id === o.id))
+                          .map((option) => (
+                            <div key={option.id} className="multiselect-dropdown__option">
+                              <Checkbox
+                                checked={selectedValues.includes(option.id)}
+                                disabled={option.disabled || disabled}
+                                label={option.label}
+                                leadingContent={
+                                  option.imageUrl ? (
+                                    <span
+                                      className="multiselect-dropdown__option-icon"
+                                      aria-hidden="true">
+                                      <img src={option.imageUrl} alt="" />
+                                    </span>
+                                  ) : undefined
                                 }
-                              }}
-                            />
-                          </div>
-                        ))}
+                                onChange={(checked) => {
+                                  if (checked !== selectedValues.includes(option.id)) {
+                                    handleOptionToggle(option.id);
+                                  }
+                                }}
+                              />
+                            </div>
+                          ))}
+                      </div>
                     </div>
-                  </div>
-                ))
-              ) : (
-                getFilteredOptions().map((option) => (
-                  <div key={option.id} className="multiselect-dropdown__option">
-                    <Checkbox
-                      checked={selectedValues.includes(option.id)}
-                      disabled={option.disabled || disabled}
-                      label={option.label}
-                      leadingContent={option.imageUrl ? (
-                        <span className="multiselect-dropdown__option-icon" aria-hidden="true">
-                          <img src={option.imageUrl} alt="" />
-                        </span>
-                      ) : undefined}
-                      onChange={(checked) => {
-                        if (checked !== selectedValues.includes(option.id)) {
-                          handleOptionToggle(option.id);
+                  ))
+                : getFilteredOptions().map((option) => (
+                    <div key={option.id} className="multiselect-dropdown__option">
+                      <Checkbox
+                        checked={selectedValues.includes(option.id)}
+                        disabled={option.disabled || disabled}
+                        label={option.label}
+                        leadingContent={
+                          option.imageUrl ? (
+                            <span
+                              className="multiselect-dropdown__option-icon"
+                              aria-hidden="true">
+                              <img src={option.imageUrl} alt="" />
+                            </span>
+                          ) : undefined
                         }
-                      }}
-                    />
-                  </div>
-                ))
-              )}
+                        onChange={(checked) => {
+                          if (checked !== selectedValues.includes(option.id)) {
+                            handleOptionToggle(option.id);
+                          }
+                        }}
+                      />
+                    </div>
+                  ))}
             </div>
           </div>
 
           {/* Footer with count (outside the menu container) */}
           <div className="multiselect-dropdown__footer">
-            <Text size="sm" variant="regular" leading="5" className="multiselect-dropdown__footer-text">
+            <Text
+              size="sm"
+              variant="regular"
+              leading="5"
+              className="multiselect-dropdown__footer-text">
               {selectedValues.length} item selected
             </Text>
           </div>

package/src/components/molecules/PaxChips/PaxChips.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Chip from '../../atoms/Chip/Chip';
+
+export interface PaxCount {
+  adult: number;
+  teen: number;
+  child: number;
+  infant: number;
+}
+
+export interface PaxChipsProps {
+  pax: PaxCount;
+}
+
+export const PaxChips: React.FC<PaxChipsProps> = (props) => {
+  const { pax } = props;
+  return (
+    <div className="flex flex-wrap gap-2">
+      {Object.entries(pax).map(([key, value]) => (
+        <Chip
+          key={key}
+          label={`${key} ${value}`}
+          size="sm"
+          color="accent"
+          type={value > 0 ? 'filled' : 'outline'}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/molecules/TextWithIcon/TextWithIcon.tsx

@@ -56,12 +56,12 @@ const TextWithIcon: React.FC<TextWithIconProps> = (props) => {
   return (
     <div
       className={cn(
-        'flex items-center gap-x-2',
+        'flex gap-x-2',
         color === 'yellow' && 'text-[var(--color-yellow-600)]',
         color === 'accent' && 'text-[var(--color-text-accent)]'
       )}>
       {icon && (
-        <span>
+        <span className="relative top-[2px]">
           <Icon name={icon} size={iconSize} />
         </span>
       )}

package/src/components/molecules/Toast/Toast.css

@@ -0,0 +1,27 @@
+.toast {
+  @apply p-3 flex items-center gap-2;
+  border: solid 1px transparent;
+  border-left-width: 8px;
+  border-radius: var(--toast-border-radius-default);
+  background-color: var(--toast-color-background);
+}
+.toast--info {
+  border-color: var(--toast-color-info-foreground);
+  background-color: var(--toast-color-info-background);
+  color: var(--toast-color-info-foreground);
+}
+.toast--success {
+  border-color: var(--toast-color-success-foreground);
+  background-color: var(--toast-color-success-background);
+  color: var(--toast-color-success-foreground);
+}
+.toast--warning {
+  border-color: var(--toast-color-warning-foreground);
+  background-color: var(--toast-color-warning-background);
+  color: var(--toast-color-warning-foreground);
+}
+.toast--error {
+  border-color: var(--toast-color-danger-foreground);
+  background-color: var(--toast-color-danger-background);
+  color: var(--toast-color-danger-foreground);
+}

package/src/components/molecules/Toast/Toast.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import '../../../styles/components/molecule/toast.css';
 import Icon from '../../atoms/Icon/Icon';
-import { ICONS } from '../../atoms/Icon/icons/registry';
+import { IconName } from '../../atoms/Icon/icons/registry';
 import { Text } from '../../atoms/Typography/Typography';
 
 export type ToastType = 'informational' | 'success' | 'warning' | 'danger';
@@ -14,7 +14,7 @@ export interface ToastProps {
   /** Additional CSS classes */
   className?: string;
   /** Icon name */
-  iconName?: keyof typeof ICONS;
+  iconName?: IconName;
 }
 
 /**
@@ -26,18 +26,19 @@ export interface ToastProps {
  * @param ToastProps
  * @returns
  */
-const Toast: React.FC<ToastProps> = ({ text, type = 'informational', className = '', iconName = 'badge-alert' }) => {
+const Toast: React.FC<ToastProps> = ({
+  text,
+  type = 'informational',
+  className = '',
+  iconName = 'badge-alert',
+}) => {
   return (
     <div className={`toast toast--${type} ${className}`.trim()}>
       <div className="toast__container">
         <div className="toast__icon-wrapper">
           <Icon name={iconName} size="md" className="toast__icon" />
         </div>
-        <Text
-          size="sm"
-          variant="bold"
-          leading="5"
-          className="toast__text">
+        <Text size="sm" variant="bold" leading="5" className="toast__text">
           {text}
         </Text>
       </div>
@@ -46,4 +47,3 @@ const Toast: React.FC<ToastProps> = ({ text, type = 'informational', className =
 };
 
 export default Toast;
-