@asdp/ferryui 0.1.22-dev.8732 → 0.1.22-dev.8782

package/dist/index.mjs

@@ -1,6 +1,7 @@
-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, Subtitle1, Switch, Body1Stronger, Caption1Stronger, Display, Image, Title1, DialogTrigger, TabList, Tab, Body2, typographyStyles, Textarea, Link } from '@fluentui/react-components';
+import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, 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, Subtitle1, Switch, Body1Stronger, Caption1Stronger, Display, Image, Title1, DialogTrigger, TabList, Tab, Body2, typographyStyles, Textarea, Link } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React5, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, Fragment as Fragment$1 } from 'react';
+import { DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular } from '@fluentui/react-icons';
 import { Row, Col, Visible } from 'react-grid-system';
 import { Icon } from '@iconify/react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
@@ -9,7 +10,6 @@ import Select from 'react-select';
 import { Calendar } from '@fluentui/react-calendar-compat';
 import moment from 'moment';
 import { Range } from 'react-range';
-import { SubtractRegular, AddRegular, DeleteRegular, InfoRegular } from '@fluentui/react-icons';
 
 // src/components/ModalIllustration/ModalIllustration.constants.ts
 var DEFAULT_LABELS = {
@@ -203,8 +203,148 @@ var DEFAULT_LABELS2 = {
     announcementTemplate: "Carousel slide {index} of {total}"
   }
 };
