mautourco-components 0.2.14 → 0.2.15

package/dist/components/organisms/QuoteHeader/QuoteHeader.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './QuoteHeader.css';
+export interface QuoteHeaderProps {
+    /** Current tab */
+    current: 'quotation' | 'booking';
+    /** Callback to navigate to a different tab */
+    onNavigate: (tab: 'quotation' | 'booking') => void;
+    /** Callback to create a new quote */
+    onNewQuote: () => void;
+    onFilterChange: (filter: 'date' | 'clientType' | 'fileStatus', value: string) => void;
+}
+export declare const QuoteHeader: React.FC<QuoteHeaderProps>;

package/dist/components/organisms/QuoteHeader/QuoteHeader.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from '../../atoms/Button/Button';
+import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
+import Input from '../../atoms/Inputs/Input/Input';
+import { Heading } from '../../atoms/Typography/Typography';
+import { SORT_BY__FILE_STATUS_OPTIONS, SORT_BY_CLIENT_TYPE_OPTIONS, SORT_BY_DATE_OPTIONS, } from './constant';
+import './QuoteHeader.css';
+var filterConfig = {
+    date: {
+        options: SORT_BY_DATE_OPTIONS,
+        placeholder: 'Sort by date',
+    },
+    clientType: {
+        options: SORT_BY_CLIENT_TYPE_OPTIONS,
+        placeholder: 'Client type',
+    },
+    fileStatus: {
+        options: SORT_BY__FILE_STATUS_OPTIONS,
+        placeholder: 'File status',
+    },
+};
+export var QuoteHeader = function (props) {
+    var _a = props.current, current = _a === void 0 ? 'quotation' : _a, onNavigate = props.onNavigate, onNewQuote = props.onNewQuote, onFilterChange = props.onFilterChange;
+    return (_jsxs("div", __assign({ className: "quote-header" }, { children: [_jsx(Heading, __assign({ level: 4, as: "h1", className: "quote-header__title", color: "accent" }, { children: "Quotation & Booking" })), _jsxs("div", __assign({ className: "flex gap-4" }, { children: [_jsx(Button, __assign({ variant: current === 'quotation' ? 'primary' : 'outline-primary', className: "quote-header__button", onClick: function () { return onNavigate('quotation'); } }, { children: "Quotation" })), _jsx(Button, __assign({ variant: current === 'booking' ? 'primary' : 'outline-primary', className: "quote-header__button", onClick: function () { return onNavigate('booking'); } }, { children: "Booking" }))] })), _jsxs("div", __assign({ className: "quote-header__search-container" }, { children: [_jsx(Input, { placeholder: "Search", icon: "search", iconPosition: "leading", className: "quote-header__search" }), _jsx(Button, __assign({ variant: "primary", leadingIcon: "plus-circle", iconSize: "md", size: "sm", onClick: onNewQuote }, { children: "New quote" }))] })), _jsx("div", __assign({ className: "quote-header__filters" }, { children: Object.entries(filterConfig).map(function (_a) {
+                    var key = _a[0], value = _a[1];
+                    return (_jsx(DropdownInput, { placeholder: value.placeholder, options: value.options, onSelect: function (value) {
+                            return onFilterChange(key, value);
+                        } }, key));
+                }) }))] })));
+};

package/dist/components/organisms/QuoteHeader/constant.d.ts

@@ -0,0 +1,3 @@
+export declare const SORT_BY_DATE_OPTIONS: string[];
+export declare const SORT_BY_CLIENT_TYPE_OPTIONS: string[];
+export declare const SORT_BY__FILE_STATUS_OPTIONS: string[];

package/dist/components/organisms/QuoteHeader/constant.js

@@ -0,0 +1,8 @@
+export var SORT_BY_DATE_OPTIONS = ['Newest to oldest', 'Last week', 'Oldest to newest'];
+export var SORT_BY_CLIENT_TYPE_OPTIONS = ['All', 'Standard', 'Honeymoon', 'Wedding'];
+export var SORT_BY__FILE_STATUS_OPTIONS = [
+    'All',
+    'Free sales',
+    'On request',
+    'Pay to book',
+];

package/dist/index.d.ts

@@ -35,6 +35,7 @@ export { Dialog } from './components/organisms/Dialog/Dialog';
 export { Footer } from './components/organisms/Footer/Footer';
 export { default as MultipleQuotationDocket } from './components/organisms/MultipleQuotationDocket';
 export { default as PaxSelector } from './components/organisms/PaxSelector/PaxSelector';
