@asdp/ferryui 0.1.22-dev.9336 → 0.1.22-dev.9339

package/dist/index.js

@@ -221,28 +221,8 @@ var DEFAULT_LABELS2 = {
   }
 };
 
-// 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 = {
+var brandColors = {
   "10": "#001a1bff",
   "20": "#02383bff",
   "30": "#002426",
@@ -260,7 +240,7 @@ var brandColors2 = {
   "150": "#fdfdff",
   "160": "#ffffff"
 };
-var spacing2 = {
+var spacing = {
   "360": 36};
 var fontWeight = {
   "Medium": 500};
@@ -268,36 +248,31 @@ var sharedColors = {
   "Shared_Cranberry_Primary": "#c50f1f",
   "Shared_Red_Primary": "#d13438",
   "Shared_Green_Primary": "#107c10"};
-var lightModeColors2 = {
+var lightModeColors = {
   "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
   "Brand_Stroke_1_Rest": "#00B3BD"};
 var tokensV2_default = {
-  lightModeColors: lightModeColors2};
+  lightModeColors};
 
 // 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"]
+  10: brandColors["10"],
+  20: brandColors["20"],
+  30: brandColors["30"],
+  40: brandColors["40"],
+  50: brandColors["50"],
+  60: brandColors["60"],
+  70: brandColors["70"],
+  80: brandColors["80"],
+  90: brandColors["90"],
+  100: brandColors["100"],
+  110: brandColors["110"],
+  120: brandColors["120"],
+  130: brandColors["130"],
+  140: brandColors["140"],
+  150: brandColors["150"],
+  160: brandColors["160"]
 };
-
-// src/constants/designTokens.ts
-typeof window !== "undefined" && window.location.pathname.startsWith("/v2");
 var designTokens = {
   // Breakpoints for responsive design
   breakpoints: {
@@ -492,7 +467,7 @@ var useStyles2 = reactComponents.makeStyles({
   carousel: {},
   carouselContainer: {
     display: "flex",
-    gap: `${spacing2[360]}px`,
+    gap: `${spacing[360]}px`,
     alignItems: "center",
     justifyContent: "start",
     [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
@@ -593,6 +568,7 @@ var useStyles2 = reactComponents.makeStyles({
   },
   singleIndicatorWrapper: {
     display: "flex",
+    width: "100%",
     justifyContent: "center",
     alignItems: "center",
     marginTop: reactComponents.tokens.spacingVerticalXXL,
@@ -759,7 +735,7 @@ var CarouselWithCustomNav = ({
             className: styles.singleIndicatorWrapper,
             style: {
               backgroundColor: darkNavBackground ? reactComponents.tokens.colorSubtleBackgroundInverted : reactComponents.tokens.colorSubtleBackground,
-              justifyContent: align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center"
+              justifyContent: "center"
             },
             children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.singleIndicatorDot })
           }
@@ -767,9 +743,10 @@ var CarouselWithCustomNav = ({
           reactComponents.CarouselNav,
           {
             style: {
+              width: "100%",
               backgroundColor: darkNavBackground ? reactComponents.tokens.colorSubtleBackgroundInverted : reactComponents.tokens.colorSubtleBackground,
               marginTop: reactComponents.tokens.spacingVerticalXXL,
-              justifyContent: align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center"
+              justifyContent: "center"
             },
             appearance: "brand",
             className: styles.carouselNavButton,
@@ -1710,7 +1687,7 @@ var CardTicket = ({
                 {
                   onClick: onSelectTicket,
                   appearance: "primary",
-                  style: { backgroundColor: brandColors2["60"] },
+                  style: { backgroundColor: brandColors["60"] },
                   size: "medium",
                   shape: "circular",
                   icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
@@ -2214,7 +2191,7 @@ var useStyles7 = reactComponents.makeStyles({
     gap: "12px",
     width: "100%",
     "&:hover": {
-      backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
+      backgroundColor: brandColors["140"]
     },
     // Tablet: compact column, fixed width, description visible (1 line)
     [`@media (${BP_TABLET2})`]: {
@@ -2236,10 +2213,10 @@ var useStyles7 = reactComponents.makeStyles({
     }
   },
   menuItemActive: {
-    backgroundColor: reactComponents.tokens.colorNeutralBackground3,
+    backgroundColor: brandColors["140"],
     color: reactComponents.tokens.colorNeutralForeground1,
     "&:hover": {
-      backgroundColor: reactComponents.tokens.colorNeutralBackground3Hover
+      backgroundColor: brandColors["140"]
     }
   },
   // Icon wrapper — rounded bg on mobile
@@ -2379,13 +2356,42 @@ var CardServiceMenu = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.menuList, children: [
       isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses(styles.menuItem, styles.skeletonOverride), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { className: styles.logo, style: { borderRadius: "50%" } }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60%", height: "16px" } }) }),
-            showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { className: styles.description, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "90%", height: "12px", marginTop: "4px" } }) })
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: reactComponents.mergeClasses(
+              styles.menuItem,
+              styles.skeletonOverride
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.SkeletonItem,
+                {
+                  className: styles.logo,
+                  style: { borderRadius: "50%" }
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.SkeletonItem,
+                  {
+                    style: { width: "60%", height: "16px" }
+                  }
+                ) }),
+                showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { className: styles.description, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.SkeletonItem,
+                  {
+                    style: {
+                      width: "90%",
+                      height: "12px",
+                      marginTop: "4px"
+                    }
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ),
         index < skeletonCount - 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.dividerHorizontal }),
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, className: styles.dividerVertical })
@@ -4390,13 +4396,16 @@ var useStyles9 = reactComponents.makeStyles({
     display: "flex",
     justifyContent: "center",
     position: "absolute",
-    left: "18px",
+    // left: "1px",
     bottom: "-16px",
-    width: "90%"
+    width: "100%"
   },
   buttonSwitch: {
     background: reactComponents.tokens.colorNeutralBackground1,
-    boxShadow: `0 1px 2px 0 ${reactComponents.tokens.colorNeutralShadowKey}, 0 0 2px 0 ${reactComponents.tokens.colorNeutralShadowAmbient}`
+    boxShadow: `0 1px 2px 0 ${reactComponents.tokens.colorNeutralShadowKey}, 0 0 2px 0 ${reactComponents.tokens.colorNeutralShadowAmbient}`,
+    position: "absolute",
+    right: "1rem",
+    bottom: "-20px"
   },
   switchIcon: {
     display: "inline-flex",
@@ -4427,11 +4436,15 @@ var useStyles9 = reactComponents.makeStyles({
     }
   },
   formContainerCol: {
+    paddingTop: "1rem !important",
+    paddingBottom: "1rem !important",
     [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
       paddingLeft: "20px !important",
       paddingRight: "20px !important",
       marginBottom: "1rem",
-      marginTop: "8rem"
+      marginTop: "8rem",
+      paddingTop: "0px !mportant",
+      paddingBottom: "0px !mportant"
     }
   },
   serviceCol: {
@@ -4609,7 +4622,7 @@ var CardTicketSearch = ({
               className: styles.formContainerCol,
               children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit(handleFormSubmit), children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { width: "100%" }, className: styles.formInnerRow, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 6, xxl: 6, xxxl: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { gap: "16px" }, className: styles.formFieldRow, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(
                       reactGridSystem.Col,
                       {
@@ -4620,6 +4633,9 @@ var CardTicketSearch = ({
                         xl: 12,
                         xxl: 12,
                         xxxl: 12,
+                        style: {
+                          borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`
+                        },
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             InputDynamic_default,
@@ -4646,37 +4662,33 @@ var CardTicketSearch = ({
                               required: true
                             }
                           ),
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.deviderButton, children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-                            " ",
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.Button,
-                              {
-                                onClick: onSwitchClick,
-                                className: styles.buttonSwitch,
-                                shape: "circular",
-                                appearance: "secondary",
-                                size: "large",
-                                disabled: switchDisabled,
-                                "aria-label": labels.switchAriaLabel,
-                                icon: /* @__PURE__ */ jsxRuntime.jsx(
-                                  "div",
-                                  {
-                                    className: `${styles.switchIcon} ${isRotating ? styles.switchIconRotate : ""}`,
-                                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                                      "img",
-                                      {
-                                        src: "/assets/images/icons/switch.svg",
-                                        alt: labels.switchAriaLabel,
-                                        width: 26,
-                                        height: 26
-                                      }
-                                    )
-                                  }
-                                )
-                              }
-                            )
-                          ] })
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            reactComponents.Button,
+                            {
+                              onClick: onSwitchClick,
+                              className: styles.buttonSwitch,
+                              shape: "circular",
+                              appearance: "secondary",
+                              size: "large",
+                              disabled: switchDisabled,
+                              "aria-label": labels.switchAriaLabel,
+                              icon: /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
+                                {
+                                  className: `${styles.switchIcon} ${isRotating ? styles.switchIconRotate : ""}`,
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    "img",
+                                    {
+                                      src: "/assets/images/icons/switch.svg",
+                                      alt: labels.switchAriaLabel,
+                                      width: 26,
+                                      height: 26
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          )
                         ]
                       }
                     ),
@@ -4851,6 +4863,40 @@ var CardTicketSearch = ({
                     },
                     className: styles.serviceCol,
                     children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        reactGridSystem.Col,
+                        {
+                          xs: 12,
+                          sm: 12,
+                          md: 12,
+                          lg: 12,
+                          xl: 12,
+                          xxl: 12,
+                          xxxl: 12,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            InputDynamic_default,
+                            {
+                              name: "serviceClass",
+                              label: labels.serviceClassLabel,
+                              control,
+                              type: "text",
+                              contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                                react.Icon,
+                                {
+                                  icon: "fluent:ribbon-star-24-filled",
+                                  color: reactComponents.tokens.colorBrandBackground
+                                }
+                              ),
+                              appearance: "filled-lighter",
+                              size: "large",
+                              placeholder: labels.placeholderTypeClass,
+                              onClick: onServiceClassClick,
+                              required: true,
+                              disabled: serviceClassDisabled
+                            }
+                          )
+                        }
+                      ) }) }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           reactGridSystem.Col,
@@ -4862,40 +4908,9 @@ var CardTicketSearch = ({
                             xl: 12,
                             xxl: 12,
                             xxxl: 12,
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              InputDynamic_default,
-                              {
-                                name: "serviceClass",
-                                label: labels.serviceClassLabel,
-                                control,
-                                type: "text",
-                                contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                                  react.Icon,
-                                  {
-                                    icon: "fluent:ribbon-star-24-filled",
-                                    color: reactComponents.tokens.colorBrandBackground
-                                  }
-                                ),
-                                appearance: "filled-lighter",
-                                size: "large",
-                                placeholder: labels.placeholderTypeClass,
-                                onClick: onServiceClassClick,
-                                required: true,
-                                disabled: serviceClassDisabled
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          reactGridSystem.Col,
-                          {
-                            xs: 12,
-                            sm: 12,
-                            md: 12,
-                            lg: 12,
-                            xl: 12,
-                            xxl: 12,
-                            xxxl: 12,
+                            style: {
+                              borderBottom: showPassengerField ? `1px solid ${reactComponents.tokens.colorNeutralStroke1}` : "none"
+                            },
                             children: /* @__PURE__ */ jsxRuntime.jsx(
                               InputDynamic_default,
                               {
@@ -4921,7 +4936,7 @@ var CardTicketSearch = ({
                             )
                           }
                         ),
-                        showPassengerField && /* @__PURE__ */ jsxRuntime.jsx(
+                        showPassengerField && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
                           reactGridSystem.Col,
                           {
                             xs: 12,
@@ -4953,7 +4968,7 @@ var CardTicketSearch = ({
                               }
                             )
                           }
-                        )
+                        ) })
                       ] }) }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
                         reactComponents.Button,
@@ -5487,7 +5502,7 @@ var useStyles11 = reactComponents.makeStyles({
   circularButton: {
     borderRadius: reactComponents.tokens.borderRadius3XLarge,
     border: `1px solid ${reactComponents.tokens.colorBrandBackground}`,
-    backgroundColor: brandColors2["140"],
+    backgroundColor: brandColors["140"],
     gap: "5px"
   },
   buttonContent: {
@@ -14169,7 +14184,7 @@ var FileUpload = React__default.default.forwardRef(
                                   icon: "fluent:document-pdf-32-regular",
                                   width: 32,
                                   height: 32,
-                                  style: { flexShrink: 0, color: brandColors2[80] }
+                                  style: { flexShrink: 0, color: brandColors[80] }
                                 }
                               )
                             }
@@ -14188,7 +14203,7 @@ var FileUpload = React__default.default.forwardRef(
                           {
                             appearance: "transparent",
                             size: "small",
-                            style: { color: brandColors2[80] },
+                            style: { color: brandColors[80] },
                             onClick: (e) => handlePreview(e, displayFile),
                             children: mergedLabels.preview
                           }
@@ -14245,7 +14260,7 @@ var FileUpload = React__default.default.forwardRef(
                                 {
                                   icon: "fluent:arrow-upload-32-filled",
                                   style: {
-                                    color: brandColors2[80],
+                                    color: brandColors[80],
                                     maxWidth: "32px",
                                     width: "32px",
                                     maxHeight: "32px",
@@ -14294,7 +14309,7 @@ var FileUpload = React__default.default.forwardRef(
                                               icon: "fluent:document-pdf-32-regular",
                                               width: 32,
                                               height: 32,
-                                              style: { flexShrink: 0, color: brandColors2[80] }
+                                              style: { flexShrink: 0, color: brandColors[80] }
                                             }
                                           )
                                         }
@@ -14350,7 +14365,7 @@ var FileUpload = React__default.default.forwardRef(
                                               {
                                                 appearance: "transparent",
                                                 size: "small",
-                                                style: { color: brandColors2[80] },
+                                                style: { color: brandColors[80] },
                                                 onClick: (e) => handlePreview(e, displayFile),
                                                 children: mergedLabels.preview
                                               }
@@ -14404,7 +14419,7 @@ var FileUpload = React__default.default.forwardRef(
                 appearance: "transparent",
                 size: "small",
                 icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowDownloadRegular, {}),
-                style: { display: "flex", justifyContent: "end", color: brandColors2[80], width: "100%" },
+                style: { display: "flex", justifyContent: "end", color: brandColors[80], width: "100%" },
                 onClick: (e) => handleDownloadFile(e, displayFile),
                 disabled: !(displayFile instanceof File),
                 children: mergedLabels.downloadTemplateDocument
@@ -14527,6 +14542,107 @@ var CardProfileMenu = ({
   ) });
 };
 
+// src/components/NoContent/NoContent.constants.ts
+var DEFAULT_LABELS40 = {
+  id: {
+    defaultImageAlt: "Tidak ada konten",
+    defaultTitle: "Data {konten} belum bisa dimuat",
+    defaultMessage: "Silahkan coba muat ulang halaman ini atau cek kembali beberapa saat lagi.",
+    defaultButtonText: "Muat Ulang"
+  },
+  en: {
+    defaultImageAlt: "No content available",
+    defaultTitle: "Data {content} could not be loaded",
+    defaultMessage: "Please try reloading this page or check back in a few moments.",
+    defaultButtonText: "Reload"
+  }
+};
+var getFormattedDefaultTitle = (template, content) => {
+  if (content) {
+    return template.replace(/\{(konten|content)\}/g, content);
+  }
+  return template.replace(/\s*\{(konten|content)\}\s*/g, " ").trim();
+};
+var useStyles42 = reactComponents.makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: reactComponents.tokens.spacingVerticalL,
+    textAlign: "center",
+    paddingTop: reactComponents.tokens.spacingVerticalXXL,
+    paddingBottom: reactComponents.tokens.spacingVerticalXXL,
+    paddingLeft: reactComponents.tokens.spacingHorizontalXL,
+    paddingRight: reactComponents.tokens.spacingHorizontalXL,
+    width: "100%"
+  },
+  image: {
+    maxWidth: "100%",
+    height: "auto"
+  },
+  textContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingVerticalS,
+    maxWidth: "400px"
+  },
+  title: {
+    fontWeight: "600"
+  },
+  message: {
+    color: reactComponents.tokens.colorNeutralForeground3,
+    textAlign: "center"
+  }
+});
+var NoContent = ({
+  title,
+  content,
+  message,
+  imageSrc = "/assets/images/illustrations/no-content.svg",
+  imageAlt,
+  imageWidth = 240,
+  imageHeight = 180,
+  actionButton,
+  language = "id",
+  labels,
+  className
+}) => {
+  const styles = useStyles42();
+  const mergedLabels = { ...DEFAULT_LABELS40[language], ...labels };
+  const displayTitle = title ?? getFormattedDefaultTitle(mergedLabels.defaultTitle, content);
+  const displayMessage = message ?? mergedLabels.defaultMessage;
+  const displayImageAlt = imageAlt ?? mergedLabels.defaultImageAlt;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses(styles.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: imageSrc,
+        alt: displayImageAlt,
+        width: imageWidth,
+        height: imageHeight,
+        className: styles.image
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.title, children: displayTitle }),
+      typeof displayMessage === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.message, children: displayMessage }) : displayMessage
+    ] }),
+    actionButton && /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Button,
+      {
+        type: "button",
+        appearance: actionButton.appearance || "primary",
+        onClick: actionButton.onClick,
+        shape: "circular",
+        style: { width: "100%" },
+        children: actionButton.text
+      }
+    )
+  ] });
+};
+
 exports.API_CONFIG = API_CONFIG;
 exports.API_ENDPOINTS = API_ENDPOINTS;
 exports.API_ERROR_MESSAGES = API_ERROR_MESSAGES;
@@ -14590,6 +14706,8 @@ exports.ModalSelectDate = ModalSelectDate;
 exports.ModalService = ModalService;
 exports.ModalTotalPassengers = ModalTotalPassengers;
 exports.ModalTypeOfService = ModalTypeOfService;
+exports.NoContent = NoContent;
+exports.NoContentDefaultLabels = DEFAULT_LABELS40;
 exports.PASSENGER_TYPE = PASSENGER_TYPE;
 exports.SortMenu = SortMenu;
 exports.Stepper = Stepper;