dojo-fe-shared
Version:
Shared React component library for Dojo FE (SuperAdmin, Admin, Student/Contact)
1,228 lines (1,203 loc) • 85.3 kB
JavaScript
// src/components/AccordionItem.tsx
import { useState } from "react";
// src/assets/svg/DropDownArrowIcon.tsx
import { jsx } from "react/jsx-runtime";
var DropDownArrowIcon = (props) => {
return /* @__PURE__ */ jsx(
"svg",
{
...props,
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx("g", { id: "chevron-down", children: /* @__PURE__ */ jsx(
"path",
{
id: "Icon",
d: "M5 7.5L10 12.5L15 7.5",
stroke: "#667085",
strokeWidth: "1.66667",
strokeLinecap: "round",
strokeLinejoin: "round"
}
) })
}
);
};
var DropDownArrowIcon_default = DropDownArrowIcon;
// src/components/AccordionItem.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var AccordionItem = ({
title,
children,
description
}) => {
const [isOpen, setIsOpen] = useState(false);
console.log("children", children);
return /* @__PURE__ */ jsxs("div", { className: "border flex-col mb-2 py-3 rounded-lg overflow-hidden border-gray-300 dark:border-primaryBorderDark", children: [
/* @__PURE__ */ jsxs(
"button",
{
type: "button",
className: "w-full text-left p-4 focus:outline-none flex justify-between items-center bg-white dark:bg-secondaryBgDark",
onClick: () => setIsOpen(!isOpen),
children: [
/* @__PURE__ */ jsxs("div", { className: "flex-col flex", children: [
/* @__PURE__ */ jsx2("span", { className: "font-semibold text-lg dark:text-primaryTextDark", children: title }),
/* @__PURE__ */ jsx2("span", { className: "font-normal text-BluishGrayColor dark:text-lightTextDark", children: description })
] }),
/* @__PURE__ */ jsx2(
"span",
{
className: `transform transition-transform ${isOpen ? "rotate-180" : "rotate-0"}`,
children: /* @__PURE__ */ jsx2(DropDownArrowIcon_default, {})
}
)
]
}
),
isOpen && /* @__PURE__ */ jsx2("div", { className: "p-4 border-t bg-gray-50 dark:bg-secondaryBorderDark", children })
] });
};
// src/components/AttachmentButton.tsx
import { useRef } from "react";
// src/assets/svg/AttachmentIcon.tsx
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var AttachmentIcon = (props) => {
const isDarkMode = false;
return /* @__PURE__ */ jsxs2(
"svg",
{
...props,
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx3("g", { clipPath: "url(#clip0_2243_69634)", children: /* @__PURE__ */ jsx3(
"path",
{
d: "M15.3218 5.82717C15.0607 5.56751 14.6386 5.56866 14.379 5.8297L6.36476 13.8872C5.32502 14.927 3.63632 14.927 2.59464 13.8858C1.55374 12.8444 1.55374 11.1557 2.59477 10.1147L10.8462 1.81992C11.4953 1.17081 12.5507 1.17081 13.2017 1.82132C13.8525 2.47215 13.8525 3.5274 13.2015 4.17841L6.36601 11.0139C6.36558 11.0143 6.3652 11.0148 6.36476 11.0153C6.10435 11.2742 5.6835 11.2739 5.42362 11.014C5.1633 10.7537 5.1633 10.3318 5.42362 10.0715L8.72307 6.77132C8.98339 6.51093 8.98335 6.0888 8.72297 5.82848C8.46259 5.56816 8.04046 5.56819 7.78014 5.82857L4.48072 9.12865C3.69973 9.90964 3.69973 11.1758 4.48078 11.9568C5.2618 12.7378 6.52795 12.7378 7.309 11.9568C7.30991 11.9559 7.31063 11.9549 7.3115 11.954L14.1444 5.12118C15.3161 3.94947 15.3161 2.04999 14.1444 0.878271C12.9725 -0.292757 11.0731 -0.292757 9.90209 0.878271L1.65068 9.17309C0.0902098 10.7336 0.0902097 13.2663 1.65181 14.8287C3.21444 16.3905 5.74719 16.3905 7.30888 14.8288L15.3243 6.77C15.584 6.50893 15.5828 6.08683 15.3218 5.82717Z",
fill: isDarkMode ? "#CECFD2" : "#344054"
}
) }),
/* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsx3("clipPath", { id: "clip0_2243_69634", children: /* @__PURE__ */ jsx3(
"rect",
{
width: "16",
height: "16",
fill: "white"
}
) }) })
]
}
);
};
var AttachmentIcon_default = AttachmentIcon;
// src/components/AttachmentButton.tsx
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
var AttachmentButton = ({
setAttachments,
icon,
isMulti = true
}) => {
const ref = useRef(null);
return /* @__PURE__ */ jsxs3("div", { className: " flex items-center px-2 h-[30px]", children: [
/* @__PURE__ */ jsx4(
"button",
{
type: "button",
onClick: () => {
var _a;
return (_a = ref.current) == null ? void 0 : _a.click();
},
className: " w-full ",
children: icon || /* @__PURE__ */ jsx4(AttachmentIcon_default, {})
}
),
/* @__PURE__ */ jsx4(
"input",
{
hidden: true,
type: "file",
multiple: isMulti,
ref,
onChange: (e) => {
const files = e.target.files ? Array.from(e.target.files) : [];
if (isMulti) {
setAttachments((prev) => [...prev, ...files]);
} else {
setAttachments(files);
}
}
}
)
] });
};
// src/components/Button.tsx
import { jsx as jsx5 } from "react/jsx-runtime";
var Button = ({
className = "",
children,
...props
}) => /* @__PURE__ */ jsx5(
"button",
{
className: `px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 transition ${className}`,
...props,
children
}
);
// src/components/ButtonDatePicker.tsx
import { useEffect, useRef as useRef2 } from "react";
// src/components/CustomSpinner.tsx
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
var CustomSpinner = () => {
return /* @__PURE__ */ jsxs4("div", { className: "flex justify-center items-center", children: [
/* @__PURE__ */ jsxs4(
"svg",
{
"aria-hidden": "true",
className: "w-[30px] h-[25px] flex items-center justify-center text-gray-200 animate-spin dark:text-gray-600 fill-blue-600",
viewBox: "0 0 100 101",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ jsx6(
"path",
{
d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
fill: "currentColor"
}
),
/* @__PURE__ */ jsx6(
"path",
{
d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
fill: "currentFill"
}
)
]
}
),
/* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Loading..." })
] });
};
// src/enums/ButtonTypes.ts
var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
ButtonType2["PRIMARY"] = "primary";
ButtonType2["SECONDARY"] = "secondary";
ButtonType2["SUCCESS"] = "success";
ButtonType2["DANGER"] = "danger";
ButtonType2["LIGHT"] = "light";
ButtonType2["OUTLINED"] = "outlined";
ButtonType2["GRADIENT"] = "gradient";
return ButtonType2;
})(ButtonType || {});
var ButtonTypes_default = ButtonType;
// src/components/commonButtons/commonButton/CommonButton.tsx
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
var CommonButton = (props) => {
const {
buttonText,
loading,
disabled,
showIcon,
width,
height,
variant = ButtonTypes_default.PRIMARY,
className,
icon,
secondIcon,
type,
...rest
} = props;
let buttonClassName;
switch (variant) {
case ButtonTypes_default.DANGER:
buttonClassName = `${className} focus:ring-4 focus:ring-red-300 h-[40px] px-[10px] py-[7px] hover:bg-red-600 ${disabled ? "bg-white hover:bg-white !text-gray-400 hover:text-gray-400 cursor-not-allowed " : "bg-red-500"} rounded-lg text-white flex items-center border border-red-500 justify-center text-sm font-Inter font-semibold`;
break;
case ButtonTypes_default.SECONDARY:
buttonClassName = `${className} w-[160px] h-[40px] px-[14px] py-[7px] ${disabled ? "bg-white hover:bg-white !text-gray-400 hover:text-gray-400 cursor-not-allowed " : "bg-[#FFFFFF]"} rounded-lg text-black flex items-center border border-gray-200 justify-center hover:text-hoverBlue text-sm font-Inter font-semibold`;
break;
case ButtonTypes_default.PRIMARY:
buttonClassName = `${className} focus:ring-4 focus:ring-blue-300 h-[40px] px-[10px] py-[7px] hover:bg-blue-700 ${disabled ? "bg-white dark:bg-secondaryBorderDark hover:bg-white dark:hover:bg-secondaryBorderDark !text-gray-400 hover:text-gray-400 cursor-not-allowed dark:border-primaryBorderDark" : "bg-[#3772FF]"} rounded-lg text-white flex items-center border border-[#3772ff] justify-center text-sm font-Inter font-semibold`;
break;
case ButtonTypes_default.LIGHT:
buttonClassName = `${className} focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:focus:ring-secondaryBorderDark gap-1 h-[41px] px-[14px] py-[7px] hover:bg-gray-100 ${disabled ? "bg-white dark:bg-secondaryBorderDark hover:bg-white dark:hover:bg-secondaryBorderDark !text-gray-400 hover:text-gray-400 cursor-not-allowed " : "bg-[#FFFFFF] dark:bg-secondaryBgDark"} rounded-lg text-black dark:text-secondaryTextDark flex items-center text-BlackRiver border border-LightGray dark:border-primaryBorderDark justify-center text-sm font-Inter font-semibold`;
break;
case ButtonTypes_default.OUTLINED:
buttonClassName = `${className} focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 gap-1 h-[41px] px-[14px] py-[7px] hover:bg-gray-100 ${disabled ? "bg-white hover:bg-white !text-gray-400 hover:text-gray-400 cursor-not-allowed " : "bg-white"} border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-secondaryBgDark dark:text-secondaryTextDark dark:border-primaryBorderDark dark:hover:bg-primaryBorderDark dark:hover:border-gray-600 dark:focus:ring-gray-700`;
break;
case ButtonTypes_default.GRADIENT:
buttonClassName = `${className} flex items-center gap-[6px] px-5 py-[10px] bg-gradient-to-r from-[#F97794] via-[#6200FF] to-[#3498DB] text-white font-semibold rounded-xl shadow-lg `;
break;
default:
buttonClassName = `${className} w-[160px] h-[47px] px-[14px] py-[8px] font-Inter font-semibold text-sm ${disabled ? "bg-white hover:bg-white !text-gray-400 hover:text-gray-400 cursor-not-allowed " : "bg-yellowColor"} rounded-full text-black font-medium text-center flex items-center justify-center`;
break;
}
return /* @__PURE__ */ jsxs5(
"button",
{
"data-testid": `unique-button-${buttonText}`,
disabled: disabled || loading,
style: { width, height },
...rest,
className: buttonClassName,
role: "button",
type: type || "button",
children: [
icon,
loading ? /* @__PURE__ */ jsx7(CustomSpinner, {}) : buttonText,
secondIcon
]
}
);
};
var CommonButton_default = CommonButton;
// src/assets/svg/CalendarViewIcon.tsx
import { jsx as jsx8 } from "react/jsx-runtime";
var CalendarViewIcon = (props) => {
const theme = "light";
return /* @__PURE__ */ jsx8(
"svg",
{
...props,
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx8(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M13.75 3.125H6.25V1.875C6.25 1.53 5.97 1.25 5.625 1.25C5.28 1.25 5 1.53 5 1.875V3.125H3.75C3.2525 3.125 2.77562 3.3225 2.42437 3.67437C2.0725 4.02562 1.875 4.5025 1.875 5V15C1.875 15.4975 2.0725 15.9744 2.42437 16.3256C2.77562 16.6775 3.2525 16.875 3.75 16.875H16.25C16.7475 16.875 17.2244 16.6775 17.5756 16.3256C17.9275 15.9744 18.125 15.4975 18.125 15V5C18.125 4.5025 17.9275 4.02562 17.5756 3.67437C17.2244 3.3225 16.7475 3.125 16.25 3.125H15V1.875C15 1.53 14.72 1.25 14.375 1.25C14.03 1.25 13.75 1.53 13.75 1.875V3.125ZM16.875 8.125V15C16.875 15.1656 16.8094 15.325 16.6919 15.4419C16.575 15.5594 16.4156 15.625 16.25 15.625H3.75C3.58438 15.625 3.425 15.5594 3.30812 15.4419C3.19062 15.325 3.125 15.1656 3.125 15V8.125H16.875ZM5 4.375H3.75C3.58438 4.375 3.425 4.44062 3.30812 4.55812C3.19062 4.675 3.125 4.83437 3.125 5V6.875H16.875V5C16.875 4.83437 16.8094 4.675 16.6919 4.55812C16.575 4.44062 16.4156 4.375 16.25 4.375H15V5C15 5.345 14.72 5.625 14.375 5.625C14.03 5.625 13.75 5.345 13.75 5V4.375H6.25V5C6.25 5.345 5.97 5.625 5.625 5.625C5.28 5.625 5 5.345 5 5V4.375Z",
fill: theme === "dark" ? "#CECFD2" : "#344054"
}
)
}
);
};
var CalendarViewIcon_default = CalendarViewIcon;
// src/components/ButtonDatePicker.tsx
import DatePicker from "react-multi-date-picker";
import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
var ButtonDatePicker = ({
buttonText,
className,
buttonclassName,
allowDateRange,
onChangeCallbackProps
}) => {
const datePickerRef = useRef2(null);
const currentDate = /* @__PURE__ */ new Date();
const handleShowDatePicker = () => {
var _a;
(_a = datePickerRef.current) == null ? void 0 : _a.openCalendar();
};
const handleClickOutside = (event) => {
if (datePickerRef.current && !datePickerRef.current.contains(event.target)) {
datePickerRef.current.closeCalendar();
}
};
useEffect(() => {
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return /* @__PURE__ */ jsx9(Fragment, { children: /* @__PURE__ */ jsxs6("div", { className: `w-full lg:w-[150px] md:w-[30%] ${className}`, children: [
/* @__PURE__ */ jsx9(
CommonButton_default,
{
buttonText,
variant: ButtonTypes_default.LIGHT,
icon: /* @__PURE__ */ jsx9(CalendarViewIcon_default, {}),
onClick: handleShowDatePicker,
className: `w-full ${buttonclassName} `
}
),
/* @__PURE__ */ jsx9(
DatePicker,
{
ref: datePickerRef,
range: true,
containerStyle: { display: "block" },
className: "dark:bg-secondaryBgDark",
onChange: onChangeCallbackProps,
maxDate: allowDateRange ? currentDate : void 0
}
)
] }) });
};
// src/components/CommonCheckBox.tsx
import { ErrorMessage } from "@hookform/error-message";
import { Controller } from "react-hook-form";
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
var CommonCheckBox = ({
name,
control,
errors,
labelText,
labelDescription,
defaultValue,
className,
isMulti,
checkBoxList,
loginCheckBox,
...rest
}) => {
return /* @__PURE__ */ jsxs7("div", { className: " ", children: [
/* @__PURE__ */ jsx10(
Controller,
{
name,
defaultValue,
control,
render: ({ field }) => /* @__PURE__ */ jsx10(
"div",
{
className: `grid ${loginCheckBox ? "" : "md:grid-cols-2"} cursor-pointer gap-4 ${className}`,
children: isMulti ? checkBoxList == null ? void 0 : checkBoxList.map((checkBox, index) => {
var _a, _b, _c;
return /* @__PURE__ */ jsxs7(
"label",
{
className: `${((_a = field.value) == null ? void 0 : _a.includes(checkBox.value)) ? "bg-LightBlue items-center p-4 w-[100%] rounded-xl border border-RoyalBlueLight flex-col justify-center cursor-pointer text-RoyalBlueLight text-[16px] font-semibold" : "bg-white dark:bg-secondaryBgDark items-center p-4 rounded-xl w-[100%] border border-CyanBlueLight dark:border-primaryBorderDark flex-col justify-center cursor-pointer text-[#050606] text-[16px] font-semibold"} ${className || ""}`,
children: [
/* @__PURE__ */ jsxs7("div", { className: "flex custom-checkbox gap-2", children: [
/* @__PURE__ */ jsx10(
"input",
{
...field,
...rest,
className: "me-2 relative top-[5px] rounded-full w-[16px] h-[16px]",
type: "checkbox",
value: checkBox.value,
checked: ((_b = field.value) == null ? void 0 : _b.includes(checkBox.value)) || false,
onChange: (e) => {
const isChecked = e.target.checked;
let newValue;
if (isChecked) {
newValue = [...field.value || [], checkBox.value];
} else {
newValue = (field.value || []).filter(
(item) => item !== checkBox.value
);
}
field.onChange(newValue);
}
}
),
/* @__PURE__ */ jsx10("span", { className: "dark:text-RoyalBlueLight", children: checkBox.label })
] }),
/* @__PURE__ */ jsx10("div", { className: "pl-6", children: checkBox.description && /* @__PURE__ */ jsx10(
"span",
{
className: `text-sm font-normal ${((_c = field.value) == null ? void 0 : _c.includes(checkBox.value)) ? "text-RoyalBlueLight" : "text-gray-500 dark:text-lightTextDark"}`,
children: checkBox.description
}
) })
]
},
index
);
}) : /* @__PURE__ */ jsxs7(
"label",
{
className: `${field.value ? " items-center w-[100%] pb-4 font-semibold rounded-xl flex-col justify-center cursor-pointer text-sm " : " items-center pb-4 rounded-xl w-[100%] flex-col justify-center cursor-pointer text-[#050606] text-sm"} ${className || ""}`,
children: [
/* @__PURE__ */ jsxs7("div", { className: "flex custom-checkbox gap-2 ", children: [
/* @__PURE__ */ jsx10(
"input",
{
...field,
...rest,
className: "me-2 relative top-[5px] rounded-full w-[16px] h-[16px]",
type: "checkbox",
checked: field.value
}
),
/* @__PURE__ */ jsx10("span", { className: "pt-1 dark:text-secondaryTextDark", children: labelText })
] }),
/* @__PURE__ */ jsx10("div", { className: "pl-6", children: labelDescription && /* @__PURE__ */ jsx10(
"span",
{
className: `text-sm font-normal ${field.value ? "text-RoyalBlueLight" : "text-gray-500 dark:text-lightTextDark"}`,
children: labelDescription
}
) })
]
}
)
}
)
}
),
/* @__PURE__ */ jsx10(
ErrorMessage,
{
errors,
name,
render: ({ message }) => /* @__PURE__ */ jsx10("p", { className: "text-red-500 text-[12px]", children: message })
}
)
] });
};
// src/components/CommonColorField.tsx
import { useRef as useRef3, useState as useState2 } from "react";
import { ErrorMessage as ErrorMessage2 } from "@hookform/error-message";
import { Controller as Controller2 } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
var CommonColorField = ({
name = "",
control,
errors,
labelText,
onClick = void 0,
labelClass = "",
placeholder,
className = "",
required,
disabled,
translation,
icon,
beforeOnchange,
iconPosition = "left",
...restProps
}) => {
const { t } = useTranslation(translation && translation);
const [selectedColor, setSelectedColor] = useState2("#ffffff");
const inputRef = useRef3(null);
const handleInputClick = () => {
var _a;
(_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.click();
};
return control ? /* @__PURE__ */ jsxs8(
"div",
{
className: `relative w-full pb-5 ${className}`,
onClick,
children: [
/* @__PURE__ */ jsx11(
Controller2,
{
name,
control,
render: ({ field: { value, ...restVal } }) => {
return /* @__PURE__ */ jsxs8("div", { children: [
/* @__PURE__ */ jsxs8(
"label",
{
className: `block text-BlackRiver dark:text-secondaryTextDark text-[14px] max-md:text-[14px] font-medium mb-1 ${labelClass}`,
children: [
labelText,
required && /* @__PURE__ */ jsx11("em", { className: "relative text-[1px] inline-block w-1 h-1 not-italic -top-2 rounded-lg bg-[#E34B2A] left-1 rtl:left-auto rtl:right-1 ", children: "*" })
]
}
),
/* @__PURE__ */ jsxs8("div", { className: "relative flex gap-2 items-center w-full border rounded-lg", children: [
/* @__PURE__ */ jsx11("div", { className: "h-10 w-[40px] flex justify-center items-center bg-white cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 ", children: /* @__PURE__ */ jsx11(
"input",
{
ref: inputRef,
type: "color",
value,
onChange: (e) => restVal.onChange(e.target.value),
disabled,
id: "hs-color-input",
className: `h-10 pl-1 ${className} ${disabled ? "cursor-not-allowed" : ""} `,
placeholder
}
) }),
/* @__PURE__ */ jsx11("div", { children: value }),
icon && /* @__PURE__ */ jsx11(
"div",
{
className: `absolute inset-y-0 ${iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3"} flex items-center pointer`,
onClick: () => handleInputClick(),
children: icon
}
)
] })
] });
}
}
),
/* @__PURE__ */ jsx11(
ErrorMessage2,
{
errors,
name,
render: ({ message }) => /* @__PURE__ */ jsx11("p", { className: "text-red-500 text-[12px] absolute left-0 bottom-0 rtl:left-auto rtl:right-0", children: t(message) })
}
)
]
}
) : /* @__PURE__ */ jsxs8("div", { children: [
/* @__PURE__ */ jsxs8(
"label",
{
className: `block text-BlackRiver text-[14px] max-md:text-[14px] font-medium mb-1 ${labelClass}`,
children: [
labelText,
required && /* @__PURE__ */ jsx11("em", { className: "relative text-[1px] inline-block w-1 h-1 not-italic -top-2 rounded-lg bg-[#E34B2A] left-1 rtl:left-auto rtl:right-1 ", children: "*" })
]
}
),
/* @__PURE__ */ jsxs8("div", { className: "relative flex gap-2 items-center w-full border rounded-lg", children: [
/* @__PURE__ */ jsx11("div", { className: "h-10 w-[40px] flex justify-center items-center bg-white cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 ", children: /* @__PURE__ */ jsx11(
"input",
{
ref: inputRef,
type: "color",
disabled,
id: "hs-color-input",
className: `h-10 pl-1 ${className} ${disabled ? "cursor-not-allowed" : ""} `,
onChange: (e) => {
beforeOnchange && beforeOnchange(e.target);
setSelectedColor(e.target.value);
},
placeholder
}
) }),
/* @__PURE__ */ jsx11("div", { children: selectedColor && selectedColor }),
icon && /* @__PURE__ */ jsx11(
"div",
{
className: `absolute inset-y-0 ${iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3"} flex items-center pointer`,
onClick: () => handleInputClick(),
children: icon
}
)
] })
] });
};
// src/components/CommonPasswordField.tsx
import { useState as useState5 } from "react";
import { ErrorMessage as ErrorMessage3 } from "@hookform/error-message";
// src/assets/svg/EyeIcon.tsx
import { useState as useState3 } from "react";
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
var EyeIcon = ({ stroke = "#98A2B3", ...props }) => {
const [isHovered, setIsHovered] = useState3(false);
return /* @__PURE__ */ jsx12(
"svg",
{
...props,
width: "20",
height: "20",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
style: { cursor: "pointer" },
children: /* @__PURE__ */ jsx12("g", { id: "eye", children: /* @__PURE__ */ jsxs9("g", { id: "Icon", children: [
/* @__PURE__ */ jsx12(
"path",
{
d: "M1.61342 8.47513C1.52262 8.33137 1.47723 8.25949 1.45182 8.14862C1.43273 8.06534 1.43273 7.93401 1.45182 7.85073C1.47723 7.73986 1.52262 7.66798 1.61341 7.52422C2.36369 6.33623 4.59693 3.33301 8.00027 3.33301C11.4036 3.33301 13.6369 6.33623 14.3871 7.52422C14.4779 7.66798 14.5233 7.73986 14.5487 7.85073C14.5678 7.93401 14.5678 8.06534 14.5487 8.14862C14.5233 8.25949 14.4779 8.33137 14.3871 8.47513C13.6369 9.66311 11.4036 12.6663 8.00027 12.6663C4.59693 12.6663 2.36369 9.66311 1.61342 8.47513Z",
stroke: isHovered ? "#3772FF" : stroke,
strokeWidth: "1.33333",
strokeLinecap: "round",
strokeLinejoin: "round"
}
),
/* @__PURE__ */ jsx12(
"path",
{
d: "M8.00027 9.99967C9.10484 9.99967 10.0003 9.10424 10.0003 7.99967C10.0003 6.8951 9.10484 5.99967 8.00027 5.99967C6.8957 5.99967 6.00027 6.8951 6.00027 7.99967C6.00027 9.10424 6.8957 9.99967 8.00027 9.99967Z",
stroke: isHovered ? "#3772FF" : stroke,
strokeWidth: "1.33333",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
] }) })
}
);
};
var EyeIcon_default = EyeIcon;
// src/assets/svg/EyeOffIcon.tsx
import { useState as useState4 } from "react";
import { jsx as jsx13 } from "react/jsx-runtime";
var EyeOffIcon = (props) => {
const [isHovered, setIsHovered] = useState4(false);
return /* @__PURE__ */ jsx13(
"svg",
{
...props,
width: "20",
height: "20",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
style: { cursor: "pointer" },
children: /* @__PURE__ */ jsx13("g", { id: "eye-off", children: /* @__PURE__ */ jsx13(
"path",
{
id: "Icon",
d: "M7.16172 3.39488C7.43266 3.35482 7.71216 3.33333 8.00003 3.33333C11.4034 3.33333 13.6366 6.33656 14.3869 7.52455C14.4777 7.66833 14.5231 7.74023 14.5485 7.85112C14.5676 7.93439 14.5676 8.06578 14.5485 8.14905C14.5231 8.25993 14.4773 8.3323 14.3859 8.47705C14.186 8.79343 13.8812 9.23807 13.4774 9.7203M4.48264 4.47669C3.04126 5.45447 2.06272 6.81292 1.61383 7.52352C1.52261 7.66791 1.47701 7.74011 1.45158 7.85099C1.43249 7.93426 1.43248 8.06563 1.45156 8.14891C1.47698 8.25979 1.52238 8.33168 1.61318 8.47545C2.36345 9.66344 4.5967 12.6667 8.00003 12.6667C9.37231 12.6667 10.5543 12.1784 11.5256 11.5177M2.00003 2L14 14M6.58582 6.58579C6.22389 6.94772 6.00003 7.44772 6.00003 8C6.00003 9.10457 6.89546 10 8.00003 10C8.55232 10 9.05232 9.77614 9.41425 9.41421",
stroke: isHovered ? "#3772FF" : "#98A2B3",
strokeWidth: "1.33333",
strokeLinecap: "round",
strokeLinejoin: "round"
}
) })
}
);
};
var EyeOffIcon_default = EyeOffIcon;
// src/components/CommonPasswordField.tsx
import { Controller as Controller3 } from "react-hook-form";
import { useTranslation as useTranslation2 } from "react-i18next";
import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
var CommonPasswordField = ({
name,
control,
errors,
labelText,
className = "",
required,
disabled,
width,
labelClass = "",
placeholder,
translation,
limit
}) => {
const { t } = useTranslation2(translation && translation);
const [isNewPasswordVisible, setIsNewPasswordVisible] = useState5(false);
const showPassword = () => {
setIsNewPasswordVisible(!isNewPasswordVisible);
};
return /* @__PURE__ */ jsx14(Fragment2, { children: /* @__PURE__ */ jsx14("div", { className: `${width || "w-full"} mb-2`, children: /* @__PURE__ */ jsx14(
Controller3,
{
name,
control,
render: ({ field }) => {
return /* @__PURE__ */ jsxs10("div", { className: "", children: [
/* @__PURE__ */ jsxs10(
"label",
{
className: `block text-BlackRiver dark:text-secondaryTextDark text-[14px] max-md:text-[14px] font-medium mb-1 ${labelClass}`,
children: [
labelText,
required && /* @__PURE__ */ jsx14("span", { className: " pl-0.5 text-red-600", children: "*" })
]
}
),
/* @__PURE__ */ jsxs10("div", { className: "relative", children: [
/* @__PURE__ */ jsx14(
"input",
{
disabled,
...field,
type: isNewPasswordVisible ? "text" : "password",
className: `${errors && errors[name] ? "border-red-500" : "border-LightGray dark:border-primaryBorderDark"} ${className} ${disabled ? "cursor-not-allowed" : ""} w-full rounded-lg border bg-white dark:bg-secondaryBgDark p-2.5 pr-10 focus:border-blue-600 focus:ring-blue-400/30 focus:outline-none focus:ring-4`,
placeholder: placeholder || "****",
maxLength: limit && limit
}
),
/* @__PURE__ */ jsx14(
"p",
{
className: `absolute top-3 inset-y-0 right-3 rtl:right-auto rtl:left-3 flex items-center w-max h-max text-gray-600 cursor-pointer`,
onClick: showPassword,
children: isNewPasswordVisible ? /* @__PURE__ */ jsx14(EyeOffIcon_default, {}) : /* @__PURE__ */ jsx14(EyeIcon_default, {})
}
)
] }),
/* @__PURE__ */ jsx14(
ErrorMessage3,
{
errors,
name,
render: ({ message }) => /* @__PURE__ */ jsx14("p", { className: "text-red-500 text-[12px] font-Inter", children: t(message) })
}
)
] });
}
}
) }) });
};
// src/components/CommonPinInput.tsx
import { forwardRef } from "react";
import { ErrorMessage as ErrorMessage4 } from "@hookform/error-message";
import { Controller as Controller4 } from "react-hook-form";
import { useTranslation as useTranslation3 } from "react-i18next";
import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
var CommonPinInput = forwardRef(({
name = "",
control,
errors,
labelText,
onClick = void 0,
labelClass = "",
beforeOnchange,
placeholder,
className = "",
required,
disabled,
translation,
icon,
step,
iconPosition = "left",
discountValue,
inputRef,
// Add this ref prop
onKeyDown,
// Add onKeyDown handler
...restProps
}, ref) => {
const { t } = useTranslation3(translation && translation);
const handleInputChange = (e, onChange) => {
let value = e.target.value;
if (value.length > 1) {
value = value.slice(0, 1);
}
onChange(value);
beforeOnchange && beforeOnchange(e);
};
const discountPositionClass = iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3";
const actualRef = inputRef || ref;
return control ? /* @__PURE__ */ jsxs11(
"div",
{
className: "relative w-full pb-5",
onClick,
children: [
/* @__PURE__ */ jsx15(
Controller4,
{
name,
control,
render: ({ field: { value, onChange, ...restVal } }) => {
return /* @__PURE__ */ jsxs11("div", { children: [
/* @__PURE__ */ jsxs11(
"label",
{
className: `block text-BlackRiver text-[14px] max-md:text-[14px] font-medium mb-1 ${labelClass}`,
children: [
labelText,
required && /* @__PURE__ */ jsx15("em", { className: "relative text-[1px] inline-block w-1 h-1 not-italic -top-2 rounded-lg bg-[#E34B2A] left-1 rtl:left-auto rtl:right-1 ", children: "*" })
]
}
),
/* @__PURE__ */ jsxs11("div", { className: "relative flex items-center", children: [
/* @__PURE__ */ jsx15(
"input",
{
...restVal,
...restProps,
value,
onChange: (e) => handleInputChange(e, onChange),
disabled,
"data-testid": `pin-input-${name}`,
className: ` text-[50px] text-center inputpin text-DarkGrayishBlue font-semibold ${errors && errors[name] ? "border-red-500" : "border-LightGray dark:border-primaryBorderDark"} ${className} ${disabled ? "cursor-not-allowed" : ""} w-full rounded-lg border bg-white dark:bg-secondaryBgDark p-2.5 focus:border-blue-600 focus:ring-blue-400/30 focus:outline-none focus:ring-4`,
placeholder,
maxLength: 1,
ref: actualRef,
onKeyDown,
inputMode: "numeric",
pattern: "[0-9]*"
}
),
icon && /* @__PURE__ */ jsx15(
"div",
{
className: `absolute inset-y-0 ${iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3"} flex items-center cursor-pointer`,
children: icon
}
),
discountValue && /* @__PURE__ */ jsx15(
"span",
{
className: `absolute inset-y-0 ${discountPositionClass} flex items-center pointer-events-none text-sm text-gray-500`,
children: discountValue
}
)
] })
] });
}
}
),
/* @__PURE__ */ jsx15(
ErrorMessage4,
{
errors,
name,
render: ({ message }) => /* @__PURE__ */ jsx15("p", { className: "text-red-500 text-[12px] absolute left-0 bottom-0 rtl:left-auto rtl:right-0", children: t(message) })
}
)
]
}
) : /* @__PURE__ */ jsxs11("div", { className: "relative w-full z-40 ", children: [
/* @__PURE__ */ jsx15("label", { className: `${labelClass}`, children: labelText }),
/* @__PURE__ */ jsxs11("div", { className: "relative flex items-center", children: [
/* @__PURE__ */ jsx15(
"input",
{
...restProps,
disabled,
className: `${icon && (iconPosition === "right" ? "pr-10" : "pl-10")} ${className} ${disabled ? "cursor-not-allowed" : ""} w-full rounded-lg border border-gray-300 dark:border-primaryBorderDark text-DeepNavyColor bg-white dark:bg-secondaryBgDark p-4 focus:border-blue-600 focus:ring-blue-400/30 focus:outline-none focus:ring-4`,
placeholder,
maxLength: 1,
ref: actualRef,
onKeyDown,
inputMode: "numeric",
pattern: "[0-9]*"
}
),
icon && /* @__PURE__ */ jsx15(
"div",
{
className: `absolute inset-y-0 ${iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3"} flex items-center cursor-pointer`,
children: icon
}
),
discountValue && /* @__PURE__ */ jsx15(
"span",
{
className: `absolute text-lg top-[6px] bottom-[2px] right-[2px] rounded-r-lg ${discountPositionClass} flex items-center pointer-events-none text-sm bg-white 2xl:pl-16 md:pl-4 xl:pl-8 pl-6 text-gray-500`,
children: discountValue
}
)
] })
] });
});
// src/components/CommonSimpleCheckBox.tsx
import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
var CommonSimpleCheckBox = ({
name,
value,
labelText,
labelDescription,
className,
isMulti = false,
checkBoxList,
...rest
}) => {
return /* @__PURE__ */ jsx16("div", { className: " ", children: isMulti ? /* @__PURE__ */ jsx16(
"div",
{
className: `grid md:grid-cols-2 cursor-pointer gap-4 ${className}`,
children: checkBoxList == null ? void 0 : checkBoxList.map((checkBox, index) => /* @__PURE__ */ jsxs12(
"label",
{
className: `bg-white items-center p-4 rounded-xl w-[100%] border border-CyanBlueLight flex-col justify-center cursor-pointer text-[#050606] dark:text-secondaryTextDark text-[16px] font-semibold ${className}`,
children: [
/* @__PURE__ */ jsxs12("div", { className: "flex", children: [
/* @__PURE__ */ jsx16(
"input",
{
...rest,
className: "me-2 relative top-[5px] rounded-full w-[16px] h-[16px]",
type: "checkbox",
name,
value: checkBox.value
}
),
/* @__PURE__ */ jsx16("span", { className: "dark:text-secondaryTextDark", children: checkBox.label })
] }),
/* @__PURE__ */ jsx16("div", { className: "pl-6", children: checkBox.description && /* @__PURE__ */ jsx16("span", { className: "text-[14px] font-normal text-gray-500 dark:text-lightTextDark", children: checkBox.description }) })
]
},
index
))
}
) : /* @__PURE__ */ jsxs12(
"label",
{
className: `bg-white items-center pb-4 rounded-xl w-[100%] flex-col justify-center cursor-pointer text-[#050606] dark:text-secondaryTextDark text-[14px] ${className}`,
children: [
/* @__PURE__ */ jsxs12("div", { className: "flex ", children: [
/* @__PURE__ */ jsx16(
"input",
{
...rest,
onChange: (e) => rest.onChange && rest.onChange(e),
className: "me-2 relative top-[5px] rounded-full w-[16px] h-[16px]",
type: "checkbox",
name,
disabled: rest == null ? void 0 : rest.disabledCheckbox
}
),
/* @__PURE__ */ jsx16("span", { className: "pt-1", children: labelText })
] }),
/* @__PURE__ */ jsx16("div", { className: "pl-6", children: labelDescription && /* @__PURE__ */ jsx16("span", { className: "text-[14px] font-normal text-gray-500 dark:text-lightTextDark", children: labelDescription }) })
]
}
) });
};
// src/components/CommonTextEditor.tsx
import { Controller as Controller5 } from "react-hook-form";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
var CommonTextEditor = ({ name, control }) => {
const modules = {
toolbar: {
container: [
[{ header: [1, 2, 3, 4, false] }],
// heading levels
[{ size: ["small", false, "large", "huge"] }],
// font size options
[{ font: [] }],
// font family options
["bold", "italic", "underline", "strike", "blockquote"],
[
{ list: "ordered" },
{ list: "bullet" },
{ indent: "-1" },
{ indent: "+1" }
],
["link", "image"],
[{ align: [] }],
// text alignment options
[{ color: [] }, { background: [] }],
// text and background colors
["clean"]
// remove formatting button
]
}
};
const validateEditorContent = (value) => {
const strippedValue = value.replace(/<(.|\n)*?>/g, "").trim();
if (!strippedValue) {
return "Content cannot be empty";
}
return true;
};
return /* @__PURE__ */ jsx17(
Controller5,
{
name,
control,
rules: {
validate: {
notEmptyContent: validateEditorContent
}
},
render: ({ field: { onChange, value }, fieldState: { error } }) => /* @__PURE__ */ jsxs13(Fragment3, { children: [
/* @__PURE__ */ jsx17(
ReactQuill,
{
modules,
value,
onChange: (content) => {
const isValid = validateEditorContent(content);
if (isValid !== true) {
onChange("");
} else {
onChange(content);
}
}
}
),
error && /* @__PURE__ */ jsx17("p", { className: "text-sm text-red-500 mt-2", children: error.message })
] })
}
);
};
// src/components/CommonTextField.tsx
import { ErrorMessage as ErrorMessage5 } from "@hookform/error-message";
import { Controller as Controller6 } from "react-hook-form";
import { useTranslation as useTranslation4 } from "react-i18next";
import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
var CommonTextField = ({
name = "",
control,
errors,
labelText,
onClick = void 0,
labelClass = "",
beforeOnchange,
placeholder,
className = "",
required,
disabled,
translation,
icon,
step,
iconPosition = "left",
discountValue,
onlyAlphabet = false,
wrapperClassName = "",
...restProps
}) => {
const { t } = useTranslation4(translation && translation);
const defaultStep = step != null ? step : restProps.type === "number" ? "1" : void 0;
const handleInputChange = (e, onChange) => {
let value = e.target.value;
if (onlyAlphabet) {
value = value.replace(/[^a-zA-Z\s]/g, "");
} else if (defaultStep === "0.01") {
const regexTwoDecimals = /^\d*\.?\d{0,2}$/;
if (!regexTwoDecimals.test(value)) {
return;
}
} else {
const regexNoDecimals = /^\d*$/;
if (restProps.type === "number" && !regexNoDecimals.test(value)) {
return;
}
}
onChange(restProps.type === "number" ? +value : value);
beforeOnchange && beforeOnchange(e);
};
const discountPositionClass = iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3";
return control ? /* @__PURE__ */ jsxs14(
"div",
{
className: `relative w-full pb-5 ${wrapperClassName}`,
onClick,
children: [
/* @__PURE__ */ jsx18(
Controller6,
{
name,
control,
render: ({ field: { value, onChange, ...restVal } }) => {
return /* @__PURE__ */ jsxs14("div", { children: [
/* @__PURE__ */ jsxs14(
"label",
{
className: `block text-BlackRiver dark:text-secondaryTextDark text-[14px] font-medium mb-1 ${labelClass}`,
children: [
labelText,
required && /* @__PURE__ */ jsx18("span", { className: " text-[#E34B2A] ", children: "*" })
]
}
),
/* @__PURE__ */ jsxs14("div", { className: "relative flex items-center", children: [
/* @__PURE__ */ jsx18(
"input",
{
...restVal,
...restProps,
value,
step: defaultStep,
onChange: (e) => handleInputChange(e, onChange),
disabled,
"data-testid": `unique-input-${name}`,
className: `${errors && errors[name] ? "border-red-500" : "border-LightGray"} ${className} ${disabled ? "cursor-not-allowed" : ""} ${disabled ? "bg-gray-500 text-gray-400" : ""} w-full rounded-lg border dark:border-primaryBorderDark bg-white dark:bg-secondaryBgDark p-2.5 focus:border-blue-600 focus:ring-blue-400/30 focus:outline-none focus:ring-4`,
placeholder
}
),
icon && /* @__PURE__ */ jsx18(
"div",
{
className: `absolute inset-y-0 ${iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3"} flex items-center cursor-pointer`,
children: icon
}
),
discountValue && /* @__PURE__ */ jsx18(
"span",
{
className: `absolute inset-y-0 ${discountPositionClass} flex items-center pointer-events-none text-sm text-gray-500`,
children: discountValue
}
)
] })
] });
}
}
),
/* @__PURE__ */ jsx18(
ErrorMessage5,
{
errors,
name,
render: ({ message }) => /* @__PURE__ */ jsx18("p", { className: "text-red-500 text-[12px] absolute left-0 bottom-0 rtl:left-auto rtl:right-0", children: t(message) })
}
)
]
}
) : /* @__PURE__ */ jsxs14("div", { className: "relative w-full ", children: [
/* @__PURE__ */ jsx18(
"label",
{
className: `block text-BlackRiver dark:text-secondaryTextDark text-[14px] font-medium mb-1 ${labelClass}`,
children: labelText
}
),
/* @__PURE__ */ jsxs14("div", { className: "relative flex items-center", children: [
/* @__PURE__ */ jsx18(
"input",
{
...restProps,
disabled,
step: defaultStep,
className: `${icon && (iconPosition === "right" ? "pr-10" : "pl-10")} ${className} ${disabled ? "cursor-not-allowed" : ""} w-full rounded-lg border border-gray-300 dark:border-primaryBorderDark text-DeepNavyColor dark:text-primaryTextDark dark:placeholder-secondaryTextDark bg-white dark:bg-secondaryBgDark p-4 focus:border-blue-600 focus:ring-blue-400/30 focus:outline-none focus:ring-4`,
placeholder
}
),
icon && /* @__PURE__ */ jsx18(
"div",
{
className: `absolute inset-y-0 ${iconPosition === "right" ? "right-0 pr-3" : "left-0 pl-3"} flex items-center cursor-pointer`,
children: icon
}
),
discountValue && /* @__PURE__ */ jsx18(
"span",
{
className: `absolute text-lg top-[6px] bottom-[2px] right-[2px] rounded-r-lg ${discountPositionClass} flex items-center pointer-events-none text-sm bg-white 2xl:pl-16 md:pl-4 xl:pl-8 pl-6 text-gray-500`,
children: discountValue
}
)
] })
] });
};
// src/assets/svg/MenuBarIcon.tsx
import { jsx as jsx19 } from "react/jsx-runtime";
var MenuBarIcon = () => {
return /* @__PURE__ */ jsx19(
"svg",
{
width: "12",
height: "12",
viewBox: "0 0 12 12",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx19(
"path",
{
d: "M1.5 4.25H10.5M1.5 7.75H10.5",
stroke: "#3772FF",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
}
);
};
var MenuBarIcon_default = MenuBarIcon;
// src/components/DashboardStatsComparisonChip.tsx
import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
function DashboardStatsComparisonChip({
growthPercentage = void 0,
growthAgainstText = void 0,
direction = "column",
className
}) {
return /* @__PURE__ */ jsxs15(
"div",
{
className: `text-sm text-BluishGrayColor dark:text-lightTextDark items-center font-medium flex gap-2 ${className} ${direction === "row" ? "flex-col items-center" : "flex-row"}`,
children: [
growthPercentage !== void 0 && /* @__PURE__ */ jsxs15(
"span",
{