@refinn/core-ui 0.1.20 → 0.1.22
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.
- package/dist/index.cjs +287 -286
- package/dist/index.js +294 -293
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1671,16 +1671,106 @@ var Dialog = (0, import_react13.forwardRef)(
|
|
|
1671
1671
|
Dialog.displayName = "Dialog";
|
|
1672
1672
|
|
|
1673
1673
|
// src/components/Drawer/Drawer.tsx
|
|
1674
|
-
var
|
|
1674
|
+
var import_react15 = require("react");
|
|
1675
1675
|
var import_react_dom2 = require("react-dom");
|
|
1676
|
+
|
|
1677
|
+
// src/components/Tooltip/Tooltip.tsx
|
|
1678
|
+
var import_react14 = require("react");
|
|
1676
1679
|
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1680
|
+
var Tooltip = (0, import_react14.forwardRef)(
|
|
1681
|
+
(_a, ref) => {
|
|
1682
|
+
var _b = _a, {
|
|
1683
|
+
size = "md",
|
|
1684
|
+
children,
|
|
1685
|
+
headText,
|
|
1686
|
+
text,
|
|
1687
|
+
position = "top",
|
|
1688
|
+
className = ""
|
|
1689
|
+
} = _b, rest = __objRest(_b, [
|
|
1690
|
+
"size",
|
|
1691
|
+
"children",
|
|
1692
|
+
"headText",
|
|
1693
|
+
"text",
|
|
1694
|
+
"position",
|
|
1695
|
+
"className"
|
|
1696
|
+
]);
|
|
1697
|
+
const wrapperRef = (0, import_react14.useRef)(null);
|
|
1698
|
+
const [isVisible, setIsVisible] = (0, import_react14.useState)(false);
|
|
1699
|
+
const [isHovered, setIsHovered] = (0, import_react14.useState)(false);
|
|
1700
|
+
(0, import_react14.useEffect)(() => {
|
|
1701
|
+
const handleClickOutside = (event) => {
|
|
1702
|
+
if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
|
|
1703
|
+
setIsVisible(false);
|
|
1704
|
+
setIsHovered(false);
|
|
1705
|
+
}
|
|
1706
|
+
};
|
|
1707
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1708
|
+
return () => {
|
|
1709
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
1710
|
+
};
|
|
1711
|
+
}, []);
|
|
1712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1713
|
+
"div",
|
|
1714
|
+
__spreadProps(__spreadValues({
|
|
1715
|
+
className: `group relative inline-block ${className}`,
|
|
1716
|
+
ref
|
|
1717
|
+
}, rest), {
|
|
1718
|
+
children: [
|
|
1719
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1720
|
+
"div",
|
|
1721
|
+
{
|
|
1722
|
+
ref: wrapperRef,
|
|
1723
|
+
onClick: () => {
|
|
1724
|
+
if (isVisible) {
|
|
1725
|
+
setIsVisible(false);
|
|
1726
|
+
setIsHovered(false);
|
|
1727
|
+
} else {
|
|
1728
|
+
setIsVisible(true);
|
|
1729
|
+
}
|
|
1730
|
+
},
|
|
1731
|
+
onMouseEnter: () => setIsHovered(true),
|
|
1732
|
+
onMouseLeave: () => setIsHovered(false),
|
|
1733
|
+
children
|
|
1734
|
+
}
|
|
1735
|
+
),
|
|
1736
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1737
|
+
"div",
|
|
1738
|
+
{
|
|
1739
|
+
className: `min-w-100 max-w-300 whitespace-nowrap rounded bg-gray-900 text-white ${size === "lg" ? "text-body-regular py-12 px-16" : size === "md" ? "text-body-small px-12 pt-10 pb-8" : "text-body-small px-8 pt-6 pb-4"} ${position === "right" && `absolute left-full top-1/2 z-20 ml-8 -translate-y-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}` || position === "top" && `absolute bottom-full left-1/2 z-20 mb-8 -translate-x-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}` || position === "left" && `absolute right-full top-1/2 z-20 mr-8 -translate-y-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}` || position === "bottom" && `absolute left-1/2 top-full z-20 mt-8 -translate-x-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}`}`,
|
|
1740
|
+
children: [
|
|
1741
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1742
|
+
"span",
|
|
1743
|
+
{
|
|
1744
|
+
className: ` ${position === "right" && `absolute -left-3 top-1/2 -z-10 h-8 w-8 -translate-y-1/2 rotate-45 rounded-xs bg-black` || position === "top" && `absolute -bottom-3 left-1/2 -z-10 h-8 w-8 -translate-x-1/2 rotate-45 rounded-xs bg-black` || position === "left" && `absolute -right-3 top-1/2 -z-10 h-8 w-8 -translate-y-1/2 rotate-45 rounded-xs bg-black` || position === "bottom" && `absolute left-1/2 -top-3 -z-10 h-8 w-8 -translate-x-1/2 rotate-45 rounded-xs bg-black`} `
|
|
1745
|
+
}
|
|
1746
|
+
),
|
|
1747
|
+
headText ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1748
|
+
"p",
|
|
1749
|
+
{
|
|
1750
|
+
className: `text-sm text-white font-semibold text-center ${text ? "mb-5" : ""}`,
|
|
1751
|
+
children: headText
|
|
1752
|
+
}
|
|
1753
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {}),
|
|
1754
|
+
text ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs text-white font-normal text-center text-wrap", children: text }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {})
|
|
1755
|
+
]
|
|
1756
|
+
}
|
|
1757
|
+
)
|
|
1758
|
+
]
|
|
1759
|
+
})
|
|
1760
|
+
);
|
|
1761
|
+
}
|
|
1762
|
+
);
|
|
1763
|
+
Tooltip.displayName = "Tooltip";
|
|
1764
|
+
|
|
1765
|
+
// src/components/Drawer/Drawer.tsx
|
|
1766
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1677
1767
|
function CloseIcon3({ className }) {
|
|
1678
|
-
return /* @__PURE__ */ (0,
|
|
1768
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1679
1769
|
}
|
|
1680
1770
|
function useMountTransition2(open, duration = 300) {
|
|
1681
|
-
const [mounted, setMounted] = (0,
|
|
1682
|
-
const [animate, setAnimate] = (0,
|
|
1683
|
-
(0,
|
|
1771
|
+
const [mounted, setMounted] = (0, import_react15.useState)(open);
|
|
1772
|
+
const [animate, setAnimate] = (0, import_react15.useState)(open);
|
|
1773
|
+
(0, import_react15.useEffect)(() => {
|
|
1684
1774
|
if (open) {
|
|
1685
1775
|
setMounted(true);
|
|
1686
1776
|
return;
|
|
@@ -1689,7 +1779,7 @@ function useMountTransition2(open, duration = 300) {
|
|
|
1689
1779
|
const timer = setTimeout(() => setMounted(false), duration);
|
|
1690
1780
|
return () => clearTimeout(timer);
|
|
1691
1781
|
}, [open, duration]);
|
|
1692
|
-
(0,
|
|
1782
|
+
(0, import_react15.useEffect)(() => {
|
|
1693
1783
|
if (!open || !mounted) return;
|
|
1694
1784
|
let raf2 = 0;
|
|
1695
1785
|
const raf1 = requestAnimationFrame(() => {
|
|
@@ -1709,7 +1799,7 @@ function DrawerAction({
|
|
|
1709
1799
|
}) {
|
|
1710
1800
|
if (!action) return null;
|
|
1711
1801
|
const _a = action, { label, className = "" } = _a, rest = __objRest(_a, ["label", "className"]);
|
|
1712
|
-
return /* @__PURE__ */ (0,
|
|
1802
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1713
1803
|
Button,
|
|
1714
1804
|
__spreadProps(__spreadValues({
|
|
1715
1805
|
variant,
|
|
@@ -1720,7 +1810,7 @@ function DrawerAction({
|
|
|
1720
1810
|
})
|
|
1721
1811
|
);
|
|
1722
1812
|
}
|
|
1723
|
-
var Drawer = (0,
|
|
1813
|
+
var Drawer = (0, import_react15.forwardRef)(
|
|
1724
1814
|
(_a, ref) => {
|
|
1725
1815
|
var _b = _a, {
|
|
1726
1816
|
open,
|
|
@@ -1756,7 +1846,7 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1756
1846
|
"className"
|
|
1757
1847
|
]);
|
|
1758
1848
|
const { mounted, animate } = useMountTransition2(open);
|
|
1759
|
-
(0,
|
|
1849
|
+
(0, import_react15.useEffect)(() => {
|
|
1760
1850
|
if (!open || !closable) return;
|
|
1761
1851
|
const handleKeyDown = (e) => {
|
|
1762
1852
|
if (e.key === "Escape") onOpenChange == null ? void 0 : onOpenChange(false);
|
|
@@ -1773,7 +1863,7 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1773
1863
|
const showFooter = Boolean(dismiss || secondary || confirm);
|
|
1774
1864
|
const allActions = Boolean(dismiss && secondary && confirm);
|
|
1775
1865
|
return (0, import_react_dom2.createPortal)(
|
|
1776
|
-
/* @__PURE__ */ (0,
|
|
1866
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1777
1867
|
"div",
|
|
1778
1868
|
{
|
|
1779
1869
|
className: [
|
|
@@ -1784,7 +1874,7 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1784
1874
|
].filter(Boolean).join(" "),
|
|
1785
1875
|
role: "presentation",
|
|
1786
1876
|
onMouseDown: handleBackdropMouseDown,
|
|
1787
|
-
children: /* @__PURE__ */ (0,
|
|
1877
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1788
1878
|
"div",
|
|
1789
1879
|
__spreadProps(__spreadValues({
|
|
1790
1880
|
ref,
|
|
@@ -1804,7 +1894,7 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1804
1894
|
onMouseDown: (e) => e.stopPropagation()
|
|
1805
1895
|
}, rest), {
|
|
1806
1896
|
children: [
|
|
1807
|
-
showHeader && /* @__PURE__ */ (0,
|
|
1897
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-col w-full items-center border-b border-border-subtle bg-dialog-background-primary", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
1808
1898
|
"div",
|
|
1809
1899
|
{
|
|
1810
1900
|
className: [
|
|
@@ -1812,63 +1902,62 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1812
1902
|
fullScreen ? "lg:gap-16 lg:px-0 lg:py-24 lg:max-w-1216" : "lg:px-24 lg:pb-16 lg:pt-20"
|
|
1813
1903
|
].join(" "),
|
|
1814
1904
|
children: [
|
|
1815
|
-
/* @__PURE__ */ (0,
|
|
1816
|
-
title && /* @__PURE__ */ (0,
|
|
1817
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1905
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
|
|
1906
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-heading-3 text-dialog-text-primary lg:text-heading-3-md", children: title }),
|
|
1907
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-body-small text-dialog-text-secondary", children: subtitle })
|
|
1818
1908
|
] }),
|
|
1819
|
-
closable && /* @__PURE__ */ (0,
|
|
1820
|
-
/* @__PURE__ */ (0,
|
|
1909
|
+
closable && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
1910
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1821
1911
|
IconButton,
|
|
1822
1912
|
{
|
|
1823
|
-
icon: /* @__PURE__ */ (0,
|
|
1913
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CloseIcon3, { className: "h-20 w-20" }),
|
|
1824
1914
|
size: "sm",
|
|
1825
1915
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1826
1916
|
onClick: handleClose,
|
|
1827
1917
|
className: "lg:hidden!"
|
|
1828
1918
|
}
|
|
1829
1919
|
),
|
|
1830
|
-
/* @__PURE__ */ (0,
|
|
1920
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tooltip, { size: "sm", position: "left", text: "\u0E1B\u0E34\u0E14\u0E2B\u0E19\u0E49\u0E32\u0E15\u0E48\u0E32\u0E07", className: "hidden! lg:flex!", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1831
1921
|
IconButton,
|
|
1832
1922
|
{
|
|
1833
|
-
icon: /* @__PURE__ */ (0,
|
|
1923
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CloseIcon3, { className: "h-24 w-24" }),
|
|
1834
1924
|
size: fullScreen ? "lg" : "md",
|
|
1835
1925
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1836
|
-
onClick: handleClose
|
|
1837
|
-
className: "hidden! lg:inline-flex!"
|
|
1926
|
+
onClick: handleClose
|
|
1838
1927
|
}
|
|
1839
|
-
)
|
|
1928
|
+
) })
|
|
1840
1929
|
] })
|
|
1841
1930
|
]
|
|
1842
1931
|
}
|
|
1843
1932
|
) }),
|
|
1844
|
-
/* @__PURE__ */ (0,
|
|
1933
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1845
1934
|
"div",
|
|
1846
1935
|
{
|
|
1847
1936
|
className: [
|
|
1848
1937
|
"flex-1 overflow-y-auto text-body-regular text-dialog-text-primary",
|
|
1849
|
-
!noPadding && "p-16",
|
|
1938
|
+
!noPadding && (fullScreen ? "p-16 lg:px-0 lg:py-24" : "p-16 lg:p-24"),
|
|
1850
1939
|
background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary"
|
|
1851
|
-
].join(" "),
|
|
1852
|
-
children
|
|
1940
|
+
].filter(Boolean).join(" "),
|
|
1941
|
+
children: fullScreen && !noPadding ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mx-auto w-full lg:max-w-1216", children }) : children
|
|
1853
1942
|
}
|
|
1854
1943
|
),
|
|
1855
|
-
showFooter && /* @__PURE__ */ (0,
|
|
1944
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `flex shrink-0 w-full flex-col items-center border-t border-border-subtle bg-dialog-background-primary`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1856
1945
|
"div",
|
|
1857
1946
|
{
|
|
1858
1947
|
className: [
|
|
1859
|
-
"flex shrink-0 flex-col gap-8 px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
|
|
1948
|
+
"flex w-full shrink-0 flex-col gap-8 px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
|
|
1860
1949
|
fullScreen ? "lg:gap-16 lg:px-0 lg:max-w-1216 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
|
|
1861
1950
|
].join(" "),
|
|
1862
|
-
children: allActions ? /* @__PURE__ */ (0,
|
|
1863
|
-
/* @__PURE__ */ (0,
|
|
1864
|
-
/* @__PURE__ */ (0,
|
|
1865
|
-
/* @__PURE__ */ (0,
|
|
1866
|
-
/* @__PURE__ */ (0,
|
|
1951
|
+
children: allActions ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
1952
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
|
|
1953
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "contents gap-8 lg:order-2 lg:ml-auto lg:flex lg:items-center", children: [
|
|
1954
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1" }),
|
|
1955
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2" })
|
|
1867
1956
|
] })
|
|
1868
|
-
] }) : /* @__PURE__ */ (0,
|
|
1869
|
-
/* @__PURE__ */ (0,
|
|
1870
|
-
/* @__PURE__ */ (0,
|
|
1871
|
-
/* @__PURE__ */ (0,
|
|
1957
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
1958
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1 lg:order-2" }),
|
|
1959
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2 lg:order-3" }),
|
|
1960
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
|
|
1872
1961
|
] })
|
|
1873
1962
|
}
|
|
1874
1963
|
) })
|
|
@@ -1884,9 +1973,9 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1884
1973
|
Drawer.displayName = "Drawer";
|
|
1885
1974
|
|
|
1886
1975
|
// src/components/Dropdown/Dropdown.tsx
|
|
1887
|
-
var
|
|
1888
|
-
var
|
|
1889
|
-
var IconDanger = () => /* @__PURE__ */ (0,
|
|
1976
|
+
var import_react16 = require("react");
|
|
1977
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1978
|
+
var IconDanger = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1890
1979
|
"svg",
|
|
1891
1980
|
{
|
|
1892
1981
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1894,7 +1983,7 @@ var IconDanger = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
|
1894
1983
|
height: "20",
|
|
1895
1984
|
viewBox: "0 0 20 20",
|
|
1896
1985
|
fill: "none",
|
|
1897
|
-
children: /* @__PURE__ */ (0,
|
|
1986
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1898
1987
|
"path",
|
|
1899
1988
|
{
|
|
1900
1989
|
d: "M10.0078 2.41699C11.0548 2.41699 12.0363 2.61407 12.9512 3.00879C13.8657 3.40341 14.6687 3.94646 15.3604 4.6377C16.0522 5.32922 16.5962 6.13426 16.9912 7.05176C17.386 7.96936 17.583 8.95002 17.583 9.99316C17.583 11.0363 17.3859 12.0187 16.9912 12.9404C16.5966 13.862 16.0536 14.6687 15.3623 15.3604C14.6708 16.0522 13.8657 16.5962 12.9482 16.9912C12.0306 17.386 11.05 17.583 10.0068 17.583C8.96373 17.583 7.9813 17.3859 7.05957 16.9912C6.13798 16.5966 5.33135 16.0536 4.63965 15.3623C3.94784 14.6708 3.40379 13.8642 3.00879 12.9434C2.61398 12.0228 2.41703 11.039 2.41699 9.99219C2.41699 8.94524 2.61407 7.96369 3.00879 7.04883C3.40341 6.13429 3.94646 5.33128 4.6377 4.63965C5.32922 3.94784 6.13581 3.40379 7.05664 3.00879C7.97723 2.61398 8.961 2.41703 10.0078 2.41699ZM10.0039 12.5967C9.83828 12.5968 9.69804 12.6527 9.58301 12.7646C9.46793 12.8769 9.41016 13.0159 9.41016 13.1816C9.4102 13.3472 9.46621 13.4875 9.57812 13.6025C9.69035 13.7177 9.83026 13.7754 9.99609 13.7754C10.1617 13.7753 10.302 13.7195 10.417 13.6074C10.5321 13.4952 10.5898 13.3562 10.5898 13.1904C10.5898 13.0246 10.534 12.8837 10.4219 12.7686C10.3097 12.6536 10.1697 12.5967 10.0039 12.5967ZM9.45801 11.0645H10.542V6.06445H9.45801V11.0645Z",
|
|
@@ -1904,7 +1993,7 @@ var IconDanger = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
|
1904
1993
|
}
|
|
1905
1994
|
);
|
|
1906
1995
|
function IconCheck({ className }) {
|
|
1907
|
-
return /* @__PURE__ */ (0,
|
|
1996
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1908
1997
|
"svg",
|
|
1909
1998
|
{
|
|
1910
1999
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1913,7 +2002,7 @@ function IconCheck({ className }) {
|
|
|
1913
2002
|
viewBox: "0 0 20 20",
|
|
1914
2003
|
fill: "none",
|
|
1915
2004
|
className,
|
|
1916
|
-
children: /* @__PURE__ */ (0,
|
|
2005
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1917
2006
|
"path",
|
|
1918
2007
|
{
|
|
1919
2008
|
d: "M15.6328 6.64062L8.10449 14.1494L4.36719 10.4326L5.13281 9.64551L8.10449 12.6172L14.8672 5.875L15.6328 6.64062Z",
|
|
@@ -1924,7 +2013,7 @@ function IconCheck({ className }) {
|
|
|
1924
2013
|
);
|
|
1925
2014
|
}
|
|
1926
2015
|
function ChevronDown({ className }) {
|
|
1927
|
-
return /* @__PURE__ */ (0,
|
|
2016
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1928
2017
|
"svg",
|
|
1929
2018
|
{
|
|
1930
2019
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1933,7 +2022,7 @@ function ChevronDown({ className }) {
|
|
|
1933
2022
|
viewBox: "0 0 20 20",
|
|
1934
2023
|
fill: "none",
|
|
1935
2024
|
className,
|
|
1936
|
-
children: /* @__PURE__ */ (0,
|
|
2025
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1937
2026
|
"path",
|
|
1938
2027
|
{
|
|
1939
2028
|
d: "M14.7119 8.0625L10 12.7744L5.28809 8.0625L6.0625 7.28809L10 11.2256L13.9375 7.28809L14.7119 8.0625Z",
|
|
@@ -1943,7 +2032,7 @@ function ChevronDown({ className }) {
|
|
|
1943
2032
|
}
|
|
1944
2033
|
);
|
|
1945
2034
|
}
|
|
1946
|
-
var Dropdown = (0,
|
|
2035
|
+
var Dropdown = (0, import_react16.forwardRef)(
|
|
1947
2036
|
(_a, ref) => {
|
|
1948
2037
|
var _b = _a, {
|
|
1949
2038
|
size = "md",
|
|
@@ -1980,14 +2069,14 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
1980
2069
|
]);
|
|
1981
2070
|
const isCombobox = variant === "combobox";
|
|
1982
2071
|
const iconButtonSize = size === "lg" ? "md" : "sm";
|
|
1983
|
-
const [isOpen, setIsOpen] = (0,
|
|
1984
|
-
const [isFocused, setIsFocused] = (0,
|
|
1985
|
-
const [query, setQuery] = (0,
|
|
1986
|
-
const [filterText, setFilterText] = (0,
|
|
1987
|
-
const dropdownRef = (0,
|
|
1988
|
-
const inputRef = (0,
|
|
1989
|
-
const listboxId = (0,
|
|
1990
|
-
const [prevLabel, setPrevLabel] = (0,
|
|
2072
|
+
const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
|
|
2073
|
+
const [isFocused, setIsFocused] = (0, import_react16.useState)(false);
|
|
2074
|
+
const [query, setQuery] = (0, import_react16.useState)(value.label || "");
|
|
2075
|
+
const [filterText, setFilterText] = (0, import_react16.useState)("");
|
|
2076
|
+
const dropdownRef = (0, import_react16.useRef)(null);
|
|
2077
|
+
const inputRef = (0, import_react16.useRef)(null);
|
|
2078
|
+
const listboxId = (0, import_react16.useId)();
|
|
2079
|
+
const [prevLabel, setPrevLabel] = (0, import_react16.useState)(value.label);
|
|
1991
2080
|
if (value.label !== prevLabel) {
|
|
1992
2081
|
setPrevLabel(value.label);
|
|
1993
2082
|
setQuery(value.label || "");
|
|
@@ -1995,7 +2084,7 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
1995
2084
|
const filteredItems = isCombobox ? dropDownItems.filter(
|
|
1996
2085
|
(item) => item.label.toLowerCase().includes(filterText.toLowerCase())
|
|
1997
2086
|
) : dropDownItems;
|
|
1998
|
-
(0,
|
|
2087
|
+
(0, import_react16.useEffect)(() => {
|
|
1999
2088
|
function handleClickOutside(event) {
|
|
2000
2089
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
2001
2090
|
setIsOpen(false);
|
|
@@ -2012,16 +2101,16 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
2012
2101
|
${!isCombobox ? disabled ? "text-dropdown-text-disabled cursor-not-allowed" : value ? "text-dropdown-text-primary cursor-pointer" : "text-dropdown-text-secondary cursor-pointer" : ""}
|
|
2013
2102
|
${disabled ? "pointer-events-none bg-dropdown-background-disabled border-dropdown-border-disabled" : error ? `bg-dropdown-background-enabled border-dropdown-border-danger ${isOpen ? "ring-1 ring-inset ring-dropdown-border-danger" : ""}` : isOpen ? "bg-dropdown-background-enabled border-dropdown-border-active ring-1 ring-inset ring-dropdown-border-active" : isFocused ? "bg-dropdown-background-enabled border-dropdown-border-focus ring-1 ring-inset ring-dropdown-border-focus" : "bg-dropdown-background-enabled border-dropdown-border-enabled hover:border-dropdown-border-hover"}
|
|
2014
2103
|
${className}`;
|
|
2015
|
-
return /* @__PURE__ */ (0,
|
|
2016
|
-
label ? /* @__PURE__ */ (0,
|
|
2104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
|
|
2105
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2017
2106
|
"p",
|
|
2018
2107
|
{
|
|
2019
2108
|
className: `text-label-medium text-left items-left font-medium ${disabled ? "text-dropdown-text-disabled" : "text-dropdown-text-primary"}`,
|
|
2020
2109
|
children: label
|
|
2021
2110
|
}
|
|
2022
|
-
) : /* @__PURE__ */ (0,
|
|
2023
|
-
/* @__PURE__ */ (0,
|
|
2024
|
-
isCombobox ? /* @__PURE__ */ (0,
|
|
2111
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
|
|
2112
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "w-full flex flex-col relative", ref: dropdownRef, children: [
|
|
2113
|
+
isCombobox ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
2025
2114
|
"div",
|
|
2026
2115
|
__spreadProps(__spreadValues({
|
|
2027
2116
|
ref
|
|
@@ -2032,7 +2121,7 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
2032
2121
|
},
|
|
2033
2122
|
className: triggerClassName,
|
|
2034
2123
|
children: [
|
|
2035
|
-
/* @__PURE__ */ (0,
|
|
2124
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2036
2125
|
"input",
|
|
2037
2126
|
{
|
|
2038
2127
|
ref: inputRef,
|
|
@@ -2065,9 +2154,9 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
2065
2154
|
className: `grow w-full min-w-0 bg-transparent focus:outline-none ${disabled ? "text-dropdown-text-disabled cursor-not-allowed" : "text-dropdown-text-primary cursor-text"}`
|
|
2066
2155
|
}
|
|
2067
2156
|
),
|
|
2068
|
-
/* @__PURE__ */ (0,
|
|
2069
|
-
disabled ? /* @__PURE__ */ (0,
|
|
2070
|
-
/* @__PURE__ */ (0,
|
|
2157
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-4", children: [
|
|
2158
|
+
disabled ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) : error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconDanger, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
|
|
2159
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2071
2160
|
IconButton,
|
|
2072
2161
|
{
|
|
2073
2162
|
size: iconButtonSize,
|
|
@@ -2075,7 +2164,7 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
2075
2164
|
disabled,
|
|
2076
2165
|
tabIndex: -1,
|
|
2077
2166
|
"aria-label": "\u0E40\u0E1B\u0E34\u0E14/\u0E1B\u0E34\u0E14\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E15\u0E31\u0E27\u0E40\u0E25\u0E37\u0E2D\u0E01",
|
|
2078
|
-
icon: /* @__PURE__ */ (0,
|
|
2167
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2079
2168
|
ChevronDown,
|
|
2080
2169
|
{
|
|
2081
2170
|
className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
|
|
@@ -2098,7 +2187,7 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
2098
2187
|
] })
|
|
2099
2188
|
]
|
|
2100
2189
|
})
|
|
2101
|
-
) : /* @__PURE__ */ (0,
|
|
2190
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
2102
2191
|
"div",
|
|
2103
2192
|
__spreadProps(__spreadValues({
|
|
2104
2193
|
ref
|
|
@@ -2131,16 +2220,16 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
2131
2220
|
},
|
|
2132
2221
|
className: `focus:outline-none ${triggerClassName}`,
|
|
2133
2222
|
children: [
|
|
2134
|
-
/* @__PURE__ */ (0,
|
|
2223
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2135
2224
|
"p",
|
|
2136
2225
|
{
|
|
2137
2226
|
className: `grow truncate ${textCenter ? "text-center" : "text-start"}`,
|
|
2138
2227
|
children: value.label || placeholder
|
|
2139
2228
|
}
|
|
2140
2229
|
),
|
|
2141
|
-
/* @__PURE__ */ (0,
|
|
2142
|
-
disabled ? /* @__PURE__ */ (0,
|
|
2143
|
-
/* @__PURE__ */ (0,
|
|
2230
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-4", children: [
|
|
2231
|
+
disabled ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}) : error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconDanger, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {}),
|
|
2232
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2144
2233
|
IconButton,
|
|
2145
2234
|
{
|
|
2146
2235
|
size: iconButtonSize,
|
|
@@ -2148,7 +2237,7 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
2148
2237
|
disabled,
|
|
2149
2238
|
tabIndex: -1,
|
|
2150
2239
|
"aria-label": "\u0E40\u0E1B\u0E34\u0E14/\u0E1B\u0E34\u0E14\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E15\u0E31\u0E27\u0E40\u0E25\u0E37\u0E2D\u0E01",
|
|
2151
|
-
icon: /* @__PURE__ */ (0,
|
|
2240
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2152
2241
|
ChevronDown,
|
|
2153
2242
|
{
|
|
2154
2243
|
className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
|
|
@@ -2165,17 +2254,17 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
2165
2254
|
]
|
|
2166
2255
|
})
|
|
2167
2256
|
),
|
|
2168
|
-
/* @__PURE__ */ (0,
|
|
2257
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2169
2258
|
"div",
|
|
2170
2259
|
{
|
|
2171
2260
|
className: `${isOpen ? "flex" : "hidden"} top-[calc(100%+4px)] left-0 absolute z-10000 bg-dropdown-background-enabled rounded-6 shadow-base w-full flex-col pt-4 overflow-hidden`,
|
|
2172
|
-
children: /* @__PURE__ */ (0,
|
|
2261
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2173
2262
|
"ul",
|
|
2174
2263
|
{
|
|
2175
2264
|
id: isCombobox ? listboxId : void 0,
|
|
2176
2265
|
role: isCombobox ? "listbox" : void 0,
|
|
2177
2266
|
className: "h-auto max-h-200 overflow-y-auto cursor-pointer",
|
|
2178
|
-
children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ (0,
|
|
2267
|
+
children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
2179
2268
|
"div",
|
|
2180
2269
|
{
|
|
2181
2270
|
onClick: () => {
|
|
@@ -2185,31 +2274,31 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
2185
2274
|
},
|
|
2186
2275
|
className: "relative h-48 py-8 px-16 border-t border-gray-50 text-label-medium hover:bg-dropdown-background-hover active:bg-dropdown-background-active flex items-center justify-between gap-12",
|
|
2187
2276
|
children: [
|
|
2188
|
-
/* @__PURE__ */ (0,
|
|
2189
|
-
value.value === item.value && /* @__PURE__ */ (0,
|
|
2277
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-label-medium text-dropdown-text-primary", children: item.label }),
|
|
2278
|
+
value.value === item.value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconCheck, { className: "h-20 w-20" })
|
|
2190
2279
|
]
|
|
2191
2280
|
}
|
|
2192
|
-
) }, idx)) : /* @__PURE__ */ (0,
|
|
2281
|
+
) }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { className: "px-16 py-8 text-label-medium text-dropdown-text-secondary", children: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" })
|
|
2193
2282
|
}
|
|
2194
2283
|
)
|
|
2195
2284
|
}
|
|
2196
2285
|
)
|
|
2197
2286
|
] }),
|
|
2198
|
-
error ? /* @__PURE__ */ (0,
|
|
2287
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-caption-caption text-left items-left text-dropdown-text-danger", children: error }) : helperText ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2199
2288
|
"p",
|
|
2200
2289
|
{
|
|
2201
2290
|
className: `text-caption-caption text-left items-left ${disabled ? "text-dropdown-text-disabled" : "text-dropdown-text-secondary"}`,
|
|
2202
2291
|
children: helperText
|
|
2203
2292
|
}
|
|
2204
|
-
) : /* @__PURE__ */ (0,
|
|
2293
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {})
|
|
2205
2294
|
] });
|
|
2206
2295
|
}
|
|
2207
2296
|
);
|
|
2208
2297
|
Dropdown.displayName = "Dropdown";
|
|
2209
2298
|
|
|
2210
2299
|
// src/components/FinancialLogo/FinancialLogo.tsx
|
|
2211
|
-
var
|
|
2212
|
-
var
|
|
2300
|
+
var import_react17 = require("react");
|
|
2301
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
2213
2302
|
var inlineClasses = {
|
|
2214
2303
|
info: "bg-alert-inline-info-bg border-alert-inline-info-border text-alert-text-primary",
|
|
2215
2304
|
success: "bg-alert-inline-success-bg border-alert-inline-success-border text-alert-text-primary",
|
|
@@ -2239,25 +2328,25 @@ var inlineIconClasses2 = {
|
|
|
2239
2328
|
common: "text-alert-inline-common-icon"
|
|
2240
2329
|
};
|
|
2241
2330
|
function InfoIcon2({ className }) {
|
|
2242
|
-
return /* @__PURE__ */ (0,
|
|
2331
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM10 6h.01M9 10h1v4h1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
2243
2332
|
}
|
|
2244
2333
|
function SuccessIcon2({ className }) {
|
|
2245
|
-
return /* @__PURE__ */ (0,
|
|
2246
|
-
/* @__PURE__ */ (0,
|
|
2247
|
-
/* @__PURE__ */ (0,
|
|
2334
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
2335
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
2336
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
2248
2337
|
] });
|
|
2249
2338
|
}
|
|
2250
2339
|
function WarningIcon3({ className }) {
|
|
2251
|
-
return /* @__PURE__ */ (0,
|
|
2340
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M8.57 3.22 1.53 15.5a1.67 1.67 0 0 0 1.43 2.5h14.08a1.67 1.67 0 0 0 1.43-2.5L11.43 3.22a1.67 1.67 0 0 0-2.86 0ZM10 7.5v3.33M10 14.17h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
2252
2341
|
}
|
|
2253
2342
|
function DangerIcon2({ className }) {
|
|
2254
|
-
return /* @__PURE__ */ (0,
|
|
2343
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM12.5 7.5l-5 5M7.5 7.5l5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
2255
2344
|
}
|
|
2256
2345
|
function CommonIcon({ className }) {
|
|
2257
|
-
return /* @__PURE__ */ (0,
|
|
2346
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM10 6v4M10 14h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
2258
2347
|
}
|
|
2259
2348
|
function CloseIcon4({ className }) {
|
|
2260
|
-
return /* @__PURE__ */ (0,
|
|
2349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
2261
2350
|
}
|
|
2262
2351
|
var defaultIcons2 = {
|
|
2263
2352
|
info: InfoIcon2,
|
|
@@ -2266,7 +2355,7 @@ var defaultIcons2 = {
|
|
|
2266
2355
|
danger: DangerIcon2,
|
|
2267
2356
|
common: CommonIcon
|
|
2268
2357
|
};
|
|
2269
|
-
var FinancialLogo = (0,
|
|
2358
|
+
var FinancialLogo = (0, import_react17.forwardRef)(
|
|
2270
2359
|
(_a, ref) => {
|
|
2271
2360
|
var _b = _a, {
|
|
2272
2361
|
variant = "info",
|
|
@@ -2302,22 +2391,22 @@ var FinancialLogo = (0, import_react16.forwardRef)(
|
|
|
2302
2391
|
variantClass,
|
|
2303
2392
|
className
|
|
2304
2393
|
].filter(Boolean).join(" ");
|
|
2305
|
-
return /* @__PURE__ */ (0,
|
|
2306
|
-
/* @__PURE__ */ (0,
|
|
2307
|
-
/* @__PURE__ */ (0,
|
|
2308
|
-
title && /* @__PURE__ */ (0,
|
|
2309
|
-
description && /* @__PURE__ */ (0,
|
|
2394
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
|
|
2395
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `shrink-0 mt-2 ${iconColorClass}`, children: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DefaultIcon, { className: "h-20 w-20" }) }),
|
|
2396
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1 min-w-0", children: [
|
|
2397
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm font-medium leading-20", children: title }),
|
|
2398
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: `text-sm leading-20 ${descColorClass} ${title ? "mt-4" : ""}`, children: description }),
|
|
2310
2399
|
children
|
|
2311
2400
|
] }),
|
|
2312
|
-
action && /* @__PURE__ */ (0,
|
|
2313
|
-
onClose && /* @__PURE__ */ (0,
|
|
2401
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `${actionClass} underline text-sm font-medium`, children: action }),
|
|
2402
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2314
2403
|
"button",
|
|
2315
2404
|
{
|
|
2316
2405
|
type: "button",
|
|
2317
2406
|
onClick: onClose,
|
|
2318
2407
|
className: `shrink-0 p-2 rounded transition-colors ${closeColorClass}`,
|
|
2319
2408
|
"aria-label": "Close",
|
|
2320
|
-
children: /* @__PURE__ */ (0,
|
|
2409
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CloseIcon4, { className: "h-16 w-16" })
|
|
2321
2410
|
}
|
|
2322
2411
|
)
|
|
2323
2412
|
] }));
|
|
@@ -2326,9 +2415,9 @@ var FinancialLogo = (0, import_react16.forwardRef)(
|
|
|
2326
2415
|
FinancialLogo.displayName = "FinancialLogo";
|
|
2327
2416
|
|
|
2328
2417
|
// src/components/Icon/Icon.tsx
|
|
2329
|
-
var
|
|
2330
|
-
var
|
|
2331
|
-
var Icon = (0,
|
|
2418
|
+
var import_react18 = require("react");
|
|
2419
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2420
|
+
var Icon = (0, import_react18.forwardRef)(
|
|
2332
2421
|
(_a, ref) => {
|
|
2333
2422
|
var _b = _a, {
|
|
2334
2423
|
name,
|
|
@@ -2356,7 +2445,7 @@ var Icon = (0, import_react17.forwardRef)(
|
|
|
2356
2445
|
"material-symbols-outlined select-none shrink-0 inline-block leading-none",
|
|
2357
2446
|
className
|
|
2358
2447
|
].filter(Boolean).join(" ");
|
|
2359
|
-
return /* @__PURE__ */ (0,
|
|
2448
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2360
2449
|
"span",
|
|
2361
2450
|
__spreadProps(__spreadValues({
|
|
2362
2451
|
ref,
|
|
@@ -2379,8 +2468,8 @@ var Icon = (0, import_react17.forwardRef)(
|
|
|
2379
2468
|
Icon.displayName = "Icon";
|
|
2380
2469
|
|
|
2381
2470
|
// src/components/Link/Link.tsx
|
|
2382
|
-
var
|
|
2383
|
-
var
|
|
2471
|
+
var import_react19 = require("react");
|
|
2472
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
2384
2473
|
var linkStyleClasses = {
|
|
2385
2474
|
brand: "font-sans text-link-text-enabled",
|
|
2386
2475
|
white: "font-sans text-link-text-enabled-inverse",
|
|
@@ -2401,7 +2490,7 @@ var iconVariantClasses = {
|
|
|
2401
2490
|
md: "w-20 h-20 text-[20px]",
|
|
2402
2491
|
lg: "w-24 h-24 text-[24px]"
|
|
2403
2492
|
};
|
|
2404
|
-
var Link = (0,
|
|
2493
|
+
var Link = (0, import_react19.forwardRef)(
|
|
2405
2494
|
(_a, ref) => {
|
|
2406
2495
|
var _b = _a, {
|
|
2407
2496
|
variant = "sm",
|
|
@@ -2433,9 +2522,9 @@ var Link = (0, import_react18.forwardRef)(
|
|
|
2433
2522
|
variantClass,
|
|
2434
2523
|
className
|
|
2435
2524
|
].filter(Boolean).join(" ");
|
|
2436
|
-
return /* @__PURE__ */ (0,
|
|
2437
|
-
/* @__PURE__ */ (0,
|
|
2438
|
-
icon && (0,
|
|
2525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", __spreadProps(__spreadValues({ ref, role: "link", className: classes }, rest), { children: [
|
|
2526
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", children: text }),
|
|
2527
|
+
icon && (0, import_react19.cloneElement)(icon, {
|
|
2439
2528
|
className: `${(_a2 = icon.props.className) != null ? _a2 : ""} ${iconClass}`
|
|
2440
2529
|
})
|
|
2441
2530
|
] }));
|
|
@@ -2444,9 +2533,9 @@ var Link = (0, import_react18.forwardRef)(
|
|
|
2444
2533
|
Link.displayName = "Link";
|
|
2445
2534
|
|
|
2446
2535
|
// src/components/Radio/Radio.tsx
|
|
2447
|
-
var
|
|
2448
|
-
var
|
|
2449
|
-
var Radio = (0,
|
|
2536
|
+
var import_react20 = require("react");
|
|
2537
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
2538
|
+
var Radio = (0, import_react20.forwardRef)(
|
|
2450
2539
|
(_a, ref) => {
|
|
2451
2540
|
var _b = _a, {
|
|
2452
2541
|
size = "sm",
|
|
@@ -2471,20 +2560,20 @@ var Radio = (0, import_react19.forwardRef)(
|
|
|
2471
2560
|
"id",
|
|
2472
2561
|
"name"
|
|
2473
2562
|
]);
|
|
2474
|
-
const reactId = (0,
|
|
2563
|
+
const reactId = (0, import_react20.useId)();
|
|
2475
2564
|
const inputId = id != null ? id : reactId;
|
|
2476
|
-
return /* @__PURE__ */ (0,
|
|
2565
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2477
2566
|
"div",
|
|
2478
2567
|
{
|
|
2479
2568
|
className: `${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
|
|
2480
|
-
children: /* @__PURE__ */ (0,
|
|
2569
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
2481
2570
|
"label",
|
|
2482
2571
|
{
|
|
2483
2572
|
htmlFor: inputId,
|
|
2484
2573
|
className: `flex gap-4 ${disabled ? "pointer-events-none text-gray-400" : "text-gray-900 cursor-pointer"}`,
|
|
2485
2574
|
children: [
|
|
2486
|
-
/* @__PURE__ */ (0,
|
|
2487
|
-
/* @__PURE__ */ (0,
|
|
2575
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
|
|
2576
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2488
2577
|
"input",
|
|
2489
2578
|
__spreadValues({
|
|
2490
2579
|
ref,
|
|
@@ -2497,14 +2586,14 @@ var Radio = (0, import_react19.forwardRef)(
|
|
|
2497
2586
|
name
|
|
2498
2587
|
}, rest)
|
|
2499
2588
|
),
|
|
2500
|
-
/* @__PURE__ */ (0,
|
|
2589
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2501
2590
|
"div",
|
|
2502
2591
|
{
|
|
2503
2592
|
className: `relative box flex items-center justify-center rounded-full border-2 group bg-white
|
|
2504
2593
|
${size === "sm" ? "h-16 w-16 my-4 ml-3 mr-3" : "m-3 h-20 w-20 text-label-large"}
|
|
2505
2594
|
${error ? "border-red-500" : "border-gray-600 peer-checked:border-blue-600 peer-disabled:border-gray-400!"}
|
|
2506
2595
|
`,
|
|
2507
|
-
children: /* @__PURE__ */ (0,
|
|
2596
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2508
2597
|
"span",
|
|
2509
2598
|
{
|
|
2510
2599
|
className: `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
|
|
@@ -2515,12 +2604,12 @@ var Radio = (0, import_react19.forwardRef)(
|
|
|
2515
2604
|
}
|
|
2516
2605
|
)
|
|
2517
2606
|
] }),
|
|
2518
|
-
/* @__PURE__ */ (0,
|
|
2607
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
2519
2608
|
"div",
|
|
2520
2609
|
{
|
|
2521
2610
|
className: `flex flex-col gap-1 ${size === "sm" ? "mt-2" : "mt-4"}`,
|
|
2522
2611
|
children: [
|
|
2523
|
-
/* @__PURE__ */ (0,
|
|
2612
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2524
2613
|
"p",
|
|
2525
2614
|
{
|
|
2526
2615
|
className: `
|
|
@@ -2530,7 +2619,7 @@ var Radio = (0, import_react19.forwardRef)(
|
|
|
2530
2619
|
children: label
|
|
2531
2620
|
}
|
|
2532
2621
|
),
|
|
2533
|
-
/* @__PURE__ */ (0,
|
|
2622
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2534
2623
|
"p",
|
|
2535
2624
|
{
|
|
2536
2625
|
className: `text-caption-caption ${disabled ? "text-gray-400" : error ? "text-red-600" : "text-gray-600"}`,
|
|
@@ -2550,17 +2639,17 @@ var Radio = (0, import_react19.forwardRef)(
|
|
|
2550
2639
|
Radio.displayName = "Radio";
|
|
2551
2640
|
|
|
2552
2641
|
// src/components/SegmentControl/SegmentControl.tsx
|
|
2553
|
-
var
|
|
2554
|
-
var
|
|
2642
|
+
var import_react21 = require("react");
|
|
2643
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2555
2644
|
var itemSizeClasses = {
|
|
2556
2645
|
sm: "min-h-32 px-8 py-6 text-label-medium",
|
|
2557
2646
|
md: "min-h-40 px-12 py-8 text-label-large",
|
|
2558
2647
|
lg: "min-h-48 px-16 py-8 text-label-large"
|
|
2559
2648
|
};
|
|
2560
|
-
var SegmentControl = (0,
|
|
2649
|
+
var SegmentControl = (0, import_react21.forwardRef)(
|
|
2561
2650
|
(_a, ref) => {
|
|
2562
2651
|
var _b = _a, { size = "md", items, selected, setSelected, onChange, className = "" } = _b, rest = __objRest(_b, ["size", "items", "selected", "setSelected", "onChange", "className"]);
|
|
2563
|
-
return /* @__PURE__ */ (0,
|
|
2652
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2564
2653
|
"div",
|
|
2565
2654
|
__spreadProps(__spreadValues({
|
|
2566
2655
|
ref,
|
|
@@ -2568,7 +2657,7 @@ var SegmentControl = (0, import_react20.forwardRef)(
|
|
|
2568
2657
|
}, rest), {
|
|
2569
2658
|
children: items.map((item) => {
|
|
2570
2659
|
const isSelected = selected === item.value;
|
|
2571
|
-
return /* @__PURE__ */ (0,
|
|
2660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2572
2661
|
"button",
|
|
2573
2662
|
{
|
|
2574
2663
|
type: "button",
|
|
@@ -2578,7 +2667,7 @@ var SegmentControl = (0, import_react20.forwardRef)(
|
|
|
2578
2667
|
onChange == null ? void 0 : onChange(item.value);
|
|
2579
2668
|
},
|
|
2580
2669
|
className: "group flex-1 min-w-0 rounded-full border-2 border-transparent p-2 outline-none cursor-pointer transition-colors focus-visible:border-segmented-control-border-focus",
|
|
2581
|
-
children: /* @__PURE__ */ (0,
|
|
2670
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
2582
2671
|
"span",
|
|
2583
2672
|
{
|
|
2584
2673
|
className: `flex w-full items-center justify-center rounded-full text-center transition-colors ${itemSizeClasses[size]} ${isSelected ? "bg-segmented-control-background-active text-segmented-control-text-inverse shadow-small group-focus-visible:bg-segmented-control-background-active-focus group-focus-visible:text-segmented-control-text-primary" : "text-segmented-control-text-primary hover:bg-segmented-control-background-hover"}`,
|
|
@@ -2596,8 +2685,8 @@ var SegmentControl = (0, import_react20.forwardRef)(
|
|
|
2596
2685
|
SegmentControl.displayName = "SegmentControl";
|
|
2597
2686
|
|
|
2598
2687
|
// src/components/Slider/Slider.tsx
|
|
2599
|
-
var
|
|
2600
|
-
var
|
|
2688
|
+
var import_react22 = require("react");
|
|
2689
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2601
2690
|
var sizeConfig = {
|
|
2602
2691
|
small: {
|
|
2603
2692
|
trackH: "h-4",
|
|
@@ -2628,7 +2717,7 @@ var sizeConfig = {
|
|
|
2628
2717
|
}
|
|
2629
2718
|
};
|
|
2630
2719
|
function ChevronGlyphs({ size, color }) {
|
|
2631
|
-
return /* @__PURE__ */ (0,
|
|
2720
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2632
2721
|
"svg",
|
|
2633
2722
|
{
|
|
2634
2723
|
width: size,
|
|
@@ -2638,7 +2727,7 @@ function ChevronGlyphs({ size, color }) {
|
|
|
2638
2727
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2639
2728
|
"aria-hidden": "true",
|
|
2640
2729
|
children: [
|
|
2641
|
-
/* @__PURE__ */ (0,
|
|
2730
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2642
2731
|
"path",
|
|
2643
2732
|
{
|
|
2644
2733
|
d: "M4.75 3.25L2.25 6L4.75 8.75",
|
|
@@ -2648,7 +2737,7 @@ function ChevronGlyphs({ size, color }) {
|
|
|
2648
2737
|
strokeLinejoin: "round"
|
|
2649
2738
|
}
|
|
2650
2739
|
),
|
|
2651
|
-
/* @__PURE__ */ (0,
|
|
2740
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2652
2741
|
"path",
|
|
2653
2742
|
{
|
|
2654
2743
|
d: "M7.25 3.25L9.75 6L7.25 8.75",
|
|
@@ -2662,7 +2751,7 @@ function ChevronGlyphs({ size, color }) {
|
|
|
2662
2751
|
}
|
|
2663
2752
|
);
|
|
2664
2753
|
}
|
|
2665
|
-
var Slider = (0,
|
|
2754
|
+
var Slider = (0, import_react22.forwardRef)(
|
|
2666
2755
|
(_a, ref) => {
|
|
2667
2756
|
var _b = _a, {
|
|
2668
2757
|
size = "medium",
|
|
@@ -2697,15 +2786,15 @@ var Slider = (0, import_react21.forwardRef)(
|
|
|
2697
2786
|
"onChange",
|
|
2698
2787
|
"aria-label"
|
|
2699
2788
|
]);
|
|
2700
|
-
const reactId = (0,
|
|
2789
|
+
const reactId = (0, import_react22.useId)();
|
|
2701
2790
|
const inputId = id != null ? id : reactId;
|
|
2702
2791
|
const sz = sizeConfig[size];
|
|
2703
2792
|
const ariaLabel = ariaLabelProp != null ? ariaLabelProp : typeof label === "string" ? void 0 : "Slider";
|
|
2704
2793
|
const ariaDescriptionId = description ? `${inputId}-description` : void 0;
|
|
2705
2794
|
const isControlled = controlledValue !== void 0;
|
|
2706
|
-
const [internalValue, setInternalValue] = (0,
|
|
2795
|
+
const [internalValue, setInternalValue] = (0, import_react22.useState)(defaultValue != null ? defaultValue : min);
|
|
2707
2796
|
const currentValue = isControlled ? controlledValue : internalValue;
|
|
2708
|
-
const handleChange = (0,
|
|
2797
|
+
const handleChange = (0, import_react22.useCallback)(
|
|
2709
2798
|
(e) => {
|
|
2710
2799
|
const val = Number(e.target.value);
|
|
2711
2800
|
if (!isControlled) {
|
|
@@ -2725,13 +2814,13 @@ var Slider = (0, import_react21.forwardRef)(
|
|
|
2725
2814
|
const descriptionColor = disabled ? "text-slider-label-disabled" : "text-slider-description";
|
|
2726
2815
|
const thumbOffset = percent * sz.thumbPx / 100;
|
|
2727
2816
|
const fillOffset = sz.thumbPx / 2 - thumbOffset;
|
|
2728
|
-
return /* @__PURE__ */ (0,
|
|
2817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2729
2818
|
"div",
|
|
2730
2819
|
{
|
|
2731
2820
|
className: ["flex w-full flex-col gap-8 font-sans", className].filter(Boolean).join(" "),
|
|
2732
2821
|
children: [
|
|
2733
|
-
(label || showValue && !disabled) && /* @__PURE__ */ (0,
|
|
2734
|
-
label && /* @__PURE__ */ (0,
|
|
2822
|
+
(label || showValue && !disabled) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
2823
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2735
2824
|
"label",
|
|
2736
2825
|
{
|
|
2737
2826
|
htmlFor: inputId,
|
|
@@ -2744,7 +2833,7 @@ var Slider = (0, import_react21.forwardRef)(
|
|
|
2744
2833
|
children: label
|
|
2745
2834
|
}
|
|
2746
2835
|
),
|
|
2747
|
-
showValue && /* @__PURE__ */ (0,
|
|
2836
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2748
2837
|
"span",
|
|
2749
2838
|
{
|
|
2750
2839
|
className: [sz.description, "tabular-nums", labelColor].join(" "),
|
|
@@ -2752,7 +2841,7 @@ var Slider = (0, import_react21.forwardRef)(
|
|
|
2752
2841
|
}
|
|
2753
2842
|
)
|
|
2754
2843
|
] }),
|
|
2755
|
-
/* @__PURE__ */ (0,
|
|
2844
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2756
2845
|
"div",
|
|
2757
2846
|
{
|
|
2758
2847
|
className: [
|
|
@@ -2761,7 +2850,7 @@ var Slider = (0, import_react21.forwardRef)(
|
|
|
2761
2850
|
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
2762
2851
|
].join(" "),
|
|
2763
2852
|
children: [
|
|
2764
|
-
/* @__PURE__ */ (0,
|
|
2853
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2765
2854
|
"div",
|
|
2766
2855
|
{
|
|
2767
2856
|
className: [
|
|
@@ -2771,14 +2860,14 @@ var Slider = (0, import_react21.forwardRef)(
|
|
|
2771
2860
|
].join(" ")
|
|
2772
2861
|
}
|
|
2773
2862
|
),
|
|
2774
|
-
/* @__PURE__ */ (0,
|
|
2863
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2775
2864
|
"div",
|
|
2776
2865
|
{
|
|
2777
2866
|
className: ["absolute left-0 rounded-full", sz.trackH, fillBg].join(" "),
|
|
2778
2867
|
style: { width: `calc(${percent}% + ${fillOffset}px)` }
|
|
2779
2868
|
}
|
|
2780
2869
|
),
|
|
2781
|
-
/* @__PURE__ */ (0,
|
|
2870
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2782
2871
|
"input",
|
|
2783
2872
|
__spreadValues({
|
|
2784
2873
|
ref,
|
|
@@ -2799,7 +2888,7 @@ var Slider = (0, import_react21.forwardRef)(
|
|
|
2799
2888
|
].join(" ")
|
|
2800
2889
|
}, rest)
|
|
2801
2890
|
),
|
|
2802
|
-
/* @__PURE__ */ (0,
|
|
2891
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2803
2892
|
"div",
|
|
2804
2893
|
{
|
|
2805
2894
|
className: [
|
|
@@ -2812,13 +2901,13 @@ var Slider = (0, import_react21.forwardRef)(
|
|
|
2812
2901
|
!disabled && "peer-hover:shadow-medium"
|
|
2813
2902
|
].filter(Boolean).join(" "),
|
|
2814
2903
|
style: { left: `calc(${percent}% - ${thumbOffset}px)` },
|
|
2815
|
-
children: /* @__PURE__ */ (0,
|
|
2904
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronGlyphs, { size: sz.iconPx, color: iconColor })
|
|
2816
2905
|
}
|
|
2817
2906
|
)
|
|
2818
2907
|
]
|
|
2819
2908
|
}
|
|
2820
2909
|
),
|
|
2821
|
-
description && /* @__PURE__ */ (0,
|
|
2910
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2822
2911
|
"span",
|
|
2823
2912
|
{
|
|
2824
2913
|
id: ariaDescriptionId,
|
|
@@ -2834,9 +2923,9 @@ var Slider = (0, import_react21.forwardRef)(
|
|
|
2834
2923
|
Slider.displayName = "Slider";
|
|
2835
2924
|
|
|
2836
2925
|
// src/components/Tab/Tab.tsx
|
|
2837
|
-
var
|
|
2838
|
-
var
|
|
2839
|
-
var Tab = (0,
|
|
2926
|
+
var import_react23 = require("react");
|
|
2927
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2928
|
+
var Tab = (0, import_react23.forwardRef)(
|
|
2840
2929
|
(_a, ref) => {
|
|
2841
2930
|
var _b = _a, {
|
|
2842
2931
|
size = "md",
|
|
@@ -2855,7 +2944,7 @@ var Tab = (0, import_react22.forwardRef)(
|
|
|
2855
2944
|
"setSelected",
|
|
2856
2945
|
"className"
|
|
2857
2946
|
]);
|
|
2858
|
-
return /* @__PURE__ */ (0,
|
|
2947
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2859
2948
|
"div",
|
|
2860
2949
|
__spreadProps(__spreadValues({
|
|
2861
2950
|
ref,
|
|
@@ -2873,9 +2962,9 @@ var Tab = (0, import_react22.forwardRef)(
|
|
|
2873
2962
|
Tab.displayName = "Tab";
|
|
2874
2963
|
|
|
2875
2964
|
// src/components/TextArea/TextArea.tsx
|
|
2876
|
-
var
|
|
2877
|
-
var
|
|
2878
|
-
var TextArea = (0,
|
|
2965
|
+
var import_react24 = require("react");
|
|
2966
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2967
|
+
var TextArea = (0, import_react24.forwardRef)(
|
|
2879
2968
|
(_a, ref) => {
|
|
2880
2969
|
var _b = _a, {
|
|
2881
2970
|
error,
|
|
@@ -2915,21 +3004,21 @@ var TextArea = (0, import_react23.forwardRef)(
|
|
|
2915
3004
|
"className"
|
|
2916
3005
|
]);
|
|
2917
3006
|
var _a2;
|
|
2918
|
-
const [isFocused, setIsFocused] = (0,
|
|
3007
|
+
const [isFocused, setIsFocused] = (0, import_react24.useState)(false);
|
|
2919
3008
|
const isActive = isFocused && !!value;
|
|
2920
|
-
return /* @__PURE__ */ (0,
|
|
2921
|
-
label || showCounter ? /* @__PURE__ */ (0,
|
|
2922
|
-
label ? /* @__PURE__ */ (0,
|
|
3009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
|
|
3010
|
+
label || showCounter ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full flex justify-between items-center gap-8", children: [
|
|
3011
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2923
3012
|
"p",
|
|
2924
3013
|
{
|
|
2925
3014
|
className: `text-label-medium text-left items-left flex gap-4 ${disabled ? "text-text-area-text-disabled" : "text-text-area-text-primary"}`,
|
|
2926
3015
|
children: [
|
|
2927
3016
|
label,
|
|
2928
|
-
optional && /* @__PURE__ */ (0,
|
|
3017
|
+
optional && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-text-area-text-secondary", children: `(\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E07\u0E04\u0E31\u0E1A)` })
|
|
2929
3018
|
]
|
|
2930
3019
|
}
|
|
2931
|
-
) : /* @__PURE__ */ (0,
|
|
2932
|
-
showCounter && /* @__PURE__ */ (0,
|
|
3020
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", {}),
|
|
3021
|
+
showCounter && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2933
3022
|
"p",
|
|
2934
3023
|
{
|
|
2935
3024
|
className: `shrink-0 text-caption-caption ${disabled ? "text-text-area-text-disabled" : "text-text-area-text-tertiary"}`,
|
|
@@ -2940,13 +3029,13 @@ var TextArea = (0, import_react23.forwardRef)(
|
|
|
2940
3029
|
]
|
|
2941
3030
|
}
|
|
2942
3031
|
)
|
|
2943
|
-
] }) : /* @__PURE__ */ (0,
|
|
2944
|
-
/* @__PURE__ */ (0,
|
|
3032
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {}),
|
|
3033
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2945
3034
|
"div",
|
|
2946
3035
|
{
|
|
2947
3036
|
className: `relative w-full rounded-6 border ${disabled ? "bg-text-area-background-disabled border-text-area-border-disabled" : error ? `bg-text-area-background-enabled border-text-area-border-danger ${isFocused ? "ring-1 ring-inset ring-text-area-border-danger" : ""}` : isActive ? "bg-text-area-background-enabled border-text-area-border-active ring-1 ring-inset ring-text-area-border-active" : isFocused ? "bg-text-area-background-enabled border-text-area-border-focus ring-1 ring-inset ring-text-area-border-focus" : "bg-text-area-background-enabled border-text-area-border-enabled hover:border-text-area-border-hover"} ${className != null ? className : ""}`,
|
|
2948
3037
|
children: [
|
|
2949
|
-
/* @__PURE__ */ (0,
|
|
3038
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2950
3039
|
"textarea",
|
|
2951
3040
|
__spreadValues({
|
|
2952
3041
|
ref,
|
|
@@ -2967,14 +3056,14 @@ var TextArea = (0, import_react23.forwardRef)(
|
|
|
2967
3056
|
className: `block w-full min-w-0 pt-12 pb-8 pl-16 pr-48 text-body-small bg-transparent focus:outline-none placeholder:text-text-area-text-tertiary ${disabled ? "resize-none text-text-area-text-disabled" : "resize-y text-text-area-text-primary"}`
|
|
2968
3057
|
}, props)
|
|
2969
3058
|
),
|
|
2970
|
-
pending ? /* @__PURE__ */ (0,
|
|
3059
|
+
pending ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Loading, { size: "sm", className: "shrink-0 absolute right-12 top-12" }) : clearable && isFocused && value ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2971
3060
|
IconButton,
|
|
2972
3061
|
{
|
|
2973
3062
|
size: "sm",
|
|
2974
3063
|
transparent: true,
|
|
2975
3064
|
"aria-label": "\u0E25\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21",
|
|
2976
3065
|
className: "absolute right-6 top-6",
|
|
2977
|
-
icon: /* @__PURE__ */ (0,
|
|
3066
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2978
3067
|
"svg",
|
|
2979
3068
|
{
|
|
2980
3069
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2982,7 +3071,7 @@ var TextArea = (0, import_react23.forwardRef)(
|
|
|
2982
3071
|
height: "20",
|
|
2983
3072
|
viewBox: "0 0 20 20",
|
|
2984
3073
|
fill: "none",
|
|
2985
|
-
children: /* @__PURE__ */ (0,
|
|
3074
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2986
3075
|
"path",
|
|
2987
3076
|
{
|
|
2988
3077
|
d: "M14.7119 6.0625L10.7744 10L14.7119 13.9375L13.9375 14.7119L10 10.7744L6.0625 14.7119L5.28809 13.9375L9.22559 10L5.28809 6.0625L6.0625 5.28809L10 9.22559L13.9375 5.28809L14.7119 6.0625Z",
|
|
@@ -3000,7 +3089,7 @@ var TextArea = (0, import_react23.forwardRef)(
|
|
|
3000
3089
|
});
|
|
3001
3090
|
}
|
|
3002
3091
|
}
|
|
3003
|
-
) : success ? /* @__PURE__ */ (0,
|
|
3092
|
+
) : success ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3004
3093
|
"svg",
|
|
3005
3094
|
{
|
|
3006
3095
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3009,7 +3098,7 @@ var TextArea = (0, import_react23.forwardRef)(
|
|
|
3009
3098
|
viewBox: "0 0 20 20",
|
|
3010
3099
|
fill: "none",
|
|
3011
3100
|
className: "shrink-0 text-accent-success flex h-20 w-20 items-center justify-center absolute right-12 top-12",
|
|
3012
|
-
children: /* @__PURE__ */ (0,
|
|
3101
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3013
3102
|
"path",
|
|
3014
3103
|
{
|
|
3015
3104
|
fillRule: "evenodd",
|
|
@@ -3019,7 +3108,7 @@ var TextArea = (0, import_react23.forwardRef)(
|
|
|
3019
3108
|
}
|
|
3020
3109
|
)
|
|
3021
3110
|
}
|
|
3022
|
-
) : error ? /* @__PURE__ */ (0,
|
|
3111
|
+
) : error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3023
3112
|
"svg",
|
|
3024
3113
|
{
|
|
3025
3114
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3028,7 +3117,7 @@ var TextArea = (0, import_react23.forwardRef)(
|
|
|
3028
3117
|
viewBox: "0 0 20 20",
|
|
3029
3118
|
fill: "none",
|
|
3030
3119
|
className: "shrink-0 text-text-area-text-danger flex h-20 w-20 items-center justify-center absolute right-12 top-12",
|
|
3031
|
-
children: /* @__PURE__ */ (0,
|
|
3120
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3032
3121
|
"path",
|
|
3033
3122
|
{
|
|
3034
3123
|
d: "M10.0078 2.41699C11.0548 2.41699 12.0363 2.61407 12.9512 3.00879C13.8657 3.40341 14.6687 3.94646 15.3604 4.6377C16.0522 5.32922 16.5962 6.13426 16.9912 7.05176C17.386 7.96936 17.583 8.95002 17.583 9.99316C17.583 11.0363 17.3859 12.0187 16.9912 12.9404C16.5966 13.862 16.0536 14.6687 15.3623 15.3604C14.6708 16.0522 13.8657 16.5962 12.9482 16.9912C12.0306 17.386 11.05 17.583 10.0068 17.583C8.96373 17.583 7.9813 17.3859 7.05957 16.9912C6.13798 16.5966 5.33135 16.0536 4.63965 15.3623C3.94784 14.6708 3.40379 13.8642 3.00879 12.9434C2.61398 12.0228 2.41703 11.039 2.41699 9.99219C2.41699 8.94524 2.61407 7.96369 3.00879 7.04883C3.40341 6.13429 3.94646 5.33128 4.6377 4.63965C5.32922 3.94784 6.13581 3.40379 7.05664 3.00879C7.97723 2.61398 8.961 2.41703 10.0078 2.41699ZM10.0039 12.5967C9.83828 12.5968 9.69804 12.6527 9.58301 12.7646C9.46793 12.8769 9.41016 13.0159 9.41016 13.1816C9.4102 13.3472 9.46621 13.4875 9.57812 13.6025C9.69035 13.7177 9.83026 13.7754 9.99609 13.7754C10.1617 13.7753 10.302 13.7195 10.417 13.6074C10.5321 13.4952 10.5898 13.3562 10.5898 13.1904C10.5898 13.0246 10.534 12.8837 10.4219 12.7686C10.3097 12.6536 10.1697 12.5967 10.0039 12.5967ZM9.45801 11.0645H10.542V6.06445H9.45801V11.0645Z",
|
|
@@ -3036,42 +3125,42 @@ var TextArea = (0, import_react23.forwardRef)(
|
|
|
3036
3125
|
}
|
|
3037
3126
|
)
|
|
3038
3127
|
}
|
|
3039
|
-
) : /* @__PURE__ */ (0,
|
|
3128
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {})
|
|
3040
3129
|
]
|
|
3041
3130
|
}
|
|
3042
3131
|
),
|
|
3043
|
-
error ? /* @__PURE__ */ (0,
|
|
3132
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-caption-caption text-left items-left text-text-area-text-danger", children: error }) : helperText ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
3044
3133
|
"p",
|
|
3045
3134
|
{
|
|
3046
3135
|
className: `text-caption-caption text-left items-left ${disabled ? "text-text-area-text-disabled" : "text-text-area-text-secondary"}`,
|
|
3047
3136
|
children: helperText
|
|
3048
3137
|
}
|
|
3049
|
-
) : /* @__PURE__ */ (0,
|
|
3138
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {})
|
|
3050
3139
|
] });
|
|
3051
3140
|
}
|
|
3052
3141
|
);
|
|
3053
3142
|
TextArea.displayName = "TextArea";
|
|
3054
3143
|
|
|
3055
3144
|
// src/components/Toast/Toast.tsx
|
|
3056
|
-
var
|
|
3057
|
-
var
|
|
3145
|
+
var import_react25 = require("react");
|
|
3146
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
3058
3147
|
function CheckCircleIcon({ className }) {
|
|
3059
|
-
return /* @__PURE__ */ (0,
|
|
3060
|
-
/* @__PURE__ */ (0,
|
|
3061
|
-
/* @__PURE__ */ (0,
|
|
3148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
3149
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
3150
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
3062
3151
|
] });
|
|
3063
3152
|
}
|
|
3064
3153
|
function ProgressIcon({ className }) {
|
|
3065
|
-
return /* @__PURE__ */ (0,
|
|
3154
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Loading, { size: "sm", className });
|
|
3066
3155
|
}
|
|
3067
3156
|
function ErrorIcon({ className }) {
|
|
3068
|
-
return /* @__PURE__ */ (0,
|
|
3069
|
-
/* @__PURE__ */ (0,
|
|
3070
|
-
/* @__PURE__ */ (0,
|
|
3157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
3158
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
3159
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M10 6.5v4M10 13.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
|
|
3071
3160
|
] });
|
|
3072
3161
|
}
|
|
3073
3162
|
function CloseIcon5({ className }) {
|
|
3074
|
-
return /* @__PURE__ */ (0,
|
|
3163
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
3075
3164
|
}
|
|
3076
3165
|
var defaultIcons3 = {
|
|
3077
3166
|
default: CheckCircleIcon,
|
|
@@ -3088,7 +3177,7 @@ var iconColorClasses = {
|
|
|
3088
3177
|
progress: "text-toast-progress-icon",
|
|
3089
3178
|
error: "text-toast-error-icon"
|
|
3090
3179
|
};
|
|
3091
|
-
var Toast = (0,
|
|
3180
|
+
var Toast = (0, import_react25.forwardRef)(
|
|
3092
3181
|
(_a, ref) => {
|
|
3093
3182
|
var _b = _a, {
|
|
3094
3183
|
type = "default",
|
|
@@ -3116,10 +3205,10 @@ var Toast = (0, import_react24.forwardRef)(
|
|
|
3116
3205
|
typeClasses[type],
|
|
3117
3206
|
className
|
|
3118
3207
|
].filter(Boolean).join(" ");
|
|
3119
|
-
return /* @__PURE__ */ (0,
|
|
3120
|
-
icon && /* @__PURE__ */ (0,
|
|
3121
|
-
/* @__PURE__ */ (0,
|
|
3122
|
-
actionLabel && onAction && /* @__PURE__ */ (0,
|
|
3208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
|
|
3209
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DefaultIcon, { className: "h-20 w-20" }) }),
|
|
3210
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex-1 text-sm font-medium leading-20 truncate", children }),
|
|
3211
|
+
actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3123
3212
|
"button",
|
|
3124
3213
|
{
|
|
3125
3214
|
type: "button",
|
|
@@ -3128,14 +3217,14 @@ var Toast = (0, import_react24.forwardRef)(
|
|
|
3128
3217
|
children: actionLabel
|
|
3129
3218
|
}
|
|
3130
3219
|
),
|
|
3131
|
-
onDismiss && /* @__PURE__ */ (0,
|
|
3220
|
+
onDismiss && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
3132
3221
|
"button",
|
|
3133
3222
|
{
|
|
3134
3223
|
type: "button",
|
|
3135
3224
|
onClick: onDismiss,
|
|
3136
3225
|
className: "shrink-0 p-4 rounded-md text-toast-dismiss hover:text-toast-dismiss-hover transition-colors",
|
|
3137
3226
|
"aria-label": "Dismiss",
|
|
3138
|
-
children: /* @__PURE__ */ (0,
|
|
3227
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CloseIcon5, { className: "h-16 w-16" })
|
|
3139
3228
|
}
|
|
3140
3229
|
)
|
|
3141
3230
|
] }));
|
|
@@ -3144,9 +3233,9 @@ var Toast = (0, import_react24.forwardRef)(
|
|
|
3144
3233
|
Toast.displayName = "Toast";
|
|
3145
3234
|
|
|
3146
3235
|
// src/components/ToggleSwitch/ToggleSwitch.tsx
|
|
3147
|
-
var
|
|
3148
|
-
var
|
|
3149
|
-
var ToggleSwitch = (0,
|
|
3236
|
+
var import_react26 = require("react");
|
|
3237
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
3238
|
+
var ToggleSwitch = (0, import_react26.forwardRef)(
|
|
3150
3239
|
(_a, ref) => {
|
|
3151
3240
|
var _b = _a, {
|
|
3152
3241
|
value,
|
|
@@ -3161,14 +3250,14 @@ var ToggleSwitch = (0, import_react25.forwardRef)(
|
|
|
3161
3250
|
"setIsSelected",
|
|
3162
3251
|
"className"
|
|
3163
3252
|
]);
|
|
3164
|
-
return /* @__PURE__ */ (0,
|
|
3253
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
3165
3254
|
"label",
|
|
3166
3255
|
__spreadProps(__spreadValues({
|
|
3167
3256
|
ref,
|
|
3168
3257
|
className: `inline-flex items-center ${className}`
|
|
3169
3258
|
}, rest), {
|
|
3170
3259
|
children: [
|
|
3171
|
-
/* @__PURE__ */ (0,
|
|
3260
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3172
3261
|
"input",
|
|
3173
3262
|
{
|
|
3174
3263
|
type: "checkbox",
|
|
@@ -3178,7 +3267,7 @@ var ToggleSwitch = (0, import_react25.forwardRef)(
|
|
|
3178
3267
|
onChange: () => !isDisabled && (setIsSelected == null ? void 0 : setIsSelected(!isSelected))
|
|
3179
3268
|
}
|
|
3180
3269
|
),
|
|
3181
|
-
/* @__PURE__ */ (0,
|
|
3270
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3182
3271
|
"div",
|
|
3183
3272
|
{
|
|
3184
3273
|
className: `${isDisabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-gray-300 hover:peer-checked:bg-green-700"} relative w-48 h-26 bg-gray-200 rounded-full peer-checked:after:translate-x-22 rtl:peer-checked:after:-translate-x-22 peer-checked:after:border-white after:content-[''] after:absolute after:top-4 after:left-4 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-18 after:w-18 after:transition-all peer-checked:bg-green-600 `
|
|
@@ -3190,94 +3279,6 @@ var ToggleSwitch = (0, import_react25.forwardRef)(
|
|
|
3190
3279
|
}
|
|
3191
3280
|
);
|
|
3192
3281
|
ToggleSwitch.displayName = "ToggleSwitch";
|
|
3193
|
-
|
|
3194
|
-
// src/components/Tooltip/Tooltip.tsx
|
|
3195
|
-
var import_react26 = require("react");
|
|
3196
|
-
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
3197
|
-
var Tooltip = (0, import_react26.forwardRef)(
|
|
3198
|
-
(_a, ref) => {
|
|
3199
|
-
var _b = _a, {
|
|
3200
|
-
size = "md",
|
|
3201
|
-
children,
|
|
3202
|
-
headText,
|
|
3203
|
-
text,
|
|
3204
|
-
position = "top",
|
|
3205
|
-
className = ""
|
|
3206
|
-
} = _b, rest = __objRest(_b, [
|
|
3207
|
-
"size",
|
|
3208
|
-
"children",
|
|
3209
|
-
"headText",
|
|
3210
|
-
"text",
|
|
3211
|
-
"position",
|
|
3212
|
-
"className"
|
|
3213
|
-
]);
|
|
3214
|
-
const wrapperRef = (0, import_react26.useRef)(null);
|
|
3215
|
-
const [isVisible, setIsVisible] = (0, import_react26.useState)(false);
|
|
3216
|
-
const [isHovered, setIsHovered] = (0, import_react26.useState)(false);
|
|
3217
|
-
(0, import_react26.useEffect)(() => {
|
|
3218
|
-
const handleClickOutside = (event) => {
|
|
3219
|
-
if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
|
|
3220
|
-
setIsVisible(false);
|
|
3221
|
-
setIsHovered(false);
|
|
3222
|
-
}
|
|
3223
|
-
};
|
|
3224
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
3225
|
-
return () => {
|
|
3226
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
3227
|
-
};
|
|
3228
|
-
}, []);
|
|
3229
|
-
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
3230
|
-
"div",
|
|
3231
|
-
__spreadProps(__spreadValues({
|
|
3232
|
-
className: `group relative inline-block ${className}`,
|
|
3233
|
-
ref
|
|
3234
|
-
}, rest), {
|
|
3235
|
-
children: [
|
|
3236
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3237
|
-
"div",
|
|
3238
|
-
{
|
|
3239
|
-
ref: wrapperRef,
|
|
3240
|
-
onClick: () => {
|
|
3241
|
-
if (isVisible) {
|
|
3242
|
-
setIsVisible(false);
|
|
3243
|
-
setIsHovered(false);
|
|
3244
|
-
} else {
|
|
3245
|
-
setIsVisible(true);
|
|
3246
|
-
}
|
|
3247
|
-
},
|
|
3248
|
-
onMouseEnter: () => setIsHovered(true),
|
|
3249
|
-
onMouseLeave: () => setIsHovered(false),
|
|
3250
|
-
children
|
|
3251
|
-
}
|
|
3252
|
-
),
|
|
3253
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
3254
|
-
"div",
|
|
3255
|
-
{
|
|
3256
|
-
className: `min-w-100 max-w-300 whitespace-nowrap rounded bg-gray-900 text-white ${size === "lg" ? "text-body-regular py-12 px-16" : size === "md" ? "text-body-small px-12 pt-10 pb-8" : "text-body-small px-8 pt-6 pb-4"} ${position === "right" && `absolute left-full top-1/2 z-20 ml-8 -translate-y-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}` || position === "top" && `absolute bottom-full left-1/2 z-20 mb-8 -translate-x-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}` || position === "left" && `absolute right-full top-1/2 z-20 mr-8 -translate-y-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}` || position === "bottom" && `absolute left-1/2 top-full z-20 mt-8 -translate-x-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}`}`,
|
|
3257
|
-
children: [
|
|
3258
|
-
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3259
|
-
"span",
|
|
3260
|
-
{
|
|
3261
|
-
className: ` ${position === "right" && `absolute -left-3 top-1/2 -z-10 h-8 w-8 -translate-y-1/2 rotate-45 rounded-xs bg-black` || position === "top" && `absolute -bottom-3 left-1/2 -z-10 h-8 w-8 -translate-x-1/2 rotate-45 rounded-xs bg-black` || position === "left" && `absolute -right-3 top-1/2 -z-10 h-8 w-8 -translate-y-1/2 rotate-45 rounded-xs bg-black` || position === "bottom" && `absolute left-1/2 -top-3 -z-10 h-8 w-8 -translate-x-1/2 rotate-45 rounded-xs bg-black`} `
|
|
3262
|
-
}
|
|
3263
|
-
),
|
|
3264
|
-
headText ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
3265
|
-
"p",
|
|
3266
|
-
{
|
|
3267
|
-
className: `text-sm text-white font-semibold text-center ${text ? "mb-5" : ""}`,
|
|
3268
|
-
children: headText
|
|
3269
|
-
}
|
|
3270
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, {}),
|
|
3271
|
-
text ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-xs text-white font-normal text-center text-wrap", children: text }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, {})
|
|
3272
|
-
]
|
|
3273
|
-
}
|
|
3274
|
-
)
|
|
3275
|
-
]
|
|
3276
|
-
})
|
|
3277
|
-
);
|
|
3278
|
-
}
|
|
3279
|
-
);
|
|
3280
|
-
Tooltip.displayName = "Tooltip";
|
|
3281
3282
|
// Annotate the CommonJS export names for ESM import in node:
|
|
3282
3283
|
0 && (module.exports = {
|
|
3283
3284
|
Accordion,
|