@asdp/ferryui 0.1.20 → 0.1.22-dev.8463

package/dist/index.mjs

@@ -1,14 +1,15 @@
-import { makeStyles, tokens, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, createLightTheme, createDarkTheme, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, mergeClasses, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
+import { makeStyles, tokens, shorthands, createLightTheme, createDarkTheme, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, mergeClasses, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React5, { forwardRef, useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { Row, Col, Visible } from 'react-grid-system';
+import { Icon } from '@iconify/react';
 import { Icon as Icon$1 } from '@iconify/react/dist/iconify.js';
 import { Controller, useForm, useWatch } from 'react-hook-form';
-import { Icon } from '@iconify/react';
 import PhoneInputComponent from 'react-phone-input-2';
 import Select from 'react-select';
 import { Calendar } from '@fluentui/react-calendar-compat';
 import moment from 'moment';
+import { Range } from 'react-range';
 
 var useStyles = makeStyles({
   dialogSurface: {
@@ -470,19 +471,155 @@ var CardBanner = ({
     }
   );
 };
-var useStyles5 = makeStyles({
-  ticketWrapper: {
-    borderRadius: tokens.borderRadiusXLarge,
-    overflow: "visible",
-    boxShadow: tokens.shadow4,
-    display: "flex",
-    width: "100%",
-    marginBottom: "2rem",
-    minHeight: "323px",
-    padding: 0,
-    "@media (max-width: 1200px)": {
-      flexDirection: "column"
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState({
+    width: 0,
+    height: 0
+  });
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
     }
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowSize;
+}
+
+// src/constants/generated/tokens.ts
+var brandColors = {
+  "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/generated/tokensV2.ts
+var brandColors2 = {
+  "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};
+var sharedColors = {
+  "Shared_Cranberry_Primary": "#c50f1f",
+  "Shared_Red_Primary": "#d13438",
+  "Shared_Green_Primary": "#107c10"};
+var lightModeColors2 = {
+  "Brand_Stroke_1_Rest": "#00B3BD"};
+var tokensV2_default = {
+  lightModeColors: lightModeColors2};
+
+// src/constants/brandColors.ts
+var isV2Path = typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
+var brandColors3 = !isV2Path ? brandColors2 : brandColors;
+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: {
+    xs: "320px",
+    sm: "480px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1200px",
+    xxl: "1440px",
+    xxxl: "1600px"
+  }};
+
+// src/constants/themes.ts
+var extendedTokens = {
+  breakpointXs: designTokens.breakpoints.xs,
+  breakpointSm: designTokens.breakpoints.sm,
+  breakpointMd: designTokens.breakpoints.md,
+  breakpointLg: designTokens.breakpoints.lg,
+  breakpointXl: designTokens.breakpoints.xl,
+  breakpointXxl: designTokens.breakpoints.xxl,
+  breakpointXxxl: designTokens.breakpoints.xxxl
+};
+({
+  ...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]});
+({
+  ...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 useStyle = makeStyles({
+  dividerContainer: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyItems: "center",
+    width: "100%"
   },
   ticketLeftCard: {
     display: "flex",
@@ -494,24 +631,20 @@ var useStyles5 = makeStyles({
     boxShadow: "none",
     position: "relative",
     overflow: "visible",
-    flexDirection: "column",
-    "@media (min-width: 1200px)": {
-      borderRight: `0.7em dashed ${tokens.colorNeutralBackground1Hover}`,
+    [`@media (min-width: ${extendedTokens.breakpointXl})`]: {
+      borderRight: "0.7em dashed " + tokens.colorNeutralBackground1Hover,
       borderEndEndRadius: 0,
       borderEndStartRadius: 0,
       borderTopLeftRadius: tokens.borderRadiusXLarge,
       borderBottomLeftRadius: tokens.borderRadiusXLarge
     },
-    "@media (max-width: 1200px)": {
-      borderBottom: `0.5em dashed ${tokens.colorNeutralBackground1Hover}`,
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      borderBottom: "0.5em dashed " + tokens.colorNeutralBackground1Hover,
       borderTopLeftRadius: tokens.borderRadiusXLarge,
       borderTopRightRadius: tokens.borderRadiusXLarge,
       borderEndEndRadius: 0,
       borderEndStartRadius: 0,
-      gap: "1rem",
-      flexDirection: "row",
-      justifyContent: "space-around",
-      padding: "2rem"
+      gap: "1rem"
     }
   },
   circularLeft: {
@@ -523,28 +656,6 @@ var useStyles5 = makeStyles({
     left: "-50px",
     boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)"
   },
-  circularLeftMd: {
-    position: "absolute",
-    width: "50px",
-    height: "30px",
-    borderRadius: "50%",
-    backgroundColor: tokens.colorNeutralBackground1Hover,
-    left: "-25px",
-    bottom: "-18px",
-    zIndex: 2,
-    boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)"
-  },
-  circularRightMd: {
-    position: "absolute",
-    width: "50px",
-    height: "30px",
-    borderRadius: "50%",
-    backgroundColor: tokens.colorNeutralBackground1Hover,
-    right: "-25px",
-    bottom: "-18px",
-    zIndex: 2,
-    boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
-  },
   ticketMiddleCard: {
     width: "100%",
     height: "100%",
@@ -554,7 +665,11 @@ var useStyles5 = makeStyles({
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between",
-    "@media (max-width: 768px)": {
+    borderBottom: "none",
+    [`@media (max-width: ${extendedTokens.breakpointLg})`]: {
+      padding: "2rem"
+    },
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
       padding: "1rem"
     }
   },
@@ -577,21 +692,10 @@ var useStyles5 = makeStyles({
     justifyContent: "center",
     gap: "0.5rem"
   },
-  dividerContainer: {
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyItems: "center",
-    width: "100%"
-  },
   ticketButtons: {
     display: "flex",
     gap: "1rem",
-    marginTop: "1rem",
-    "@media (max-width: 768px)": {
-      flexDirection: "column"
-    }
+    marginTop: "1rem"
   },
   ticketRightCard: {
     width: "100%",
@@ -610,18 +714,20 @@ var useStyles5 = makeStyles({
     flexDirection: "column",
     justifyContent: "space-between",
     color: tokens.colorNeutralForegroundInverted,
-    "@media (max-width: 1200px)": {
+    borderBottom: "none",
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
       padding: "2rem",
       borderTopRightRadius: 0,
-      borderBottomLeftRadius: tokens.borderRadiusXLarge,
-      borderBottomRightRadius: tokens.borderRadiusXLarge
+      borderBottomLeftRadius: tokens.borderRadiusXLarge
     },
-    "@media (max-width: 768px)": {
-      padding: "1rem"
+    [`@media (max-width: ${extendedTokens.breakpointLg})`]: {
+      padding: "1rem",
+      borderTopRightRadius: 0,
+      borderBottomLeftRadius: tokens.borderRadiusXLarge
     }
   },
   priceCard: {
-    border: "1px solid #FFF",
+    border: " 1px solid #FFF",
     background: "rgba(255, 255, 255, 0.30)",
     backdropFilter: "blur(17.5px)",
     borderRadius: tokens.borderRadiusLarge,
@@ -631,7 +737,7 @@ var useStyles5 = makeStyles({
     justifyContent: "space-between",
     alignItems: "center",
     flexWrap: "wrap",
-    "@media (max-width: 768px)": {
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
       padding: "1rem"
     }
   },
@@ -660,177 +766,359 @@ var useStyles5 = makeStyles({
     right: "-50px",
     boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
   },
+  ticketWrapper: {
+    borderRadius: tokens.borderRadiusXLarge,
+    overflow: "visible",
+    boxShadow: tokens.shadow4,
+    display: "flex",
+    boxSizing: "content-box",
+    width: "100%",
+    marginBottom: "2rem",
+    minHeight: "323px",
+    justifyContent: "center",
+    padding: 0,
+    transformOrigin: "center",
+    marginLeft: `0px !important`,
+    marginRight: `0px !important`
+  },
+  circularLeftMd: {
+    position: "absolute",
+    width: "50px",
+    height: "30px",
+    borderRadius: "50%",
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+    left: "-25px",
+    bottom: "-18px",
+    zIndex: 2,
+    boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  circularRightMd: {
+    position: "absolute",
+    width: "50px",
+    height: "30px",
+    borderRadius: "50%",
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+    right: "-25px",
+    bottom: "-18px",
+    zIndex: 2,
+    boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
   asdpLogo: {
     width: "clamp(50px, 20vw, 150px)"
   }
 });
 var CardTicket = ({
-  shipType,
-  logoSrc = "/assets/logo/asdp-default.svg",
+  id,
   shipName,
+  shipType,
+  shipTypeColor = "success",
+  tooltipCaption = "",
   availableSeats,
-  departure,
-  arrival,
+  departureDay,
+  departureTime,
+  departureLocation,
+  arrivalDay,
+  arrivalTime,
+  arrivalLocation,
   duration,
-  actionButtons = [],
-  price,
-  primaryButton,
   facilities,
-  shipIcon,
-  facilityIcon
+  totalPrice,
+  buttonText = "Pilih Tiket",
+  onPriceDetailClick,
+  onPolicyClick,
+  onSelectTicket
 }) => {
-  const styles = useStyles5();
-  const threshold = availableSeats.threshold ?? 50;
-  const isLowSeats = availableSeats.count <= threshold;
-  return /* @__PURE__ */ jsxs("div", { className: styles.ticketWrapper, children: [
-    /* @__PURE__ */ jsxs(Card, { className: styles.ticketLeftCard, children: [
-      /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          content: shipType.tooltip || shipType.label,
-          relationship: "label",
-          appearance: "inverted",
-          children: /* @__PURE__ */ jsx(
-            Badge,
+  const styles = useStyle();
+  const { width } = useWindowSize();
+  const getCircularVerticalConfig = () => {
+    if (width <= 1600) return { count: 6, spacing: 60, top: 10 };
+    return { count: 5, spacing: 60, top: 18 };
+  };
+  const circularVerticalConfig = getCircularVerticalConfig();
+  return /* @__PURE__ */ jsxs(Row, { className: styles.ticketWrapper, children: [
+    /* @__PURE__ */ jsx(
+      Col,
+      {
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+        xl: 3,
+        xxl: 3,
+        xxxl: 3,
+        style: { padding: 0, margin: 0 },
+        children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketLeftCard, children: [
+          /* @__PURE__ */ jsxs(Row, { style: { height: "100%" }, children: [
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                xs: 5,
+                sm: 5,
+                md: 5,
+                lg: 5,
+                xl: 12,
+                xxl: 12,
+                xxxl: 12,
+                style: {
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    content: tooltipCaption,
+                    relationship: "label",
+                    appearance: "inverted",
+                    children: /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        size: "large",
+                        appearance: "filled",
+                        color: shipTypeColor,
+                        iconPosition: "before",
+                        shape: "rounded",
+                        icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:info-24-regular" }),
+                        children: shipType
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                xs: 2,
+                sm: 2,
+                md: 2,
+                lg: 2,
+                xl: 12,
+                xxl: 12,
+                xxxl: 12,
+                style: {
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: "/assets/logo/asdp-default.svg",
+                    className: styles.asdpLogo,
+                    alt: "asdp",
+                    height: 56,
+                    width: 82
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(Visible, { md: true, sm: true, xs: true, lg: true, children: /* @__PURE__ */ jsx(
+              Col,
+              {
+                xs: 5,
+                sm: 5,
+                md: 5,
+                lg: 5,
+                xl: 12,
+                xxl: 12,
+                xxxl: 12,
+                style: {
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ jsxs(
+                  Badge,
+                  {
+                    size: "large",
+                    style: {
+                      color: availableSeats > 50 ? sharedColors.Shared_Green_Primary : sharedColors.Shared_Red_Primary
+                    },
+                    appearance: "tint",
+                    color: availableSeats > 50 ? "success" : "danger",
+                    iconPosition: "after",
+                    shape: "rounded",
+                    icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-regular" }),
+                    children: [
+                      "Tersedia ",
+                      availableSeats
+                    ]
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                style: { textAlign: "center" },
+                xs: 12,
+                sm: 12,
+                md: 12,
+                lg: 12,
+                xl: 12,
+                xxl: 12,
+                xxxl: 12,
+                children: /* @__PURE__ */ jsx(Subtitle2, { children: shipName })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Visible, { md: true, sm: true, xs: true, lg: true, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.circularLeftMd }),
+            /* @__PURE__ */ jsx("div", { className: styles.circularRightMd })
+          ] }),
+          /* @__PURE__ */ jsx(Visible, { xl: true, xxl: true, xxxl: true, children: Array.from({ length: circularVerticalConfig.count }).map((_, index) => /* @__PURE__ */ jsx(
+            "div",
             {
-              size: "large",
-              appearance: "filled",
-              color: shipType.color,
-              iconPosition: "before",
+              className: styles.circularLeft,
+              style: {
+                top: `${circularVerticalConfig.top + index * circularVerticalConfig.spacing}px`
+              }
+            },
+            index
+          )) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Col,
+      {
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+        xl: 4.5,
+        xxl: 4.5,
+        xxxl: 4.5,
+        style: { padding: 0, margin: 0 },
+        children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketMiddleCard, children: [
+          /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              size: "extra-large",
+              style: {
+                color: availableSeats > 50 ? sharedColors.Shared_Green_Primary : sharedColors.Shared_Red_Primary
+              },
+              appearance: "tint",
+              color: availableSeats > 50 ? "success" : "danger",
+              iconPosition: "after",
               shape: "rounded",
-              children: shipType.label
+              icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-regular" }),
+              children: [
+                "Tersedia ",
+                availableSeats
+              ]
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: logoSrc,
-          className: styles.asdpLogo,
-          alt: "Logo"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ jsxs(
-        Badge,
-        {
-          size: "large",
-          appearance: "tint",
-          color: isLowSeats ? "danger" : "success",
-          iconPosition: "after",
-          shape: "rounded",
-          children: [
-            "Tersedia ",
-            availableSeats.count
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Subtitle2, { children: shipName }),
-      /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: styles.circularLeft,
-          style: {
-            top: `${18 + index * 60}px`
-          }
-        },
-        index
-      )) }),
-      /* @__PURE__ */ jsx("div", { className: styles.circularLeftMd }),
-      /* @__PURE__ */ jsx("div", { className: styles.circularRightMd })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { className: styles.ticketMiddleCard, children: [
-      /* @__PURE__ */ jsxs(
-        Badge,
-        {
-          size: "extra-large",
-          appearance: "tint",
-          color: isLowSeats ? "danger" : "success",
-          iconPosition: "after",
-          shape: "rounded",
-          children: [
-            "Tersedia ",
-            availableSeats.count
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.ticketInfo, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
-          /* @__PURE__ */ jsx(Caption1, { children: departure.day }),
-          /* @__PURE__ */ jsx(Title2, { children: departure.time }),
-          /* @__PURE__ */ jsx(Caption1, { children: departure.location })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles.ticketDuration, children: [
-          /* @__PURE__ */ jsxs(Caption2, { children: [
-            "Estimasi ",
-            duration
+          ) }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.ticketInfo, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
+              /* @__PURE__ */ jsx(Caption1, { children: departureDay }),
+              /* @__PURE__ */ jsx(Title2, { children: departureTime }),
+              /* @__PURE__ */ jsx(Caption1, { children: departureLocation })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.ticketDuration, children: [
+              /* @__PURE__ */ jsxs(Caption2, { children: [
+                "Estimasi ",
+                duration
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, { children: /* @__PURE__ */ jsx(Icon, { icon: "fluent:vehicle-ship-24-regular", height: 24 }) }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
+              /* @__PURE__ */ jsx(Caption1, { children: arrivalDay }),
+              /* @__PURE__ */ jsx(Title2, { children: arrivalTime }),
+              /* @__PURE__ */ jsx(Caption1, { children: arrivalLocation })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: styles.ticketButtons, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "outline",
+                shape: "circular",
+                style: {
+                  flex: 1,
+                  borderColor: tokens.colorBrandBackground,
+                  color: tokens.colorBrandBackground
+                },
+                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:money-24-regular" }),
+                size: "medium",
+                onClick: onPriceDetailClick,
+                children: "Rincian Harga"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "outline",
+                shape: "circular",
+                style: {
+                  flex: 1,
+                  borderColor: tokens.colorBrandBackground,
+                  color: tokens.colorBrandBackground
+                },
+                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:document-bullet-list-24-regular" }),
+                size: "medium",
+                onClick: onPolicyClick,
+                children: "Kebijakan"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Col,
+      {
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+        xl: 4.5,
+        xxl: 4.5,
+        xxxl: 4.5,
+        style: { padding: 0, margin: 0 },
+        children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketRightCard, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
+              /* @__PURE__ */ jsx(Subtitle2, { children: "Total harga" }),
+              /* @__PURE__ */ jsxs(Title3, { style: { display: "flex", flex: "column", justifyContent: "end" }, children: [
+                "IDR\xA0",
+                totalPrice.toLocaleString("id-ID")
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: onSelectTicket,
+                appearance: "primary",
+                style: { backgroundColor: brandColors2["60"] },
+                size: "medium",
+                shape: "circular",
+                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
+                children: buttonText
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, { children: shipIcon || /* @__PURE__ */ jsx("span", { children: "\u{1F6A2}" }) }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
-          /* @__PURE__ */ jsx(Caption1, { children: arrival.day }),
-          /* @__PURE__ */ jsx(Title2, { children: arrival.time }),
-          /* @__PURE__ */ jsx(Caption1, { children: arrival.location })
+          /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
+            /* @__PURE__ */ jsx(Subtitle2, { children: "Fasilitas" }),
+            /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "fluent:checkmark-circle-24-filled" }),
+              /* @__PURE__ */ jsx(Caption1Strong, { children: facility })
+            ] }, idx)) })
+          ] }),
+          /* @__PURE__ */ jsx(Visible, { xl: true, xxl: true, xxxl: true, children: Array.from({ length: circularVerticalConfig.count }).map((_, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles.circularRight,
+              style: {
+                top: `${circularVerticalConfig.top + index * circularVerticalConfig.spacing}px`
+              }
+            },
+            index
+          )) })
         ] })
-      ] }) }),
-      actionButtons.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.ticketButtons, children: actionButtons.slice(0, 2).map((button, idx) => /* @__PURE__ */ jsx(
-        Button,
-        {
-          appearance: "outline",
-          shape: "circular",
-          style: {
-            flex: 1,
-            borderColor: tokens.colorBrandBackground,
-            color: tokens.colorBrandBackground
-          },
-          icon: button.icon,
-          size: "medium",
-          onClick: button.onClick,
-          children: button.label
-        },
-        idx
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxs(Card, { className: styles.ticketRightCard, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
-          /* @__PURE__ */ jsx(Subtitle2, { children: "Total harga" }),
-          /* @__PURE__ */ jsxs(Title3, { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [
-            "IDR ",
-            price
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: primaryButton.onClick,
-            appearance: "primary",
-            size: "medium",
-            shape: "circular",
-            icon: primaryButton.icon,
-            style: { backgroundColor: "#58C91B" },
-            children: primaryButton.label
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
-        /* @__PURE__ */ jsx(Subtitle2, { children: "Fasilitas" }),
-        /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
-          facilityIcon || /* @__PURE__ */ jsx("span", { children: "\u2713" }),
-          /* @__PURE__ */ jsx(Caption1Strong, { children: facility })
-        ] }, idx)) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { style: { display: "none" }, children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: styles.circularRight,
-          style: {
-            top: `${18 + index * 60}px`
-          }
-        },
-        index
-      )) })
-    ] })
+      }
+    )
   ] });
 };
 var BackgroundTicketCard = (props) => /* @__PURE__ */ jsxs(
@@ -1010,7 +1298,7 @@ var BackgroundTicketCardVertical = (props) => /* @__PURE__ */ jsxs(
   }
 );
 var BackgroundTicketCardVertical_default = BackgroundTicketCardVertical;
-var useStyles6 = makeStyles({
+var useStyles5 = makeStyles({
   card: {
     width: "100%",
     boxSizing: "border-box",
@@ -1151,7 +1439,7 @@ var CardServiceMenu = ({
   showDescriptions = true,
   className
 }) => {
-  const styles = useStyles6();
+  const styles = useStyles5();
   const getMenuItemClass = (serviceId) => {
     const isActive = activeServiceId === serviceId;
     return mergeClasses(
@@ -1191,34 +1479,6 @@ var CardServiceMenu = ({
     ] }, 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};
-var sharedColors = {
-  "Shared_Cranberry_Primary": "#c50f1f"};
-var lightModeColors = {
-  "Brand_Stroke_1_Rest": "#00B3BD"};
-var tokensV2_default = {
-  lightModeColors};
 var DatePickerInput = forwardRef(
   ({
     field,
@@ -1311,7 +1571,7 @@ var DatePickerInput = forwardRef(
 DatePickerInput.displayName = "DatePickerInput";
 var DatePickerInput_default = DatePickerInput;
 var PhoneInput = PhoneInputComponent.default || PhoneInputComponent;
-var useStyles7 = makeStyles({
+var useStyles6 = makeStyles({
   field: {
     display: "flex",
     flexDirection: "column",
@@ -1554,7 +1814,7 @@ var InputDynamic = ({
   contentAfter,
   onChange
 }) => {
-  const styles = useStyles7();
+  const styles = useStyles6();
   const [showPassword, setShowPassword] = useState(false);
   const [isPhoneMode, setIsPhoneMode] = useState(false);
   const [emailOrPhoneType, setEmailOrPhoneType] = useState("none");
@@ -2662,90 +2922,7 @@ var DEFAULT_LABELS = {
     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};
-({
-  ...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]});
-({
-  ...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 = makeStyles({
+var useStyles7 = makeStyles({
   card: {
     position: "relative",
     width: "100%",
@@ -2880,7 +3057,7 @@ var CardTicketSearch = ({
   showPassengerField = false,
   showRoundTrip = true
 }) => {
-  const styles = useStyles8();
+  const styles = useStyles7();
   const labels = React5.useMemo(
     () => ({ ...DEFAULT_LABELS[language], ...customLabels }),
     [language, customLabels]
@@ -3265,32 +3442,429 @@ var CardTicketSearch = ({
     )
   ] });
 };
-var useStyles9 = makeStyles({
-  dialogTitle: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingRight: "8px"
-  },
-  dialogSurface: {
-    maxWidth: "600px",
-    width: "100%"
+
+// src/components/CardTicketSearchSummary/CardTicketSearchSummary.constants.ts
+var DEFAULT_LABELS2 = {
+  originHarbor: "Pelabuhan Keberangkatan",
+  destinationHarbor: "Pelabuhan Tujuan",
+  departureDate: "Tanggal Keberangkatan",
+  serviceClass: "Kelas Layanan",
+  typeOfService: "Jenis Layanan",
+  totalPassengers: "Jumlah Penumpang",
+  changeSearchButton: "Ganti Pencarian"
+};
+var useStyles8 = makeStyles({
+  cardSearchTicket: {
+    borderRadius: "32px",
+    // borderBottomLeftRadius: '0',
+    // borderBottomRightRadius: '0',
+    padding: "3rem",
+    paddingBottom: "8rem",
+    position: "relative",
+    overflow: "visible",
+    // boxShadow: '0 0 2px rgba(0,0,0,0.12), 0 -8px 16px rgba(0,0,0,0.14)',
+    // boxShadow: 'none',
+    borderBottom: "none",
+    [`@media (max-width: ${extendedTokens.breakpointLg})`]: {
+      padding: "2rem",
+      paddingBottom: "6rem"
+    },
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      padding: "1rem",
+      paddingBottom: "5rem"
+    }
   },
-  closeButton: {
-    minWidth: "32px",
-    minHeight: "32px"
+  paddingResponsive: {
+    [`@media (max-width: ${extendedTokens.breakpointXxxl})`]: {
+      padding: "5px"
+    }
   },
-  content: {
+  formField: {
+    padding: "12px",
     display: "flex",
     flexDirection: "column",
     gap: "0px",
-    paddingTop: "10px",
-    paddingLeft: "10px",
-    paddingRight: "10px"
-  },
-  searchInput: {
-    width: "100%",
-    marginBottom: "16px"
+    borderRadius: tokens.borderRadiusXLarge,
+    border: "1px solid " + tokens.colorNeutralStroke1,
+    height: "100%"
+  },
+  field: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalXS
+  },
+  buttonSwitch: {
+    background: tokens.colorNeutralBackground1,
+    boxShadow: `0 1px 2px 0 ${tokens.colorNeutralShadowKey}, 0 0 2px 0 ${tokens.colorNeutralShadowAmbient}`
+  },
+  buttonSearchContainer: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100%",
+    width: "100%"
+  },
+  filterButtonContainer: {
+    marginTop: "1rem",
+    display: "flex",
+    gap: "1rem"
+    // flexWrap: 'wrap',
+  },
+  circular: {
+    position: "absolute",
+    width: "clamp(40px, 7vw, 90px)",
+    height: "clamp(40px, 7vw, 90px)",
+    borderRadius: "50% 50% 0 0",
+    backgroundColor: tokens.colorNeutralBackground1Hover,
+    bottom: "-10px",
+    boxShadow: "inset 0 2px 0px rgba(0, 0, 0, 0.1)"
+  }
+});
+var CardTicketSearchSummary = ({
+  originHarbor,
+  destinationHarbor,
+  departureDate,
+  serviceClass,
+  typeOfService,
+  totalPassengers,
+  onChangeSearch,
+  labels,
+  showSwapButton = false,
+  children
+}) => {
+  const styles = useStyles8();
+  const mergedLabels = { ...DEFAULT_LABELS2, ...labels };
+  const { width } = useWindowSize();
+  const getCircularConfig = () => {
+    if (width <= parseInt(extendedTokens.breakpointXs))
+      return { count: 4, spacing: 65, size: 30, height: 30 };
+    if (width <= parseInt(extendedTokens.breakpointSm))
+      return { count: 5, spacing: 71, size: 40, height: 40 };
+    if (width <= parseInt(extendedTokens.breakpointMd))
+      return { count: 8, spacing: 87, size: 50, height: 50 };
+    if (width <= parseInt(extendedTokens.breakpointLg))
+      return { count: 9, spacing: 100, size: 60, height: 60 };
+    if (width <= parseInt(extendedTokens.breakpointXl))
+      return { count: 8, spacing: 115, size: 70, height: 70 };
+    if (width <= parseInt(extendedTokens.breakpointXxl))
+      return { count: 8, spacing: 136, size: 90, height: 90 };
+    if (width <= parseInt(extendedTokens.breakpointXxxl))
+      return { count: 8, spacing: 136, size: 90, height: 90 };
+    return { count: 11, spacing: 136, size: 100, height: 90 };
+  };
+  const circularConfig = getCircularConfig();
+  return /* @__PURE__ */ jsxs(Card, { className: styles.cardSearchTicket, children: [
+    /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(
+        Col,
+        {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12,
+          xl: 12,
+          xxl: 5,
+          xxxl: 5,
+          className: styles.paddingResponsive,
+          children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { style: { padding: "12px" }, children: [
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                xs: 12,
+                sm: 12,
+                md: 12,
+                lg: 12,
+                xl: 12,
+                xxl: 5,
+                xxxl: 5,
+                className: styles.paddingResponsive,
+                children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.originHarbor, className: styles.field, children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    name: "from",
+                    disabled: true,
+                    type: "text",
+                    contentBefore: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: "fluent:vehicle-ship-16-filled",
+                        color: tokens.colorNeutralForegroundDisabled
+                      }
+                    ),
+                    value: originHarbor,
+                    appearance: "outline",
+                    size: "medium"
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                xs: 12,
+                sm: 12,
+                md: 12,
+                lg: 12,
+                xl: 12,
+                xxl: 1,
+                xxxl: 1,
+                className: styles.paddingResponsive,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: styles.buttonSwitch,
+                    shape: "circular",
+                    disabled: true,
+                    appearance: "secondary",
+                    size: "medium",
+                    icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:arrow-swap-24-filled" })
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                xs: 12,
+                sm: 12,
+                md: 12,
+                lg: 12,
+                xl: 12,
+                xxl: 6,
+                xxxl: 6,
+                className: styles.paddingResponsive,
+                children: /* @__PURE__ */ jsx(Field, { label: mergedLabels.destinationHarbor, className: styles.field, children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    name: "to",
+                    type: "text",
+                    contentBefore: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: "fluent:location-24-filled",
+                        color: tokens.colorNeutralForegroundDisabled
+                      }
+                    ),
+                    disabled: true,
+                    appearance: "outline",
+                    size: "medium",
+                    value: destinationHarbor
+                  }
+                ) })
+              }
+            )
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Col,
+        {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12,
+          xl: 12,
+          xxl: 5,
+          xxxl: 5,
+          className: styles.paddingResponsive,
+          children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { style: { height: "100%", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                xs: 12,
+                sm: 12,
+                md: 6,
+                lg: 6,
+                xl: 6,
+                xxl: 3,
+                xxxl: 3,
+                className: styles.paddingResponsive,
+                children: /* @__PURE__ */ jsx(Field, { className: styles.field, children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    name: "startDate",
+                    type: "text",
+                    contentBefore: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: "fluent:calendar-24-regular",
+                        color: tokens.colorNeutralForegroundDisabled
+                      }
+                    ),
+                    disabled: true,
+                    appearance: "outline",
+                    size: "medium",
+                    value: departureDate
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                xs: 12,
+                sm: 12,
+                md: 6,
+                lg: 6,
+                xl: 6,
+                xxl: 3,
+                xxxl: 3,
+                className: styles.paddingResponsive,
+                children: /* @__PURE__ */ jsx(Label, { className: styles.field, children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    name: "serviceClass",
+                    type: "text",
+                    contentBefore: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: "fluent:ribbon-star-24-regular",
+                        color: tokens.colorNeutralForegroundDisabled
+                      }
+                    ),
+                    disabled: true,
+                    appearance: "outline",
+                    size: "medium",
+                    value: serviceClass
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                xs: 12,
+                sm: 12,
+                md: 6,
+                lg: 6,
+                xl: 6,
+                xxl: 3,
+                xxxl: 3,
+                className: styles.paddingResponsive,
+                children: /* @__PURE__ */ jsx(Field, { className: styles.field, children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "text",
+                    contentBefore: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: "fluent:vehicle-car-24-regular",
+                        color: tokens.colorNeutralForegroundDisabled
+                      }
+                    ),
+                    disabled: true,
+                    appearance: "outline",
+                    size: "medium",
+                    value: typeOfService
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Col,
+              {
+                xs: 12,
+                sm: 12,
+                md: 6,
+                lg: 6,
+                xl: 6,
+                xxl: 3,
+                xxxl: 3,
+                className: styles.paddingResponsive,
+                children: /* @__PURE__ */ jsx(Field, { className: styles.field, children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    name: "passenger",
+                    type: "text",
+                    contentBefore: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: "fluent:people-24-regular",
+                        color: tokens.colorNeutralForegroundDisabled
+                      }
+                    ),
+                    disabled: true,
+                    appearance: "outline",
+                    size: "medium",
+                    value: totalPassengers
+                  }
+                ) })
+              }
+            )
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Col,
+        {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12,
+          xl: 12,
+          xxl: 2,
+          xxxl: 2,
+          className: styles.paddingResponsive,
+          children: /* @__PURE__ */ jsx("div", { className: styles.buttonSearchContainer, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              appearance: "primary",
+              size: "medium",
+              style: { width: "100%", borderRadius: tokens.borderRadiusCircular },
+              iconPosition: "before",
+              icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:search-24-filled" }),
+              onClick: onChangeSearch,
+              children: mergedLabels.changeSearchButton
+            }
+          ) })
+        }
+      )
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: styles.filterButtonContainer, children }),
+    Array.from({ length: circularConfig.count }).map((_, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.circular,
+        style: {
+          left: `${30 + index * circularConfig.spacing}px`
+        }
+      },
+      index
+    ))
+  ] });
+};
+var useStyles9 = makeStyles({
+  dialogTitle: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingRight: "8px"
+  },
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    paddingTop: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px"
+  },
+  searchInput: {
+    width: "100%",
+    marginBottom: "16px"
   },
   resultList: {
     display: "flex",
@@ -3637,7 +4211,8 @@ var ModalSelectDate = ({
   onTabChange,
   minDate = /* @__PURE__ */ new Date(),
   maxDate,
-  dateFormat = "DD MMMM YYYY"
+  dateFormat = "DD MMMM YYYY",
+  showRoundtrip = true
 }) => {
   const styles = useStyles10();
   const [selectedDate, setSelectedDate] = useState(selectedDepartureDate);
@@ -3816,7 +4391,7 @@ var ModalSelectDate = ({
                 children: "Sekali Jalan"
               }
             ),
-            /* @__PURE__ */ jsx(
+            showRoundtrip && /* @__PURE__ */ jsx(
               "button",
               {
                 className: `${styles.tab} ${activeTab === "round-trip" ? styles.tabActive : ""}`,
@@ -4628,6 +5203,1224 @@ var DEFAULT_VEHICLE_ICONS = {
   looseLoad: "/assets/images/icons/loose-load.webp"
 };
 
-export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CardTicketSearch, DEFAULT_LABELS as CardTicketSearchDefaultLabels, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES, DEFAULT_SERVICE_CLASSES, DEFAULT_VEHICLE_ICONS, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalIllustration, ModalSearchHarbor, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, getModalPreset };
+// src/components/SortMenu/SortMenu.constants.ts
+var DEFAULT_SORT_OPTIONS = [
+  { value: "rekomendasi", label: "Rekomendasi" },
+  { value: "harga-tertinggi", label: "Harga Tertinggi" },
+  { value: "harga-terendah", label: "Harga Terendah" },
+  { value: "keberangkatan-paling-awal", label: "Keberangkatan Paling Awal" },
+  { value: "keberangkatan-paling-akhir", label: "Keberangkatan Paling Akhir" }
+];
+var getSortLabel = (value) => {
+  const option = DEFAULT_SORT_OPTIONS.find((opt) => opt.value === value);
+  return option?.label || "Rekomendasi";
+};
+var useStyles14 = makeStyles({
+  container: {
+    display: "flex",
+    width: "100%",
+    gap: tokens.spacingHorizontalM,
+    "@media (max-width: 768px)": {
+      flexDirection: "column",
+      gap: tokens.spacingVerticalS
+    }
+  },
+  divider: {
+    width: "100%",
+    maxWidth: "min-content",
+    "@media (max-width: 768px)": {
+      display: "none"
+    }
+  },
+  button: {
+    borderRadius: tokens.borderRadiusCircular,
+    color: tokens.colorBrandBackground,
+    border: "1px solid " + tokens.colorBrandBackground
+  }
+});
+var SortMenu = ({
+  value,
+  onChange,
+  totalActiveFilters = 0,
+  onFilterClick,
+  onClearFilters,
+  sortOptions = DEFAULT_SORT_OPTIONS,
+  filterButtonText = "Filter",
+  sortButtonText = "Urutkan Berdasarkan",
+  clearFiltersText = "{count} Filter Dipilih"
+}) => {
+  const styles = useStyles14();
+  const handleReset = () => {
+    onChange("rekomendasi");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    onFilterClick && /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:filter-16-regular" }),
+        size: "medium",
+        type: "button",
+        appearance: "outline",
+        shape: "circular",
+        className: styles.button,
+        onClick: onFilterClick,
+        children: filterButtonText
+      }
+    ),
+    /* @__PURE__ */ jsxs(Menu, { children: [
+      /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:arrow-sort-16-regular" }),
+          size: "medium",
+          type: "button",
+          shape: "circular",
+          className: styles.button,
+          children: sortButtonText
+        }
+      ) }),
+      /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsx(MenuList, { children: /* @__PURE__ */ jsx(RadioGroup, { value, onChange: (_, data) => onChange(data.value), children: sortOptions.map((option) => /* @__PURE__ */ jsx(Radio, { value: option.value, label: option.label }, option.value)) }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.divider }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-32-regular" }),
+        size: "medium",
+        iconPosition: "after",
+        onClick: handleReset,
+        type: "button",
+        shape: "circular",
+        className: styles.button,
+        children: getSortLabel(value)
+      }
+    ),
+    totalActiveFilters > 0 && onClearFilters && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.divider }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-32-regular" }),
+          size: "medium",
+          iconPosition: "after",
+          type: "button",
+          onClick: onClearFilters,
+          shape: "circular",
+          className: styles.button,
+          children: clearFiltersText.replace("{count}", totalActiveFilters.toString())
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/ModalFilterTicket/ModalFilterTicket.constants.ts
+var DEFAULT_LABELS3 = {
+  title: "Filter dengan",
+  serviceTypeLabel: "Jenis Layanan",
+  departureTimeLabel: "Waktu pergi",
+  arrivalTimeLabel: "Waktu tiba",
+  priceLabel: "Harga",
+  priceRangeText: (min, max) => {
+    const formatPrice = (price) => new Intl.NumberFormat("id-ID").format(price);
+    return `Mulai dari IDR ${formatPrice(min)} - ${formatPrice(max)}`;
+  },
+  durationLabel: "Durasi perjalanan",
+  durationRangeText: (min, max) => `Perjalanan ${min} - ${max} jam`,
+  resetButton: "Reset",
+  applyButton: "Terapkan"
+};
+var DEFAULT_SERVICE_TYPES = [
+  { value: "ropax-regular", label: "Ropax Regular" },
+  { value: "ropax-express", label: "Ropax Express" },
+  { value: "fast-ferry", label: "Fast Ferry" },
+  { value: "bus-air", label: "Bus Air" },
+  { value: "water-taxi", label: "Water Taxi" },
+  { value: "pctc", label: "PCTC" },
+  { value: "pcc", label: "PCC" }
+];
+var DEFAULT_TIME_SLOTS = [
+  { value: "00:00 - 06:00", label: "00:00 - 06:00" },
+  { value: "06:00 - 12:00", label: "06:00 - 12:00" },
+  { value: "12:00 - 18:00", label: "12:00 - 18:00" },
+  { value: "18:00 - 24:00", label: "18:00 - 24:00" }
+];
+var DEFAULT_PRICE_RANGE = {
+  min: 2e5,
+  max: 8e5
+};
+var DEFAULT_DURATION_RANGE = {
+  min: 0,
+  max: 8
+};
+var useStyles15 = makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingHorizontalXXL,
+    paddingTop: tokens.spacingVerticalMNudge,
+    paddingLeft: tokens.spacingHorizontalSNudge,
+    paddingRight: tokens.spacingHorizontalSNudge,
+    paddingBottom: tokens.spacingHorizontalXL,
+    maxHeight: "70vh",
+    overflowY: "auto"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  section: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px"
+  },
+  containerRange: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalM
+  },
+  spaceText: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingHorizontalXXS
+  },
+  sliderContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalS,
+    ...shorthands.padding(tokens.spacingHorizontalNone, tokens.spacingHorizontalSNudge)
+  },
+  sliderValues: {
+    display: "flex",
+    justifyContent: "space-between",
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground2,
+    marginTop: tokens.spacingVerticalXS
+  },
+  footerButtons: {
+    display: "flex",
+    gap: tokens.spacingVerticalM,
+    justifyContent: "flex-end",
+    paddingTop: tokens.spacingVerticalL
+  },
+  checkboxWrapper: {
+    "& label": {
+      whiteSpace: "nowrap"
+    }
+  },
+  buttonGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "0.5rem"
+  },
+  outlinePrimary: {
+    color: tokens.colorBrandBackground,
+    ...shorthands.border("1px", "solid", tokens.colorBrandBackground),
+    ":hover": {
+      backgroundColor: tokens.colorBrandBackgroundHover,
+      ...shorthands.borderColor(tokens.colorBrandBackgroundHover),
+      color: tokens.colorNeutralForegroundOnBrand
+    }
+  },
+  outlineDanger: {
+    color: tokens.colorPaletteRedForeground1,
+    ...shorthands.border("1px", "solid", tokens.colorPaletteRedForeground1),
+    ":hover": {
+      backgroundColor: tokens.colorPaletteRedBackground1,
+      ...shorthands.borderColor(tokens.colorPaletteRedForeground1)
+    }
+  }
+});
+var ModalFilterTicket = ({
+  open,
+  onOpenChange,
+  selectedServiceTypes,
+  onServiceTypesChange,
+  departureTime,
+  onDepartureTimeChange,
+  arrivalTime,
+  onArrivalTimeChange,
+  priceRange,
+  onPriceRangeChange,
+  durationRange,
+  onDurationRangeChange,
+  onReset,
+  onApply,
+  labels,
+  serviceTypes = DEFAULT_SERVICE_TYPES,
+  timeSlots = DEFAULT_TIME_SLOTS,
+  minPrice = DEFAULT_PRICE_RANGE.min,
+  maxPrice = DEFAULT_PRICE_RANGE.max,
+  minDuration = DEFAULT_DURATION_RANGE.min,
+  maxDuration = DEFAULT_DURATION_RANGE.max
+}) => {
+  const styles = useStyles15();
+  const mergedLabels = { ...DEFAULT_LABELS3, ...labels };
+  const [rangeReady, setRangeReady] = useState(false);
+  useEffect(() => {
+    if (open) {
+      const timer = setTimeout(() => {
+        setRangeReady(true);
+      }, 200);
+      return () => {
+        clearTimeout(timer);
+        setRangeReady(false);
+      };
+    }
+  }, [open]);
+  const handleServiceTypeToggle = (value) => {
+    if (selectedServiceTypes.includes(value)) {
+      onServiceTypesChange(selectedServiceTypes.filter((s) => s !== value));
+    } else {
+      onServiceTypesChange([...selectedServiceTypes, value]);
+    }
+  };
+  const handleDepartureTimeChange = (value, checked) => {
+    if (checked) {
+      onDepartureTimeChange([...departureTime, value]);
+    } else {
+      onDepartureTimeChange(departureTime.filter((t) => t !== value));
+    }
+  };
+  const handleArrivalTimeChange = (value, checked) => {
+    if (checked) {
+      onArrivalTimeChange([...arrivalTime, value]);
+    } else {
+      onArrivalTimeChange(arrivalTime.filter((t) => t !== value));
+    }
+  };
+  const formatPrice = (price) => {
+    return new Intl.NumberFormat("id-ID").format(price);
+  };
+  const renderPriceTrack = useCallback(
+    ({ props, children }) => {
+      const [value1, value2] = priceRange;
+      const percent1 = (value1 - minPrice) / (maxPrice - minPrice) * 100;
+      const percent2 = (value2 - minPrice) / (maxPrice - minPrice) * 100;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...props,
+          ref: props.ref,
+          style: {
+            ...props.style,
+            height: "4px",
+            width: "100%",
+            backgroundColor: tokens.colorNeutralStroke2,
+            borderRadius: tokens.borderRadiusSmall,
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  height: "100%",
+                  left: `${percent1}%`,
+                  right: `${100 - percent2}%`,
+                  backgroundColor: tokens.colorBrandBackground,
+                  borderRadius: tokens.borderRadiusSmall
+                }
+              }
+            ),
+            children
+          ]
+        }
+      );
+    },
+    [priceRange, minPrice, maxPrice]
+  );
+  const renderDurationTrack = useCallback(
+    ({ props, children }) => {
+      const [value1, value2] = durationRange;
+      const percent1 = (value1 - minDuration) / (maxDuration - minDuration) * 100;
+      const percent2 = (value2 - minDuration) / (maxDuration - minDuration) * 100;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...props,
+          ref: props.ref,
+          style: {
+            ...props.style,
+            height: "4px",
+            width: "100%",
+            backgroundColor: tokens.colorNeutralStroke2,
+            borderRadius: tokens.borderRadiusSmall,
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  height: "100%",
+                  left: `${percent1}%`,
+                  right: `${100 - percent2}%`,
+                  backgroundColor: tokens.colorBrandBackground,
+                  borderRadius: tokens.borderRadiusSmall
+                }
+              }
+            ),
+            children
+          ]
+        }
+      );
+    },
+    [durationRange, minDuration, maxDuration]
+  );
+  const renderThumb = ({ props }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref: props.ref,
+      style: {
+        ...props.style,
+        height: "15px",
+        width: "15px",
+        borderRadius: "50%",
+        backgroundColor: tokens.colorBrandBackground,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        boxShadow: tokens.shadow4
+      }
+    }
+  );
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+    /* @__PURE__ */ jsx(
+      DialogTitle,
+      {
+        action: /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "subtle",
+            "aria-label": "close",
+            icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
+            className: styles.closeButton,
+            onClick: () => onOpenChange(false)
+          }
+        ),
+        children: mergedLabels.title
+      }
+    ),
+    /* @__PURE__ */ jsxs(DialogContent, { className: styles.content, children: [
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsx(Body1, { children: mergedLabels.serviceTypeLabel }),
+        /* @__PURE__ */ jsx("div", { className: styles.buttonGrid, children: serviceTypes.map((service) => {
+          const isSelected = selectedServiceTypes.includes(service.value);
+          return /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: isSelected ? "primary" : "outline",
+              className: isSelected ? "" : styles.outlinePrimary,
+              size: "large",
+              onClick: () => handleServiceTypeToggle(service.value),
+              style: { width: "100%" },
+              children: service.label
+            },
+            service.value
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsx(Body1, { children: mergedLabels.departureTimeLabel }),
+        /* @__PURE__ */ jsx(Row, { children: timeSlots.map((slot) => /* @__PURE__ */ jsx(Col, { xs: 6, sm: 6, md: 6, lg: 3, xl: 3, xxl: 3, xxxl: 3, children: /* @__PURE__ */ jsx("div", { className: styles.checkboxWrapper, children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: slot.label,
+            checked: departureTime.includes(slot.value),
+            onChange: (_, data) => handleDepartureTimeChange(slot.value, data.checked)
+          }
+        ) }) }, slot.value)) })
+      ] }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsx(Body1, { children: mergedLabels.arrivalTimeLabel }),
+        /* @__PURE__ */ jsx(Row, { children: timeSlots.map((slot) => /* @__PURE__ */ jsx(Col, { xs: 6, sm: 6, md: 6, lg: 3, xl: 3, xxl: 3, xxxl: 3, children: /* @__PURE__ */ jsx("div", { className: styles.checkboxWrapper, children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: slot.label,
+            checked: arrivalTime.includes(slot.value),
+            onChange: (_, data) => handleArrivalTimeChange(slot.value, data.checked)
+          }
+        ) }) }, slot.value)) })
+      ] }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs("div", { className: styles.containerRange, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.spaceText, children: [
+          /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.priceLabel }),
+          /* @__PURE__ */ jsx(Body1, { children: mergedLabels.priceRangeText(priceRange[0], priceRange[1]) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.sliderContainer, children: [
+          rangeReady && /* @__PURE__ */ jsx(
+            Range,
+            {
+              min: minPrice,
+              max: maxPrice,
+              values: priceRange,
+              onChange: (values) => onPriceRangeChange(values),
+              renderTrack: renderPriceTrack,
+              renderThumb
+            },
+            open ? "open" : "closed"
+          ),
+          /* @__PURE__ */ jsxs("div", { className: styles.sliderValues, children: [
+            /* @__PURE__ */ jsx("span", { children: formatPrice(minPrice) }),
+            /* @__PURE__ */ jsx("span", { children: formatPrice(maxPrice) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs("div", { className: styles.containerRange, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.spaceText, children: [
+          /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.durationLabel }),
+          /* @__PURE__ */ jsx(Body1, { children: mergedLabels.durationRangeText(durationRange[0], durationRange[1]) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.sliderContainer, children: [
+          rangeReady && /* @__PURE__ */ jsx(
+            Range,
+            {
+              step: 1,
+              min: minDuration,
+              max: maxDuration,
+              values: durationRange,
+              onChange: (values) => onDurationRangeChange(values),
+              renderTrack: renderDurationTrack,
+              renderThumb
+            },
+            open ? "open" : "closed"
+          ),
+          /* @__PURE__ */ jsxs("div", { className: styles.sliderValues, children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              minDuration,
+              " jam"
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              maxDuration,
+              " jam"
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogActions, { className: styles.footerButtons, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: styles.outlineDanger,
+          appearance: "outline",
+          shape: "circular",
+          onClick: onReset,
+          children: mergedLabels.resetButton
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { appearance: "primary", onClick: onApply, shape: "circular", children: mergedLabels.applyButton })
+    ] })
+  ] }) }) });
+};
+
+// src/components/DateFilter/DateFilter.constants.ts
+var DEFAULT_LABELS4 = {
+  prevButtonAriaLabel: "Previous dates",
+  nextButtonAriaLabel: "Next dates",
+  calendarButtonAriaLabel: "Open calendar"
+};
+var DEFAULT_SCROLL_AMOUNT = 150;
+var useStyles16 = makeStyles({
+  container: {
+    display: "flex",
+    alignItems: "stretch",
+    gap: "8px",
+    overflowX: "auto",
+    maxWidth: "95vw",
+    boxSizing: "border-box"
+  },
+  compoundHeight: {
+    // height: '63px',
+  },
+  item: {
+    minWidth: "clamp(50px, 10vw, 140px)",
+    scrollSnapAlign: "start",
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    height: "63px",
+    "@media (min-width: 1600px)": {
+      flexGrow: 1,
+      flexShrink: 1,
+      minWidth: "120px"
+    }
+  },
+  scrollContainer: {
+    display: "flex",
+    overflowX: "auto",
+    scrollSnapType: "x mandatory",
+    gap: "12px",
+    scrollbarWidth: "none",
+    msOverflowStyle: "none",
+    minWidth: 0,
+    flexGrow: 1,
+    "@media (min-width: 1600px)": {
+      overflowX: "visible",
+      justifyContent: "stretch"
+    },
+    "::-webkit-scrollbar": {
+      display: "none"
+    }
+  },
+  compoundButton: {
+    width: "100%",
+    textAlign: "center",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: "4px",
+    backgroundColor: "white"
+  },
+  button: {
+    minWidth: "48px",
+    height: "100%"
+  },
+  buttonCalendar: {
+    minWidth: "65px",
+    height: "100%"
+  },
+  selected: {
+    color: tokens.colorBrandBackground,
+    ...shorthands.borderColor(tokens.colorBrandBackground),
+    ":hover": {
+      backgroundColor: tokens.colorBrandBackgroundHover,
+      ...shorthands.borderColor(tokens.colorBrandBackgroundHover),
+      color: tokens.colorNeutralForegroundOnBrand
+    }
+  }
+});
+var DateFilter = ({
+  dates,
+  selectedDate,
+  onDateClick,
+  onCalendarClick,
+  showNavigation = true,
+  showCalendarButton = true,
+  scrollAmount = DEFAULT_SCROLL_AMOUNT,
+  labels
+}) => {
+  const styles = useStyles16();
+  const scrollRef = useRef(null);
+  const mergedLabels = { ...DEFAULT_LABELS4, ...labels };
+  const handlePrev = () => {
+    scrollRef.current?.scrollBy({ left: -scrollAmount, behavior: "smooth" });
+  };
+  const handleNext = () => {
+    scrollRef.current?.scrollBy({ left: scrollAmount, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    showNavigation && /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsx("div", { className: styles.compoundHeight, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:chevron-left-32-regular" }),
+        size: "small",
+        onClick: handlePrev,
+        className: styles.button,
+        "aria-label": mergedLabels.prevButtonAriaLabel
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx("div", { ref: scrollRef, className: styles.scrollContainer, children: dates.map((date, index) => /* @__PURE__ */ jsx("div", { className: styles.item, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        appearance: "outline",
+        type: "button",
+        className: mergeClasses(
+          styles.compoundButton,
+          selectedDate === date.label ? styles.selected : ""
+        ),
+        onClick: () => onDateClick(date.label),
+        children: [
+          /* @__PURE__ */ jsx(Caption2Strong, { truncate: true, children: date.label }),
+          /* @__PURE__ */ jsx(Caption2Strong, { truncate: true, children: date.price })
+        ]
+      }
+    ) }, index)) }),
+    showNavigation && /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsx("div", { className: styles.compoundHeight, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:chevron-right-32-filled" }),
+        onClick: handleNext,
+        className: styles.button,
+        size: "small",
+        "aria-label": mergedLabels.nextButtonAriaLabel
+      }
+    ) }) }),
+    showCalendarButton && /* @__PURE__ */ jsx("div", { className: styles.compoundHeight, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:calendar-32-regular" }),
+        className: styles.buttonCalendar,
+        onClick: onCalendarClick,
+        "aria-label": mergedLabels.calendarButtonAriaLabel
+      }
+    ) })
+  ] });
+};
+
+// src/components/ModalSearchTicket/ModalSearchTicket.constants.ts
+var DEFAULT_FORM_VALUES = {
+  from: "",
+  to: "",
+  startDate: "",
+  roundTrip: false,
+  endDate: "",
+  serviceClass: "",
+  typeOfService: "",
+  passenger: ""
+};
+var useStyles17 = makeStyles({
+  dialogSurface: {
+    maxWidth: "900px",
+    width: "100%"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+    paddingTop: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    paddingBottom: "20px"
+  },
+  formInnerRow: {
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      margin: "0 !important"
+    }
+  },
+  formFieldRow: {
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      gap: "12px !important"
+    }
+  },
+  formField: {
+    padding: "16px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    borderRadius: tokens.borderRadiusXLarge,
+    border: "1px solid " + tokens.colorNeutralStroke1,
+    height: "100%",
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      padding: "20px",
+      borderRadius: tokens.borderRadiusXLarge
+    }
+  },
+  deviderButton: {
+    display: "flex",
+    justifyContent: "center",
+    position: "absolute",
+    left: "18px",
+    bottom: "-10px",
+    width: "90%"
+  },
+  serviceCol: {
+    [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
+      paddingLeft: "15px !important",
+      paddingRight: "15px !important",
+      marginTop: "16px"
+    }
+  },
+  searchButton: {
+    width: "100%",
+    borderRadius: tokens.borderRadiusCircular
+  },
+  buttonSwitch: {
+    background: tokens.colorNeutralBackground1,
+    boxShadow: `0 1px 2px 0 ${tokens.colorNeutralShadowKey}, 0 0 2px 0 ${tokens.colorNeutralShadowAmbient}`
+  },
+  switchIcon: {
+    display: "inline-flex",
+    transition: "transform 0.3s ease"
+  },
+  switchIconRotate: {
+    transform: "rotate(180deg)"
+  }
+});
+var ModalSearchTicket = ({
+  open,
+  onClose,
+  defaultValues,
+  onSelectOrigin,
+  onSelectDestination,
+  onFromChange,
+  onSelectDepartureDate,
+  onSelectReturnDate,
+  onSelectServiceClass,
+  onSelectTypeOfService,
+  onSelectPassenger,
+  onSwitchHarbor,
+  onSwitchClick,
+  onRoundTripChange,
+  onSubmit,
+  toDisabled = false,
+  endDateDisabled = false,
+  serviceClassDisabled = false,
+  typeOfServiceDisabled = false,
+  roundTripDisabled = false,
+  isSubmitDisabled = false,
+  switchDisabled = false,
+  isRotating = false,
+  showPassengerField = false,
+  showRoundTrip = true,
+  ...props
+}) => {
+  const styles = useStyles17();
+  const { control, setValue, handleSubmit, watch } = useForm({
+    defaultValues: {
+      ...DEFAULT_FORM_VALUES,
+      ...defaultValues
+    }
+  });
+  const roundTripValue = useWatch({
+    control,
+    name: "roundTrip",
+    defaultValue: defaultValues?.roundTrip || false
+  });
+  const isUpdatingFromProps = useRef(false);
+  useEffect(() => {
+    if (defaultValues) {
+      isUpdatingFromProps.current = true;
+      Object.entries(defaultValues).forEach(([key, value]) => {
+        setValue(key, value);
+      });
+      setTimeout(() => {
+        isUpdatingFromProps.current = false;
+      }, 0);
+    }
+  }, [defaultValues, setValue]);
+  useEffect(() => {
+    if (onRoundTripChange && !isUpdatingFromProps.current) {
+      onRoundTripChange(roundTripValue);
+    }
+  }, [roundTripValue, onRoundTripChange]);
+  const handleFromChange = () => {
+    setValue("to", "");
+    if (onFromChange) {
+      onFromChange();
+    }
+  };
+  const onFormSubmit = (data) => {
+    if (onSubmit) {
+      onSubmit(data);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => !data.open && onClose(),
+      ...props,
+      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+        /* @__PURE__ */ jsx(
+          DialogTitle,
+          {
+            action: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                className: styles.closeButton,
+                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
+                onClick: onClose
+              }
+            ),
+            children: "Cari Jadwal Lainnya"
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit(onFormSubmit), children: /* @__PURE__ */ jsxs(Row, { style: { width: "100%" }, className: styles.formInnerRow, children: [
+          /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, lg: 12, xl: 6, xxl: 6, xxxl: 6, children: /* @__PURE__ */ jsxs(Row, { style: { gap: "16px" }, className: styles.formFieldRow, children: [
+            /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { children: [
+              /* @__PURE__ */ jsxs(
+                Col,
+                {
+                  xs: 12,
+                  sm: 12,
+                  md: 12,
+                  lg: 12,
+                  xl: 12,
+                  xxl: 12,
+                  xxxl: 12,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      InputDynamic_default,
+                      {
+                        name: "from",
+                        label: "Dari",
+                        control,
+                        type: "text",
+                        contentBefore: /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            icon: "fluent:vehicle-ship-16-filled",
+                            color: tokens.colorBrandBackground
+                          }
+                        ),
+                        appearance: "filled-lighter",
+                        size: "medium",
+                        placeholder: "Pilih pelabuhan asal",
+                        onClick: onSelectOrigin,
+                        onChange: handleFromChange,
+                        validationRules: {
+                          required: "Pelabuhan asal wajib diisi"
+                        },
+                        required: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: styles.deviderButton, children: [
+                      /* @__PURE__ */ jsx(Divider, {}),
+                      " ",
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          onClick: onSwitchClick,
+                          className: styles.buttonSwitch,
+                          shape: "circular",
+                          appearance: "secondary",
+                          size: "large",
+                          disabled: switchDisabled,
+                          icon: /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: `${styles.switchIcon} ${isRotating ? styles.switchIconRotate : ""}`,
+                              children: /* @__PURE__ */ jsx(
+                                "img",
+                                {
+                                  src: "/assets/images/icons/switch.svg",
+                                  alt: "Switch",
+                                  width: 26,
+                                  height: 26
+                                }
+                              )
+                            }
+                          )
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Col,
+                {
+                  xs: 12,
+                  sm: 12,
+                  md: 12,
+                  lg: 12,
+                  xl: 12,
+                  xxl: 12,
+                  xxxl: 12,
+                  children: /* @__PURE__ */ jsx(
+                    InputDynamic_default,
+                    {
+                      name: "to",
+                      label: "Ke",
+                      control,
+                      type: "text",
+                      contentBefore: /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          icon: "fluent:location-24-filled",
+                          color: tokens.colorBrandBackground
+                        }
+                      ),
+                      disabled: toDisabled,
+                      appearance: "filled-lighter",
+                      size: "medium",
+                      placeholder: "Pilih pelabuhan tujuan",
+                      onClick: onSelectDestination,
+                      validationRules: {
+                        required: "Pelabuhan tujuan wajib diisi"
+                      },
+                      required: true
+                    }
+                  )
+                }
+              )
+            ] }) }) }),
+            /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { style: { height: "100%" }, children: [
+              /* @__PURE__ */ jsx(
+                Col,
+                {
+                  xs: 6,
+                  sm: 6,
+                  md: 6,
+                  lg: 6,
+                  xl: 6,
+                  xxl: 6,
+                  xxxl: 6,
+                  children: /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsx(
+                    InputDynamic_default,
+                    {
+                      name: "startDate",
+                      label: "Tanggal Berangkat",
+                      control,
+                      type: "text",
+                      contentBefore: /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          icon: "fluent:calendar-24-filled",
+                          color: tokens.colorBrandBackground
+                        }
+                      ),
+                      appearance: "filled-lighter",
+                      size: "medium",
+                      placeholder: "Pilih Tanggal Berangkat",
+                      onClick: onSelectDepartureDate,
+                      required: true,
+                      validationRules: {
+                        required: "Tanggal Berangkat wajib diisi"
+                      }
+                    }
+                  ) })
+                }
+              ),
+              showRoundTrip && /* @__PURE__ */ jsx(
+                Col,
+                {
+                  xs: 6,
+                  sm: 6,
+                  md: 6,
+                  lg: 6,
+                  xl: 6,
+                  xxl: 6,
+                  xxxl: 6,
+                  style: { display: "flex", justifyContent: "end" },
+                  children: /* @__PURE__ */ jsx(
+                    InputDynamic_default,
+                    {
+                      name: "roundTrip",
+                      label: "Pulang Pergi",
+                      control,
+                      type: "switch",
+                      disabled: roundTripDisabled,
+                      size: "medium"
+                    }
+                  )
+                }
+              ),
+              roundTripValue && /* @__PURE__ */ jsx(
+                Col,
+                {
+                  xs: 12,
+                  sm: 12,
+                  md: 12,
+                  lg: 12,
+                  xl: 12,
+                  xxl: 12,
+                  xxxl: 12,
+                  children: /* @__PURE__ */ jsx(
+                    InputDynamic_default,
+                    {
+                      name: "endDate",
+                      label: "Tanggal Pulang",
+                      control,
+                      type: "text",
+                      contentBefore: /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          icon: "fluent:calendar-24-filled",
+                          color: tokens.colorBrandBackground
+                        }
+                      ),
+                      appearance: "filled-lighter",
+                      size: "medium",
+                      placeholder: "Pilih Tanggal Pulang",
+                      onClick: onSelectReturnDate,
+                      disabled: endDateDisabled,
+                      style: { borderColor: "transparent" },
+                      required: roundTripValue,
+                      validationRules: {
+                        required: "Tanggal Pulang wajib diisi"
+                      }
+                    }
+                  )
+                }
+              )
+            ] }) }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Visible, { xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsx(
+            Col,
+            {
+              xs: 12,
+              sm: 12,
+              lg: 12,
+              xl: 1,
+              xxl: 1,
+              xxxl: 1,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ jsx(Divider, { vertical: true, style: { height: "100%" } })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Col,
+            {
+              xs: 12,
+              sm: 12,
+              lg: 12,
+              xl: 5,
+              xxl: 5,
+              xxxl: 5,
+              className: styles.serviceCol,
+              children: /* @__PURE__ */ jsx(Row, { style: { height: "100%", gap: "16px" }, children: /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { style: { height: "100%", gap: "16px" }, children: [
+                /* @__PURE__ */ jsx(
+                  Col,
+                  {
+                    xs: 12,
+                    sm: 12,
+                    md: 12,
+                    lg: 12,
+                    xl: 12,
+                    xxl: 12,
+                    xxxl: 12,
+                    children: /* @__PURE__ */ jsx(
+                      InputDynamic_default,
+                      {
+                        name: "serviceClass",
+                        label: "Kelas Layanan",
+                        control,
+                        type: "text",
+                        contentBefore: /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            icon: "fluent:ribbon-star-24-filled",
+                            color: tokens.colorBrandBackground
+                          }
+                        ),
+                        appearance: "filled-lighter",
+                        size: "medium",
+                        placeholder: "Pilih Kelas Layanan",
+                        onClick: onSelectServiceClass,
+                        required: true,
+                        disabled: serviceClassDisabled
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Col,
+                  {
+                    xs: 12,
+                    sm: 12,
+                    md: 12,
+                    lg: 12,
+                    xl: 12,
+                    xxl: 12,
+                    xxxl: 12,
+                    children: /* @__PURE__ */ jsx(
+                      InputDynamic_default,
+                      {
+                        name: "typeOfService",
+                        label: "Jenis penumpang",
+                        control,
+                        type: "text",
+                        contentBefore: /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            icon: "fluent:apps-list-24-filled",
+                            color: tokens.colorBrandBackground
+                          }
+                        ),
+                        appearance: "filled-lighter",
+                        size: "medium",
+                        placeholder: "Pilih Jenis penumpang",
+                        onClick: onSelectTypeOfService,
+                        required: true,
+                        disabled: typeOfServiceDisabled
+                      }
+                    )
+                  }
+                ),
+                showPassengerField && /* @__PURE__ */ jsx(
+                  Col,
+                  {
+                    xs: 12,
+                    sm: 12,
+                    md: 12,
+                    lg: 12,
+                    xl: 12,
+                    xxl: 12,
+                    xxxl: 12,
+                    children: /* @__PURE__ */ jsx(
+                      InputDynamic_default,
+                      {
+                        required: true,
+                        name: "passenger",
+                        label: "Penumpang",
+                        control,
+                        type: "text",
+                        contentBefore: /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            icon: "fluent:people-24-filled",
+                            color: tokens.colorBrandBackground
+                          }
+                        ),
+                        appearance: "filled-lighter",
+                        size: "medium",
+                        placeholder: "Pilih Penumpang",
+                        onClick: onSelectPassenger
+                      }
+                    )
+                  }
+                )
+              ] }) }) }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Col,
+            {
+              xs: 12,
+              sm: 12,
+              lg: 12,
+              xl: 12,
+              xxl: 12,
+              xxxl: 12,
+              style: { paddingTop: "2rem" },
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: styles.searchButton,
+                  appearance: "primary",
+                  size: "large",
+                  type: "submit",
+                  icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:vehicle-ship-20-filled" }),
+                  disabled: isSubmitDisabled,
+                  children: "Cari Tiket"
+                }
+              )
+            }
+          )
+        ] }) }) })
+      ] }) })
+    }
+  );
+};
+
+export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CardTicketSearch, DEFAULT_LABELS as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS2 as CardTicketSearchSummaryDefaultLabels, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_CLASSES, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS4 as DateFilterDefaultLabels, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS3 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, SortMenu, getModalPreset, getSortLabel };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map