@asdp/ferryui 0.1.16 → 0.1.19

package/dist/index.js

@@ -2,10 +2,11 @@
 
 var reactComponents = require('@fluentui/react-components');
 var jsxRuntime = require('react/jsx-runtime');
-var React2 = require('react');
+var React5 = require('react');
 var reactGridSystem = require('react-grid-system');
-var react = require('@iconify/react');
+var iconify_js = require('@iconify/react/dist/iconify.js');
 var reactHookForm = require('react-hook-form');
+var react = require('@iconify/react');
 var PhoneInputComponent = require('react-phone-input-2');
 var Select = require('react-select');
 var reactCalendarCompat = require('@fluentui/react-calendar-compat');
@@ -13,7 +14,7 @@ var moment = require('moment');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React2__default = /*#__PURE__*/_interopDefault(React2);
+var React5__default = /*#__PURE__*/_interopDefault(React5);
 var PhoneInputComponent__default = /*#__PURE__*/_interopDefault(PhoneInputComponent);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
 var moment__default = /*#__PURE__*/_interopDefault(moment);
@@ -214,9 +215,9 @@ var CarouselWithCustomNav = ({
   cardFocus = false
 }) => {
   const styles = useStyles2();
-  const [internalIndex, setInternalIndex] = React2.useState(0);
+  const [internalIndex, setInternalIndex] = React5.useState(0);
   const activeIndex = controlledIndex !== void 0 ? controlledIndex : internalIndex;
-  const handleIndexChange = React2.useCallback((index) => {
+  const handleIndexChange = React5.useCallback((index) => {
     if (controlledIndex === void 0) {
       setInternalIndex(index);
     }
@@ -353,7 +354,8 @@ var CardPromo = ({
   className,
   imageClassName,
   descriptionClassName,
-  isLoading = false
+  isLoading = false,
+  imageOnly = false
 }) => {
   const classes = useStyles3();
   const ariaLabel = totalCards ? `Card ${index + 1} of ${totalCards}` : `Promo card ${index + 1}`;
@@ -366,7 +368,7 @@ var CardPromo = ({
         style: { cursor: "default" },
         children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { "aria-label": "Loading content", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: reactComponents.mergeClasses(classes.imageContainer, imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { shape: "rectangle", style: { width: "100%", height: "100%" } }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { className: classes.infoWrapper, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { className: classes.info, xs: 12, children: [
+          !imageOnly && /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { className: classes.infoWrapper, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { className: classes.info, xs: 12, children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "70%", height: "20px" } }),
             /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "90%", height: "16px" } }),
             /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "80%", height: "16px" } })
@@ -393,7 +395,7 @@ var CardPromo = ({
             alt: imageAlt
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: classes.infoWrapper, children: [
+        !imageOnly && /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: classes.infoWrapper, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { className: classes.info, xs: 12, sm: 12, md: 12, lg: showButton ? 8 : 12, xl: showButton ? 8 : 12, xxl: showButton ? 8 : 12, xxxl: showButton ? 8 : 12, children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: classes.title, children: title }),
             /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: reactComponents.mergeClasses(classes.title, descriptionClassName), children: description })
@@ -1109,49 +1111,114 @@ var useStyles6 = reactComponents.makeStyles({
     }
   }
 });
+var SERVICE_MENU_ITEMS = {
+  ferry: {
+    id: "ferry",
+    logo: "/assets/images/icons/ferry.svg",
+    labels: {
+      id: { label: "Ferry", description: "Layanan penyeberangan ferry ASDP" },
+      en: { label: "Ferry", description: "ASDP Ferry Crossing Service" }
+    }
+  },
+  ifcs: {
+    id: "ifcs",
+    logo: "/assets/logo/asdp-default.svg",
+    labels: {
+      id: { label: "IFCS", description: "Integrated Ferry Control System" },
+      en: { label: "IFCS", description: "Integrated Ferry Control System" }
+    }
+  },
+  skpt: {
+    id: "skpt",
+    logo: "/assets/logo/asdp-default.svg",
+    labels: {
+      id: { label: "SKPT", description: "Sistem Karcis Penumpang Terpadu" },
+      en: { label: "SKPT", description: "Integrated Passenger Ticketing System" }
+    }
+  },
+  hotel: {
+    id: "hotel",
+    logo: "/assets/images/icons/hotel.svg",
+    labels: {
+      id: { label: "Hotel", description: "Layanan pemesanan hotel" },
+      en: { label: "Hotel", description: "Hotel Booking Service" }
+    }
+  },
+  other: {
+    id: "other",
+    logo: "/assets/images/icons/other.svg",
+    labels: {
+      id: { label: "Lainnya", description: "Layanan lainnya" },
+      en: { label: "Other", description: "Other Services" }
+    }
+  }
+};
 var CardServiceMenu = ({
-  items,
-  activeItemId,
-  onItemClick,
+  activeServiceId = "ferry",
+  language = "id",
+  onServiceClick,
   showDescriptions = true,
   className
 }) => {
   const styles = useStyles6();
-  const getMenuItemClass = (itemId) => {
-    const isActive = activeItemId === itemId;
+  const getMenuItemClass = (serviceId) => {
+    const isActive = activeServiceId === serviceId;
     return reactComponents.mergeClasses(
       styles.menuItem,
       isActive && styles.menuItemActive
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.menuList, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React2__default.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      reactComponents.Button,
-      {
-        className: getMenuItemClass(item.id),
-        onClick: () => onItemClick?.(item.id),
-        style: item.customStyle,
-        children: [
-          item.logo && /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: item.logo,
-              alt: item.label,
-              className: styles.logo
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: item.label }),
-            showDescriptions && item.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.description, children: item.description })
-          ] })
-        ]
-      }
-    ),
-    index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.dividerHorizontal }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, className: styles.dividerVertical })
-    ] })
-  ] }, item.id)) }) });
+  const menuItems = Object.values(SERVICE_MENU_ITEMS);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.menuList, children: menuItems.map((item, index) => {
+    const { label, description } = item.labels[language];
+    return /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        reactComponents.Button,
+        {
+          className: getMenuItemClass(item.id),
+          onClick: () => onServiceClick?.(item.id),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: item.logo,
+                alt: label,
+                className: styles.logo
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: label }),
+              showDescriptions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.description, children: description })
+            ] })
+          ]
+        }
+      ),
+      index < menuItems.length - 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.dividerHorizontal }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, className: styles.dividerVertical })
+      ] })
+    ] }, item.id);
+  }) }) });
+};
+
+// src/constants/generated/tokensV2.ts
+var brandColors = {
+  "10": "#001a1bff",
+  "20": "#02383bff",
+  "30": "#002426",
+  "40": "#004044",
+  "50": "#005D62",
+  "60": "#007A81",
+  "70": "#00969F",
+  "80": "#00B3BD",
+  "90": "#29BFC8",
+  "100": "#52CBD2",
+  "110": "#7AD7DD",
+  "120": "#A3E4E7",
+  "130": "#CCF0F2",
+  "140": "#E1F7F8",
+  "150": "#fdfdff",
+  "160": "#ffffff"
 };
 var fontWeight = {
   "Medium": 500};
