@asdp/ferryui 0.1.22-dev.10210 → 0.1.22-dev.10229

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +5 -0
  2. package/dist/index.d.ts +5 -0
  3. package/dist/index.js +318 -110
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +318 -110
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1154,7 +1154,8 @@ var DEFAULT_LABELS5 = {
1154
1154
  timezoneLabel: "WIB",
1155
1155
  currencySymbol: "IDR",
1156
1156
  logoAlt: "Logo ASDP",
1157
- verifyingTicketButton: "Memeriksa Tiket"
1157
+ verifyingTicketButton: "Memeriksa Tiket",
1158
+ totalPriceMissing: "Lengkapi manifest barang lepas untuk melihat harga"
1158
1159
  },
1159
1160
  en: {
1160
1161
  availableSeatsLabel: "Available",
@@ -1168,7 +1169,8 @@ var DEFAULT_LABELS5 = {
1168
1169
  timezoneLabel: "WIB",
1169
1170
  currencySymbol: "IDR",
1170
1171
  logoAlt: "ASDP Logo",
1171
- verifyingTicketButton: "Verifying Ticket"
1172
+ verifyingTicketButton: "Verifying Ticket",
1173
+ totalPriceMissing: "Please complete the cargo manifest to see the price"
1172
1174
  }
1173
1175
  };
1174
1176
 
@@ -1304,7 +1306,6 @@ var useStyles5 = makeStyles({
1304
1306
  display: "flex",
1305
1307
  justifyContent: "space-between",
1306
1308
  alignItems: "center",
1307
- flexWrap: "wrap",
1308
1309
  [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
1309
1310
  padding: "1rem"
1310
1311
  }
@@ -1419,10 +1420,38 @@ var CardTicket = ({
1419
1420
  justifyContent: "center",
1420
1421
  gap: "1rem"
1421
1422
  },
1422
- children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
1423
- /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "60px", borderRadius: "50%" } }),
1424
- /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100px", height: "20px", marginTop: "1rem" } })
1425
- ] })
1423
+ children: /* @__PURE__ */ jsxs(
1424
+ Skeleton,
1425
+ {
1426
+ style: {
1427
+ display: "flex",
1428
+ flexDirection: "column",
1429
+ alignItems: "center"
1430
+ },
1431
+ children: [
1432
+ /* @__PURE__ */ jsx(
1433
+ SkeletonItem,
1434
+ {
1435
+ style: {
1436
+ width: "60px",
1437
+ height: "60px",
1438
+ borderRadius: "50%"
1439
+ }
1440
+ }
1441
+ ),
1442
+ /* @__PURE__ */ jsx(
1443
+ SkeletonItem,
1444
+ {
1445
+ style: {
1446
+ width: "100px",
1447
+ height: "20px",
1448
+ marginTop: "1rem"
1449
+ }
1450
+ }
1451
+ )
1452
+ ]
1453
+ }
1454
+ )
1426
1455
  }