+export { QuoteHeader } from './components/organisms/QuoteHeader/QuoteHeader';
 export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip';
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export * from './components/organisms/Table';
@@ -70,4 +71,5 @@ export type { TransferLineData, TransferLineProps, TransferType, } from './compo
 export type { FromToProps } from './components/molecules/FromTo/FromTo';
 export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';
 export type { DetailsColProps, ItemColProps, RowAccommodationProps, RowExcursionProps, RowTransferProps, } from './components/molecules/TableServiceItem';
+export type { QuoteHeaderProps } from './components/organisms/QuoteHeader/QuoteHeader';
 export * from './types/table';

package/dist/index.js

@@ -38,6 +38,7 @@ export { Dialog } from './components/organisms/Dialog/Dialog';
 export { Footer } from './components/organisms/Footer/Footer';
 export { default as MultipleQuotationDocket } from './components/organisms/MultipleQuotationDocket';
 export { default as PaxSelector } from './components/organisms/PaxSelector/PaxSelector';
+export { QuoteHeader } from './components/organisms/QuoteHeader/QuoteHeader';
 export { default as RoundTrip } from './components/organisms/RoundTrip/RoundTrip';
 export { default as SearchBarTransfer } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export * from './components/organisms/Table';

package/dist/styles/components/dropdown.css

@@ -2089,8 +2089,8 @@
   width: 100%;
   min-height: 40px;
   padding: 8px 12px;