+
+// 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 spacing2 = {
+  "360": 36};
+var fontWeight = {
+  "Medium": 500};
+var sharedColors = {
+  "Shared_Cranberry_Primary": "#c50f1f",
+  "Shared_Red_Primary": "#d13438",
+  "Shared_Green_Primary": "#107c10"};
+var lightModeColors2 = {
+  "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
+  "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 useStyles2 = makeStyles({
   carousel: {},
+  carouselContainer: {
+    display: "flex",
+    gap: `${spacing2[360]}px`,
+    alignItems: "center",
+    justifyContent: "center",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      gap: tokens.spacingVerticalXS
+    }
+  },
+  carouselContainerNoNav: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
   customCarouselNav: {
     display: "flex",
     gap: tokens.spacingHorizontalXS,
@@ -213,6 +353,39 @@ var useStyles2 = makeStyles({
     ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingVerticalM),
     borderRadius: tokens.borderRadiusCircular
   },
+  closeButton: {
+    width: "max-content",
+    height: "max-content",
+    backgroundColor: tokens.colorNeutralForeground2,
+    color: tokens.colorNeutralBackground1,
+    position: "absolute",
+    zIndex: 1,
+    insetInlineEnd: "0px",
+    top: "2%",
+    [`@media (max-width: ${extendedTokens.breakpointSm})`]: {
+      top: "2%"
+    }
+  },
+  closeButtonWithNav: {
+    insetInlineEnd: "14%",
+    [`@media (max-width: ${extendedTokens.breakpointSm})`]: {
+      insetInlineEnd: "15% !important"
+    },
+    [`@media (min-width: ${extendedTokens.breakpointMd}) and (max-width: ${extendedTokens.breakpointLg})`]: {
+      insetInlineEnd: "13% !important"
+    }
+  },
+  closeButtonWithoutNav: {
+    insetInlineEnd: "10px"
+  },
+  customeCarouselButton: {
+    borderRadius: tokens.borderRadiusCircular,
+    backgroundColor: tokens.colorNeutralBackgroundInverted,
+    color: tokens.colorNeutralBackground1,
+    ":hover": {
+      backgroundColor: tokens.colorNeutralForeground2
+    }
+  },
   carouselNavButton: {
     "& button": {
       padding: 0,
@@ -274,7 +447,10 @@ var CarouselWithCustomNav = ({
   ariaLabel: deprecatedAriaLabel,
   darkNavBackground = true,
   className,
-  cardFocus = false
+  cardFocus = false,
+  showNavButtons = false,
+  showCloseButton = false,
+  onCloseClick
 }) => {
   const styles = useStyles2();
   const [internalIndex, setInternalIndex] = useState(0);
@@ -315,20 +491,53 @@ var CarouselWithCustomNav = ({
       activeIndex,
       onActiveIndexChange: (_, data) => handleIndexChange(data.index),
       children: [
-        /* @__PURE__ */ jsx(CarouselViewport, { children: /* @__PURE__ */ jsx(
-          CarouselSlider,
-          {
-            cardFocus,
-            "aria-label": labels.carouselAriaLabel,
-            children
-          }
-        ) }),
+        /* @__PURE__ */ jsxs("div", { className: showNavButtons ? styles.carouselContainer : styles.carouselContainerNoNav, children: [
+          showNavButtons && /* @__PURE__ */ jsx(
+            CarouselButton,
+            {
+              navType: "prev",
+              "aria-label": "Previous Carousel Page Button",
+              className: styles.customeCarouselButton
+            }
+          ),
+          /* @__PURE__ */ jsxs(CarouselViewport, { style: { overflow: "hidden", paddingBottom: "10px" }, children: [
+            showCloseButton && /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: /* @__PURE__ */ jsx(DismissRegular, {}),
+                shape: "circular",
+                onClick: onCloseClick,
+                "aria-label": "Close carousel",
+                className: mergeClasses(
+                  styles.closeButton,
+                  showNavButtons ? styles.closeButtonWithNav : styles.closeButtonWithoutNav
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CarouselSlider,
+              {
+                cardFocus,
+                "aria-label": labels.carouselAriaLabel,
+                children
+              }
+            )
+          ] }),
+          showNavButtons && /* @__PURE__ */ jsx(
+            CarouselButton,
+            {
+              navType: "next",
+              "aria-label": "Next Carousel Page Button",
+              className: styles.customeCarouselButton
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
           CarouselNav,
           {
             style: {
               backgroundColor: darkNavBackground ? tokens.colorSubtleBackgroundInverted : tokens.colorSubtleBackground,
-              marginTop: tokens.spacingVerticalXL
+              marginTop: tokens.spacingVerticalXXL
             },
             appearance: "brand",
             className: styles.carouselNavButton,
@@ -677,130 +886,6 @@ function useWindowSize() {
   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 = {
-  "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
-  "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]});
-
 // src/components/CardTicket/CardTicket.constants.ts
 var DEFAULT_LABELS5 = {
   id: {
@@ -7849,6 +7934,7 @@ var ModalPassengerForm = ({
     defaultValues
   });
   const idType = watch("idType");
+  const watchPassportCountry = watch("country");
   useEffect(() => {
     reset(defaultValues);
   }, [defaultValues, reset]);
@@ -7856,7 +7942,7 @@ var ModalPassengerForm = ({
     if (idType) {
       setValue("idNumber", "");
     }
-  }, [idType, setValue]);
+  }, [idType, watchPassportCountry, setValue]);
   const handleFormSubmit = (data) => {
     onSubmit(data);
     reset();
@@ -7984,7 +8070,22 @@ var ModalPassengerForm = ({
                 }
               }
             ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              idType === "paspor" && /* @__PURE__ */ jsx(InputDynamic_default, { menuPlacement: "top", name: "country", control, type: "country", label: mergedLabels.countryLabel, placeholder: mergedLabels.countryPlaceholder, size: "large", required: true, validationRules: { required: mergedErrors.requiredCountry } }),
+              idType === "paspor" && /* @__PURE__ */ jsx(
+                InputDynamic_default,
+                {
+                  menuPlacement: "top",
+                  name: "country",
+                  control,
+                  type: "country",
+                  label: mergedLabels.countryLabel,
+                  placeholder: mergedLabels.countryPlaceholder,
+                  size: "large",
+                  required: true,
+                  validationRules: {
+                    required: mergedErrors.requiredCountry
+                  }
+                }
+              ),
               /* @__PURE__ */ jsx(
                 InputDynamic_default,
                 {