1427
1456
  ) }) : /* @__PURE__ */ jsxs(Row, { style: { height: "100%" }, children: [
1428
1457
  /* @__PURE__ */ jsx(
@@ -1451,7 +1480,10 @@ var CardTicket = ({
1451
1480
  {
1452
1481
  size: "large",
1453
1482
  appearance: "filled",
1454
- style: { backgroundColor: departureItem?.availableTicket <= 0 ? tokens.colorNeutralForeground3 : departureItem?.provider?.serviceColor, padding: "0.5rem" },
1483
+ style: {
1484
+ backgroundColor: departureItem?.availableTicket <= 0 ? tokens.colorNeutralForeground3 : departureItem?.provider?.serviceColor,
1485
+ padding: "0.5rem"
1486
+ },
1455
1487
  iconPosition: "before",
1456
1488
  shape: "rounded",
1457
1489
  icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:info-24-regular" }),
@@ -1567,29 +1599,117 @@ var CardTicket = ({
1567
1599
  xxl: 4.5,
1568
1600
  xxxl: 4.5,
1569
1601
  style: { padding: 0, margin: 0 },
1570
- children: /* @__PURE__ */ jsx(Card, { className: styles.ticketMiddleCard, children: isLoading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
1571
- /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "28px", borderRadius: "4px" } }) }) }),
1572
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.ticketInfo, children: [
1573
- /* @__PURE__ */ jsx("div", { className: styles.ticketTime, children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
1574
- /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "14px" } }),
1575
- /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "28px" } }),
1576
- /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "14px" } })
1577
- ] }) }),
1578
- /* @__PURE__ */ jsxs("div", { className: styles.ticketDuration, children: [
1579
- /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "16px", marginBottom: "8px" } }) }),
1580
- /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "2px" } }) }) })
1581
- ] }),
1582
- /* @__PURE__ */ jsx("div", { className: styles.ticketTime, style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "8px" }, children: [
1583
- /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "14px" } }),
1584
- /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "28px" } }),
1585
- /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "14px" } })
1586
- ] }) })
1587
- ] }) }),
1588
- /* @__PURE__ */ jsx("div", { className: styles.ticketButtons, children: /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", gap: "1rem", width: "100%" }, children: [
1589
- /* @__PURE__ */ jsx(SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } }),
1590
- /* @__PURE__ */ jsx(SkeletonItem, { style: { flex: 1, height: "32px", borderRadius: "16px" } })
1591
- ] }) })
1592
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1602
+ children: /* @__PURE__ */ jsx(Card, { className: styles.ticketMiddleCard, children: isLoading ? /* @__PURE__ */ jsxs(
1603
+ "div",
1604
+ {
1605
+ style: {
1606
+ display: "flex",
1607
+ flexDirection: "column",
1608
+ height: "100%",
1609
+ justifyContent: "space-between"
1610
+ },
1611
+ children: [
1612
+ /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
1613
+ SkeletonItem,
1614
+ {
1615
+ style: {
1616
+ width: "80px",
1617
+ height: "28px",
1618
+ borderRadius: "4px"
1619
+ }
1620
+ }
1621
+ ) }) }),
1622
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.ticketInfo, children: [
1623
+ /* @__PURE__ */ jsx("div", { className: styles.ticketTime, children: /* @__PURE__ */ jsxs(
1624
+ Skeleton,
1625
+ {
1626
+ style: {
1627
+ display: "flex",
1628
+ flexDirection: "column",
1629
+ gap: "8px"
1630
+ },
1631
+ children: [
1632
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "14px" } }),
1633
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "28px" } }),
1634
+ /* @__PURE__ */ jsx(
1635
+ SkeletonItem,
1636
+ {
1637
+ style: { width: "120px", height: "14px" }
1638
+ }
1639
+ )
1640
+ ]
1641
+ }
1642
+ ) }),
1643
+ /* @__PURE__ */ jsxs("div", { className: styles.ticketDuration, children: [
1644
+ /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
1645
+ SkeletonItem,
1646
+ {
1647
+ style: {
1648
+ width: "80px",
1649
+ height: "16px",
1650
+ marginBottom: "8px"
1651
+ }
1652
+ }
1653
+ ) }),
1654
+ /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
1655
+ SkeletonItem,
1656
+ {
1657
+ style: { width: "120px", height: "2px" }
1658
+ }
1659
+ ) }) })
1660
+ ] }),
1661
+ /* @__PURE__ */ jsx(
1662
+ "div",
1663
+ {
1664
+ className: styles.ticketTime,
1665
+ style: { alignItems: "flex-end" },
1666
+ children: /* @__PURE__ */ jsxs(
1667
+ Skeleton,
1668
+ {
1669
+ style: {
1670
+ display: "flex",
1671
+ flexDirection: "column",
1672
+ alignItems: "flex-end",
1673
+ gap: "8px"
1674
+ },
1675
+ children: [
1676
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60px", height: "14px" } }),
1677
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "28px" } }),
1678
+ /* @__PURE__ */ jsx(
1679
+ SkeletonItem,
1680
+ {
1681
+ style: { width: "120px", height: "14px" }
1682
+ }
1683
+ )
1684
+ ]
1685
+ }
1686
+ )
1687
+ }
1688
+ )
1689
+ ] }) }),
1690
+ /* @__PURE__ */ jsx("div", { className: styles.ticketButtons, children: /* @__PURE__ */ jsxs(
1691
+ Skeleton,
1692
+ {
1693
+ style: { display: "flex", gap: "1rem", width: "100%" },
1694
+ children: [
1695
+ /* @__PURE__ */ jsx(
1696
+ SkeletonItem,
1697
+ {
1698
+ style: { flex: 1, height: "32px", borderRadius: "16px" }
1699
+ }
1700
+ ),
1701
+ /* @__PURE__ */ jsx(
1702
+ SkeletonItem,
1703
+ {
1704
+ style: { flex: 1, height: "32px", borderRadius: "16px" }
1705
+ }
1706
+ )
1707
+ ]
1708
+ }
1709
+ ) })
1710
+ ]
1711
+ }
1712
+ ) : /* @__PURE__ */ jsxs(Fragment, { children: [
1593
1713
  /* @__PURE__ */ jsx(Visible, { lg: true, xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsx(
1594
1714
  Badge,
1595
1715
  {
@@ -1617,7 +1737,13 @@ var CardTicket = ({
1617
1737
  " ",
1618
1738
  formatDuration(departureItem?.estimatedSailingMinute)
1619
1739
  ] }),
1620
- /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, { children: /* @__PURE__ */ jsx(Icon, { icon: "fluent:vehicle-ship-24-regular", height: 24 }) }) })
1740
+ /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, { children: /* @__PURE__ */ jsx(
1741
+ Icon,
1742
+ {
1743
+ icon: "fluent:vehicle-ship-24-regular",
1744
+ height: 24
1745
+ }
1746
+ ) }) })
1621
1747
  ] }),
