mautourco-components 0.2.21 → 0.2.23

package/dist/components/organisms/TabCancellationPolicy/PolicyTransfer.d.ts

@@ -1,4 +1,15 @@
 export interface PolicyTransferProps {
     carName: string;
 }
+/**
+ * PolicyTransfer is a component that allows the user to display the policy transfer.
+ *
+ * @example
+ * <PolicyTransfer
+ *  carName="Car Name"
+ * />
+ *
+ * @param props - The props for the PolicyTransfer component.
+ * @returns
+ */
 export default function PolicyTransfer(props: PolicyTransferProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/TabCancellationPolicy/PolicyTransfer.js

@@ -38,6 +38,17 @@ var policies = [
         policy: '100% applicable fee claimed to the Operator',
     },
 ];
+/**
+ * PolicyTransfer is a component that allows the user to display the policy transfer.
+ *
+ * @example
+ * <PolicyTransfer
+ *  carName="Car Name"
+ * />
+ *
+ * @param props - The props for the PolicyTransfer component.
+ * @returns
+ */
 export default function PolicyTransfer(props) {
     var carName = props.carName;
     return (_jsxs("div", __assign({ className: "policy-excursion" }, { children: [_jsx(TextWithIcon, __assign({ icon: "car", textVariant: "bold", iconSize: "md", textSize: "md" }, { children: carName })), _jsx("div", __assign({ className: "grid grid-cols-2 xl:grid-cols-3 gap-x-4" }, { children: policies.map(function (policy, index) { return (_jsxs("div", __assign({ className: "mt-4" }, { children: [_jsx(Text, __assign({ variant: "medium", size: "sm", leading: "4" }, { children: policy.title })), _jsx("ul", __assign({ className: "pl-8" }, { children: _jsx("li", __assign({ className: "list-disc" }, { children: _jsx(Text, __assign({ size: "sm", leading: "4" }, { children: policy.policy })) })) }))] }), "policy-".concat(index))); }) }))] })));

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

@@ -3,6 +3,35 @@ import CancellationAccom from './CancellationAccom';
 import CancellationExcursion from './CancellationExcursion';
 import CancellationTransfer from './CancellationTransfer';
 import TabCancellationPolicyLayout from './TabCancellationPolicyLayout/TabCancellationPolicyLayout';
+/**
+ * TabCancellationPolicy is a component that allows the user to display the tab cancellation policy.
+ *
+ * @example
+ * <TabCancellationPolicy>
+ *  <TabCancellationPolicy.Accom
+ *    hotelName="Hotel Name"
+ *    pax="8 pax"
+ *    dates={['2024-01-01', '2024-01-02']}
+ *    image="/images/accom.png"
+ *    roomPolicies={roomPolicies}
+ *    isOnRequest={false}
+ *  />
+ *  <TabCancellationPolicy.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *    image="/images/excursion.png"
+ *    pickUpPoint="Pick Up Point"
+ *    policies="Policies"
+ *  />
+ *  <TabCancellationPolicy.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </TabCancellationPolicy>
+ *
+ * @param props - The props for the TabCancellationPolicy component.
+ * @returns The TabCancellationPolicy component.
+ */
 declare function TabCancellationPolicy(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 declare namespace TabCancellationPolicy {
     var Layout: typeof TabCancellationPolicyLayout;

package/dist/components/organisms/TabCancellationPolicy/TabCancellationPolicy.js

@@ -14,6 +14,35 @@ import CancellationAccom from './CancellationAccom';
 import CancellationExcursion from './CancellationExcursion';
 import CancellationTransfer from './CancellationTransfer';
 import TabCancellationPolicyLayout from './TabCancellationPolicyLayout/TabCancellationPolicyLayout';
+/**
+ * TabCancellationPolicy is a component that allows the user to display the tab cancellation policy.
+ *
+ * @example
+ * <TabCancellationPolicy>
+ *  <TabCancellationPolicy.Accom
+ *    hotelName="Hotel Name"
+ *    pax="8 pax"
+ *    dates={['2024-01-01', '2024-01-02']}
+ *    image="/images/accom.png"
+ *    roomPolicies={roomPolicies}
+ *    isOnRequest={false}
+ *  />
+ *  <TabCancellationPolicy.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *    image="/images/excursion.png"
+ *    pickUpPoint="Pick Up Point"
+ *    policies="Policies"
+ *  />
+ *  <TabCancellationPolicy.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </TabCancellationPolicy>
+ *
+ * @param props - The props for the TabCancellationPolicy component.
+ * @returns The TabCancellationPolicy component.
+ */
 export default function TabCancellationPolicy(props) {
     return _jsx("div", __assign({ className: "tab-cancellation-policy" }, props));
 }

package/dist/components/ui/popover.js

@@ -33,7 +33,7 @@ function PopoverTrigger(_a) {
 }
 function PopoverContent(_a) {
     var className = _a.className, _b = _a.align, align = _b === void 0 ? 'center' : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 4 : _c, props = __rest(_a, ["className", "align", "sideOffset"]);
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, __assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden border-[var(--color-elevation-state-hover-subtle)]', className) }, props)) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, __assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden border-[var(--color-elevation-state-hover-subtle)] z-[99999]', className) }, props)) }));
 }
 function PopoverAnchor(_a) {
     var props = __rest(_a, []);

package/dist/index.d.ts

@@ -15,11 +15,13 @@ export { default as Spinner } from './components/atoms/Spinner/Spinner';
 export { Heading, Text } from './components/atoms/Typography/Typography';
 export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
 export { ActionDropdown, type ActionDropdownItem, } from './components/molecules/ActionDropdown/ActionDropdown';
+export { AddItemButton } from './components/molecules/AddItemButton/AddItemButton';
 export * from './components/molecules/BookingResume';
 export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
 export * from './components/molecules/DetailsInfo';
+export * from './components/molecules/DialogContentPolicy';
 export { default as FeatureRow } from './components/molecules/FeatureRow/FeatureRow';
 export { default as FromTo } from './components/molecules/FromTo/FromTo';
 export { default as LocationDropdown } from './components/molecules/LocationDropdown/LocationDropdown';
@@ -38,10 +40,12 @@ export * from './components/molecules/BookingPax';
 export { DetailsClientInfo } from './components/molecules/DetailsInfo/DetailsClient/DetailsClient';
 export { default as TableServiceItem } from './components/molecules/TableServiceItem';
 export * from './components/organisms/Booking';
+export * from './components/organisms/BookingAddItem';
 export { default as CarBookingCard } from './components/organisms/CarBookingCard/CarBookingCard';
 export { CardContainer } from './components/organisms/CardContainer/CardContainer';
 export { default as DateTimePicker } from './components/organisms/DateTimePicker/DateTimePicker';
 export { Dialog } from './components/organisms/Dialog/Dialog';
+export * from './components/organisms/DialogBookingConfirm';
 export { Footer } from './components/organisms/Footer/Footer';
 export { default as MultipleQuotationDocket } from './components/organisms/MultipleQuotationDocket';
 export { default as PaxSelector } from './components/organisms/PaxSelector/PaxSelector';
@@ -81,6 +85,9 @@ export type { RoundTripData, RoundTripProps, RoundTripTransfer, } from './compon
 export type { SearchBarTransferData, SearchBarTransferProps, TransferMode, } from './components/organisms/SearchBarTransfer/SearchBarTransfer';
 export type { TopNavigationProps } from './components/organisms/TopNavigation/TopNavigation';
 export type { TransferLineData, TransferLineProps, TransferType, } from './components/organisms/TransferLine/TransferLine';
+export type { CheckboxProps } from './components/atoms/Checkbox/Checkbox';
+export type { InputProps } from './components/atoms/Inputs/Input/Input';
+export type { AddItemButtonProps } from './components/molecules/AddItemButton/AddItemButton';
 export type { BreadcrumbsItem, BreadcrumbsProps, } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export type { FromToProps } from './components/molecules/FromTo/FromTo';
 export type { SectionTitleProps } from './components/molecules/SectionTitle/SectionTitle';

package/dist/index.js

@@ -17,11 +17,13 @@ export { Heading, Text } from './components/atoms/Typography/Typography';
 export { DateDisplay } from './components/molecules/DateDisplay/DateDisplay';
 // Molecules - Composed components
 export { ActionDropdown, } from './components/molecules/ActionDropdown/ActionDropdown';
+export { AddItemButton } from './components/molecules/AddItemButton/AddItemButton';
 export * from './components/molecules/BookingResume';
 export { Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs';
 export { default as CalendarInput } from './components/molecules/Calendar/CalendarInput';
 export { default as TimePicker } from './components/molecules/Calendar/TimePicker';
 export * from './components/molecules/DetailsInfo';
+export * from './components/molecules/DialogContentPolicy';
 export { default as FeatureRow } from './components/molecules/FeatureRow/FeatureRow';
 export { default as FromTo } from './components/molecules/FromTo/FromTo';
 export { default as LocationDropdown } from './components/molecules/LocationDropdown/LocationDropdown';
@@ -41,10 +43,12 @@ export * from './components/molecules/BookingPax';
 export { DetailsClientInfo } from './components/molecules/DetailsInfo/DetailsClient/DetailsClient';
 export { default as TableServiceItem } from './components/molecules/TableServiceItem';
 export * from './components/organisms/Booking';
+export * from './components/organisms/BookingAddItem';
 export { default as CarBookingCard } from './components/organisms/CarBookingCard/CarBookingCard';
 export { CardContainer } from './components/organisms/CardContainer/CardContainer';
 export { default as DateTimePicker } from './components/organisms/DateTimePicker/DateTimePicker';
 export { Dialog } from './components/organisms/Dialog/Dialog';
+export * from './components/organisms/DialogBookingConfirm';
 export { Footer } from './components/organisms/Footer/Footer';
 export { default as MultipleQuotationDocket } from './components/organisms/MultipleQuotationDocket';
 export { default as PaxSelector } from './components/organisms/PaxSelector/PaxSelector';
@@ -71,5 +75,3 @@ export { default as SearchIcon } from './components/atoms/Icon/icons/Search';
 export { default as SettingsIcon } from './components/atoms/Icon/icons/Settings';
 export { default as UserIcon } from './components/atoms/Icon/icons/User';
 export * from './types/table';
-// export type { InputProps } from './components/atoms/Inputs/Input/Input';
-// export type { CheckboxProps } from './components/atoms/Checkbox/Checkbox';

package/dist/styles/components/checkbox.css

@@ -2079,7 +2079,8 @@
 .checkbox-container {
   display: inline-flex;
   align-items: center;
-  width: 100%;
+  width: auto;
+  min-height: 33px;
 }
 
 .checkbox-input {
@@ -2095,14 +2096,18 @@
 .checkbox-label {
   display: flex;
   align-items: center;
-  column-gap: var(--checkbox-spacing-inline-gap, var(--multiselect-spacing-option-icon-gap, 0.625rem));
+  column-gap: var(
+    --checkbox-spacing-inline-gap,
+    var(--multiselect-spacing-option-icon-gap, 0.625rem)
+  );
   cursor: pointer;
   -webkit-user-select: none;
           user-select: none;
   width: 100%;
-  padding: var(--checkbox-spacing-label-padding, 0.5rem 0.75rem);
+  /* padding: var(--checkbox-spacing-label-padding, 0.5rem 0.75rem); */
   border-radius: var(--checkbox-border-radius, 0.375rem);
-  transition: all var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+  transition: all var(--checkbox-transition-duration, 0.2s)
+    var(--checkbox-transition-timing, ease-in-out);
 }
 
 .checkbox-box {
@@ -2113,12 +2118,13 @@
   border-radius: var(--checkbox-size-box-border-radius, 0.125rem);
   background-color: var(--color-white);
   opacity: var(--opacity-opacity-100);
-  top: var(--checkbox-position-top, 0.125rem);
-  left: var(--checkbox-position-left, 0.125rem);
+  /* top: var(--checkbox-position-top, 0.125rem);
+  left: var(--checkbox-position-left, 0.125rem); */
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+  transition: all var(--checkbox-transition-duration, 0.2s)
+    var(--checkbox-transition-timing, ease-in-out);
   flex-shrink: 0;
 }
 
@@ -2128,7 +2134,8 @@
   font-size: var(--checkbox-typography-fontSize, 0.875rem);
   line-height: var(--checkbox-typography-lineHeight, 1.25rem);
   color: var(--color-gray-900);
-  transition: color var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+  transition: color var(--checkbox-transition-duration, 0.2s)
+    var(--checkbox-transition-timing, ease-in-out);
 }
 
 .checkbox-leading {
@@ -2156,7 +2163,7 @@
 
 .checkbox--checked .checkbox-box {
   background-color: var(--color-transparent);
-  border-color: var(--checkbox-border-radius, 0.125rem);
+  border-color: var(--color-atoll-green-800);
 }
 
 .checkbox--checked .checkbox-label {

package/dist/styles/components/molecule/calendarInput.css

@@ -2076,7 +2076,7 @@
 
 .calendar-input {
   display: flex;
-  height: 2.75rem;
+  height: 3rem;
   width: 100%;
   align-items: center;
   gap: 0.5rem;
@@ -2187,8 +2187,8 @@
 
 /* Ensure label and icon remain visible when wrapper is set to active via data-state */
 
-.calendar-input-wrapper[data-state="active"] .calendar-input__label,
-.calendar-input-wrapper[data-state="active"] .calendar-input__icon-button {
+.calendar-input-wrapper[data-state='active'] .calendar-input__label,
+.calendar-input-wrapper[data-state='active'] .calendar-input__icon-button {
   visibility: visible;
   opacity: 1;
 }
@@ -2304,5 +2304,4 @@
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
-
 }

package/dist/styles/components/molecule/service-selector.css

@@ -2085,9 +2085,15 @@
 
 .service-selector__trigger {
   width: 100%;
-  padding: var(--service-selector-spacing-service-selector-padding-y, 12px) var(--service-selector-spacing-service-selector-padding-x, 24px);
-  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
-  border: var(--service-selector-border-width-default, 1px) solid var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  max-height: 48px;
+  padding: var(--service-selector-spacing-service-selector-padding-y, 12px)
+    var(--service-selector-spacing-service-selector-padding-x, 24px);
+  background-color: var(
+    --service-selector-color-service-selector-background-default,
+    #ffffff
+  );
+  border: var(--service-selector-border-width-default, 1px) solid
+    var(--service-selector-color-service-selector-border-default, #a3a3a3);
   border-radius: var(--border-radius-rounded-xl, 12px);
   opacity: var(--opacity-opacity-100, 1);
   display: flex;
@@ -2097,11 +2103,22 @@
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   /* Website/Light/Level 1 */
-  box-shadow: var(--spacing-base-0, 0px) var(--spacing-base-0, 0px) var(--backdrop-blur-backdrop-blur-sm, 4px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.11), var(--spacing-base-0, 0px) var(--spacing-base-0-5, 2px) var(--backdrop-blur-backdrop-blur-xs, 2px) var(--spacing-base-0, 0px) rgba(48, 54, 66, 0.10);
+  box-shadow:
+    var(--spacing-base-0, 0px) var(--spacing-base-0, 0px)
+      var(--backdrop-blur-backdrop-blur-sm, 4px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.11),
+    var(--spacing-base-0, 0px) var(--spacing-base-0-5, 2px)
+      var(--backdrop-blur-backdrop-blur-xs, 2px) var(--spacing-base-0, 0px)
+      rgba(48, 54, 66, 0.1);
 }
 
-.service-selector__trigger:hover:not(:disabled):not(.service-selector__trigger--selected) {
-  background-color: var(--service-selector-color-service-selector-background-hover, #ccfbf6);
+.service-selector__trigger:hover:not(:disabled):not(
+    .service-selector__trigger--selected
+  ) {
+  background-color: var(
+    --service-selector-color-service-selector-background-hover,
+    #ccfbf6
+  );
   border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
 }
 
@@ -2139,7 +2156,10 @@
 /* Trigger States */
 
 .service-selector__trigger--default {
-  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  background-color: var(
+    --service-selector-color-service-selector-background-default,
+    #ffffff
+  );
   border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
 }
 
@@ -2156,20 +2176,29 @@
 /* Selected state - same style as default */
 
 .service-selector__trigger.service-selector__trigger--selected {
-  background-color: var(--service-selector-color-service-selector-background-default, #ffffff);
+  background-color: var(
+    --service-selector-color-service-selector-background-default,
+    #ffffff
+  );
   border-color: var(--service-selector-color-service-selector-border-default, #a3a3a3);
 }
 
-.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-icon,
-.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-text,
-.service-selector__trigger.service-selector__trigger--selected .service-selector__trigger-chevron {
+.service-selector__trigger.service-selector__trigger--selected
+  .service-selector__trigger-icon,
+.service-selector__trigger.service-selector__trigger--selected
+  .service-selector__trigger-text,
+.service-selector__trigger.service-selector__trigger--selected
+  .service-selector__trigger-chevron {
   color: var(--service-selector-color-service-selector-foreground-default, #0f7173);
 }
 
 /* When dropdown is open AND a service is selected, keep default style */
 
 .service-selector__trigger.service-selector__trigger--selected:hover {
-  background-color: var(--service-selector-color-service-selector-background-hover, #ccfbf6);
+  background-color: var(
+    --service-selector-color-service-selector-background-hover,
+    #ccfbf6
+  );
   border-color: var(--service-selector-color-service-selector-border-hover, #0f7173);
 }
 
@@ -2186,17 +2215,21 @@
 /* Dropdown Panel */
 
 .service-selector__panel {
-  position: absolute;
+  /* position: absolute; */
   top: 100%;
   left: 0;
   right: 0;
+  padding: 0;
   margin-top: 8px;
   background-color: var(--color-elevation-level-1, #ffffff);
   border-radius: var(--service-selector-boder-radius-dropdown-item-default, 12px);
   overflow: hidden;
   z-index: 50;
-  border: var(--service-selector-border-width-default, 1px) solid var(--service-selector-color-service-selector-border-default, #a3a3a3);
-  box-shadow: 0px 0px 4px 0px rgba(48, 54, 66, 0.11), 0px 0px 2px 0px rgba(48, 54, 66, 0.1);
+  border: var(--service-selector-border-width-default, 1px) solid
+    var(--service-selector-color-service-selector-border-default, #a3a3a3);
+  box-shadow:
+    0px 0px 4px 0px rgba(48, 54, 66, 0.11),
+    0px 0px 2px 0px rgba(48, 54, 66, 0.1);
 }
 
 .service-selector__content {
@@ -2230,14 +2263,18 @@
 
 .service-selector__option {
   width: 100%;
-  padding: var(--service-selector-spacing-dropdown-item-padding-y, 12px) var(--service-selector-spacing-dropdown-item-padding-x, 24px);
+  padding: var(--service-selector-spacing-dropdown-item-padding-y, 12px)
+    var(--service-selector-spacing-dropdown-item-padding-x, 24px);
   display: flex;
   align-items: center;
   gap: var(--service-selector-spacing-dropdown-item-gap, 12px);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   border: 0;
-  background-color: var(--service-selector-color-dropdown-item-background-default, transparent);
+  background-color: var(
+    --service-selector-color-dropdown-item-background-default,
+    transparent
+  );
   text-align: left;
   border-radius: var(--service-selector-boder-radius-dropdown-item-default, 12px);
 }
@@ -2246,17 +2283,25 @@
   background-color: var(--service-selector-color-dropdown-item-background-hover, #f5f5f5);
 }
 
-.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) .service-selector__option-icon,
-.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected) .service-selector__option-text {
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected)
+  .service-selector__option-icon,
+.service-selector__option:hover:not(:disabled):not(.service-selector__option--selected)
+  .service-selector__option-text {
   color: var(--service-selector-color-dropdown-item-foreground-hover, #404040);
 }
 
 .service-selector__option--selected {
-  background-color: var(--service-selector-color-dropdown-item-background-active, #042c2f);
+  background-color: var(
+    --service-selector-color-dropdown-item-background-active,
+    #042c2f
+  );
 }
 
 .service-selector__option--selected:hover {
-  background-color: var(--service-selector-color-dropdown-item-background-active, #042c2f);
+  background-color: var(
+    --service-selector-color-dropdown-item-background-active,
+    #042c2f
+  );
 }
 
 .service-selector__option--selected .service-selector__option-icon,
@@ -2308,3 +2353,7 @@
     padding: 10px 16px;
   }
 }
+
+[data-radix-popper-content-wrapper] {
+  z-index: 99999 !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mautourco-components",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "private": false,
   "description": "Bibliothèque de composants Motorco pour le redesign",
   "main": "dist/index.js",
@@ -25,7 +25,6 @@
     "motorco"
   ],
   "dependencies": {
-    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",

package/src/components/atoms/Checkbox/Checkbox.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Check from '../Icon/icons/Check';
+import { Text } from '../Typography/Typography';
 
-interface CheckboxProps {
+export interface CheckboxProps {
   checked?: boolean;
   disabled?: boolean;
   error?: boolean;
   label?: string;
-  onChange?: (checked: boolean) => void;
   className?: string;
   id?: string;
   leadingContent?: React.ReactNode;
+  labelPosition?: 'leading' | 'trailing';
+  onChange?: (checked: boolean) => void;
 }
 
 const Checkbox: React.FC<CheckboxProps> = ({
@@ -20,61 +22,74 @@ const Checkbox: React.FC<CheckboxProps> = ({
   onChange,
   className = '',
   id,
-  leadingContent
+  leadingContent,
+  labelPosition = 'trailing',
 }) => {
+  const [isChecked, setIsChecked] = useState(false);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!disabled && onChange) {
-      onChange(e.target.checked);
+    if (!disabled) {
+      setIsChecked(e.target.checked);
     }
+    onChange?.(e.target.checked);
   };
 
   const handleLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {
     if (!disabled && onChange) {
       e.preventDefault();
-      onChange(!checked);
+      onChange(!isChecked);
     }
   };
 
   const getStateClasses = () => {
     if (disabled) return 'checkbox--disabled';
     if (error) return 'checkbox--error';
-    if (checked) return 'checkbox--checked';
+    if (isChecked) return 'checkbox--checked';
     return 'checkbox--default';
   };
 
   const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
 
+  useEffect(() => {
+    setIsChecked(checked);
+  }, [checked]);
+
+  const renderLabel = () => {
+    return (
+      label && (
+        <Text
+          as="span"
+          size="sm"
+          variant="medium"
+          color={error ? 'state-error' : 'default'}>
+          {label}
+        </Text>
+      )
+    );
+  };
+
   return (
     <div className={`checkbox-container ${getStateClasses()} ${className}`}>
-      <label 
-        htmlFor={checkboxId} 
-        className="checkbox-label"
-        onClick={handleLabelClick}
-      >
+      <label htmlFor={checkboxId} className="checkbox-label" onClick={handleLabelClick}>
         <input
           type="checkbox"
           id={checkboxId}
-          checked={checked}
+          checked={isChecked}
           disabled={disabled}
           onChange={handleChange}
           className="checkbox-input"
           readOnly
         />
+        {labelPosition === 'leading' && renderLabel()}
         <div className="checkbox-button">
           <div className="checkbox-touch-target">
             <div className="checkbox-box">
-              {checked && (
-                <Check size="sm" className="checkbox-icon" />
-              )}
+              {isChecked && <Check size="sm" className="checkbox-icon" />}
             </div>
           </div>
         </div>
-        {leadingContent && (
-          <span className="checkbox-leading">{leadingContent}</span>
-        )}
-        {label && (
-          <span className="checkbox-text">{label}</span>
-        )}
+        {leadingContent && <span className="checkbox-leading">{leadingContent}</span>}
+        {labelPosition === 'trailing' && renderLabel()}
       </label>
     </div>
   );

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

@@ -45,12 +45,12 @@ const PlusCircleIcon: React.FC<PlusCircleIconProps> = ({
       <g clipPath="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"
+          fill="currentColor"
         />
       </g>
       <defs>
         <clipPath id="clip0_7074_66340">
-          <rect width="16" height="16" fill="white" />
+          <rect width="16" height="16" fill="currentColor" />
         </clipPath>
       </defs>
     </svg>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import Icon, { IconName } from '../../Icon/Icon';
 
-interface InputProps {
+export interface InputProps {
   variant?: 'default' | 'focus' | 'success' | 'error' | 'disabled';
   placeholder?: string;
   value?: string;

package/src/components/molecules/AddItemButton/AddItemButton.css

@@ -0,0 +1,5 @@
+.add-item-button {
+  @apply p-4 gap-y-4 text-center flex flex-col items-center justify-center;
+  border: solid 1px var(--card-color-border-default);
+  border-radius: var(--card-border-radius-default);
+}

package/src/components/molecules/AddItemButton/AddItemButton.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Icon from '../../atoms/Icon/Icon';
+import { Text } from '../../atoms/Typography/Typography';
+import './AddItemButton.css';
+
+export interface AddItemButtonProps {
+  label: React.ReactNode;
+  onClick?: () => void;
+}
+
+export const AddItemButton: React.FC<AddItemButtonProps> = ({ label, onClick }) => {
+  return (
+    <button className="add-item-button" onClick={onClick}>
+      <Icon name="plus-circle" size="lg" />
+      <Text variant="medium">{label}</Text>
+    </button>
+  );
+};