-  border: 1px solid var(--color-slate-500, #6B7280);
-  border-radius: 0.375rem;
+  border: 1px solid var(--color-slate-500, #6b7280);
+  border-radius: var(--input-border-radius-default);
   background-color: var(--color-white, #ffffff);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
@@ -2161,7 +2161,7 @@
 
 .dropdown-input--disabled {
   background-color: var(--color-slate-100);
-  border-color: var(--color-slate-300, #D1D5DB);
+  border-color: var(--color-slate-300, #d1d5db);
   cursor: not-allowed;
 }
 
@@ -2183,10 +2183,11 @@
   z-index: 1000;
   width: 100%;
   background-color: var(--color-white);
-border: 1px solid var(--color-neutral-400);
-  border-top: 1px solid var(--color-neutral-400);
+  border: 1px solid var(--color-border-subtle);
   border-radius: var(--multiselect-border-radius, 0.75rem);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
   max-height: var(--multiselect-size-menu-max-height, 17.25rem);
   overflow-y: auto;
   padding: var(--spacing-padding-px-0);

package/dist/styles/components/forms.css

@@ -2077,10 +2077,10 @@
 /* Styles Input centralisés: consomment uniquement des variables CSS issues de Style Dictionary */
 
 .input-field {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-family: var(--typography-font-family-sans, Inter, system-ui, sans-serif);
   font-size: var(--input-font-size-default, 1rem);
   line-height: var(--input-line-height-default, 1.5rem);
-  border-radius: 0.375rem;
+  border-radius: var(--input-border-radius-default);
   border-width: 1px;
   border-style: solid;
   padding: var(--input-padding-vertical, 0.5rem) var(--input-padding-horizontal, 0.75rem);
@@ -2095,6 +2095,7 @@
 .input-wrapper {
   position: relative;
   width: 100%;
+  height: 42px;
 }
 
 .input-icon {
@@ -2106,16 +2107,24 @@
   height: var(--input-search-iconSize, 1rem);
 }
 
-.input-icon--leading { left: var(--input-padding-horizontal, 0.75rem); }
+.input-icon--leading {
+  left: var(--input-padding-horizontal, 0.75rem);
+}
 
-.input-icon--trailing { right: var(--input-padding-horizontal, 0.75rem); }
+.input-icon--trailing {
+  right: var(--input-padding-horizontal, 0.75rem);
+}
 
 .input-field--with-icon.input-field--icon-leading {
-  padding-left: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
+  padding-left: calc(
+    var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem
+  );
 }
 
 .input-field--with-icon.input-field--icon-trailing {
-  padding-right: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
+  padding-right: calc(
+    var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem
+  );
 }
 
 .input-field:focus {
@@ -2126,7 +2135,7 @@
 
 .input-field--default {
   background-color: var(--color-white);
-  border-color: var(--color-slate-300);
+  border-color: var(--color-tuna-500);
   color: var(--color-slate-900);
 }
 
@@ -2194,7 +2203,7 @@
 }
 
 .input-showcase h1 {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-family: var(--typography-font-family-sans, Inter, system-ui, sans-serif);
   font-size: var(--typography-font-size-2xl, 1.5re);
   font-weight: var(--font-weight-font-bold);
   color: var(--color-slate-900);
@@ -2202,7 +2211,7 @@
 }
 
 .input-showcase h2 {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-family: var(--typography-font-family-sans, Inter, system-ui, sans-serif);
   font-size: var(--typography-font-size-lg, 1.125rem);
   font-weight: var(--font-weight-font-medium);
   color: var(--color-slate-700);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",

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

@@ -0,0 +1,60 @@
+import React from 'react';
+
+interface PlusCircleIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+  /**
+   * Couleur par défaut si aucune couleur n'est spécifiée
+   */
+  defaultColor?: string;
+}
+
+const PlusCircleIcon: React.FC<PlusCircleIconProps> = ({
+  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}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_7074_66340)">
+        <path
+          d="M13.915 8.00098C13.915 4.7334 11.2666 2.08416 7.99902 2.08398C4.73134 2.08398 2.08203 4.73329 2.08203 8.00098C2.08221 11.2685 4.73145 13.917 7.99902 13.917C11.2664 13.9168 13.9149 11.2684 13.915 8.00098ZM7.24902 10.667V8.75098H5.33203C4.91793 8.75098 4.58221 8.41504 4.58203 8.00098C4.58203 7.58676 4.91782 7.25098 5.33203 7.25098H7.24902V5.33398C7.24902 4.91977 7.58481 4.58398 7.99902 4.58398C8.41309 4.58416 8.74902 4.91988 8.74902 5.33398V7.25098H10.665L10.7422 7.25488C11.1203 7.29337 11.415 7.61271 11.415 8.00098C11.4149 8.38912 11.1202 8.70862 10.7422 8.74707L10.665 8.75098H8.74902V10.667C8.74902 11.0811 8.41309 11.4168 7.99902 11.417C7.58481 11.417 7.24902 11.0812 7.24902 10.667ZM15.415 8.00098C15.4149 12.0968 12.0949 15.4168 7.99902 15.417C3.90302 15.417 0.582208 12.0969 0.582031 8.00098C0.582031 3.90487 3.90291 0.583984 7.99902 0.583984C12.095 0.584161 15.415 3.90497 15.415 8.00098Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_7074_66340">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default PlusCircleIcon;

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

@@ -35,6 +35,7 @@ import NightIcon from './NightIcon';
 import PlaneIcon from './PlaneIcon';
 import PlaneLandingOutlineIcon from './PlaneLandingOutlineIcon';
 import PlaneTakeoffOutlineIcon from './PlaneTakeoffOutlineIcon';
+import PlusCircleIcon from './PlusCircleIcon';
 import PlusIcon from './PlusIcon';
 import QuotationIcon from './QuotationIcon';
 import Search from './Search';
@@ -124,6 +125,7 @@ export const ICONS = {
   bus: BusIcon as unknown as IconComponent,
   map: MapIcon as unknown as IconComponent,
   wallet: WalletIcon as unknown as IconComponent,
+  'plus-circle': PlusCircleIcon as unknown as IconComponent,
 } as const satisfies Record<string, IconComponent>;
 
 export type IconName = keyof typeof ICONS;

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Icon from '../../Icon/Icon';
 import Spinner from '../../Spinner/Spinner';
 
@@ -19,12 +19,14 @@ const DropdownInput: React.FC<DropdownInputProps> = ({
   onClick,
   className = '',
   options = [],
-  onSelect
+  onSelect,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
   const handleClick = () => {
     if (state === 'disabled' || state === 'loading') return;
-    
+
     setIsOpen(!isOpen);
     onClick?.();
   };
@@ -54,36 +56,46 @@ const DropdownInput: React.FC<DropdownInputProps> = ({
     if (state === 'loading') {
       return <Spinner size="sm" className="dropdown-input__icon" />;
     }
-    
+
     return (
-      <Icon 
-        name={isOpen ? 'chevron-up' : 'chevron-down'} 
-        size="sm" 
-        className="dropdown-input__icon dropdown-input__icon--chevron" 
+      <Icon
+        name={isOpen ? 'chevron-up' : 'chevron-down'}
+        size="sm"
+        className="dropdown-input__icon dropdown-input__icon--chevron"
       />
     );
   };
 
-  const displayText = state === 'loading' ? 'Loading...' : (value || placeholder);
+  const displayText = state === 'loading' ? 'Loading...' : value || placeholder;
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
 
   return (
-    <div className={`dropdown-container ${className}`}>
-      <div 
-        className={`dropdown-input ${getStateClasses()}`}
-        onClick={handleClick}
-      >
+    <div ref={dropdownRef} className={`dropdown-container ${className}`}>
+      <div className={`dropdown-input ${getStateClasses()}`} onClick={handleClick}>
         <span className="dropdown-input__text">{displayText}</span>
         {getIcon()}
       </div>
-      
+
       {isOpen && options.length > 0 && (
         <div className="dropdown-menu">
           {options.map((option, index) => (
             <div
               key={index}
               className="dropdown-option"
-              onClick={() => handleOptionSelect(option)}
-            >
+              onClick={() => handleOptionSelect(option)}>
               {option}
             </div>
           ))}

package/src/components/organisms/QuoteHeader/QuoteHeader.css

@@ -0,0 +1,37 @@
+.quote-header {
+  @apply w-full;
+}
+
+.quote-header__button {
+  width: 206px;
+}
+
+.quote-header__title {
+  @apply px-2 relative mb-10;
+  &::before {
+    content: '';
+    @apply absolute top-1/2 left-0 -translate-y-1/2;
+    @apply w-1 h-8;
+    background-color: var(--color-elevation-brand-subtle);
+  }
+}
+
+.quote-header__search-container {
+  @apply mt-12;
+  @apply flex justify-between;
+  > button {
+    @apply gap-x-2.5;
+    min-width: 129px;
+  }
+}
+
+.quote-header__search {
+  width: 364px;
+}
+
+.quote-header__filters {
+  @apply flex gap-3 my-8;
+  .dropdown-container {
+    width: 139px;
+  }
+}

package/src/components/organisms/QuoteHeader/QuoteHeader.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import Button from '../../atoms/Button/Button';
+import DropdownInput from '../../atoms/Inputs/DropdownInput/DropdownInput';
+import Input from '../../atoms/Inputs/Input/Input';
+import { Heading } from '../../atoms/Typography/Typography';
+import {
+  SORT_BY__FILE_STATUS_OPTIONS,
+  SORT_BY_CLIENT_TYPE_OPTIONS,
+  SORT_BY_DATE_OPTIONS,
+} from './constant';
+import './QuoteHeader.css';
+
+export interface QuoteHeaderProps {
+  /** Current tab */
+  current: 'quotation' | 'booking';
+
+  /** Callback to navigate to a different tab */
+  onNavigate: (tab: 'quotation' | 'booking') => void;
+
+  /** Callback to create a new quote */
+  onNewQuote: () => void;
+
+  onFilterChange: (filter: 'date' | 'clientType' | 'fileStatus', value: string) => void;
+}
+
+const filterConfig = {
+  date: {
+    options: SORT_BY_DATE_OPTIONS,
+    placeholder: 'Sort by date',
+  },
+  clientType: {
+    options: SORT_BY_CLIENT_TYPE_OPTIONS,
+    placeholder: 'Client type',
+  },
+  fileStatus: {
+    options: SORT_BY__FILE_STATUS_OPTIONS,
+    placeholder: 'File status',
+  },
+};
+
+export const QuoteHeader: React.FC<QuoteHeaderProps> = (props) => {
+  const { current = 'quotation', onNavigate, onNewQuote, onFilterChange } = props;
+
+  return (
+    <div className="quote-header">
+      <Heading level={4} as="h1" className="quote-header__title" color="accent">
+        Quotation & Booking
+      </Heading>
+      <div className="flex gap-4">
+        <Button
+          variant={current === 'quotation' ? 'primary' : 'outline-primary'}
+          className="quote-header__button"
+          onClick={() => onNavigate('quotation')}>
+          Quotation
+        </Button>
+        <Button
+          variant={current === 'booking' ? 'primary' : 'outline-primary'}
+          className="quote-header__button"
+          onClick={() => onNavigate('booking')}>
+          Booking
+        </Button>
+      </div>
+      <div className="quote-header__search-container">
+        <Input
+          placeholder="Search"
+          icon="search"
+          iconPosition="leading"
+          className="quote-header__search"
+        />
+        <Button
+          variant="primary"
+          leadingIcon="plus-circle"
+          iconSize="md"
+          size="sm"
+          onClick={onNewQuote}>
+          New quote
+        </Button>
+      </div>
+      <div className="quote-header__filters">
+        {Object.entries(filterConfig).map(([key, value]) => (
+          <DropdownInput
+            key={key}
+            placeholder={value.placeholder}
+            options={value.options}
+            onSelect={(value) =>
+              onFilterChange(key as 'date' | 'clientType' | 'fileStatus', value)
+            }
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/organisms/QuoteHeader/constant.ts

@@ -0,0 +1,8 @@
+export const SORT_BY_DATE_OPTIONS = ['Newest to oldest', 'Last week', 'Oldest to newest'];
+export const SORT_BY_CLIENT_TYPE_OPTIONS = ['All', 'Standard', 'Honeymoon', 'Wedding'];
+export const SORT_BY__FILE_STATUS_OPTIONS = [
+  'All',
+  'Free sales',
+  'On request',
+  'Pay to book',
+];

package/src/styles/components/dropdown.css

@@ -12,8 +12,8 @@
   width: 100%;
   min-height: 40px;
   padding: 8px 12px;
-  border: 1px solid var(--color-slate-500, #6B7280);
-  border-radius: 0.375rem;
+  border: 1px solid var(--color-slate-500, #6b7280);
+  border-radius: var(--input-border-radius-default);
   background-color: var(--color-white, #ffffff);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
@@ -83,7 +83,7 @@
 
 .dropdown-input--disabled {
   background-color: var(--color-slate-100);
-  border-color: var(--color-slate-300, #D1D5DB);
+  border-color: var(--color-slate-300, #d1d5db);
   cursor: not-allowed;
 }
 
@@ -104,10 +104,11 @@
   z-index: 1000;
   width: 100%;
   background-color: var(--color-white);
-border: 1px solid var(--color-neutral-400);
-  border-top: 1px solid var(--color-neutral-400);
+  border: 1px solid var(--color-border-subtle);
   border-radius: var(--multiselect-border-radius, 0.75rem);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
   max-height: var(--multiselect-size-menu-max-height, 17.25rem);
   overflow-y: auto;
   padding: var(--spacing-padding-px-0);

package/src/styles/components/forms.css

@@ -1,10 +1,10 @@
 /* Styles Input centralisés: consomment uniquement des variables CSS issues de Style Dictionary */
 
 .input-field {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-family: var(--typography-font-family-sans, Inter, system-ui, sans-serif);
   font-size: var(--input-font-size-default, 1rem);
   line-height: var(--input-line-height-default, 1.5rem);
-  border-radius: 0.375rem;
+  border-radius: var(--input-border-radius-default);
   border-width: 1px;
   border-style: solid;
   padding: var(--input-padding-vertical, 0.5rem) var(--input-padding-horizontal, 0.75rem);
@@ -18,6 +18,7 @@
 .input-wrapper {
   position: relative;
   width: 100%;
+  height: 42px;
 }
 
 .input-icon {
@@ -29,15 +30,23 @@
   height: var(--input-search-iconSize, 1rem);
 }
 
-.input-icon--leading { left: var(--input-padding-horizontal, 0.75rem); }
-.input-icon--trailing { right: var(--input-padding-horizontal, 0.75rem); }
+.input-icon--leading {
+  left: var(--input-padding-horizontal, 0.75rem);
+}
+.input-icon--trailing {
+  right: var(--input-padding-horizontal, 0.75rem);
+}
 
 .input-field--with-icon.input-field--icon-leading {
-  padding-left: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
+  padding-left: calc(
+    var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem
+  );
 }
 
 .input-field--with-icon.input-field--icon-trailing {
-  padding-right: calc(var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem);
+  padding-right: calc(
+    var(--input-padding-horizontal, 0.75rem) + var(--input-search-iconSize, 1rem) + 0.5rem
+  );
 }
 
 .input-field:focus {
@@ -47,7 +56,7 @@
 /* État par défaut */
 .input-field--default {
   background-color: var(--color-white);
-  border-color: var(--color-slate-300);
+  border-color: var(--color-tuna-500);
   color: var(--color-slate-900);
 }
 
@@ -110,7 +119,7 @@
 }
 
 .input-showcase h1 {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-family: var(--typography-font-family-sans, Inter, system-ui, sans-serif);
   font-size: var(--typography-font-size-2xl, 1.5re);
   font-weight: var(--font-weight-font-bold);
   color: var(--color-slate-900);
@@ -118,7 +127,7 @@
 }
 
 .input-showcase h2 {
-  font-family: var(--typography-font-family-sans, Inter,system-ui,sans-serif);
+  font-family: var(--typography-font-family-sans, Inter, system-ui, sans-serif);
   font-size: var(--typography-font-size-lg, 1.125rem);
   font-weight: var(--font-weight-font-medium);
   color: var(--color-slate-700);
@@ -143,5 +152,3 @@
   width: 100%;
   max-width: 300px;
 }
-
-