1622
1748
  /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
1623
1749
  /* @__PURE__ */ jsx(Caption1, { children: departureItem?.arrivedDay }),
@@ -1638,7 +1764,10 @@ var CardTicket = ({
1638
1764
  },
1639
1765
  icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:money-24-regular" }),
1640
1766
  size: "medium",
1641
- onClick: () => onPriceDetailClick(departureItem?.billingDetail, departureItem?.provider),
1767
+ onClick: () => onPriceDetailClick(
1768
+ departureItem?.billingDetail,
1769
+ departureItem?.provider
1770
+ ),
1642
1771
  children: mergedLabels.priceDetailsButton
1643
1772
  }
1644
1773
  ),
@@ -1673,84 +1802,145 @@ var CardTicket = ({
1673
1802
  xxl: 4.5,
1674
1803
  xxxl: 4.5,
1675
1804
  style: { padding: 0, margin: 0 },
1676
- children: /* @__PURE__ */ jsxs(Card, { className: styles.ticketRightCard, style: departureItem?.availableTicket <= 0 ? { background: "linear-gradient(75deg, #7A7A7A 0%, #4D4D4D 103.3%)" } : {}, children: [
1677
- isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
1678
- /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
1679
- /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", flexDirection: "column", gap: "8px", flex: 1 }, children: [
1680
- /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "20px" } }),
1681
- /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "140px", height: "32px", borderRadius: "16px" } })
1805
+ children: /* @__PURE__ */ jsxs(
1806
+ Card,
1807
+ {
1808
+ className: styles.ticketRightCard,
1809
+ style: departureItem?.availableTicket <= 0 ? {
1810
+ background: "linear-gradient(75deg, #7A7A7A 0%, #4D4D4D 103.3%)"
1811
+ } : {},
1812
+ children: [
1813
+ isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
1814
+ /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
1815
+ /* @__PURE__ */ jsxs(
1816
+ Skeleton,
1817
+ {
1818
+ style: {
1819
+ display: "flex",
1820
+ flexDirection: "column",
1821
+ gap: "8px",
1822
+ flex: 1
1823
+ },
1824
+ children: [
1825
+ /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "20px" } }),
1826
+ /* @__PURE__ */ jsx(
1827
+ SkeletonItem,
1828
+ {
1829
+ style: {
1830
+ width: "140px",
1831
+ height: "32px",
1832
+ borderRadius: "16px"
1833
+ }
1834
+ }
1835
+ )
1836
+ ]
1837
+ }
1838
+ ),
1839
+ /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
1840
+ SkeletonItem,
1841
+ {
1842
+ style: {
1843
+ width: "120px",
1844
+ height: "40px",
1845
+ borderRadius: "20px"
1846
+ }
1847
+ }
1848
+ ) })
1849
+ ] }),
1850
+ /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
1851
+ /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
1852
+ SkeletonItem,
1853
+ {
1854
+ style: {
1855
+ width: "80px",
1856
+ height: "20px",
1857
+ marginBottom: "8px"
1858
+ }
1859
+ }
1860
+ ) }),
1861
+ /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
1862
+ SkeletonItem,
1863
+ {
1864
+ style: { width: "100px", height: "20px" }
1865
+ }
1866
+ ) }, i)) })
1867
+ ] })
1868
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1869
+ /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
1870
+ /* @__PURE__ */ jsxs(
1871
+ "div",
1872
+ {
1873
+ style: {
1874
+ display: "flex",
1875
+ flexDirection: "column",
1876
+ gap: "0.25rem",
1877
+ flex: 1,
1878
+ minWidth: 0
1879
+ },
1880
+ children: [
1881
+ /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.totalPriceLabel }),
1882
+ departureItem?.billingDetail?.total?.formatted ? /* @__PURE__ */ jsx(
1883
+ Title3,
1884
+ {
1885
+ children: departureItem?.billingDetail?.total?.formatted
1886
+ }
1887
+ ) : /* @__PURE__ */ jsx(
1888
+ Body1Strong,
1889
+ {
1890
+ style: { wordBreak: "break-word" },
1891
+ children: mergedLabels.totalPriceMissing
1892
+ }
1893
+ )
1894
+ ]
1895
+ }
1896
+ ),
1897
+ /* @__PURE__ */ jsx(
1898
+ Button,
1899
+ {
1900
+ onClick: onSelectTicket,
1901
+ appearance: "primary",
1902
+ style: isVerifyingTicket || departureItem?.availableTicket <= 0 ? { flexShrink: 0 } : { backgroundColor: brandColors["60"], flexShrink: 0 },
1903
+ size: "medium",
1904
+ shape: "circular",
1905
+ icon: isVerifyingTicket ? null : /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
1906
+ disabled: isVerifyingTicket || departureItem?.availableTicket <= 0,
1907
+ children: isVerifyingTicket ? /* @__PURE__ */ jsxs(Fragment, { children: [
1908
+ /* @__PURE__ */ jsx(
1909
+ Spinner,
1910
+ {
1911
+ size: "extra-tiny",
1912
+ style: { marginRight: "5px" }
1913
+ }
1914
+ ),
1915
+ " ",
1916
+ mergedLabels.verifyingTicketButton
1917
+ ] }) : buttonText || mergedLabels.selectTicketButton
1918
+ }
1919
+ )
1920
+ ] }),
1921
+ /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
1922
+ /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.facilitiesLabel }),
1923
+ /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
1924
+ /* @__PURE__ */ jsx(Icon, { icon: "fluent:checkmark-circle-24-filled" }),
1925
+ /* @__PURE__ */ jsx(Caption1Strong, { children: facility })
1926
+ ] }, idx)) })
1927
+ ] })
1682
1928
  ] }),
