@refinn/core-ui 0.1.19 → 0.1.21
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 +283 -282
- package/dist/index.js +290 -289
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1654,19 +1654,114 @@ Dialog.displayName = "Dialog";
|
|
|
1654
1654
|
|
|
1655
1655
|
// src/components/Drawer/Drawer.tsx
|
|
1656
1656
|
import {
|
|
1657
|
-
forwardRef as
|
|
1658
|
-
useEffect as
|
|
1659
|
-
useState as
|
|
1657
|
+
forwardRef as forwardRef15,
|
|
1658
|
+
useEffect as useEffect4,
|
|
1659
|
+
useState as useState8
|
|
1660
1660
|
} from "react";
|
|
1661
1661
|
import { createPortal as createPortal2 } from "react-dom";
|
|
1662
|
+
|
|
1663
|
+
// src/components/Tooltip/Tooltip.tsx
|
|
1664
|
+
import {
|
|
1665
|
+
useState as useState7,
|
|
1666
|
+
useEffect as useEffect3,
|
|
1667
|
+
useRef as useRef3,
|
|
1668
|
+
forwardRef as forwardRef14
|
|
1669
|
+
} from "react";
|
|
1662
1670
|
import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1671
|
+
var Tooltip = forwardRef14(
|
|
1672
|
+
(_a, ref) => {
|
|
1673
|
+
var _b = _a, {
|
|
1674
|
+
size = "md",
|
|
1675
|
+
children,
|
|
1676
|
+
headText,
|
|
1677
|
+
text,
|
|
1678
|
+
position = "top",
|
|
1679
|
+
className = ""
|
|
1680
|
+
} = _b, rest = __objRest(_b, [
|
|
1681
|
+
"size",
|
|
1682
|
+
"children",
|
|
1683
|
+
"headText",
|
|
1684
|
+
"text",
|
|
1685
|
+
"position",
|
|
1686
|
+
"className"
|
|
1687
|
+
]);
|
|
1688
|
+
const wrapperRef = useRef3(null);
|
|
1689
|
+
const [isVisible, setIsVisible] = useState7(false);
|
|
1690
|
+
const [isHovered, setIsHovered] = useState7(false);
|
|
1691
|
+
useEffect3(() => {
|
|
1692
|
+
const handleClickOutside = (event) => {
|
|
1693
|
+
if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
|
|
1694
|
+
setIsVisible(false);
|
|
1695
|
+
setIsHovered(false);
|
|
1696
|
+
}
|
|
1697
|
+
};
|
|
1698
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
1699
|
+
return () => {
|
|
1700
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
1701
|
+
};
|
|
1702
|
+
}, []);
|
|
1703
|
+
return /* @__PURE__ */ jsxs12(
|
|
1704
|
+
"div",
|
|
1705
|
+
__spreadProps(__spreadValues({
|
|
1706
|
+
className: `group relative inline-block ${className}`,
|
|
1707
|
+
ref
|
|
1708
|
+
}, rest), {
|
|
1709
|
+
children: [
|
|
1710
|
+
/* @__PURE__ */ jsx14(
|
|
1711
|
+
"div",
|
|
1712
|
+
{
|
|
1713
|
+
ref: wrapperRef,
|
|
1714
|
+
onClick: () => {
|
|
1715
|
+
if (isVisible) {
|
|
1716
|
+
setIsVisible(false);
|
|
1717
|
+
setIsHovered(false);
|
|
1718
|
+
} else {
|
|
1719
|
+
setIsVisible(true);
|
|
1720
|
+
}
|
|
1721
|
+
},
|
|
1722
|
+
onMouseEnter: () => setIsHovered(true),
|
|
1723
|
+
onMouseLeave: () => setIsHovered(false),
|
|
1724
|
+
children
|
|
1725
|
+
}
|
|
1726
|
+
),
|
|
1727
|
+
/* @__PURE__ */ jsxs12(
|
|
1728
|
+
"div",
|
|
1729
|
+
{
|
|
1730
|
+
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"}`}`,
|
|
1731
|
+
children: [
|
|
1732
|
+
/* @__PURE__ */ jsx14(
|
|
1733
|
+
"span",
|
|
1734
|
+
{
|
|
1735
|
+
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`} `
|
|
1736
|
+
}
|
|
1737
|
+
),
|
|
1738
|
+
headText ? /* @__PURE__ */ jsx14(
|
|
1739
|
+
"p",
|
|
1740
|
+
{
|
|
1741
|
+
className: `text-sm text-white font-semibold text-center ${text ? "mb-5" : ""}`,
|
|
1742
|
+
children: headText
|
|
1743
|
+
}
|
|
1744
|
+
) : /* @__PURE__ */ jsx14(Fragment3, {}),
|
|
1745
|
+
text ? /* @__PURE__ */ jsx14("p", { className: "text-xs text-white font-normal text-center text-wrap", children: text }) : /* @__PURE__ */ jsx14(Fragment3, {})
|
|
1746
|
+
]
|
|
1747
|
+
}
|
|
1748
|
+
)
|
|
1749
|
+
]
|
|
1750
|
+
})
|
|
1751
|
+
);
|
|
1752
|
+
}
|
|
1753
|
+
);
|
|
1754
|
+
Tooltip.displayName = "Tooltip";
|
|
1755
|
+
|
|
1756
|
+
// src/components/Drawer/Drawer.tsx
|
|
1757
|
+
import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1663
1758
|
function CloseIcon3({ className }) {
|
|
1664
|
-
return /* @__PURE__ */
|
|
1759
|
+
return /* @__PURE__ */ jsx15("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx15("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
1665
1760
|
}
|
|
1666
1761
|
function useMountTransition2(open, duration = 300) {
|
|
1667
|
-
const [mounted, setMounted] =
|
|
1668
|
-
const [animate, setAnimate] =
|
|
1669
|
-
|
|
1762
|
+
const [mounted, setMounted] = useState8(open);
|
|
1763
|
+
const [animate, setAnimate] = useState8(open);
|
|
1764
|
+
useEffect4(() => {
|
|
1670
1765
|
if (open) {
|
|
1671
1766
|
setMounted(true);
|
|
1672
1767
|
return;
|
|
@@ -1675,7 +1770,7 @@ function useMountTransition2(open, duration = 300) {
|
|
|
1675
1770
|
const timer = setTimeout(() => setMounted(false), duration);
|
|
1676
1771
|
return () => clearTimeout(timer);
|
|
1677
1772
|
}, [open, duration]);
|
|
1678
|
-
|
|
1773
|
+
useEffect4(() => {
|
|
1679
1774
|
if (!open || !mounted) return;
|
|
1680
1775
|
let raf2 = 0;
|
|
1681
1776
|
const raf1 = requestAnimationFrame(() => {
|
|
@@ -1695,7 +1790,7 @@ function DrawerAction({
|
|
|
1695
1790
|
}) {
|
|
1696
1791
|
if (!action) return null;
|
|
1697
1792
|
const _a = action, { label, className = "" } = _a, rest = __objRest(_a, ["label", "className"]);
|
|
1698
|
-
return /* @__PURE__ */
|
|
1793
|
+
return /* @__PURE__ */ jsx15(
|
|
1699
1794
|
Button,
|
|
1700
1795
|
__spreadProps(__spreadValues({
|
|
1701
1796
|
variant,
|
|
@@ -1706,7 +1801,7 @@ function DrawerAction({
|
|
|
1706
1801
|
})
|
|
1707
1802
|
);
|
|
1708
1803
|
}
|
|
1709
|
-
var Drawer =
|
|
1804
|
+
var Drawer = forwardRef15(
|
|
1710
1805
|
(_a, ref) => {
|
|
1711
1806
|
var _b = _a, {
|
|
1712
1807
|
open,
|
|
@@ -1742,7 +1837,7 @@ var Drawer = forwardRef14(
|
|
|
1742
1837
|
"className"
|
|
1743
1838
|
]);
|
|
1744
1839
|
const { mounted, animate } = useMountTransition2(open);
|
|
1745
|
-
|
|
1840
|
+
useEffect4(() => {
|
|
1746
1841
|
if (!open || !closable) return;
|
|
1747
1842
|
const handleKeyDown = (e) => {
|
|
1748
1843
|
if (e.key === "Escape") onOpenChange == null ? void 0 : onOpenChange(false);
|
|
@@ -1759,7 +1854,7 @@ var Drawer = forwardRef14(
|
|
|
1759
1854
|
const showFooter = Boolean(dismiss || secondary || confirm);
|
|
1760
1855
|
const allActions = Boolean(dismiss && secondary && confirm);
|
|
1761
1856
|
return createPortal2(
|
|
1762
|
-
/* @__PURE__ */
|
|
1857
|
+
/* @__PURE__ */ jsx15(
|
|
1763
1858
|
"div",
|
|
1764
1859
|
{
|
|
1765
1860
|
className: [
|
|
@@ -1770,7 +1865,7 @@ var Drawer = forwardRef14(
|
|
|
1770
1865
|
].filter(Boolean).join(" "),
|
|
1771
1866
|
role: "presentation",
|
|
1772
1867
|
onMouseDown: handleBackdropMouseDown,
|
|
1773
|
-
children: /* @__PURE__ */
|
|
1868
|
+
children: /* @__PURE__ */ jsxs13(
|
|
1774
1869
|
"div",
|
|
1775
1870
|
__spreadProps(__spreadValues({
|
|
1776
1871
|
ref,
|
|
@@ -1790,7 +1885,7 @@ var Drawer = forwardRef14(
|
|
|
1790
1885
|
onMouseDown: (e) => e.stopPropagation()
|
|
1791
1886
|
}, rest), {
|
|
1792
1887
|
children: [
|
|
1793
|
-
showHeader && /* @__PURE__ */
|
|
1888
|
+
showHeader && /* @__PURE__ */ jsx15("div", { className: "flex flex-col w-full items-center border-b border-border-subtle bg-dialog-background-primary", children: /* @__PURE__ */ jsxs13(
|
|
1794
1889
|
"div",
|
|
1795
1890
|
{
|
|
1796
1891
|
className: [
|
|
@@ -1798,36 +1893,35 @@ var Drawer = forwardRef14(
|
|
|
1798
1893
|
fullScreen ? "lg:gap-16 lg:px-0 lg:py-24 lg:max-w-1216" : "lg:px-24 lg:pb-16 lg:pt-20"
|
|
1799
1894
|
].join(" "),
|
|
1800
1895
|
children: [
|
|
1801
|
-
/* @__PURE__ */
|
|
1802
|
-
title && /* @__PURE__ */
|
|
1803
|
-
subtitle && /* @__PURE__ */
|
|
1896
|
+
/* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
|
|
1897
|
+
title && /* @__PURE__ */ jsx15("p", { className: "text-heading-3 text-dialog-text-primary lg:text-heading-3-md", children: title }),
|
|
1898
|
+
subtitle && /* @__PURE__ */ jsx15("p", { className: "text-body-small text-dialog-text-secondary", children: subtitle })
|
|
1804
1899
|
] }),
|
|
1805
|
-
closable && /* @__PURE__ */
|
|
1806
|
-
/* @__PURE__ */
|
|
1900
|
+
closable && /* @__PURE__ */ jsxs13(Fragment4, { children: [
|
|
1901
|
+
/* @__PURE__ */ jsx15(
|
|
1807
1902
|
IconButton,
|
|
1808
1903
|
{
|
|
1809
|
-
icon: /* @__PURE__ */
|
|
1904
|
+
icon: /* @__PURE__ */ jsx15(CloseIcon3, { className: "h-20 w-20" }),
|
|
1810
1905
|
size: "sm",
|
|
1811
1906
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1812
1907
|
onClick: handleClose,
|
|
1813
1908
|
className: "lg:hidden!"
|
|
1814
1909
|
}
|
|
1815
1910
|
),
|
|
1816
|
-
/* @__PURE__ */
|
|
1911
|
+
/* @__PURE__ */ jsx15(Tooltip, { size: "sm", position: "left", text: "\u0E1B\u0E34\u0E14\u0E2B\u0E19\u0E49\u0E32\u0E15\u0E48\u0E32\u0E07", className: "hidden! lg:inline-block!", children: /* @__PURE__ */ jsx15(
|
|
1817
1912
|
IconButton,
|
|
1818
1913
|
{
|
|
1819
|
-
icon: /* @__PURE__ */
|
|
1914
|
+
icon: /* @__PURE__ */ jsx15(CloseIcon3, { className: "h-24 w-24" }),
|
|
1820
1915
|
size: fullScreen ? "lg" : "md",
|
|
1821
1916
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1822
|
-
onClick: handleClose
|
|
1823
|
-
className: "hidden! lg:inline-flex!"
|
|
1917
|
+
onClick: handleClose
|
|
1824
1918
|
}
|
|
1825
|
-
)
|
|
1919
|
+
) })
|
|
1826
1920
|
] })
|
|
1827
1921
|
]
|
|
1828
1922
|
}
|
|
1829
1923
|
) }),
|
|
1830
|
-
/* @__PURE__ */
|
|
1924
|
+
/* @__PURE__ */ jsx15(
|
|
1831
1925
|
"div",
|
|
1832
1926
|
{
|
|
1833
1927
|
className: [
|
|
@@ -1838,23 +1932,23 @@ var Drawer = forwardRef14(
|
|
|
1838
1932
|
children
|
|
1839
1933
|
}
|
|
1840
1934
|
),
|
|
1841
|
-
showFooter && /* @__PURE__ */
|
|
1935
|
+
showFooter && /* @__PURE__ */ jsx15("div", { className: `flex shrink-0 w-full flex-col items-center border-t border-border-subtle bg-dialog-background-primary`, children: /* @__PURE__ */ jsx15(
|
|
1842
1936
|
"div",
|
|
1843
1937
|
{
|
|
1844
1938
|
className: [
|
|
1845
1939
|
"flex shrink-0 flex-col gap-8 px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
|
|
1846
1940
|
fullScreen ? "lg:gap-16 lg:px-0 lg:max-w-1216 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
|
|
1847
1941
|
].join(" "),
|
|
1848
|
-
children: allActions ? /* @__PURE__ */
|
|
1849
|
-
/* @__PURE__ */
|
|
1850
|
-
/* @__PURE__ */
|
|
1851
|
-
/* @__PURE__ */
|
|
1852
|
-
/* @__PURE__ */
|
|
1942
|
+
children: allActions ? /* @__PURE__ */ jsxs13(Fragment4, { children: [
|
|
1943
|
+
/* @__PURE__ */ jsx15(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
|
|
1944
|
+
/* @__PURE__ */ jsxs13("div", { className: "contents gap-8 lg:order-2 lg:ml-auto lg:flex lg:items-center", children: [
|
|
1945
|
+
/* @__PURE__ */ jsx15(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1" }),
|
|
1946
|
+
/* @__PURE__ */ jsx15(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2" })
|
|
1853
1947
|
] })
|
|
1854
|
-
] }) : /* @__PURE__ */
|
|
1855
|
-
/* @__PURE__ */
|
|
1856
|
-
/* @__PURE__ */
|
|
1857
|
-
/* @__PURE__ */
|
|
1948
|
+
] }) : /* @__PURE__ */ jsxs13(Fragment4, { children: [
|
|
1949
|
+
/* @__PURE__ */ jsx15(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1 lg:order-2" }),
|
|
1950
|
+
/* @__PURE__ */ jsx15(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2 lg:order-3" }),
|
|
1951
|
+
/* @__PURE__ */ jsx15(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
|
|
1858
1952
|
] })
|
|
1859
1953
|
}
|
|
1860
1954
|
) })
|
|
@@ -1871,14 +1965,14 @@ Drawer.displayName = "Drawer";
|
|
|
1871
1965
|
|
|
1872
1966
|
// src/components/Dropdown/Dropdown.tsx
|
|
1873
1967
|
import {
|
|
1874
|
-
useEffect as
|
|
1968
|
+
useEffect as useEffect5,
|
|
1875
1969
|
useId as useId3,
|
|
1876
|
-
useRef as
|
|
1877
|
-
useState as
|
|
1878
|
-
forwardRef as
|
|
1970
|
+
useRef as useRef4,
|
|
1971
|
+
useState as useState9,
|
|
1972
|
+
forwardRef as forwardRef16
|
|
1879
1973
|
} from "react";
|
|
1880
|
-
import { Fragment as
|
|
1881
|
-
var IconDanger = () => /* @__PURE__ */
|
|
1974
|
+
import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1975
|
+
var IconDanger = () => /* @__PURE__ */ jsx16(
|
|
1882
1976
|
"svg",
|
|
1883
1977
|
{
|
|
1884
1978
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1886,7 +1980,7 @@ var IconDanger = () => /* @__PURE__ */ jsx15(
|
|
|
1886
1980
|
height: "20",
|
|
1887
1981
|
viewBox: "0 0 20 20",
|
|
1888
1982
|
fill: "none",
|
|
1889
|
-
children: /* @__PURE__ */
|
|
1983
|
+
children: /* @__PURE__ */ jsx16(
|
|
1890
1984
|
"path",
|
|
1891
1985
|
{
|
|
1892
1986
|
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",
|
|
@@ -1896,7 +1990,7 @@ var IconDanger = () => /* @__PURE__ */ jsx15(
|
|
|
1896
1990
|
}
|
|
1897
1991
|
);
|
|
1898
1992
|
function IconCheck({ className }) {
|
|
1899
|
-
return /* @__PURE__ */
|
|
1993
|
+
return /* @__PURE__ */ jsx16(
|
|
1900
1994
|
"svg",
|
|
1901
1995
|
{
|
|
1902
1996
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1905,7 +1999,7 @@ function IconCheck({ className }) {
|
|
|
1905
1999
|
viewBox: "0 0 20 20",
|
|
1906
2000
|
fill: "none",
|
|
1907
2001
|
className,
|
|
1908
|
-
children: /* @__PURE__ */
|
|
2002
|
+
children: /* @__PURE__ */ jsx16(
|
|
1909
2003
|
"path",
|
|
1910
2004
|
{
|
|
1911
2005
|
d: "M15.6328 6.64062L8.10449 14.1494L4.36719 10.4326L5.13281 9.64551L8.10449 12.6172L14.8672 5.875L15.6328 6.64062Z",
|
|
@@ -1916,7 +2010,7 @@ function IconCheck({ className }) {
|
|
|
1916
2010
|
);
|
|
1917
2011
|
}
|
|
1918
2012
|
function ChevronDown({ className }) {
|
|
1919
|
-
return /* @__PURE__ */
|
|
2013
|
+
return /* @__PURE__ */ jsx16(
|
|
1920
2014
|
"svg",
|
|
1921
2015
|
{
|
|
1922
2016
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1925,7 +2019,7 @@ function ChevronDown({ className }) {
|
|
|
1925
2019
|
viewBox: "0 0 20 20",
|
|
1926
2020
|
fill: "none",
|
|
1927
2021
|
className,
|
|
1928
|
-
children: /* @__PURE__ */
|
|
2022
|
+
children: /* @__PURE__ */ jsx16(
|
|
1929
2023
|
"path",
|
|
1930
2024
|
{
|
|
1931
2025
|
d: "M14.7119 8.0625L10 12.7744L5.28809 8.0625L6.0625 7.28809L10 11.2256L13.9375 7.28809L14.7119 8.0625Z",
|
|
@@ -1935,7 +2029,7 @@ function ChevronDown({ className }) {
|
|
|
1935
2029
|
}
|
|
1936
2030
|
);
|
|
1937
2031
|
}
|
|
1938
|
-
var Dropdown =
|
|
2032
|
+
var Dropdown = forwardRef16(
|
|
1939
2033
|
(_a, ref) => {
|
|
1940
2034
|
var _b = _a, {
|
|
1941
2035
|
size = "md",
|
|
@@ -1972,14 +2066,14 @@ var Dropdown = forwardRef15(
|
|
|
1972
2066
|
]);
|
|
1973
2067
|
const isCombobox = variant === "combobox";
|
|
1974
2068
|
const iconButtonSize = size === "lg" ? "md" : "sm";
|
|
1975
|
-
const [isOpen, setIsOpen] =
|
|
1976
|
-
const [isFocused, setIsFocused] =
|
|
1977
|
-
const [query, setQuery] =
|
|
1978
|
-
const [filterText, setFilterText] =
|
|
1979
|
-
const dropdownRef =
|
|
1980
|
-
const inputRef =
|
|
2069
|
+
const [isOpen, setIsOpen] = useState9(false);
|
|
2070
|
+
const [isFocused, setIsFocused] = useState9(false);
|
|
2071
|
+
const [query, setQuery] = useState9(value.label || "");
|
|
2072
|
+
const [filterText, setFilterText] = useState9("");
|
|
2073
|
+
const dropdownRef = useRef4(null);
|
|
2074
|
+
const inputRef = useRef4(null);
|
|
1981
2075
|
const listboxId = useId3();
|
|
1982
|
-
const [prevLabel, setPrevLabel] =
|
|
2076
|
+
const [prevLabel, setPrevLabel] = useState9(value.label);
|
|
1983
2077
|
if (value.label !== prevLabel) {
|
|
1984
2078
|
setPrevLabel(value.label);
|
|
1985
2079
|
setQuery(value.label || "");
|
|
@@ -1987,7 +2081,7 @@ var Dropdown = forwardRef15(
|
|
|
1987
2081
|
const filteredItems = isCombobox ? dropDownItems.filter(
|
|
1988
2082
|
(item) => item.label.toLowerCase().includes(filterText.toLowerCase())
|
|
1989
2083
|
) : dropDownItems;
|
|
1990
|
-
|
|
2084
|
+
useEffect5(() => {
|
|
1991
2085
|
function handleClickOutside(event) {
|
|
1992
2086
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
1993
2087
|
setIsOpen(false);
|
|
@@ -2004,16 +2098,16 @@ var Dropdown = forwardRef15(
|
|
|
2004
2098
|
${!isCombobox ? disabled ? "text-dropdown-text-disabled cursor-not-allowed" : value ? "text-dropdown-text-primary cursor-pointer" : "text-dropdown-text-secondary cursor-pointer" : ""}
|
|
2005
2099
|
${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"}
|
|
2006
2100
|
${className}`;
|
|
2007
|
-
return /* @__PURE__ */
|
|
2008
|
-
label ? /* @__PURE__ */
|
|
2101
|
+
return /* @__PURE__ */ jsxs14("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
|
|
2102
|
+
label ? /* @__PURE__ */ jsx16(
|
|
2009
2103
|
"p",
|
|
2010
2104
|
{
|
|
2011
2105
|
className: `text-label-medium text-left items-left font-medium ${disabled ? "text-dropdown-text-disabled" : "text-dropdown-text-primary"}`,
|
|
2012
2106
|
children: label
|
|
2013
2107
|
}
|
|
2014
|
-
) : /* @__PURE__ */
|
|
2015
|
-
/* @__PURE__ */
|
|
2016
|
-
isCombobox ? /* @__PURE__ */
|
|
2108
|
+
) : /* @__PURE__ */ jsx16(Fragment5, {}),
|
|
2109
|
+
/* @__PURE__ */ jsxs14("div", { className: "w-full flex flex-col relative", ref: dropdownRef, children: [
|
|
2110
|
+
isCombobox ? /* @__PURE__ */ jsxs14(
|
|
2017
2111
|
"div",
|
|
2018
2112
|
__spreadProps(__spreadValues({
|
|
2019
2113
|
ref
|
|
@@ -2024,7 +2118,7 @@ var Dropdown = forwardRef15(
|
|
|
2024
2118
|
},
|
|
2025
2119
|
className: triggerClassName,
|
|
2026
2120
|
children: [
|
|
2027
|
-
/* @__PURE__ */
|
|
2121
|
+
/* @__PURE__ */ jsx16(
|
|
2028
2122
|
"input",
|
|
2029
2123
|
{
|
|
2030
2124
|
ref: inputRef,
|
|
@@ -2057,9 +2151,9 @@ var Dropdown = forwardRef15(
|
|
|
2057
2151
|
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"}`
|
|
2058
2152
|
}
|
|
2059
2153
|
),
|
|
2060
|
-
/* @__PURE__ */
|
|
2061
|
-
disabled ? /* @__PURE__ */
|
|
2062
|
-
/* @__PURE__ */
|
|
2154
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-4", children: [
|
|
2155
|
+
disabled ? /* @__PURE__ */ jsx16(Fragment5, {}) : error ? /* @__PURE__ */ jsx16(IconDanger, {}) : /* @__PURE__ */ jsx16(Fragment5, {}),
|
|
2156
|
+
/* @__PURE__ */ jsx16(
|
|
2063
2157
|
IconButton,
|
|
2064
2158
|
{
|
|
2065
2159
|
size: iconButtonSize,
|
|
@@ -2067,7 +2161,7 @@ var Dropdown = forwardRef15(
|
|
|
2067
2161
|
disabled,
|
|
2068
2162
|
tabIndex: -1,
|
|
2069
2163
|
"aria-label": "\u0E40\u0E1B\u0E34\u0E14/\u0E1B\u0E34\u0E14\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E15\u0E31\u0E27\u0E40\u0E25\u0E37\u0E2D\u0E01",
|
|
2070
|
-
icon: /* @__PURE__ */
|
|
2164
|
+
icon: /* @__PURE__ */ jsx16(
|
|
2071
2165
|
ChevronDown,
|
|
2072
2166
|
{
|
|
2073
2167
|
className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
|
|
@@ -2090,7 +2184,7 @@ var Dropdown = forwardRef15(
|
|
|
2090
2184
|
] })
|
|
2091
2185
|
]
|
|
2092
2186
|
})
|
|
2093
|
-
) : /* @__PURE__ */
|
|
2187
|
+
) : /* @__PURE__ */ jsxs14(
|
|
2094
2188
|
"div",
|
|
2095
2189
|
__spreadProps(__spreadValues({
|
|
2096
2190
|
ref
|
|
@@ -2123,16 +2217,16 @@ var Dropdown = forwardRef15(
|
|
|
2123
2217
|
},
|
|
2124
2218
|
className: `focus:outline-none ${triggerClassName}`,
|
|
2125
2219
|
children: [
|
|
2126
|
-
/* @__PURE__ */
|
|
2220
|
+
/* @__PURE__ */ jsx16(
|
|
2127
2221
|
"p",
|
|
2128
2222
|
{
|
|
2129
2223
|
className: `grow truncate ${textCenter ? "text-center" : "text-start"}`,
|
|
2130
2224
|
children: value.label || placeholder
|
|
2131
2225
|
}
|
|
2132
2226
|
),
|
|
2133
|
-
/* @__PURE__ */
|
|
2134
|
-
disabled ? /* @__PURE__ */
|
|
2135
|
-
/* @__PURE__ */
|
|
2227
|
+
/* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-4", children: [
|
|
2228
|
+
disabled ? /* @__PURE__ */ jsx16(Fragment5, {}) : error ? /* @__PURE__ */ jsx16(IconDanger, {}) : /* @__PURE__ */ jsx16(Fragment5, {}),
|
|
2229
|
+
/* @__PURE__ */ jsx16(
|
|
2136
2230
|
IconButton,
|
|
2137
2231
|
{
|
|
2138
2232
|
size: iconButtonSize,
|
|
@@ -2140,7 +2234,7 @@ var Dropdown = forwardRef15(
|
|
|
2140
2234
|
disabled,
|
|
2141
2235
|
tabIndex: -1,
|
|
2142
2236
|
"aria-label": "\u0E40\u0E1B\u0E34\u0E14/\u0E1B\u0E34\u0E14\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E15\u0E31\u0E27\u0E40\u0E25\u0E37\u0E2D\u0E01",
|
|
2143
|
-
icon: /* @__PURE__ */
|
|
2237
|
+
icon: /* @__PURE__ */ jsx16(
|
|
2144
2238
|
ChevronDown,
|
|
2145
2239
|
{
|
|
2146
2240
|
className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
|
|
@@ -2157,17 +2251,17 @@ var Dropdown = forwardRef15(
|
|
|
2157
2251
|
]
|
|
2158
2252
|
})
|
|
2159
2253
|
),
|
|
2160
|
-
/* @__PURE__ */
|
|
2254
|
+
/* @__PURE__ */ jsx16(
|
|
2161
2255
|
"div",
|
|
2162
2256
|
{
|
|
2163
2257
|
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`,
|
|
2164
|
-
children: /* @__PURE__ */
|
|
2258
|
+
children: /* @__PURE__ */ jsx16(
|
|
2165
2259
|
"ul",
|
|
2166
2260
|
{
|
|
2167
2261
|
id: isCombobox ? listboxId : void 0,
|
|
2168
2262
|
role: isCombobox ? "listbox" : void 0,
|
|
2169
2263
|
className: "h-auto max-h-200 overflow-y-auto cursor-pointer",
|
|
2170
|
-
children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */
|
|
2264
|
+
children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ jsx16("li", { children: /* @__PURE__ */ jsxs14(
|
|
2171
2265
|
"div",
|
|
2172
2266
|
{
|
|
2173
2267
|
onClick: () => {
|
|
@@ -2177,31 +2271,31 @@ var Dropdown = forwardRef15(
|
|
|
2177
2271
|
},
|
|
2178
2272
|
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",
|
|
2179
2273
|
children: [
|
|
2180
|
-
/* @__PURE__ */
|
|
2181
|
-
value.value === item.value && /* @__PURE__ */
|
|
2274
|
+
/* @__PURE__ */ jsx16("p", { className: "text-label-medium text-dropdown-text-primary", children: item.label }),
|
|
2275
|
+
value.value === item.value && /* @__PURE__ */ jsx16(IconCheck, { className: "h-20 w-20" })
|
|
2182
2276
|
]
|
|
2183
2277
|
}
|
|
2184
|
-
) }, idx)) : /* @__PURE__ */
|
|
2278
|
+
) }, idx)) : /* @__PURE__ */ jsx16("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" })
|
|
2185
2279
|
}
|
|
2186
2280
|
)
|
|
2187
2281
|
}
|
|
2188
2282
|
)
|
|
2189
2283
|
] }),
|
|
2190
|
-
error ? /* @__PURE__ */
|
|
2284
|
+
error ? /* @__PURE__ */ jsx16("p", { className: "text-caption-caption text-left items-left text-dropdown-text-danger", children: error }) : helperText ? /* @__PURE__ */ jsx16(
|
|
2191
2285
|
"p",
|
|
2192
2286
|
{
|
|
2193
2287
|
className: `text-caption-caption text-left items-left ${disabled ? "text-dropdown-text-disabled" : "text-dropdown-text-secondary"}`,
|
|
2194
2288
|
children: helperText
|
|
2195
2289
|
}
|
|
2196
|
-
) : /* @__PURE__ */
|
|
2290
|
+
) : /* @__PURE__ */ jsx16(Fragment5, {})
|
|
2197
2291
|
] });
|
|
2198
2292
|
}
|
|
2199
2293
|
);
|
|
2200
2294
|
Dropdown.displayName = "Dropdown";
|
|
2201
2295
|
|
|
2202
2296
|
// src/components/FinancialLogo/FinancialLogo.tsx
|
|
2203
|
-
import { forwardRef as
|
|
2204
|
-
import { jsx as
|
|
2297
|
+
import { forwardRef as forwardRef17 } from "react";
|
|
2298
|
+
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2205
2299
|
var inlineClasses = {
|
|
2206
2300
|
info: "bg-alert-inline-info-bg border-alert-inline-info-border text-alert-text-primary",
|
|
2207
2301
|
success: "bg-alert-inline-success-bg border-alert-inline-success-border text-alert-text-primary",
|
|
@@ -2231,25 +2325,25 @@ var inlineIconClasses2 = {
|
|
|
2231
2325
|
common: "text-alert-inline-common-icon"
|
|
2232
2326
|
};
|
|
2233
2327
|
function InfoIcon2({ className }) {
|
|
2234
|
-
return /* @__PURE__ */
|
|
2328
|
+
return /* @__PURE__ */ jsx17("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx17("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" }) });
|
|
2235
2329
|
}
|
|
2236
2330
|
function SuccessIcon2({ className }) {
|
|
2237
|
-
return /* @__PURE__ */
|
|
2238
|
-
/* @__PURE__ */
|
|
2239
|
-
/* @__PURE__ */
|
|
2331
|
+
return /* @__PURE__ */ jsxs15("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
2332
|
+
/* @__PURE__ */ jsx17("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
2333
|
+
/* @__PURE__ */ jsx17("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
2240
2334
|
] });
|
|
2241
2335
|
}
|
|
2242
2336
|
function WarningIcon3({ className }) {
|
|
2243
|
-
return /* @__PURE__ */
|
|
2337
|
+
return /* @__PURE__ */ jsx17("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx17("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" }) });
|
|
2244
2338
|
}
|
|
2245
2339
|
function DangerIcon2({ className }) {
|
|
2246
|
-
return /* @__PURE__ */
|
|
2340
|
+
return /* @__PURE__ */ jsx17("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx17("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" }) });
|
|
2247
2341
|
}
|
|
2248
2342
|
function CommonIcon({ className }) {
|
|
2249
|
-
return /* @__PURE__ */
|
|
2343
|
+
return /* @__PURE__ */ jsx17("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx17("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" }) });
|
|
2250
2344
|
}
|
|
2251
2345
|
function CloseIcon4({ className }) {
|
|
2252
|
-
return /* @__PURE__ */
|
|
2346
|
+
return /* @__PURE__ */ jsx17("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx17("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
2253
2347
|
}
|
|
2254
2348
|
var defaultIcons2 = {
|
|
2255
2349
|
info: InfoIcon2,
|
|
@@ -2258,7 +2352,7 @@ var defaultIcons2 = {
|
|
|
2258
2352
|
danger: DangerIcon2,
|
|
2259
2353
|
common: CommonIcon
|
|
2260
2354
|
};
|
|
2261
|
-
var FinancialLogo =
|
|
2355
|
+
var FinancialLogo = forwardRef17(
|
|
2262
2356
|
(_a, ref) => {
|
|
2263
2357
|
var _b = _a, {
|
|
2264
2358
|
variant = "info",
|
|
@@ -2294,22 +2388,22 @@ var FinancialLogo = forwardRef16(
|
|
|
2294
2388
|
variantClass,
|
|
2295
2389
|
className
|
|
2296
2390
|
].filter(Boolean).join(" ");
|
|
2297
|
-
return /* @__PURE__ */
|
|
2298
|
-
/* @__PURE__ */
|
|
2299
|
-
/* @__PURE__ */
|
|
2300
|
-
title && /* @__PURE__ */
|
|
2301
|
-
description && /* @__PURE__ */
|
|
2391
|
+
return /* @__PURE__ */ jsxs15("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
|
|
2392
|
+
/* @__PURE__ */ jsx17("span", { className: `shrink-0 mt-2 ${iconColorClass}`, children: icon != null ? icon : /* @__PURE__ */ jsx17(DefaultIcon, { className: "h-20 w-20" }) }),
|
|
2393
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex-1 min-w-0", children: [
|
|
2394
|
+
title && /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium leading-20", children: title }),
|
|
2395
|
+
description && /* @__PURE__ */ jsx17("p", { className: `text-sm leading-20 ${descColorClass} ${title ? "mt-4" : ""}`, children: description }),
|
|
2302
2396
|
children
|
|
2303
2397
|
] }),
|
|
2304
|
-
action && /* @__PURE__ */
|
|
2305
|
-
onClose && /* @__PURE__ */
|
|
2398
|
+
action && /* @__PURE__ */ jsx17("div", { className: `${actionClass} underline text-sm font-medium`, children: action }),
|
|
2399
|
+
onClose && /* @__PURE__ */ jsx17(
|
|
2306
2400
|
"button",
|
|
2307
2401
|
{
|
|
2308
2402
|
type: "button",
|
|
2309
2403
|
onClick: onClose,
|
|
2310
2404
|
className: `shrink-0 p-2 rounded transition-colors ${closeColorClass}`,
|
|
2311
2405
|
"aria-label": "Close",
|
|
2312
|
-
children: /* @__PURE__ */
|
|
2406
|
+
children: /* @__PURE__ */ jsx17(CloseIcon4, { className: "h-16 w-16" })
|
|
2313
2407
|
}
|
|
2314
2408
|
)
|
|
2315
2409
|
] }));
|
|
@@ -2318,9 +2412,9 @@ var FinancialLogo = forwardRef16(
|
|
|
2318
2412
|
FinancialLogo.displayName = "FinancialLogo";
|
|
2319
2413
|
|
|
2320
2414
|
// src/components/Icon/Icon.tsx
|
|
2321
|
-
import { forwardRef as
|
|
2322
|
-
import { jsx as
|
|
2323
|
-
var Icon =
|
|
2415
|
+
import { forwardRef as forwardRef18 } from "react";
|
|
2416
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
2417
|
+
var Icon = forwardRef18(
|
|
2324
2418
|
(_a, ref) => {
|
|
2325
2419
|
var _b = _a, {
|
|
2326
2420
|
name,
|
|
@@ -2348,7 +2442,7 @@ var Icon = forwardRef17(
|
|
|
2348
2442
|
"material-symbols-outlined select-none shrink-0 inline-block leading-none",
|
|
2349
2443
|
className
|
|
2350
2444
|
].filter(Boolean).join(" ");
|
|
2351
|
-
return /* @__PURE__ */
|
|
2445
|
+
return /* @__PURE__ */ jsx18(
|
|
2352
2446
|
"span",
|
|
2353
2447
|
__spreadProps(__spreadValues({
|
|
2354
2448
|
ref,
|
|
@@ -2371,8 +2465,8 @@ var Icon = forwardRef17(
|
|
|
2371
2465
|
Icon.displayName = "Icon";
|
|
2372
2466
|
|
|
2373
2467
|
// src/components/Link/Link.tsx
|
|
2374
|
-
import { forwardRef as
|
|
2375
|
-
import { jsx as
|
|
2468
|
+
import { forwardRef as forwardRef19, cloneElement } from "react";
|
|
2469
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
2376
2470
|
var linkStyleClasses = {
|
|
2377
2471
|
brand: "font-sans text-link-text-enabled",
|
|
2378
2472
|
white: "font-sans text-link-text-enabled-inverse",
|
|
@@ -2393,7 +2487,7 @@ var iconVariantClasses = {
|
|
|
2393
2487
|
md: "w-20 h-20 text-[20px]",
|
|
2394
2488
|
lg: "w-24 h-24 text-[24px]"
|
|
2395
2489
|
};
|
|
2396
|
-
var Link =
|
|
2490
|
+
var Link = forwardRef19(
|
|
2397
2491
|
(_a, ref) => {
|
|
2398
2492
|
var _b = _a, {
|
|
2399
2493
|
variant = "sm",
|
|
@@ -2425,8 +2519,8 @@ var Link = forwardRef18(
|
|
|
2425
2519
|
variantClass,
|
|
2426
2520
|
className
|
|
2427
2521
|
].filter(Boolean).join(" ");
|
|
2428
|
-
return /* @__PURE__ */
|
|
2429
|
-
/* @__PURE__ */
|
|
2522
|
+
return /* @__PURE__ */ jsxs16("span", __spreadProps(__spreadValues({ ref, role: "link", className: classes }, rest), { children: [
|
|
2523
|
+
/* @__PURE__ */ jsx19("a", { href, target: "_blank", rel: "noopener noreferrer", children: text }),
|
|
2430
2524
|
icon && cloneElement(icon, {
|
|
2431
2525
|
className: `${(_a2 = icon.props.className) != null ? _a2 : ""} ${iconClass}`
|
|
2432
2526
|
})
|
|
@@ -2437,11 +2531,11 @@ Link.displayName = "Link";
|
|
|
2437
2531
|
|
|
2438
2532
|
// src/components/Radio/Radio.tsx
|
|
2439
2533
|
import {
|
|
2440
|
-
forwardRef as
|
|
2534
|
+
forwardRef as forwardRef20,
|
|
2441
2535
|
useId as useId4
|
|
2442
2536
|
} from "react";
|
|
2443
|
-
import { jsx as
|
|
2444
|
-
var Radio =
|
|
2537
|
+
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
2538
|
+
var Radio = forwardRef20(
|
|
2445
2539
|
(_a, ref) => {
|
|
2446
2540
|
var _b = _a, {
|
|
2447
2541
|
size = "sm",
|
|
@@ -2468,18 +2562,18 @@ var Radio = forwardRef19(
|
|
|
2468
2562
|
]);
|
|
2469
2563
|
const reactId = useId4();
|
|
2470
2564
|
const inputId = id != null ? id : reactId;
|
|
2471
|
-
return /* @__PURE__ */
|
|
2565
|
+
return /* @__PURE__ */ jsx20(
|
|
2472
2566
|
"div",
|
|
2473
2567
|
{
|
|
2474
2568
|
className: `${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
|
|
2475
|
-
children: /* @__PURE__ */
|
|
2569
|
+
children: /* @__PURE__ */ jsxs17(
|
|
2476
2570
|
"label",
|
|
2477
2571
|
{
|
|
2478
2572
|
htmlFor: inputId,
|
|
2479
2573
|
className: `flex gap-4 ${disabled ? "pointer-events-none text-gray-400" : "text-gray-900 cursor-pointer"}`,
|
|
2480
2574
|
children: [
|
|
2481
|
-
/* @__PURE__ */
|
|
2482
|
-
/* @__PURE__ */
|
|
2575
|
+
/* @__PURE__ */ jsxs17("div", { children: [
|
|
2576
|
+
/* @__PURE__ */ jsx20(
|
|
2483
2577
|
"input",
|
|
2484
2578
|
__spreadValues({
|
|
2485
2579
|
ref,
|
|
@@ -2492,14 +2586,14 @@ var Radio = forwardRef19(
|
|
|
2492
2586
|
name
|
|
2493
2587
|
}, rest)
|
|
2494
2588
|
),
|
|
2495
|
-
/* @__PURE__ */
|
|
2589
|
+
/* @__PURE__ */ jsx20(
|
|
2496
2590
|
"div",
|
|
2497
2591
|
{
|
|
2498
2592
|
className: `relative box flex items-center justify-center rounded-full border-2 group bg-white
|
|
2499
2593
|
${size === "sm" ? "h-16 w-16 my-4 ml-3 mr-3" : "m-3 h-20 w-20 text-label-large"}
|
|
2500
2594
|
${error ? "border-red-500" : "border-gray-600 peer-checked:border-blue-600 peer-disabled:border-gray-400!"}
|
|
2501
2595
|
`,
|
|
2502
|
-
children: /* @__PURE__ */
|
|
2596
|
+
children: /* @__PURE__ */ jsx20(
|
|
2503
2597
|
"span",
|
|
2504
2598
|
{
|
|
2505
2599
|
className: `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
|
|
@@ -2510,12 +2604,12 @@ var Radio = forwardRef19(
|
|
|
2510
2604
|
}
|
|
2511
2605
|
)
|
|
2512
2606
|
] }),
|
|
2513
|
-
/* @__PURE__ */
|
|
2607
|
+
/* @__PURE__ */ jsxs17(
|
|
2514
2608
|
"div",
|
|
2515
2609
|
{
|
|
2516
2610
|
className: `flex flex-col gap-1 ${size === "sm" ? "mt-2" : "mt-4"}`,
|
|
2517
2611
|
children: [
|
|
2518
|
-
/* @__PURE__ */
|
|
2612
|
+
/* @__PURE__ */ jsx20(
|
|
2519
2613
|
"p",
|
|
2520
2614
|
{
|
|
2521
2615
|
className: `
|
|
@@ -2525,7 +2619,7 @@ var Radio = forwardRef19(
|
|
|
2525
2619
|
children: label
|
|
2526
2620
|
}
|
|
2527
2621
|
),
|
|
2528
|
-
/* @__PURE__ */
|
|
2622
|
+
/* @__PURE__ */ jsx20(
|
|
2529
2623
|
"p",
|
|
2530
2624
|
{
|
|
2531
2625
|
className: `text-caption-caption ${disabled ? "text-gray-400" : error ? "text-red-600" : "text-gray-600"}`,
|
|
@@ -2545,17 +2639,17 @@ var Radio = forwardRef19(
|
|
|
2545
2639
|
Radio.displayName = "Radio";
|
|
2546
2640
|
|
|
2547
2641
|
// src/components/SegmentControl/SegmentControl.tsx
|
|
2548
|
-
import { forwardRef as
|
|
2549
|
-
import { jsx as
|
|
2642
|
+
import { forwardRef as forwardRef21 } from "react";
|
|
2643
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
2550
2644
|
var itemSizeClasses = {
|
|
2551
2645
|
sm: "min-h-32 px-8 py-6 text-label-medium",
|
|
2552
2646
|
md: "min-h-40 px-12 py-8 text-label-large",
|
|
2553
2647
|
lg: "min-h-48 px-16 py-8 text-label-large"
|
|
2554
2648
|
};
|
|
2555
|
-
var SegmentControl =
|
|
2649
|
+
var SegmentControl = forwardRef21(
|
|
2556
2650
|
(_a, ref) => {
|
|
2557
2651
|
var _b = _a, { size = "md", items, selected, setSelected, onChange, className = "" } = _b, rest = __objRest(_b, ["size", "items", "selected", "setSelected", "onChange", "className"]);
|
|
2558
|
-
return /* @__PURE__ */
|
|
2652
|
+
return /* @__PURE__ */ jsx21(
|
|
2559
2653
|
"div",
|
|
2560
2654
|
__spreadProps(__spreadValues({
|
|
2561
2655
|
ref,
|
|
@@ -2563,7 +2657,7 @@ var SegmentControl = forwardRef20(
|
|
|
2563
2657
|
}, rest), {
|
|
2564
2658
|
children: items.map((item) => {
|
|
2565
2659
|
const isSelected = selected === item.value;
|
|
2566
|
-
return /* @__PURE__ */
|
|
2660
|
+
return /* @__PURE__ */ jsx21(
|
|
2567
2661
|
"button",
|
|
2568
2662
|
{
|
|
2569
2663
|
type: "button",
|
|
@@ -2573,7 +2667,7 @@ var SegmentControl = forwardRef20(
|
|
|
2573
2667
|
onChange == null ? void 0 : onChange(item.value);
|
|
2574
2668
|
},
|
|
2575
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",
|
|
2576
|
-
children: /* @__PURE__ */
|
|
2670
|
+
children: /* @__PURE__ */ jsx21(
|
|
2577
2671
|
"span",
|
|
2578
2672
|
{
|
|
2579
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"}`,
|
|
@@ -2592,12 +2686,12 @@ SegmentControl.displayName = "SegmentControl";
|
|
|
2592
2686
|
|
|
2593
2687
|
// src/components/Slider/Slider.tsx
|
|
2594
2688
|
import {
|
|
2595
|
-
forwardRef as
|
|
2689
|
+
forwardRef as forwardRef22,
|
|
2596
2690
|
useCallback as useCallback2,
|
|
2597
2691
|
useId as useId5,
|
|
2598
|
-
useState as
|
|
2692
|
+
useState as useState10
|
|
2599
2693
|
} from "react";
|
|
2600
|
-
import { jsx as
|
|
2694
|
+
import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2601
2695
|
var sizeConfig = {
|
|
2602
2696
|
small: {
|
|
2603
2697
|
trackH: "h-4",
|
|
@@ -2628,7 +2722,7 @@ var sizeConfig = {
|
|
|
2628
2722
|
}
|
|
2629
2723
|
};
|
|
2630
2724
|
function ChevronGlyphs({ size, color }) {
|
|
2631
|
-
return /* @__PURE__ */
|
|
2725
|
+
return /* @__PURE__ */ jsxs18(
|
|
2632
2726
|
"svg",
|
|
2633
2727
|
{
|
|
2634
2728
|
width: size,
|
|
@@ -2638,7 +2732,7 @@ function ChevronGlyphs({ size, color }) {
|
|
|
2638
2732
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2639
2733
|
"aria-hidden": "true",
|
|
2640
2734
|
children: [
|
|
2641
|
-
/* @__PURE__ */
|
|
2735
|
+
/* @__PURE__ */ jsx22(
|
|
2642
2736
|
"path",
|
|
2643
2737
|
{
|
|
2644
2738
|
d: "M4.75 3.25L2.25 6L4.75 8.75",
|
|
@@ -2648,7 +2742,7 @@ function ChevronGlyphs({ size, color }) {
|
|
|
2648
2742
|
strokeLinejoin: "round"
|
|
2649
2743
|
}
|
|
2650
2744
|
),
|
|
2651
|
-
/* @__PURE__ */
|
|
2745
|
+
/* @__PURE__ */ jsx22(
|
|
2652
2746
|
"path",
|
|
2653
2747
|
{
|
|
2654
2748
|
d: "M7.25 3.25L9.75 6L7.25 8.75",
|
|
@@ -2662,7 +2756,7 @@ function ChevronGlyphs({ size, color }) {
|
|
|
2662
2756
|
}
|
|
2663
2757
|
);
|
|
2664
2758
|
}
|
|
2665
|
-
var Slider =
|
|
2759
|
+
var Slider = forwardRef22(
|
|
2666
2760
|
(_a, ref) => {
|
|
2667
2761
|
var _b = _a, {
|
|
2668
2762
|
size = "medium",
|
|
@@ -2703,7 +2797,7 @@ var Slider = forwardRef21(
|
|
|
2703
2797
|
const ariaLabel = ariaLabelProp != null ? ariaLabelProp : typeof label === "string" ? void 0 : "Slider";
|
|
2704
2798
|
const ariaDescriptionId = description ? `${inputId}-description` : void 0;
|
|
2705
2799
|
const isControlled = controlledValue !== void 0;
|
|
2706
|
-
const [internalValue, setInternalValue] =
|
|
2800
|
+
const [internalValue, setInternalValue] = useState10(defaultValue != null ? defaultValue : min);
|
|
2707
2801
|
const currentValue = isControlled ? controlledValue : internalValue;
|
|
2708
2802
|
const handleChange = useCallback2(
|
|
2709
2803
|
(e) => {
|
|
@@ -2725,13 +2819,13 @@ var Slider = forwardRef21(
|
|
|
2725
2819
|
const descriptionColor = disabled ? "text-slider-label-disabled" : "text-slider-description";
|
|
2726
2820
|
const thumbOffset = percent * sz.thumbPx / 100;
|
|
2727
2821
|
const fillOffset = sz.thumbPx / 2 - thumbOffset;
|
|
2728
|
-
return /* @__PURE__ */
|
|
2822
|
+
return /* @__PURE__ */ jsxs18(
|
|
2729
2823
|
"div",
|
|
2730
2824
|
{
|
|
2731
2825
|
className: ["flex w-full flex-col gap-8 font-sans", className].filter(Boolean).join(" "),
|
|
2732
2826
|
children: [
|
|
2733
|
-
(label || showValue && !disabled) && /* @__PURE__ */
|
|
2734
|
-
label && /* @__PURE__ */
|
|
2827
|
+
(label || showValue && !disabled) && /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between", children: [
|
|
2828
|
+
label && /* @__PURE__ */ jsx22(
|
|
2735
2829
|
"label",
|
|
2736
2830
|
{
|
|
2737
2831
|
htmlFor: inputId,
|
|
@@ -2744,7 +2838,7 @@ var Slider = forwardRef21(
|
|
|
2744
2838
|
children: label
|
|
2745
2839
|
}
|
|
2746
2840
|
),
|
|
2747
|
-
showValue && /* @__PURE__ */
|
|
2841
|
+
showValue && /* @__PURE__ */ jsx22(
|
|
2748
2842
|
"span",
|
|
2749
2843
|
{
|
|
2750
2844
|
className: [sz.description, "tabular-nums", labelColor].join(" "),
|
|
@@ -2752,7 +2846,7 @@ var Slider = forwardRef21(
|
|
|
2752
2846
|
}
|
|
2753
2847
|
)
|
|
2754
2848
|
] }),
|
|
2755
|
-
/* @__PURE__ */
|
|
2849
|
+
/* @__PURE__ */ jsxs18(
|
|
2756
2850
|
"div",
|
|
2757
2851
|
{
|
|
2758
2852
|
className: [
|
|
@@ -2761,7 +2855,7 @@ var Slider = forwardRef21(
|
|
|
2761
2855
|
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
2762
2856
|
].join(" "),
|
|
2763
2857
|
children: [
|
|
2764
|
-
/* @__PURE__ */
|
|
2858
|
+
/* @__PURE__ */ jsx22(
|
|
2765
2859
|
"div",
|
|
2766
2860
|
{
|
|
2767
2861
|
className: [
|
|
@@ -2771,14 +2865,14 @@ var Slider = forwardRef21(
|
|
|
2771
2865
|
].join(" ")
|
|
2772
2866
|
}
|
|
2773
2867
|
),
|
|
2774
|
-
/* @__PURE__ */
|
|
2868
|
+
/* @__PURE__ */ jsx22(
|
|
2775
2869
|
"div",
|
|
2776
2870
|
{
|
|
2777
2871
|
className: ["absolute left-0 rounded-full", sz.trackH, fillBg].join(" "),
|
|
2778
2872
|
style: { width: `calc(${percent}% + ${fillOffset}px)` }
|
|
2779
2873
|
}
|
|
2780
2874
|
),
|
|
2781
|
-
/* @__PURE__ */
|
|
2875
|
+
/* @__PURE__ */ jsx22(
|
|
2782
2876
|
"input",
|
|
2783
2877
|
__spreadValues({
|
|
2784
2878
|
ref,
|
|
@@ -2799,7 +2893,7 @@ var Slider = forwardRef21(
|
|
|
2799
2893
|
].join(" ")
|
|
2800
2894
|
}, rest)
|
|
2801
2895
|
),
|
|
2802
|
-
/* @__PURE__ */
|
|
2896
|
+
/* @__PURE__ */ jsx22(
|
|
2803
2897
|
"div",
|
|
2804
2898
|
{
|
|
2805
2899
|
className: [
|
|
@@ -2812,13 +2906,13 @@ var Slider = forwardRef21(
|
|
|
2812
2906
|
!disabled && "peer-hover:shadow-medium"
|
|
2813
2907
|
].filter(Boolean).join(" "),
|
|
2814
2908
|
style: { left: `calc(${percent}% - ${thumbOffset}px)` },
|
|
2815
|
-
children: /* @__PURE__ */
|
|
2909
|
+
children: /* @__PURE__ */ jsx22(ChevronGlyphs, { size: sz.iconPx, color: iconColor })
|
|
2816
2910
|
}
|
|
2817
2911
|
)
|
|
2818
2912
|
]
|
|
2819
2913
|
}
|
|
2820
2914
|
),
|
|
2821
|
-
description && /* @__PURE__ */
|
|
2915
|
+
description && /* @__PURE__ */ jsx22(
|
|
2822
2916
|
"span",
|
|
2823
2917
|
{
|
|
2824
2918
|
id: ariaDescriptionId,
|
|
@@ -2834,9 +2928,9 @@ var Slider = forwardRef21(
|
|
|
2834
2928
|
Slider.displayName = "Slider";
|
|
2835
2929
|
|
|
2836
2930
|
// src/components/Tab/Tab.tsx
|
|
2837
|
-
import { forwardRef as
|
|
2838
|
-
import { jsx as
|
|
2839
|
-
var Tab =
|
|
2931
|
+
import { forwardRef as forwardRef23 } from "react";
|
|
2932
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
2933
|
+
var Tab = forwardRef23(
|
|
2840
2934
|
(_a, ref) => {
|
|
2841
2935
|
var _b = _a, {
|
|
2842
2936
|
size = "md",
|
|
@@ -2855,7 +2949,7 @@ var Tab = forwardRef22(
|
|
|
2855
2949
|
"setSelected",
|
|
2856
2950
|
"className"
|
|
2857
2951
|
]);
|
|
2858
|
-
return /* @__PURE__ */
|
|
2952
|
+
return /* @__PURE__ */ jsx23(
|
|
2859
2953
|
"div",
|
|
2860
2954
|
__spreadProps(__spreadValues({
|
|
2861
2955
|
ref,
|
|
@@ -2874,11 +2968,11 @@ Tab.displayName = "Tab";
|
|
|
2874
2968
|
|
|
2875
2969
|
// src/components/TextArea/TextArea.tsx
|
|
2876
2970
|
import {
|
|
2877
|
-
useState as
|
|
2878
|
-
forwardRef as
|
|
2971
|
+
useState as useState11,
|
|
2972
|
+
forwardRef as forwardRef24
|
|
2879
2973
|
} from "react";
|
|
2880
|
-
import { Fragment as
|
|
2881
|
-
var TextArea =
|
|
2974
|
+
import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2975
|
+
var TextArea = forwardRef24(
|
|
2882
2976
|
(_a, ref) => {
|
|
2883
2977
|
var _b = _a, {
|
|
2884
2978
|
error,
|
|
@@ -2918,21 +3012,21 @@ var TextArea = forwardRef23(
|
|
|
2918
3012
|
"className"
|
|
2919
3013
|
]);
|
|
2920
3014
|
var _a2;
|
|
2921
|
-
const [isFocused, setIsFocused] =
|
|
3015
|
+
const [isFocused, setIsFocused] = useState11(false);
|
|
2922
3016
|
const isActive = isFocused && !!value;
|
|
2923
|
-
return /* @__PURE__ */
|
|
2924
|
-
label || showCounter ? /* @__PURE__ */
|
|
2925
|
-
label ? /* @__PURE__ */
|
|
3017
|
+
return /* @__PURE__ */ jsxs19("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
|
|
3018
|
+
label || showCounter ? /* @__PURE__ */ jsxs19("div", { className: "w-full flex justify-between items-center gap-8", children: [
|
|
3019
|
+
label ? /* @__PURE__ */ jsxs19(
|
|
2926
3020
|
"p",
|
|
2927
3021
|
{
|
|
2928
3022
|
className: `text-label-medium text-left items-left flex gap-4 ${disabled ? "text-text-area-text-disabled" : "text-text-area-text-primary"}`,
|
|
2929
3023
|
children: [
|
|
2930
3024
|
label,
|
|
2931
|
-
optional && /* @__PURE__ */
|
|
3025
|
+
optional && /* @__PURE__ */ jsx24("span", { className: "text-text-area-text-secondary", children: `(\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E07\u0E04\u0E31\u0E1A)` })
|
|
2932
3026
|
]
|
|
2933
3027
|
}
|
|
2934
|
-
) : /* @__PURE__ */
|
|
2935
|
-
showCounter && /* @__PURE__ */
|
|
3028
|
+
) : /* @__PURE__ */ jsx24("span", {}),
|
|
3029
|
+
showCounter && /* @__PURE__ */ jsxs19(
|
|
2936
3030
|
"p",
|
|
2937
3031
|
{
|
|
2938
3032
|
className: `shrink-0 text-caption-caption ${disabled ? "text-text-area-text-disabled" : "text-text-area-text-tertiary"}`,
|
|
@@ -2943,13 +3037,13 @@ var TextArea = forwardRef23(
|
|
|
2943
3037
|
]
|
|
2944
3038
|
}
|
|
2945
3039
|
)
|
|
2946
|
-
] }) : /* @__PURE__ */
|
|
2947
|
-
/* @__PURE__ */
|
|
3040
|
+
] }) : /* @__PURE__ */ jsx24(Fragment6, {}),
|
|
3041
|
+
/* @__PURE__ */ jsxs19(
|
|
2948
3042
|
"div",
|
|
2949
3043
|
{
|
|
2950
3044
|
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 : ""}`,
|
|
2951
3045
|
children: [
|
|
2952
|
-
/* @__PURE__ */
|
|
3046
|
+
/* @__PURE__ */ jsx24(
|
|
2953
3047
|
"textarea",
|
|
2954
3048
|
__spreadValues({
|
|
2955
3049
|
ref,
|
|
@@ -2970,14 +3064,14 @@ var TextArea = forwardRef23(
|
|
|
2970
3064
|
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"}`
|
|
2971
3065
|
}, props)
|
|
2972
3066
|
),
|
|
2973
|
-
pending ? /* @__PURE__ */
|
|
3067
|
+
pending ? /* @__PURE__ */ jsx24(Loading, { size: "sm", className: "shrink-0 absolute right-12 top-12" }) : clearable && isFocused && value ? /* @__PURE__ */ jsx24(
|
|
2974
3068
|
IconButton,
|
|
2975
3069
|
{
|
|
2976
3070
|
size: "sm",
|
|
2977
3071
|
transparent: true,
|
|
2978
3072
|
"aria-label": "\u0E25\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21",
|
|
2979
3073
|
className: "absolute right-6 top-6",
|
|
2980
|
-
icon: /* @__PURE__ */
|
|
3074
|
+
icon: /* @__PURE__ */ jsx24(
|
|
2981
3075
|
"svg",
|
|
2982
3076
|
{
|
|
2983
3077
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2985,7 +3079,7 @@ var TextArea = forwardRef23(
|
|
|
2985
3079
|
height: "20",
|
|
2986
3080
|
viewBox: "0 0 20 20",
|
|
2987
3081
|
fill: "none",
|
|
2988
|
-
children: /* @__PURE__ */
|
|
3082
|
+
children: /* @__PURE__ */ jsx24(
|
|
2989
3083
|
"path",
|
|
2990
3084
|
{
|
|
2991
3085
|
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",
|
|
@@ -3003,7 +3097,7 @@ var TextArea = forwardRef23(
|
|
|
3003
3097
|
});
|
|
3004
3098
|
}
|
|
3005
3099
|
}
|
|
3006
|
-
) : success ? /* @__PURE__ */
|
|
3100
|
+
) : success ? /* @__PURE__ */ jsx24(
|
|
3007
3101
|
"svg",
|
|
3008
3102
|
{
|
|
3009
3103
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3012,7 +3106,7 @@ var TextArea = forwardRef23(
|
|
|
3012
3106
|
viewBox: "0 0 20 20",
|
|
3013
3107
|
fill: "none",
|
|
3014
3108
|
className: "shrink-0 text-accent-success flex h-20 w-20 items-center justify-center absolute right-12 top-12",
|
|
3015
|
-
children: /* @__PURE__ */
|
|
3109
|
+
children: /* @__PURE__ */ jsx24(
|
|
3016
3110
|
"path",
|
|
3017
3111
|
{
|
|
3018
3112
|
fillRule: "evenodd",
|
|
@@ -3022,7 +3116,7 @@ var TextArea = forwardRef23(
|
|
|
3022
3116
|
}
|
|
3023
3117
|
)
|
|
3024
3118
|
}
|
|
3025
|
-
) : error ? /* @__PURE__ */
|
|
3119
|
+
) : error ? /* @__PURE__ */ jsx24(
|
|
3026
3120
|
"svg",
|
|
3027
3121
|
{
|
|
3028
3122
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -3031,7 +3125,7 @@ var TextArea = forwardRef23(
|
|
|
3031
3125
|
viewBox: "0 0 20 20",
|
|
3032
3126
|
fill: "none",
|
|
3033
3127
|
className: "shrink-0 text-text-area-text-danger flex h-20 w-20 items-center justify-center absolute right-12 top-12",
|
|
3034
|
-
children: /* @__PURE__ */
|
|
3128
|
+
children: /* @__PURE__ */ jsx24(
|
|
3035
3129
|
"path",
|
|
3036
3130
|
{
|
|
3037
3131
|
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",
|
|
@@ -3039,42 +3133,42 @@ var TextArea = forwardRef23(
|
|
|
3039
3133
|
}
|
|
3040
3134
|
)
|
|
3041
3135
|
}
|
|
3042
|
-
) : /* @__PURE__ */
|
|
3136
|
+
) : /* @__PURE__ */ jsx24(Fragment6, {})
|
|
3043
3137
|
]
|
|
3044
3138
|
}
|
|
3045
3139
|
),
|
|
3046
|
-
error ? /* @__PURE__ */
|
|
3140
|
+
error ? /* @__PURE__ */ jsx24("p", { className: "text-caption-caption text-left items-left text-text-area-text-danger", children: error }) : helperText ? /* @__PURE__ */ jsx24(
|
|
3047
3141
|
"p",
|
|
3048
3142
|
{
|
|
3049
3143
|
className: `text-caption-caption text-left items-left ${disabled ? "text-text-area-text-disabled" : "text-text-area-text-secondary"}`,
|
|
3050
3144
|
children: helperText
|
|
3051
3145
|
}
|
|
3052
|
-
) : /* @__PURE__ */
|
|
3146
|
+
) : /* @__PURE__ */ jsx24(Fragment6, {})
|
|
3053
3147
|
] });
|
|
3054
3148
|
}
|
|
3055
3149
|
);
|
|
3056
3150
|
TextArea.displayName = "TextArea";
|
|
3057
3151
|
|
|
3058
3152
|
// src/components/Toast/Toast.tsx
|
|
3059
|
-
import { forwardRef as
|
|
3060
|
-
import { jsx as
|
|
3153
|
+
import { forwardRef as forwardRef25 } from "react";
|
|
3154
|
+
import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
3061
3155
|
function CheckCircleIcon({ className }) {
|
|
3062
|
-
return /* @__PURE__ */
|
|
3063
|
-
/* @__PURE__ */
|
|
3064
|
-
/* @__PURE__ */
|
|
3156
|
+
return /* @__PURE__ */ jsxs20("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
3157
|
+
/* @__PURE__ */ jsx25("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
3158
|
+
/* @__PURE__ */ jsx25("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
3065
3159
|
] });
|
|
3066
3160
|
}
|
|
3067
3161
|
function ProgressIcon({ className }) {
|
|
3068
|
-
return /* @__PURE__ */
|
|
3162
|
+
return /* @__PURE__ */ jsx25(Loading, { size: "sm", className });
|
|
3069
3163
|
}
|
|
3070
3164
|
function ErrorIcon({ className }) {
|
|
3071
|
-
return /* @__PURE__ */
|
|
3072
|
-
/* @__PURE__ */
|
|
3073
|
-
/* @__PURE__ */
|
|
3165
|
+
return /* @__PURE__ */ jsxs20("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
3166
|
+
/* @__PURE__ */ jsx25("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
3167
|
+
/* @__PURE__ */ jsx25("path", { d: "M10 6.5v4M10 13.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
|
|
3074
3168
|
] });
|
|
3075
3169
|
}
|
|
3076
3170
|
function CloseIcon5({ className }) {
|
|
3077
|
-
return /* @__PURE__ */
|
|
3171
|
+
return /* @__PURE__ */ jsx25("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx25("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
3078
3172
|
}
|
|
3079
3173
|
var defaultIcons3 = {
|
|
3080
3174
|
default: CheckCircleIcon,
|
|
@@ -3091,7 +3185,7 @@ var iconColorClasses = {
|
|
|
3091
3185
|
progress: "text-toast-progress-icon",
|
|
3092
3186
|
error: "text-toast-error-icon"
|
|
3093
3187
|
};
|
|
3094
|
-
var Toast =
|
|
3188
|
+
var Toast = forwardRef25(
|
|
3095
3189
|
(_a, ref) => {
|
|
3096
3190
|
var _b = _a, {
|
|
3097
3191
|
type = "default",
|
|
@@ -3119,10 +3213,10 @@ var Toast = forwardRef24(
|
|
|
3119
3213
|
typeClasses[type],
|
|
3120
3214
|
className
|
|
3121
3215
|
].filter(Boolean).join(" ");
|
|
3122
|
-
return /* @__PURE__ */
|
|
3123
|
-
icon && /* @__PURE__ */
|
|
3124
|
-
/* @__PURE__ */
|
|
3125
|
-
actionLabel && onAction && /* @__PURE__ */
|
|
3216
|
+
return /* @__PURE__ */ jsxs20("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
|
|
3217
|
+
icon && /* @__PURE__ */ jsx25("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ jsx25(DefaultIcon, { className: "h-20 w-20" }) }),
|
|
3218
|
+
/* @__PURE__ */ jsx25("span", { className: "flex-1 text-sm font-medium leading-20 truncate", children }),
|
|
3219
|
+
actionLabel && onAction && /* @__PURE__ */ jsx25(
|
|
3126
3220
|
"button",
|
|
3127
3221
|
{
|
|
3128
3222
|
type: "button",
|
|
@@ -3131,14 +3225,14 @@ var Toast = forwardRef24(
|
|
|
3131
3225
|
children: actionLabel
|
|
3132
3226
|
}
|
|
3133
3227
|
),
|
|
3134
|
-
onDismiss && /* @__PURE__ */
|
|
3228
|
+
onDismiss && /* @__PURE__ */ jsx25(
|
|
3135
3229
|
"button",
|
|
3136
3230
|
{
|
|
3137
3231
|
type: "button",
|
|
3138
3232
|
onClick: onDismiss,
|
|
3139
3233
|
className: "shrink-0 p-4 rounded-md text-toast-dismiss hover:text-toast-dismiss-hover transition-colors",
|
|
3140
3234
|
"aria-label": "Dismiss",
|
|
3141
|
-
children: /* @__PURE__ */
|
|
3235
|
+
children: /* @__PURE__ */ jsx25(CloseIcon5, { className: "h-16 w-16" })
|
|
3142
3236
|
}
|
|
3143
3237
|
)
|
|
3144
3238
|
] }));
|
|
@@ -3147,9 +3241,9 @@ var Toast = forwardRef24(
|
|
|
3147
3241
|
Toast.displayName = "Toast";
|
|
3148
3242
|
|
|
3149
3243
|
// src/components/ToggleSwitch/ToggleSwitch.tsx
|
|
3150
|
-
import { forwardRef as
|
|
3151
|
-
import { jsx as
|
|
3152
|
-
var ToggleSwitch =
|
|
3244
|
+
import { forwardRef as forwardRef26 } from "react";
|
|
3245
|
+
import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
3246
|
+
var ToggleSwitch = forwardRef26(
|
|
3153
3247
|
(_a, ref) => {
|
|
3154
3248
|
var _b = _a, {
|
|
3155
3249
|
value,
|
|
@@ -3164,14 +3258,14 @@ var ToggleSwitch = forwardRef25(
|
|
|
3164
3258
|
"setIsSelected",
|
|
3165
3259
|
"className"
|
|
3166
3260
|
]);
|
|
3167
|
-
return /* @__PURE__ */
|
|
3261
|
+
return /* @__PURE__ */ jsxs21(
|
|
3168
3262
|
"label",
|
|
3169
3263
|
__spreadProps(__spreadValues({
|
|
3170
3264
|
ref,
|
|
3171
3265
|
className: `inline-flex items-center ${className}`
|
|
3172
3266
|
}, rest), {
|
|
3173
3267
|
children: [
|
|
3174
|
-
/* @__PURE__ */
|
|
3268
|
+
/* @__PURE__ */ jsx26(
|
|
3175
3269
|
"input",
|
|
3176
3270
|
{
|
|
3177
3271
|
type: "checkbox",
|
|
@@ -3181,7 +3275,7 @@ var ToggleSwitch = forwardRef25(
|
|
|
3181
3275
|
onChange: () => !isDisabled && (setIsSelected == null ? void 0 : setIsSelected(!isSelected))
|
|
3182
3276
|
}
|
|
3183
3277
|
),
|
|
3184
|
-
/* @__PURE__ */
|
|
3278
|
+
/* @__PURE__ */ jsx26(
|
|
3185
3279
|
"div",
|
|
3186
3280
|
{
|
|
3187
3281
|
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 `
|
|
@@ -3193,99 +3287,6 @@ var ToggleSwitch = forwardRef25(
|
|
|
3193
3287
|
}
|
|
3194
3288
|
);
|
|
3195
3289
|
ToggleSwitch.displayName = "ToggleSwitch";
|
|
3196
|
-
|
|
3197
|
-
// src/components/Tooltip/Tooltip.tsx
|
|
3198
|
-
import {
|
|
3199
|
-
useState as useState11,
|
|
3200
|
-
useEffect as useEffect5,
|
|
3201
|
-
useRef as useRef4,
|
|
3202
|
-
forwardRef as forwardRef26
|
|
3203
|
-
} from "react";
|
|
3204
|
-
import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
3205
|
-
var Tooltip = forwardRef26(
|
|
3206
|
-
(_a, ref) => {
|
|
3207
|
-
var _b = _a, {
|
|
3208
|
-
size = "md",
|
|
3209
|
-
children,
|
|
3210
|
-
headText,
|
|
3211
|
-
text,
|
|
3212
|
-
position = "top",
|
|
3213
|
-
className = ""
|
|
3214
|
-
} = _b, rest = __objRest(_b, [
|
|
3215
|
-
"size",
|
|
3216
|
-
"children",
|
|
3217
|
-
"headText",
|
|
3218
|
-
"text",
|
|
3219
|
-
"position",
|
|
3220
|
-
"className"
|
|
3221
|
-
]);
|
|
3222
|
-
const wrapperRef = useRef4(null);
|
|
3223
|
-
const [isVisible, setIsVisible] = useState11(false);
|
|
3224
|
-
const [isHovered, setIsHovered] = useState11(false);
|
|
3225
|
-
useEffect5(() => {
|
|
3226
|
-
const handleClickOutside = (event) => {
|
|
3227
|
-
if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
|
|
3228
|
-
setIsVisible(false);
|
|
3229
|
-
setIsHovered(false);
|
|
3230
|
-
}
|
|
3231
|
-
};
|
|
3232
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
3233
|
-
return () => {
|
|
3234
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
3235
|
-
};
|
|
3236
|
-
}, []);
|
|
3237
|
-
return /* @__PURE__ */ jsxs21(
|
|
3238
|
-
"div",
|
|
3239
|
-
__spreadProps(__spreadValues({
|
|
3240
|
-
className: `group relative inline-block ${className}`,
|
|
3241
|
-
ref
|
|
3242
|
-
}, rest), {
|
|
3243
|
-
children: [
|
|
3244
|
-
/* @__PURE__ */ jsx26(
|
|
3245
|
-
"div",
|
|
3246
|
-
{
|
|
3247
|
-
ref: wrapperRef,
|
|
3248
|
-
onClick: () => {
|
|
3249
|
-
if (isVisible) {
|
|
3250
|
-
setIsVisible(false);
|
|
3251
|
-
setIsHovered(false);
|
|
3252
|
-
} else {
|
|
3253
|
-
setIsVisible(true);
|
|
3254
|
-
}
|
|
3255
|
-
},
|
|
3256
|
-
onMouseEnter: () => setIsHovered(true),
|
|
3257
|
-
onMouseLeave: () => setIsHovered(false),
|
|
3258
|
-
children
|
|
3259
|
-
}
|
|
3260
|
-
),
|
|
3261
|
-
/* @__PURE__ */ jsxs21(
|
|
3262
|
-
"div",
|
|
3263
|
-
{
|
|
3264
|
-
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"}`}`,
|
|
3265
|
-
children: [
|
|
3266
|
-
/* @__PURE__ */ jsx26(
|
|
3267
|
-
"span",
|
|
3268
|
-
{
|
|
3269
|
-
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`} `
|
|
3270
|
-
}
|
|
3271
|
-
),
|
|
3272
|
-
headText ? /* @__PURE__ */ jsx26(
|
|
3273
|
-
"p",
|
|
3274
|
-
{
|
|
3275
|
-
className: `text-sm text-white font-semibold text-center ${text ? "mb-5" : ""}`,
|
|
3276
|
-
children: headText
|
|
3277
|
-
}
|
|
3278
|
-
) : /* @__PURE__ */ jsx26(Fragment6, {}),
|
|
3279
|
-
text ? /* @__PURE__ */ jsx26("p", { className: "text-xs text-white font-normal text-center text-wrap", children: text }) : /* @__PURE__ */ jsx26(Fragment6, {})
|
|
3280
|
-
]
|
|
3281
|
-
}
|
|
3282
|
-
)
|
|
3283
|
-
]
|
|
3284
|
-
})
|
|
3285
|
-
);
|
|
3286
|
-
}
|
|
3287
|
-
);
|
|
3288
|
-
Tooltip.displayName = "Tooltip";
|
|
3289
3290
|
export {
|
|
3290
3291
|
Accordion,
|
|
3291
3292
|
AlertBanner,
|