@@ -1161,7 +1228,7 @@ var lightModeColors = {
   "Brand_Stroke_1_Rest": "#00B3BD"};
 var tokensV2_default = {
   lightModeColors};
-var DatePickerInput = React2.forwardRef(
+var DatePickerInput = React5.forwardRef(
   ({
     field,
     placeholder,
@@ -1174,7 +1241,7 @@ var DatePickerInput = React2.forwardRef(
     max,
     ...restProps
   }, ref) => {
-    const [isOpen, setIsOpen] = React2.useState(false);
+    const [isOpen, setIsOpen] = React5.useState(false);
     const dateValue = field.value ? new Date(field.value) : void 0;
     const onSelectDate = (date) => {
       if (date) {
@@ -1432,249 +1499,19 @@ var useStyles7 = reactComponents.makeStyles({
       border: `1px solid ${tokensV2_default.lightModeColors.Brand_Stroke_1_Rest}`,
       color: tokensV2_default.lightModeColors.Brand_Stroke_1_Rest,
       backgroundColor: "transparent"
+    },
+    // Disabled state styling
+    "& .fui-Radio__input:disabled ~ .fui-Radio__label": {
+      opacity: 0.6,
+      cursor: "not-allowed",
+      backgroundColor: reactComponents.tokens.colorNeutralBackground4
+    },
+    "&:hover .fui-Radio__input:disabled ~ .fui-Radio__label": {
+      backgroundColor: reactComponents.tokens.colorNeutralBackground4,
+      border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`
     }
   }
 });
-var DEFAULT_COUNTRY_CODES = [
-  { code: "AF", name: "Afghanistan", dialCode: "+93", passportRegex: "^[A-Z][0-9]{7}$" },
-  { code: "AL", name: "Albania", dialCode: "+355", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "DZ", name: "Algeria", dialCode: "+213", passportRegex: "^[0-9]{9}$" },
-  { code: "AS", name: "American Samoa", dialCode: "+1", passportRegex: "^[0-9]{9}$" },
-  { code: "AD", name: "Andorra", dialCode: "+376", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "AO", name: "Angola", dialCode: "+244", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "AI", name: "Anguilla", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "AQ", name: "Antarctica", dialCode: "+672", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "AG", name: "Antigua and Barbuda", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "AR", name: "Argentina", dialCode: "+54", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
-  { code: "AM", name: "Armenia", dialCode: "+374", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "AW", name: "Aruba", dialCode: "+297", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "AU", name: "Australia", dialCode: "+61", passportRegex: "^[A-Z][0-9]{7}$" },
-  { code: "AT", name: "Austria", dialCode: "+43", passportRegex: "^[A-Z0-9]{8}$" },
-  { code: "AZ", name: "Azerbaijan", dialCode: "+994", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "BS", name: "Bahamas", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "BH", name: "Bahrain", dialCode: "+973", passportRegex: "^[A-Z][0-9]{7}$" },
-  { code: "BD", name: "Bangladesh", dialCode: "+880", passportRegex: "^[A-Z][0-9]{7}$" },
-  { code: "BB", name: "Barbados", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "BY", name: "Belarus", dialCode: "+375", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "BE", name: "Belgium", dialCode: "+32", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "BZ", name: "Belize", dialCode: "+501", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "BJ", name: "Benin", dialCode: "+229", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "BM", name: "Bermuda", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "BT", name: "Bhutan", dialCode: "+975", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "BO", name: "Bolivia", dialCode: "+591", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  {
-    code: "BA",
-    name: "Bosnia and Herzegovina",
-    dialCode: "+387",
-    passportRegex: "^[A-Z]{2}[0-9]{6}$"
-  },
-  { code: "BW", name: "Botswana", dialCode: "+267", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "BR", name: "Brazil", dialCode: "+55", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "BN", name: "Brunei", dialCode: "+673", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "BG", name: "Bulgaria", dialCode: "+359", passportRegex: "^[0-9]{9}$" },
-  { code: "BF", name: "Burkina Faso", dialCode: "+226", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "BI", name: "Burundi", dialCode: "+257", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "KH", name: "Cambodia", dialCode: "+855", passportRegex: "^[A-Z][0-9]{7}$" },
-  { code: "CM", name: "Cameroon", dialCode: "+237", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "CA", name: "Canada", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "CV", name: "Cape Verde", dialCode: "+238", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "KY", name: "Cayman Islands", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
-  {
-    code: "CF",
-    name: "Central African Republic",
-    dialCode: "+236",
-    passportRegex: "^[A-Z0-9]{6,10}$"
-  },
-  { code: "TD", name: "Chad", dialCode: "+235", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "CL", name: "Chile", dialCode: "+56", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "CN", name: "China", dialCode: "+86", passportRegex: "^[0-9]{9}$" },
-  { code: "CO", name: "Colombia", dialCode: "+57", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
-  { code: "KM", name: "Comoros", dialCode: "+269", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "CG", name: "Congo", dialCode: "+242", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "CR", name: "Costa Rica", dialCode: "+506", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "HR", name: "Croatia", dialCode: "+385", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
-  { code: "CU", name: "Cuba", dialCode: "+53", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "CY", name: "Cyprus", dialCode: "+357", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "CZ", name: "Czech Republic", dialCode: "+420", passportRegex: "^[0-9]{8}$" },
-  { code: "DK", name: "Denmark", dialCode: "+45", passportRegex: "^[A-Z0-9]{9}$" },
-  { code: "DJ", name: "Djibouti", dialCode: "+253", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "DM", name: "Dominica", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "DO", name: "Dominican Republic", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "EC", name: "Ecuador", dialCode: "+593", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "EG", name: "Egypt", dialCode: "+20", passportRegex: "^[A-Z][0-9]{7}$" },
-  { code: "SV", name: "El Salvador", dialCode: "+503", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "GQ", name: "Equatorial Guinea", dialCode: "+240", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "ER", name: "Eritrea", dialCode: "+291", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "EE", name: "Estonia", dialCode: "+372", passportRegex: "^[A-Z0-9]{8}$" },
-  { code: "SZ", name: "Eswatini", dialCode: "+268", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "ET", name: "Ethiopia", dialCode: "+251", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "FJ", name: "Fiji", dialCode: "+679", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "FI", name: "Finland", dialCode: "+358", passportRegex: "^[A-Z0-9]{9}$" },
-  { code: "FR", name: "France", dialCode: "+33", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "GA", name: "Gabon", dialCode: "+241", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "GM", name: "Gambia", dialCode: "+220", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "GE", name: "Georgia", dialCode: "+995", passportRegex: "^[A-Z0-9]{8}$" },
-  { code: "DE", name: "Germany", dialCode: "+49", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "GH", name: "Ghana", dialCode: "+233", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "GR", name: "Greece", dialCode: "+30", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "GD", name: "Grenada", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "GT", name: "Guatemala", dialCode: "+502", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
-  { code: "GN", name: "Guinea", dialCode: "+224", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "GW", name: "Guinea-Bissau", dialCode: "+245", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "GY", name: "Guyana", dialCode: "+592", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "HT", name: "Haiti", dialCode: "+509", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "HN", name: "Honduras", dialCode: "+504", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "HK", name: "Hong Kong", dialCode: "+852", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "HU", name: "Hungary", dialCode: "+36", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "IS", name: "Iceland", dialCode: "+354", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "IN", name: "India", dialCode: "+91", passportRegex: "^[A-Z][0-9]{7}$" },
-  { code: "ID", name: "Indonesia", dialCode: "+62", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "IR", name: "Iran", dialCode: "+98", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "IQ", name: "Iraq", dialCode: "+964", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "IE", name: "Ireland", dialCode: "+353", passportRegex: "^[A-Z0-9]{2}[0-9]{7}$" },
-  { code: "IL", name: "Israel", dialCode: "+972", passportRegex: "^[0-9]{8,9}$" },
-  { code: "IT", name: "Italy", dialCode: "+39", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "JM", name: "Jamaica", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "JP", name: "Japan", dialCode: "+81", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "JO", name: "Jordan", dialCode: "+962", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "KZ", name: "Kazakhstan", dialCode: "+7", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "KE", name: "Kenya", dialCode: "+254", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "KI", name: "Kiribati", dialCode: "+686", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "KP", name: "North Korea", dialCode: "+850", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "KR", name: "South Korea", dialCode: "+82", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
-  { code: "KW", name: "Kuwait", dialCode: "+965", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "KG", name: "Kyrgyzstan", dialCode: "+996", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "LA", name: "Laos", dialCode: "+856", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "LV", name: "Latvia", dialCode: "+371", passportRegex: "^[A-Z0-9]{8}$" },
-  { code: "LB", name: "Lebanon", dialCode: "+961", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "LS", name: "Lesotho", dialCode: "+266", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "LR", name: "Liberia", dialCode: "+231", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "LY", name: "Libya", dialCode: "+218", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "LI", name: "Liechtenstein", dialCode: "+423", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "LT", name: "Lithuania", dialCode: "+370", passportRegex: "^[A-Z0-9]{8}$" },
-  { code: "LU", name: "Luxembourg", dialCode: "+352", passportRegex: "^[A-Z0-9]{8}$" },
-  { code: "MO", name: "Macau", dialCode: "+853", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "MG", name: "Madagascar", dialCode: "+261", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "MW", name: "Malawi", dialCode: "+265", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "MY", name: "Malaysia", dialCode: "+60", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
-  { code: "MV", name: "Maldives", dialCode: "+960", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "ML", name: "Mali", dialCode: "+223", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "MT", name: "Malta", dialCode: "+356", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "MH", name: "Marshall Islands", dialCode: "+692", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "MQ", name: "Martinique", dialCode: "+596", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "MR", name: "Mauritania", dialCode: "+222", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "MU", name: "Mauritius", dialCode: "+230", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "MX", name: "Mexico", dialCode: "+52", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
-  { code: "FM", name: "Micronesia", dialCode: "+691", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "MD", name: "Moldova", dialCode: "+373", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "MC", name: "Monaco", dialCode: "+377", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "MN", name: "Mongolia", dialCode: "+976", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "ME", name: "Montenegro", dialCode: "+382", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "MS", name: "Montserrat", dialCode: "+1", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "MA", name: "Morocco", dialCode: "+212", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "MZ", name: "Mozambique", dialCode: "+258", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "MM", name: "Myanmar", dialCode: "+95", passportRegex: "^[A-Z]{1}[0-9]{6,7}$" },
-  { code: "NA", name: "Namibia", dialCode: "+264", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "NR", name: "Nauru", dialCode: "+674", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "NP", name: "Nepal", dialCode: "+977", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "NL", name: "Netherlands", dialCode: "+31", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "NC", name: "New Caledonia", dialCode: "+687", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "NZ", name: "New Zealand", dialCode: "+64", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "NI", name: "Nicaragua", dialCode: "+505", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
-  { code: "NE", name: "Niger", dialCode: "+227", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "NG", name: "Nigeria", dialCode: "+234", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "NO", name: "Norway", dialCode: "+47", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "OM", name: "Oman", dialCode: "+968", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "PK", name: "Pakistan", dialCode: "+92", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "PW", name: "Palau", dialCode: "+680", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "PS", name: "Palestine", dialCode: "+970", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "PA", name: "Panama", dialCode: "+507", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "PG", name: "Papua New Guinea", dialCode: "+675", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "PY", name: "Paraguay", dialCode: "+595", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "PE", name: "Peru", dialCode: "+51", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "PH", name: "Philippines", dialCode: "+63", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "PL", name: "Poland", dialCode: "+48", passportRegex: "^[A-Z0-9]{2}[0-9]{7}$" },
-  { code: "PT", name: "Portugal", dialCode: "+351", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "RO", name: "Romania", dialCode: "+40", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "RU", name: "Russia", dialCode: "+7", passportRegex: "^[0-9]{9}$" },
-  { code: "RW", name: "Rwanda", dialCode: "+250", passportRegex: "^[A-Z0-9]{6,10}$" },
-  {
-    code: "KN",
-    name: "Saint Kitts and Nevis",
-    dialCode: "+1",
-    passportRegex: "^[A-Z]{2}[0-9]{7}$"
-  },
-  { code: "LC", name: "Saint Lucia", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  {
-    code: "VC",
-    name: "Saint Vincent and the Grenadines",
-    dialCode: "+1",
-    passportRegex: "^[A-Z]{2}[0-9]{7}$"
-  },
-  { code: "WS", name: "Samoa", dialCode: "+685", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "SM", name: "San Marino", dialCode: "+378", passportRegex: "^[A-Z0-9]{6,10}$" },
-  {
-    code: "ST",
-    name: "Sao Tome and Principe",
-    dialCode: "+239",
-    passportRegex: "^[A-Z0-9]{6,10}$"
-  },
-  { code: "SA", name: "Saudi Arabia", dialCode: "+966", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "SN", name: "Senegal", dialCode: "+221", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "RS", name: "Serbia", dialCode: "+381", passportRegex: "^[A-Z0-9]{9}$" },
-  { code: "SC", name: "Seychelles", dialCode: "+248", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "SL", name: "Sierra Leone", dialCode: "+232", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "SG", name: "Singapore", dialCode: "+65", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "SK", name: "Slovakia", dialCode: "+421", passportRegex: "^[0-9]{9}$" },
-  { code: "SI", name: "Slovenia", dialCode: "+386", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "SB", name: "Solomon Islands", dialCode: "+677", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "SO", name: "Somalia", dialCode: "+252", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "ZA", name: "South Africa", dialCode: "+27", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  { code: "ES", name: "Spain", dialCode: "+34", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
-  { code: "LK", name: "Sri Lanka", dialCode: "+94", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "SD", name: "Sudan", dialCode: "+249", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "SR", name: "Suriname", dialCode: "+597", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "SE", name: "Sweden", dialCode: "+46", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "CH", name: "Switzerland", dialCode: "+41", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "SY", name: "Syria", dialCode: "+963", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "TW", name: "Taiwan", dialCode: "+886", passportRegex: "^[A-Z]{1}[0-9]{8}$" },
-  { code: "TJ", name: "Tajikistan", dialCode: "+992", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "TZ", name: "Tanzania", dialCode: "+255", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "TH", name: "Thailand", dialCode: "+66", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "TL", name: "Timor-Leste", dialCode: "+670", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "TG", name: "Togo", dialCode: "+228", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "TO", name: "Tonga", dialCode: "+676", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "TT", name: "Trinidad and Tobago", dialCode: "+1", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "TN", name: "Tunisia", dialCode: "+216", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "TR", name: "Turkey", dialCode: "+90", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "TM", name: "Turkmenistan", dialCode: "+993", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  {
-    code: "TC",
-    name: "Turks and Caicos Islands",
-    dialCode: "+1",
-    passportRegex: "^[A-Z0-9]{6,10}$"
-  },
-  { code: "TV", name: "Tuvalu", dialCode: "+688", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "UG", name: "Uganda", dialCode: "+256", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "UA", name: "Ukraine", dialCode: "+380", passportRegex: "^[A-Z]{2}[0-9]{6}$" },
-  {
-    code: "AE",
-    name: "United Arab Emirates",
-    dialCode: "+971",
-    passportRegex: "^[A-Z]{1}[0-9]{7}$"
-  },
-  { code: "GB", name: "United Kingdom", dialCode: "+44", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "US", name: "United States", dialCode: "+1", passportRegex: "^[0-9]{9}$" },
-  { code: "UY", name: "Uruguay", dialCode: "+598", passportRegex: "^[A-Z]{3}[0-9]{6}$" },
-  { code: "UZ", name: "Uzbekistan", dialCode: "+998", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "VU", name: "Vanuatu", dialCode: "+678", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "VA", name: "Vatican City", dialCode: "+379", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "VE", name: "Venezuela", dialCode: "+58", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
-  { code: "VN", name: "Vietnam", dialCode: "+84", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "YE", name: "Yemen", dialCode: "+967", passportRegex: "^[A-Z]{1}[0-9]{7}$" },
-  { code: "ZM", name: "Zambia", dialCode: "+260", passportRegex: "^[A-Z0-9]{6,10}$" },
-  { code: "ZW", name: "Zimbabwe", dialCode: "+263", passportRegex: "^[A-Z0-9]{6,10}$" }
-];
 var detectIdentityType = (value) => {
   if (!value) return "id";
   const stringValue = String(value);
@@ -1690,7 +1527,7 @@ var detectEmailOrPhoneStrict = (value) => {
   if (/^62\d/.test(value)) return "phone";
   return "none";
 };
-function InputDynamic({
+var InputDynamic = ({
   name,
   control,
   label,
@@ -1716,7 +1553,6 @@ function InputDynamic({
   size,
   onClick,
   style,
-  countryCodes = DEFAULT_COUNTRY_CODES,
   defaultCountry = "ID",
   maxLength,
   autoAdvance = false,
@@ -1726,19 +1562,19 @@ function InputDynamic({
   onInput,
   contentAfter,
   onChange
-}) {
+}) => {
   const styles = useStyles7();
-  const [showPassword, setShowPassword] = React2.useState(false);
-  const [isPhoneMode, setIsPhoneMode] = React2.useState(false);
-  const [emailOrPhoneType, setEmailOrPhoneType] = React2.useState("none");
-  const [identityType, setIdentityType] = React2.useState("id");
-  const [lastPhoneValue, setLastPhoneValue] = React2.useState("");
-  const [lastEmailOrPhoneValue, setLastEmailOrPhoneValue] = React2.useState("");
-  const inputRef = React2.useRef(null);
-  const phoneInputRef = React2.useRef(null);
-  const emailOrPhoneInputRef = React2.useRef(null);
-  const shouldFocusRef = React2.useRef(false);
-  const isBackspaceNavigationRef = React2.useRef(false);
+  const [showPassword, setShowPassword] = React5.useState(false);
+  const [isPhoneMode, setIsPhoneMode] = React5.useState(false);
+  const [emailOrPhoneType, setEmailOrPhoneType] = React5.useState("none");
+  const [identityType, setIdentityType] = React5.useState("id");
+  const [lastPhoneValue, setLastPhoneValue] = React5.useState("");
+  const [lastEmailOrPhoneValue, setLastEmailOrPhoneValue] = React5.useState("");
+  const inputRef = React5.useRef(null);
+  const phoneInputRef = React5.useRef(null);
+  const emailOrPhoneInputRef = React5.useRef(null);
+  const shouldFocusRef = React5.useRef(false);
+  const isBackspaceNavigationRef = React5.useRef(false);
   const getSelectStyles = (hasError2) => ({
     menuPortal: (base) => ({
       ...base,
@@ -1807,7 +1643,7 @@ function InputDynamic({
       fontSize: reactComponents.tokens.fontSizeBase400
     })
   });
-  React2.useEffect(() => {
+  React5.useEffect(() => {
     if (shouldFocusRef.current) {
       setTimeout(() => {
         if (identityType === "phone" && phoneInputRef.current) {
@@ -1829,7 +1665,7 @@ function InputDynamic({
       }, 50);
     }
   }, [identityType]);
-  React2.useEffect(() => {
+  React5.useEffect(() => {
     if (shouldFocusRef.current && type === "emailOrPhone") {
       setTimeout(() => {
         if (emailOrPhoneType === "phone" && emailOrPhoneInputRef.current) {
@@ -2159,66 +1995,6 @@ function InputDynamic({
           }
         ) });
       }
-      case "passport": {
-        const passportValue = field.value || {
-          countryCode: defaultCountry,
-          phoneNumber: ""
-        };
-        const countryOptions = countryCodes.map((country) => ({
-          value: country.code,
-          label: country.name,
-          code: country.code,
-          passportRegex: country.passportRegex
-        }));
-        const formatOptionLabel = (option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "18px" }, children: String.fromCodePoint(
-            ...option.code.split("").map((char) => 127397 + char.charCodeAt(0))
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
-        ] });
-        const selectedCountry = countryOptions.find((opt) => opt.value === passportValue.countryCode);
-        const isCountrySelected = !!selectedCountry;
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.phoneContainer, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.phoneCountrySelect, children: /* @__PURE__ */ jsxRuntime.jsx(
-            Select__default.default,
-            {
-              value: selectedCountry || null,
-              onChange: (selectedOption) => {
-                field.onChange({
-                  ...passportValue,
-                  countryCode: selectedOption ? selectedOption.value : defaultCountry
-                });
-              },
-              options: countryOptions,
-              isDisabled: disabled,
-              placeholder: "\xF0\u0178\x8F\xB3\xEF\xB8\x8F",
-              styles: getSelectStyles(!!error),
-              isSearchable: true,
-              formatOptionLabel
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.Input,
-            {
-              value: passportValue.phoneNumber,
-              maxLength,
-              autoComplete: autoComplete || "off",
-              onChange: (e) => {
-                field.onChange({
-                  ...passportValue,
-                  phoneNumber: e.target.value
-                });
-              },
-              placeholder: placeholder || "Nomor paspor",
-              disabled: disabled || !isCountrySelected,
-              appearance,
-              size,
-              type: "text",
-              style: { width: "100%" }
-            }
-          ) })
-        ] });
-      }
       case "file":
         return /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -2284,7 +2060,7 @@ function InputDynamic({
               {
                 value: option.value,
                 label: option.label,
-                disabled: option.disabled,
+                disabled: disabled || option.disabled,
                 className: styles.classRadio
               },
               option.value
@@ -2588,23 +2364,6 @@ function InputDynamic({
         return true;
       };
     }
-    if (type === "passport") {
-      rules.validate = (value) => {
-        if (required && !value?.phoneNumber) {
-          return "Nomor paspor wajib diisi";
-        }
-        if (value?.phoneNumber) {
-          const selectedCountry = countryCodes.find((c) => c.code === value.countryCode);
-          if (selectedCountry?.passportRegex) {
-            const passportRegex = new RegExp(selectedCountry.passportRegex);
-            if (!passportRegex.test(value.phoneNumber)) {
-              return `Format paspor ${selectedCountry.name} tidak valid`;
-            }
-          }
-        }
-        return true;
-      };
-    }
     return rules;
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2628,11 +2387,11 @@ function InputDynamic({
       )
     }
   );
-}
+};
 var InputDynamic_default = InputDynamic;
 
 // src/components/InputDynamic/constants.ts
-var DEFAULT_COUNTRY_CODES2 = [
+var DEFAULT_COUNTRY_CODES = [
   { code: "AF", name: "Afghanistan", dialCode: "+93", passportRegex: "^[A-Z][0-9]{7}$" },
   { code: "AL", name: "Albania", dialCode: "+355", passportRegex: "^[A-Z]{2}[0-9]{7}$" },
   { code: "DZ", name: "Algeria", dialCode: "+213", passportRegex: "^[0-9]{9}$" },
@@ -2872,7 +2631,649 @@ var DEFAULT_COUNTRY_CODES2 = [
   { code: "ZM", name: "Zambia", dialCode: "+260", passportRegex: "^[A-Z0-9]{6,10}$" },
   { code: "ZW", name: "Zimbabwe", dialCode: "+263", passportRegex: "^[A-Z0-9]{6,10}$" }
 ];
+
+// src/components/CardTicketSearch/CardTicketSearch.constants.ts
+var DEFAULT_LABELS = {
+  id: {
+    fromLabel: "Dari",
+    toLabel: "Ke",
+    departureDateLabel: "Tanggal Berangkat",
+    returnDateLabel: "Tanggal Pulang",
+    serviceClassLabel: "Kelas Layanan",
+    typeOfServiceLabel: "Jenis Layanan",
+    passengerLabel: "Penumpang",
+    roundTripLabel: "Pulang Pergi",
+    searchButton: "Cari Tiket",
+    placeholderPort: "Pilih Pelabuhan Asal",
+    placeholderDestinationPort: "Pilih Pelabuhan Tujuan",
+    placeholderDepartureDate: "Pilih Tanggal Keberangkatan",
+    placeholderReturnDate: "Pilih Tanggal Kepulangan",
+    placeholderTypeClass: "Pilih Kelas Layanan",
+    placeholderTypeService: "Pilih Jenis Layanan",
+    placeholderPassenger: "Pilih Jumlah Penumpang"
+  },
+  en: {
+    fromLabel: "From",
+    toLabel: "To",
+    departureDateLabel: "Departure Date",
+    returnDateLabel: "Return Date",
+    serviceClassLabel: "Service Class",
+    typeOfServiceLabel: "Service Type",
+    passengerLabel: "Passenger",
+    roundTripLabel: "Round Trip",
+    searchButton: "Search Ticket",
+    placeholderPort: "Select Origin Port",
+    placeholderDestinationPort: "Select Destination Port",
+    placeholderDepartureDate: "Select Departure Date",
+    placeholderReturnDate: "Select Return Date",
+    placeholderTypeClass: "Select Service Class",
+    placeholderTypeService: "Select Service Type",
+    placeholderPassenger: "Select Number of Passengers"
+  }
+};
+
+// src/constants/generated/tokens.ts
+var brandColors2 = {
+  "10": "#000000",
+  "20": "#03060e",
+  "30": "#060b1c",
+  "40": "#09112a",
+  "50": "#0c1738",
+  "60": "#122255",
+  "70": "#182e71",
+  "80": "#1e398d",
+  "90": "#4b60a4",
+  "100": "#7787bb",
+  "110": "#a4afd1",
+  "120": "#bac2dd",
+  "130": "#d0d6e8",
+  "140": "#e7e9f4",
+  "150": "#fdfdff",
+  "160": "#ffffff"
+};
+
+// src/constants/brandColors.ts
+var isV2Path = typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
+var brandColors3 = !isV2Path ? brandColors : brandColors2;
+var customBrand = {
+  10: brandColors3["10"],
+  20: brandColors3["20"],
+  30: brandColors3["30"],
+  40: brandColors3["40"],
+  50: brandColors3["50"],
+  60: brandColors3["60"],
+  70: brandColors3["70"],
+  80: brandColors3["80"],
+  90: brandColors3["90"],
+  100: brandColors3["100"],
+  110: brandColors3["110"],
+  120: brandColors3["120"],
+  130: brandColors3["130"],
+  140: brandColors3["140"],
+  150: brandColors3["150"],
+  160: brandColors3["160"]
+};
+
+// src/constants/designTokens.ts
+typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
+var designTokens = {
+  // Breakpoints for responsive design
+  breakpoints: {
+    md: "768px",
+    lg: "1024px",
+    xl: "1200px"}};
+
+// src/constants/themes.ts
+var extendedTokens = {
+  breakpointMd: designTokens.breakpoints.md,
+  breakpointLg: designTokens.breakpoints.lg,
+  breakpointXl: designTokens.breakpoints.xl};
+({
+  ...reactComponents.createLightTheme(customBrand),
+  // Brand colors from Figma
+  colorBrandBackground: customBrand[80],
+  colorBrandBackgroundHover: customBrand[70],
+  colorBrandBackgroundPressed: customBrand[60],
+  colorBrandBackgroundSelected: customBrand[80],
+  colorBrandForeground1: customBrand[80],
+  colorBrandForeground2: customBrand[70],
+  colorBrandForegroundLink: customBrand[70],
+  colorBrandForegroundLinkHover: customBrand[60],
+  colorBrandForegroundLinkPressed: customBrand[50],
+  colorBrandForegroundLinkSelected: customBrand[70]});
+({
+  ...reactComponents.createDarkTheme(customBrand),
+  // Brand colors from Figma (inverted for dark mode)
+  colorBrandBackground: customBrand[100],
+  colorBrandBackgroundHover: customBrand[110],
+  colorBrandBackgroundPressed: customBrand[120],
+  colorBrandBackgroundSelected: customBrand[100],
+  colorBrandForeground1: customBrand[100],
+  colorBrandForeground2: customBrand[110],
+  colorBrandForegroundLink: customBrand[110],
+  colorBrandForegroundLinkHover: customBrand[120],
+  colorBrandForegroundLinkPressed: customBrand[130],
+  colorBrandForegroundLinkSelected: customBrand[110]});
 var useStyles8 = reactComponents.makeStyles({
+  card: {
+    position: "relative",
+    width: "100%",
+    padding: 0,
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      padding: "0"
+    },
+    [`@media (min-width: ${extendedTokens.breakpointMd})`]: {
+      scale: "1"
+    },
+    marginTop: "5rem"
+  },
+  svgBackground: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 0
+  },
+  formField: {
+    padding: "16px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    border: "1px solid " + reactComponents.tokens.colorNeutralStroke1,
+    height: "100%",
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      padding: "20px",
+      borderRadius: reactComponents.tokens.borderRadiusXLarge
+    }
+  },
+  deviderButton: {
+    display: "flex",
+    justifyContent: "center",
+    position: "absolute",
+    left: "18px",
+    bottom: "-16px",
+    width: "90%"
+  },
+  buttonSwitch: {
+    background: reactComponents.tokens.colorNeutralBackground1,
+    boxShadow: `0 1px 2px 0 ${reactComponents.tokens.colorNeutralShadowKey}, 0 0 2px 0 ${reactComponents.tokens.colorNeutralShadowAmbient}`
+  },
+  switchIcon: {
+    display: "inline-flex",
+    transition: "transform 0.3s ease"
+  },
+  switchIconRotate: {
+    transform: "rotate(180deg)"
+  },
+  searchButton: {
+    width: "100%",
+    borderRadius: reactComponents.tokens.borderRadiusCircular
+  },
+  serviceMenuCard: {
+    [`@media (min-width: ${extendedTokens.breakpointMd})`]: {
+      margin: reactComponents.tokens.spacingVerticalM
+    },
+    [`@media (min-width: ${extendedTokens.breakpointLg})`]: {
+      margin: reactComponents.tokens.spacingVerticalL
+    },
+    [`@media (min-width: ${extendedTokens.breakpointXl})`]: {
+      margin: reactComponents.tokens.spacingVerticalXXXL,
+      maxWidth: "70%"
+    }
+  },
+  ticketSearchRow: {
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      padding: "20px !important"
+    }
+  },
+  formContainerCol: {
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      paddingLeft: "20px !important",
+      paddingRight: "20px !important",
+      marginBottom: "1rem",
+      marginTop: "8rem"
+    }
+  },
+  serviceCol: {
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      paddingLeft: "15px !important",
+      paddingRight: "15px !important",
+      marginTop: "16px"
+    }
+  },
+  formInnerRow: {
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      margin: "0 !important"
+    }
+  },
+  formFieldRow: {
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      gap: "12px !important"
+    }
+  }
+});
+var CardTicketSearch = ({
+  language = "id",
+  from = "",
+  to = "",
+  startDate = "",
+  endDate = "",
+  roundTrip = false,
+  serviceClass = "",
+  typeOfService = "",
+  passenger = "",
+  toDisabled = false,
+  endDateDisabled = false,
+  serviceClassDisabled = false,
+  typeOfServiceDisabled = false,
+  switchDisabled = false,
+  roundTripDisabled = false,
+  submitDisabled = false,
+  onFromClick,
+  onToClick,
+  onFromChange,
+  onStartDateClick,
+  onEndDateClick,
+  onServiceClassClick,
+  onTypeOfServiceClick,
+  onPassengerClick,
+  onSwitchClick,
+  onRoundTripChange,
+  onSubmit,
+  activeServiceId = "ferry",
+  labels: customLabels,
+  className,
+  isRotating = false,
+  showPassengerField = false
+}) => {
+  const styles = useStyles8();
+  const labels = React5__default.default.useMemo(
+    () => ({ ...DEFAULT_LABELS[language], ...customLabels }),
+    [language, customLabels]
+  );
+  const { control, setValue, getValues, handleSubmit } = reactHookForm.useForm({
+    defaultValues: {
+      from,
+      to,
+      startDate,
+      roundTrip,
+      endDate,
+      serviceClass,
+      typeOfService,
+      passenger
+    }
+  });
+  const roundTripValue = reactHookForm.useWatch({
+    control,
+    name: "roundTrip",
+    defaultValue: roundTrip
+  });
+  React5__default.default.useEffect(() => {
+    setValue("from", from);
+    setValue("to", to);
+    setValue("startDate", startDate);
+    setValue("endDate", endDate);
+    setValue("roundTrip", roundTrip);
+    setValue("serviceClass", serviceClass);
+    setValue("typeOfService", typeOfService);
+    setValue("passenger", passenger);
+  }, [from, to, startDate, endDate, roundTrip, serviceClass, typeOfService, passenger, setValue]);
+  React5__default.default.useEffect(() => {
+    if (onRoundTripChange) {
+      onRoundTripChange(roundTripValue);
+    }
+  }, [roundTripValue, onRoundTripChange]);
+  const handleFormSubmit = (data) => {
+    if (onSubmit) {
+      onSubmit(data);
+    }
+  };
+  const handleFromChange = () => {
+    setValue("to", "");
+    if (onFromChange) {
+      onFromChange();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.card} ${className || ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxRuntime.jsx(BackgroundTicketCard_default, { className: styles.svgBackground }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { xs: true, sm: true, md: true, lg: true, children: /* @__PURE__ */ jsxRuntime.jsx(BackgroundTicketCardVertical_default, { className: styles.svgBackground }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactGridSystem.Row,
+      {
+        style: {
+          paddingTop: "1rem",
+          paddingBottom: "2rem"
+        },
+        className: styles.ticketSearchRow,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactGridSystem.Col,
+            {
+              xs: 12,
+              sm: 12,
+              md: 12,
+              lg: 12,
+              xl: 3,
+              xxl: 3,
+              xxxl: 3,
+              style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                marginBottom: "0px"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                CardServiceMenu,
+                {
+                  className: styles.serviceMenuCard,
+                  activeServiceId,
+                  language
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 0.4, xxl: 0.4, xxxl: 0.4 }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactGridSystem.Col,
+            {
+              xs: 12,
+              sm: 12,
+              md: 12,
+              lg: 12,
+              xl: 8.6,
+              xxl: 8.6,
+              xxxl: 8.6,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexDirection: "column"
+              },
+              className: styles.formContainerCol,
+              children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit(handleFormSubmit), children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { width: "100%" }, className: styles.formInnerRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 6, xxl: 6, xxxl: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { gap: "16px" }, className: styles.formFieldRow, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        InputDynamic_default,
+                        {
+                          name: "from",
+                          label: labels.fromLabel,
+                          control,
+                          type: "text",
+                          contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                            iconify_js.Icon,
+                            {
+                              icon: "fluent:vehicle-ship-16-filled",
+                              color: reactComponents.tokens.colorBrandBackground
+                            }
+                          ),
+                          appearance: "filled-lighter",
+                          size: "medium",
+                          placeholder: labels.placeholderPort,
+                          onClick: onFromClick,
+                          onChange: handleFromChange,
+                          validationRules: {
+                            required: "Pelabuhan asal wajib diisi"
+                          },
+                          required: true
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.deviderButton, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
+                        " ",
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          reactComponents.Button,
+                          {
+                            onClick: onSwitchClick,
+                            className: styles.buttonSwitch,
+                            shape: "circular",
+                            appearance: "secondary",
+                            size: "large",
+                            disabled: switchDisabled,
+                            icon: /* @__PURE__ */ jsxRuntime.jsx(
+                              "div",
+                              {
+                                className: `${styles.switchIcon} ${isRotating ? styles.switchIconRotate : ""}`,
+                                children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  "img",
+                                  {
+                                    src: "/assets/images/icons/switch.svg",
+                                    alt: "Switch",
+                                    width: 26,
+                                    height: 26
+                                  }
+                                )
+                              }
+                            )
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      InputDynamic_default,
+                      {
+                        name: "to",
+                        label: labels.toLabel,
+                        control,
+                        type: "text",
+                        contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                          iconify_js.Icon,
+                          {
+                            icon: "fluent:location-24-filled",
+                            color: reactComponents.tokens.colorBrandBackground
+                          }
+                        ),
+                        disabled: toDisabled,
+                        appearance: "filled-lighter",
+                        size: "medium",
+                        placeholder: labels.placeholderDestinationPort,
+                        onClick: onToClick,
+                        validationRules: {
+                          required: "Pelabuhan tujuan wajib diisi"
+                        },
+                        required: true
+                      }
+                    ) })
+                  ] }) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 7, sm: 7, md: 7, lg: 7, xl: 7, xxl: 7, xxxl: 7, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      InputDynamic_default,
+                      {
+                        name: "startDate",
+                        label: labels.departureDateLabel,
+                        control,
+                        type: "text",
+                        contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                          iconify_js.Icon,
+                          {
+                            icon: "fluent:calendar-24-filled",
+                            color: reactComponents.tokens.colorBrandBackground
+                          }
+                        ),
+                        appearance: "filled-lighter",
+                        size: "medium",
+                        placeholder: labels.placeholderDepartureDate,
+                        onClick: onStartDateClick,
+                        required: true,
+                        validationRules: {
+                          required: "Tanggal Berangkat wajib diisi"
+                        }
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      reactGridSystem.Col,
+                      {
+                        xs: 5,
+                        sm: 5,
+                        md: 5,
+                        lg: 5,
+                        xl: 5,
+                        xxl: 5,
+                        xxxl: 5,
+                        style: { display: "flex", justifyContent: "end" },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          InputDynamic_default,
+                          {
+                            name: "roundTrip",
+                            label: labels.roundTripLabel,
+                            control,
+                            type: "switch",
+                            disabled: roundTripDisabled,
+                            size: "medium"
+                          }
+                        )
+                      }
+                    ),
+                    roundTripValue && /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      InputDynamic_default,
+                      {
+                        name: "endDate",
+                        label: labels.returnDateLabel,
+                        control,
+                        type: "text",
+                        contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                          iconify_js.Icon,
+                          {
+                            icon: "fluent:calendar-24-filled",
+                            color: reactComponents.tokens.colorBrandBackground
+                          }
+                        ),
+                        appearance: "filled-lighter",
+                        size: "medium",
+                        placeholder: labels.placeholderReturnDate,
+                        onClick: onEndDateClick,
+                        disabled: endDateDisabled,
+                        style: { borderColor: "transparent" },
+                        required: roundTripValue,
+                        validationRules: {
+                          required: "Tanggal Pulang wajib diisi"
+                        }
+                      }
+                    ) })
+                  ] }) }) })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  reactGridSystem.Col,
+                  {
+                    xs: 12,
+                    sm: 12,
+                    lg: 12,
+                    xl: 1,
+                    xxl: 1,
+                    xxxl: 1,
+                    style: { display: "flex", alignItems: "center", justifyContent: "center" },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, style: { height: "100%" } })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactGridSystem.Col,
+                  {
+                    xs: 12,
+                    sm: 12,
+                    lg: 12,
+                    xl: 5,
+                    xxl: 5,
+                    xxxl: 5,
+                    style: {
+                      paddingRight: "2rem",
+                      paddingLeft: "8px"
+                    },
+                    className: styles.serviceCol,
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                          InputDynamic_default,
+                          {
+                            name: "serviceClass",
+                            label: labels.serviceClassLabel,
+                            control,
+                            type: "text",
+                            contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                              iconify_js.Icon,
+                              {
+                                icon: "fluent:ribbon-star-24-filled",
+                                color: reactComponents.tokens.colorBrandBackground
+                              }
+                            ),
+                            appearance: "filled-lighter",
+                            size: "medium",
+                            placeholder: labels.placeholderTypeClass,
+                            onClick: onServiceClassClick,
+                            required: true,
+                            disabled: serviceClassDisabled
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                          InputDynamic_default,
+                          {
+                            name: "typeOfService",
+                            label: labels.typeOfServiceLabel,
+                            control,
+                            type: "text",
+                            contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                              iconify_js.Icon,
+                              {
+                                icon: "fluent:apps-list-24-filled",
+                                color: reactComponents.tokens.colorBrandBackground
+                              }
+                            ),
+                            appearance: "filled-lighter",
+                            size: "medium",
+                            placeholder: labels.placeholderTypeService,
+                            onClick: onTypeOfServiceClick,
+                            required: true,
+                            disabled: typeOfServiceDisabled
+                          }
+                        ) }),
+                        showPassengerField && /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                          InputDynamic_default,
+                          {
+                            required: true,
+                            name: "passenger",
+                            label: labels.passengerLabel,
+                            control,
+                            type: "text",
+                            contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                              iconify_js.Icon,
+                              {
+                                icon: "fluent:people-24-filled",
+                                color: reactComponents.tokens.colorBrandBackground
+                              }
+                            ),
+                            appearance: "filled-lighter",
+                            size: "medium",
+                            placeholder: labels.placeholderPassenger,
+                            onClick: onPassengerClick
+                          }
+                        ) })
+                      ] }) }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        reactComponents.Button,
+                        {
+                          className: styles.searchButton,
+                          appearance: "primary",
+                          size: "large",
+                          type: "submit",
+                          icon: /* @__PURE__ */ jsxRuntime.jsx(iconify_js.Icon, { icon: "fluent:vehicle-ship-20-filled" }),
+                          disabled: submitDisabled,
+                          children: labels.searchButton
+                        }
+                      ) })
+                    ] })
+                  }
+                )
+              ] }) })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var useStyles9 = reactComponents.makeStyles({
   dialogTitle: {
     display: "flex",
     justifyContent: "space-between",
@@ -3001,7 +3402,7 @@ var ModalSearchHarbor = ({
   onRemoveLastSearched,
   onClearLastSearched
 }) => {
-  const styles = useStyles8();
+  const styles = useStyles9();
   const handleSelect = (harbor) => {
     onAddLastSearched(harbor);
     onSelectHarbor(harbor);
@@ -3129,7 +3530,7 @@ var ModalSearchHarbor = ({
     }
   );
 };
-var useStyles9 = reactComponents.makeStyles({
+var useStyles10 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -3246,12 +3647,12 @@ var ModalSelectDate = ({
   maxDate,
   dateFormat = "DD MMMM YYYY"
 }) => {
-  const styles = useStyles9();
-  const [selectedDate, setSelectedDate] = React2.useState(selectedDepartureDate);
-  const [selectedEndDate, setSelectedEndDate] = React2.useState(selectedReturnDate);
-  const [hoveredDate, setHoveredDate] = React2.useState();
-  const [activeTab, setActiveTab] = React2.useState(initialTab);
-  const previewEndDate = React2.useMemo(() => {
+  const styles = useStyles10();
+  const [selectedDate, setSelectedDate] = React5.useState(selectedDepartureDate);
+  const [selectedEndDate, setSelectedEndDate] = React5.useState(selectedReturnDate);
+  const [hoveredDate, setHoveredDate] = React5.useState();
+  const [activeTab, setActiveTab] = React5.useState(initialTab);
+  const previewEndDate = React5.useMemo(() => {
     if (selectedEndDate) return selectedEndDate;
     if (selectedDate && hoveredDate && hoveredDate > selectedDate) {
       return hoveredDate;
@@ -3262,7 +3663,7 @@ var ModalSelectDate = ({
     if (!first || !second) return false;
     return moment__default.default(first).isSame(second, "day");
   };
-  React2.useEffect(() => {
+  React5.useEffect(() => {
     if (open) {
       setSelectedDate(selectedDepartureDate);
       setSelectedEndDate(selectedReturnDate);
@@ -3314,7 +3715,7 @@ var ModalSelectDate = ({
       handleClose();
     }
   };
-  const handleCustomDayCellRef = React2.useCallback(
+  const handleCustomDayCellRef = React5.useCallback(
     (element, date, _classNames) => {
       if (!element) return;
       const removeTokens = (className) => {
@@ -3454,7 +3855,7 @@ var ModalSelectDate = ({
     }
   );
 };
-var useStyles10 = reactComponents.makeStyles({
+var useStyles11 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -3537,9 +3938,9 @@ var ModalService = ({
   isLoading = false,
   isError = false
 }) => {
-  const styles = useStyles10();
-  const [selectedServices, setSelectedServices] = React2.useState(selectedServiceIds);
-  React2.useEffect(() => {
+  const styles = useStyles11();
+  const [selectedServices, setSelectedServices] = React5.useState(selectedServiceIds);
+  React5.useEffect(() => {
     if (open) {
       if (selectedServiceIds && selectedServiceIds.length > 0) {
         const validIds = services.filter((s) => selectedServiceIds.includes(s.id)).map((s) => s.id);
@@ -3652,7 +4053,7 @@ var DEFAULT_SERVICE_CLASSES = [
   { id: 2, name: "Bisnis", key: "bisnis", serviceName: "BUSINESS" },
   { id: 3, name: "Eksekutif", key: "eksekutif", serviceName: "EXECUTIVE" }
 ];
-var useStyles11 = reactComponents.makeStyles({
+var useStyles12 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -3731,11 +4132,11 @@ var ModalTotalPassengers = ({
   maxPassengers = 10,
   infoMessage
 }) => {
-  const styles = useStyles11();
-  const [passengers, setPassengers] = React2.useState([]);
-  const [openItems, setOpenItems] = React2.useState([]);
+  const styles = useStyles12();
+  const [passengers, setPassengers] = React5.useState([]);
+  const [openItems, setOpenItems] = React5.useState([]);
   const defaultInfoMessage = `Anda dapat menambahkan hingga ${maxPassengers} penumpang pada golongan kendaraan ini.`;
-  React2.useEffect(() => {
+  React5.useEffect(() => {
     if (passengerTypes.length === 0) return;
     const defaultPassengers = passengerTypes.map((passengerType) => ({
       passengerTypeId: passengerType.id,
@@ -3965,7 +4366,7 @@ var ModalTotalPassengers = ({
     }
   );
 };
-var useStyles12 = reactComponents.makeStyles({
+var useStyles13 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -4017,11 +4418,11 @@ var ModalTypeOfService = ({
   onSave,
   renderImage
 }) => {
-  const styles = useStyles12();
-  const [selectedServiceTitle, setSelectedServiceTitle] = React2.useState(
+  const styles = useStyles13();
+  const [selectedServiceTitle, setSelectedServiceTitle] = React5.useState(
     selectedService?.title || ""
   );
-  const [openItems, setOpenItems] = React2.useState(() => {
+  const [openItems, setOpenItems] = React5.useState(() => {
     if (!selectedService) return void 0;
     for (const item of serviceTypes) {
       if (item.type === "accordion" && item.child.length > 0) {
@@ -4037,7 +4438,7 @@ var ModalTypeOfService = ({
   });
   const defaultRenderImage = ({ src, alt, width, height }) => /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, width, height, style: { objectFit: "contain" } });
   const imageRenderer = renderImage || defaultRenderImage;
-  React2.useEffect(() => {
+  React5.useEffect(() => {
     const newTitle = selectedService?.title || "";
     if (newTitle !== selectedServiceTitle) {
       setSelectedServiceTitle(newTitle);
@@ -4241,8 +4642,10 @@ exports.CardBanner = CardBanner;
 exports.CardPromo = CardPromo;
 exports.CardServiceMenu = CardServiceMenu;
 exports.CardTicket = CardTicket;
+exports.CardTicketSearch = CardTicketSearch;
+exports.CardTicketSearchDefaultLabels = DEFAULT_LABELS;
 exports.CarouselWithCustomNav = CarouselWithCustomNav;
-exports.DEFAULT_COUNTRY_CODES = DEFAULT_COUNTRY_CODES2;
+exports.DEFAULT_COUNTRY_CODES = DEFAULT_COUNTRY_CODES;
 exports.DEFAULT_SERVICE_CLASSES = DEFAULT_SERVICE_CLASSES;
 exports.DEFAULT_VEHICLE_ICONS = DEFAULT_VEHICLE_ICONS;
 exports.InputDynamic = InputDynamic_default;