1683
- /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "120px", height: "40px", borderRadius: "20px" } }) })
1684
- ] }),
1685
- /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
1686
- /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "80px", height: "20px", marginBottom: "8px" } }) }),
1687
- /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100px", height: "20px" } }) }, i)) })
1688
- ] })
1689
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
1690
- /* @__PURE__ */ jsxs("div", { className: styles.priceCard, children: [
1691
- /* @__PURE__ */ jsxs(
1692
- "div",
1693
- {
1694
- style: {
1695
- display: "flex",
1696
- flexDirection: "column",
1697
- gap: "0.25rem"
1929
+ /* @__PURE__ */ jsx(Visible, { xl: true, xxl: true, xxxl: true, children: Array.from({ length: circularVerticalConfig.count }).map(
1930
+ (_, index) => /* @__PURE__ */ jsx(
1931
+ "div",
1932
+ {
1933
+ className: styles.circularRight,
1934
+ style: {
1935
+ top: `${circularVerticalConfig.top + index * circularVerticalConfig.spacing}px`
1936
+ }
1698
1937
  },
1699
- children: [
1700
- /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.totalPriceLabel }),
1701
- /* @__PURE__ */ jsx(
1702
- Title3,
1703
- {
1704
- style: {
1705
- display: "flex",
1706
- flex: "column",
1707
- justifyContent: "end"
1708
- },
1709
- children: departureItem?.billingDetail?.total?.formatted
1710
- }
1711
- )
1712
- ]
1713
- }
1714
- ),
1715
- /* @__PURE__ */ jsx(
1716
- Button,
1717
- {
1718
- onClick: onSelectTicket,
1719
- appearance: "primary",
1720
- style: isVerifyingTicket || departureItem?.availableTicket <= 0 ? void 0 : { backgroundColor: brandColors["60"] },
1721
- size: "medium",
1722
- shape: "circular",
1723
- icon: isVerifyingTicket ? null : /* @__PURE__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-filled" }),
1724
- disabled: isVerifyingTicket || departureItem?.availableTicket <= 0,
1725
- children: isVerifyingTicket ? /* @__PURE__ */ jsxs(Fragment, { children: [
1726
- /* @__PURE__ */ jsx(Spinner, { size: "extra-tiny", style: { marginRight: "5px" } }),
1727
- " ",
1728
- mergedLabels.verifyingTicketButton
1729
- ] }) : buttonText || mergedLabels.selectTicketButton
1730
- }
1731
- )
1732
- ] }),
1733
- /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
1734
- /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.facilitiesLabel }),
1735
- /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
1736
- /* @__PURE__ */ jsx(Icon, { icon: "fluent:checkmark-circle-24-filled" }),
1737
- /* @__PURE__ */ jsx(Caption1Strong, { children: facility })
1738
- ] }, idx)) })
1739
- ] })
1740
- ] }),
1741
- /* @__PURE__ */ jsx(Visible, { xl: true, xxl: true, xxxl: true, children: Array.from({ length: circularVerticalConfig.count }).map(
1742
- (_, index) => /* @__PURE__ */ jsx(
1743
- "div",
1744
- {
1745
- className: styles.circularRight,
1746
- style: {
1747
- top: `${circularVerticalConfig.top + index * circularVerticalConfig.spacing}px`
1748
- }
1749
- },
1750
- index
1751
- )
1752
- ) })
1753
- ] })
1938
+ index
1939
+ )
1940
+ ) })
1941
+ ]
1942
+ }
1943
+ )
1754
1944
  }
1755
1945
  )
1756
1946
  ] });
@@ -11344,6 +11534,15 @@ var ModalPassengerForm = ({
11344
11534
  const dynamicMinLengthId = idRuleLengthMatch ? parseInt(idRuleLengthMatch[1], 10) : 6;
11345
11535
  useEffect(() => {
11346
11536
  reset(defaultValues);
11537
+ if (defaultValues?.birthdate) {
11538
+ const { years, months } = calculateAge(defaultValues.birthdate);
11539
+ setValue(
11540
+ "age",
11541
+ `${years} ${mergedLabels.yearLabel} ${months} ${mergedLabels.monthLabel}`
11542
+ );
11543
+ } else {
11544
+ setValue("age", "");
11545
+ }
11347
11546
  }, [defaultValues, reset]);
11348
11547
  useEffect(() => {
11349
11548
  if (watchIdentityTypeId) {
@@ -11361,6 +11560,7 @@ var ModalPassengerForm = ({
11361
11560
  setValue("age", "");
11362
11561
  }
11363
11562
  }, [
11563
+ open,
11364
11564
  watchBirthdate,
11365
11565
  setValue,
11366
11566
  mergedLabels.yearLabel,
@@ -12232,6 +12432,7 @@ var CardPassengerList = ({
12232
12432
  title,
12233
12433
  passengers,
12234
12434
  onPassengerClick,
12435
+ onIconClick,
12235
12436
  labels,
12236
12437
  className
12237
12438
  }) => {
@@ -12298,7 +12499,14 @@ var CardPassengerList = ({
12298
12499
  {
12299
12500
  icon: passenger.id && passenger.serviceName ? "fluent:edit-24-regular" : "fluent:chevron-right-24-regular",
12300
12501
  width: 20,
12301
- height: 20
12502
+ height: 20,
12503
+ onClick: (event) => {
12504
+ onIconClick(
12505
+ event,
12506
+ passenger,
12507
+ passenger.id && passenger.serviceName ? "edit" : "add"
12508
+ );
12509
+ }
12302
12510
  }
12303
12511
  )
12304
12512
  ]