@refinn/core-ui 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +191 -168
  2. package/dist/index.d.mts +6 -4
  3. package/dist/index.d.ts +6 -4
  4. package/dist/index.js +222 -195
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -538,12 +538,12 @@ var Branding = (0, import_react5.forwardRef)(
538
538
  viewBox: "0 0 89 20",
539
539
  fill: "currentColor",
540
540
  children: [
541
- /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { "clip-path": "url(#clip0_828_998)", children: [
541
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { clipPath: "url(#clip0_828_998)", children: [
542
542
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
543
543
  "path",
544
544
  {
545
- "fill-rule": "evenodd",
546
- "clip-rule": "evenodd",
545
+ fillRule: "evenodd",
546
+ clipRule: "evenodd",
547
547
  d: "M16.7368 16.8241H16.7425L12.5943 11.7367C14.2529 11.1183 16.1138 9.64704 16.1138 6.12635C16.1138 -0.239164 10.023 0.0275032 10.0092 0.0275032H1.92874C1.91035 0.0275032 1.89311 0.0275032 1.87587 0.0275032C1.37851 0.0275032 0.901524 0.225077 0.549839 0.576762C0.198155 0.928447 0.000580351 1.40543 0.000580351 1.90279C0.000580351 2.40015 0.198155 2.87713 0.549839 3.22882C0.901524 3.5805 1.37851 3.77808 1.87587 3.77808C1.89426 3.77808 1.9115 3.77808 1.92874 3.77808H10.1149C10.7376 3.79195 11.3292 4.0526 11.7597 4.50268C12.1902 4.95277 12.4242 5.55543 12.4103 6.17808C12.3965 6.80073 12.1358 7.39236 11.6857 7.82284C11.2357 8.25331 10.633 8.48735 10.0103 8.47348H1.88621H1.87472C1.62814 8.47348 1.38398 8.52212 1.15623 8.61662C0.928482 8.71112 0.721611 8.84963 0.547468 9.0242C0.373325 9.19877 0.23533 9.40598 0.141388 9.63396C0.0474455 9.86194 -0.00059909 10.1062 5.6384e-06 10.3528C5.6384e-06 10.3528 5.6384e-06 10.3631 5.6384e-06 10.3677V17.9746C0.0121171 18.4636 0.214886 18.9286 0.565035 19.2701C0.915184 19.6117 1.38498 19.8029 1.87414 19.8029C2.36331 19.8029 2.8331 19.6117 3.18325 19.2701C3.5334 18.9286 3.73617 18.4636 3.74828 17.9746V12.1631H8.14943L13.8149 19.1643L13.8218 19.1585C14.1314 19.5449 14.5818 19.7925 15.0739 19.8468C15.566 19.9012 16.0596 19.7578 16.446 19.4482C16.8324 19.1386 17.08 18.6882 17.1343 18.1961C17.1886 17.704 17.0452 17.2104 16.7356 16.8241H16.7368Z",
548
548
  fill: "currentColor"
549
549
  }
@@ -558,8 +558,8 @@ var Branding = (0, import_react5.forwardRef)(
558
558
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
559
559
  "path",
560
560
  {
561
- "fill-rule": "evenodd",
562
- "clip-rule": "evenodd",
561
+ fillRule: "evenodd",
562
+ clipRule: "evenodd",
563
563
  d: "M44.1379 5.09414H41.4805V4.56196C41.4808 4.16209 41.6398 3.77869 41.9225 3.49595C42.2052 3.2132 42.5886 3.05422 42.9885 3.05391H43.9977C44.398 3.05391 44.7818 2.89491 45.0649 2.61188C45.3479 2.32885 45.5069 1.94498 45.5069 1.54472C45.5069 1.14445 45.3479 0.760585 45.0649 0.477556C44.7818 0.194527 44.398 0.0355225 43.9977 0.0355225H41.9713V0.0435684C41.0274 0.0827094 40.1351 0.485118 39.4809 1.1667C38.8268 1.84829 38.4613 2.75632 38.4609 3.70104V5.08955H37.7402C37.3897 5.08955 37.0534 5.22881 36.8056 5.4767C36.5577 5.7246 36.4184 6.06081 36.4184 6.41138C36.4184 6.76196 36.5577 7.09817 36.8056 7.34607C37.0534 7.59396 37.3897 7.73322 37.7402 7.73322H38.4609V18.4229H38.4713C38.4925 18.806 38.6597 19.1665 38.9384 19.4303C39.2172 19.694 39.5864 19.841 39.9701 19.841C40.3539 19.841 40.7231 19.694 41.0018 19.4303C41.2806 19.1665 41.4477 18.806 41.469 18.4229H41.4793V7.73322H44.1379C44.4885 7.73322 44.8247 7.59396 45.0726 7.34607C45.3205 7.09817 45.4598 6.76196 45.4598 6.41138C45.4598 6.06081 45.3205 5.7246 45.0726 5.4767C44.8247 5.22881 44.4885 5.08955 44.1379 5.08955V5.09414Z",
564
564
  fill: "currentColor"
565
565
  }
@@ -567,8 +567,8 @@ var Branding = (0, import_react5.forwardRef)(
567
567
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
568
568
  "path",
569
569
  {
570
- "fill-rule": "evenodd",
571
- "clip-rule": "evenodd",
570
+ fillRule: "evenodd",
571
+ clipRule: "evenodd",
572
572
  d: "M72.2724 10.154C72.2414 7.48161 70.0678 5.04368 67.3885 5.04368C66.4874 5.04385 65.6039 5.29338 64.8358 5.76464C64.0678 6.2359 63.4451 6.91052 63.0368 7.7138C63.0368 7.7138 63.0368 6.56437 63.0368 6.53334C63.0368 6.13307 62.8778 5.7492 62.5947 5.46617C62.3117 5.18314 61.9278 5.02414 61.5276 5.02414C61.1273 5.02414 60.7434 5.18314 60.4604 5.46617C60.1774 5.7492 60.0184 6.13307 60.0184 6.53334V18.4356H60.0287C60.0499 18.8188 60.2171 19.1793 60.4959 19.443C60.7746 19.7068 61.1438 19.8537 61.5276 19.8537C61.9113 19.8537 62.2805 19.7068 62.5593 19.443C62.838 19.1793 63.0052 18.8188 63.0264 18.4356H63.0368V11.1805L63.0483 11.1989C63.0483 9.47472 64.4414 7.80575 66.1598 7.80575C67.7758 7.80575 69.1046 9.32069 69.2563 10.8977V18.4368H69.2666C69.2879 18.82 69.455 19.1804 69.7338 19.4442C70.0126 19.7079 70.3817 19.8549 70.7655 19.8549C71.1493 19.8549 71.5184 19.7079 71.7972 19.4442C72.076 19.1804 72.2431 18.82 72.2644 18.4368H72.2747V10.154H72.2724Z",
573
573
  fill: "currentColor"
574
574
  }
@@ -576,8 +576,8 @@ var Branding = (0, import_react5.forwardRef)(
576
576
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
577
577
  "path",
578
578
  {
579
- "fill-rule": "evenodd",
580
- "clip-rule": "evenodd",
579
+ fillRule: "evenodd",
580
+ clipRule: "evenodd",
581
581
  d: "M55.4322 2.2V1.96897H55.4126C55.2287 0.904602 53.7586 0.0758667 51.9724 0.0758667C50.1862 0.0758667 48.7161 0.905751 48.5322 1.96897H48.5126V4.4046H48.5241C48.6391 5.51035 50.1333 6.38621 51.9724 6.38621C53.8115 6.38621 55.3057 5.51035 55.4207 4.4046H55.431V4.27242L55.4322 2.2ZM54.1678 4.40575C54.1678 4.80115 53.1851 5.12184 51.9724 5.12184C50.7598 5.12184 49.777 4.80115 49.777 4.40575V3.53564C49.777 3.93104 50.7598 4.25173 51.9724 4.25173C53.1851 4.25173 54.1678 3.93104 54.1678 3.53564V4.40575ZM51.9724 3.09426C50.7598 3.09426 49.777 2.69196 49.777 2.19541C49.777 1.69885 50.7598 1.29541 51.9724 1.29541C53.1851 1.29541 54.1678 1.69771 54.1678 2.19541C54.1678 2.69311 53.1839 3.09426 51.9724 3.09426Z",
582
582
  fill: "currentColor"
583
583
  }
@@ -585,8 +585,8 @@ var Branding = (0, import_react5.forwardRef)(
585
585
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
586
586
  "path",
587
587
  {
588
- "fill-rule": "evenodd",
589
- "clip-rule": "evenodd",
588
+ fillRule: "evenodd",
589
+ clipRule: "evenodd",
590
590
  d: "M55.4321 17.708V9.16092V9.08046C55.3689 7.94483 53.8482 7.03448 51.9781 7.03448C50.108 7.03448 48.5804 7.94598 48.5172 9.08046H48.5115V17.7012C48.5115 17.7012 48.5115 17.7115 48.5115 17.7161C48.5115 18.8862 50.0609 19.8356 51.9724 19.8356C53.8839 19.8356 55.4333 18.8874 55.4333 17.7161C55.4333 17.7161 55.4333 17.7058 55.4333 17.7012L55.4321 17.708ZM54.1678 17.8954C54.1678 18.2908 53.185 18.6115 51.9724 18.6115C50.7597 18.6115 49.777 18.2908 49.777 17.8954V17.0264C49.777 17.4218 50.7597 17.7425 51.9724 17.7425C53.185 17.7425 54.1678 17.4218 54.1678 17.0264V17.8954ZM54.1678 15.792C54.1678 16.1874 53.185 16.508 51.9724 16.508C50.7597 16.508 49.777 16.1874 49.777 15.792V14.923C49.777 15.3184 50.7597 15.6391 51.9724 15.6391C53.185 15.6391 54.1678 15.3184 54.1678 14.923V15.792ZM54.1678 13.6885C54.1678 14.0839 53.185 14.4046 51.9724 14.4046C50.7597 14.4046 49.777 14.0839 49.777 13.6885V12.8195C49.777 13.2149 50.7597 13.5356 51.9724 13.5356C53.185 13.5356 54.1678 13.2149 54.1678 12.8195V13.6885ZM54.1678 11.5161C54.1678 11.9115 53.185 12.2322 51.9724 12.2322C50.7597 12.2322 49.777 11.9115 49.777 11.5161V10.646C49.777 11.0414 50.7597 11.3621 51.9724 11.3621C53.185 11.3621 54.1678 11.0414 54.1678 10.646V11.5161ZM51.9724 10.0678C50.7597 10.0678 49.777 9.66552 49.777 9.16897C49.777 8.67242 50.7597 8.27012 51.9724 8.27012C53.185 8.27012 54.1678 8.67242 54.1678 9.16897C54.1678 9.66552 53.1839 10.0667 51.9724 10.0667V10.0678Z",
591
591
  fill: "currentColor"
592
592
  }
@@ -594,8 +594,8 @@ var Branding = (0, import_react5.forwardRef)(
594
594
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
595
595
  "path",
596
596
  {
597
- "fill-rule": "evenodd",
598
- "clip-rule": "evenodd",
597
+ fillRule: "evenodd",
598
+ clipRule: "evenodd",
599
599
  d: "M88.8885 10.154C88.8574 7.48161 86.6839 5.04368 84.0046 5.04368C83.1039 5.04427 82.2209 5.294 81.4532 5.76524C80.6856 6.23648 80.0633 6.91086 79.6552 7.71379C79.6552 7.71379 79.6552 6.56437 79.6552 6.53333C79.6552 6.13307 79.4962 5.7492 79.2131 5.46617C78.9301 5.18314 78.5462 5.02414 78.146 5.02414C77.7457 5.02414 77.3618 5.18314 77.0788 5.46617C76.7958 5.7492 76.6368 6.13307 76.6368 6.53333V18.4356H76.6471C76.6684 18.8188 76.8355 19.1793 77.1143 19.443C77.393 19.7068 77.7622 19.8537 78.146 19.8537C78.5297 19.8537 78.8989 19.7068 79.1777 19.443C79.4564 19.1793 79.6236 18.8188 79.6448 18.4356H79.6552V11.1805L79.6667 11.1989C79.6667 9.47471 81.0598 7.80575 82.7781 7.80575C84.3942 7.80575 85.723 9.32069 85.8747 10.8977V18.4368H85.885C85.9063 18.8199 86.0734 19.1804 86.3522 19.4442C86.6309 19.7079 87.0001 19.8549 87.3839 19.8549C87.7676 19.8549 88.1368 19.7079 88.4156 19.4442C88.6943 19.1804 88.8615 18.8199 88.8827 18.4368H88.8931V10.154H88.8885Z",
600
600
  fill: "currentColor"
601
601
  }
@@ -1071,7 +1071,7 @@ var Chip = (0, import_react10.forwardRef)(
1071
1071
  icon,
1072
1072
  isOutlined = false,
1073
1073
  isDark = false,
1074
- defaultSelected = false,
1074
+ isSelected = false,
1075
1075
  disabled = false,
1076
1076
  className = ""
1077
1077
  } = _b, rest = __objRest(_b, [
@@ -1082,11 +1082,10 @@ var Chip = (0, import_react10.forwardRef)(
1082
1082
  "icon",
1083
1083
  "isOutlined",
1084
1084
  "isDark",
1085
- "defaultSelected",
1085
+ "isSelected",
1086
1086
  "disabled",
1087
1087
  "className"
1088
1088
  ]);
1089
- const [selected, setSelected] = (0, import_react10.useState)(defaultSelected);
1090
1089
  const sz = sizeClasses4[size];
1091
1090
  const outlinedClass = isOutlinedClasses[String(isOutlined)];
1092
1091
  const darkClass = isDarkClasses[String(isDark)];
@@ -1096,7 +1095,7 @@ var Chip = (0, import_react10.forwardRef)(
1096
1095
  outlinedClass,
1097
1096
  sz,
1098
1097
  className,
1099
- selected ? darkClass : ""
1098
+ isSelected ? darkClass : ""
1100
1099
  ].filter(Boolean).join(" ");
1101
1100
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
1102
1101
  "div",
@@ -1104,7 +1103,6 @@ var Chip = (0, import_react10.forwardRef)(
1104
1103
  ref,
1105
1104
  className: containerClasses
1106
1105
  }, rest), {
1107
- onClick: () => !disabled && setSelected(!selected),
1108
1106
  children: [
1109
1107
  icon ? icon : src && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src, alt, className: `${marginImgClasses[size]} rounded-full` }),
1110
1108
  label
@@ -1299,158 +1297,185 @@ function ChevronDown({ className }) {
1299
1297
  }
1300
1298
  );
1301
1299
  }
1302
- var Dropdown = ({
1303
- error,
1304
- label,
1305
- placeholder,
1306
- isDisabled = false,
1307
- isSearchable = false,
1308
- isTextCenter = false,
1309
- value,
1310
- setValue,
1311
- dropDownItems = [
1312
- { label: "Bonnie Green", value: "Bonnie Green" },
1313
- { label: "Jese Leos", value: "Jese Leos" },
1314
- { label: "Joseph Mcfall", value: "Joseph Mcfall" },
1315
- { label: "John Smith", value: "John Smith" },
1316
- { label: "Maria Garcia", value: "Maria Garcia" }
1317
- ]
1318
- }) => {
1319
- const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
1320
- const [search, setSearch] = (0, import_react12.useState)("");
1321
- const dropdownRef = (0, import_react12.useRef)(null);
1322
- const filteredItems = dropDownItems.filter(
1323
- (item) => item.label.toLowerCase().includes(search.toLowerCase())
1324
- );
1325
- (0, import_react12.useEffect)(() => {
1326
- function handleClickOutside(event) {
1327
- if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
1328
- setIsOpen(false);
1329
- }
1330
- }
1331
- document.addEventListener("mousedown", handleClickOutside);
1332
- return () => {
1333
- document.removeEventListener("mousedown", handleClickOutside);
1334
- };
1335
- }, []);
1336
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full", children: [
1337
- label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1338
- "p",
1339
- {
1340
- className: `text-label-medium text-left items-left font-medium mb-4 ${isDisabled ? "text-dropdown-text-disabled" : "text-dropdown-text-primary"}`,
1341
- children: label
1300
+ var Dropdown = (0, import_react12.forwardRef)(
1301
+ (_a, ref) => {
1302
+ var _b = _a, {
1303
+ size = "md",
1304
+ error,
1305
+ label,
1306
+ placeholder,
1307
+ isDisabled = false,
1308
+ isSearchable = false,
1309
+ isTextCenter = false,
1310
+ value,
1311
+ setValue,
1312
+ dropDownItems = [
1313
+ { label: "Bonnie Green", value: "Bonnie Green" },
1314
+ { label: "Jese Leos", value: "Jese Leos" },
1315
+ { label: "Joseph Mcfall", value: "Joseph Mcfall" },
1316
+ { label: "John Smith", value: "John Smith" },
1317
+ { label: "Maria Garcia", value: "Maria Garcia" }
1318
+ ],
1319
+ className = ""
1320
+ } = _b, rest = __objRest(_b, [
1321
+ "size",
1322
+ "error",
1323
+ "label",
1324
+ "placeholder",
1325
+ "isDisabled",
1326
+ "isSearchable",
1327
+ "isTextCenter",
1328
+ "value",
1329
+ "setValue",
1330
+ "dropDownItems",
1331
+ "className"
1332
+ ]);
1333
+ const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
1334
+ const [search, setSearch] = (0, import_react12.useState)("");
1335
+ const dropdownRef = (0, import_react12.useRef)(null);
1336
+ const filteredItems = dropDownItems.filter(
1337
+ (item) => item.label.toLowerCase().includes(search.toLowerCase())
1338
+ );
1339
+ (0, import_react12.useEffect)(() => {
1340
+ function handleClickOutside(event) {
1341
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
1342
+ setIsOpen(false);
1343
+ }
1342
1344
  }
1343
- ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
1344
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full flex flex-col relative", ref: dropdownRef, children: [
1345
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
1346
- "button",
1345
+ document.addEventListener("mousedown", handleClickOutside);
1346
+ return () => {
1347
+ document.removeEventListener("mousedown", handleClickOutside);
1348
+ };
1349
+ }, []);
1350
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full", children: [
1351
+ label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1352
+ "p",
1347
1353
  {
1348
- onClick: () => !isDisabled && setIsOpen(!isOpen),
1349
- className: `w-full rounded-md text-body-small px-16 py-10 text-center inline-flex gap-8 items-center border **:focus:outline-none focus:border-2 focus:px-15 focus:py-9
1350
- ${isDisabled ? "pointer-events-none bg-dropdown-background-disabled text-dropdown-text-disabled border-dropdown-border-disabled" : error ? "border-red-600 bg-dropdown-background-enabled focus:border-red-600" : value ? "text-dropdown-text-primary bg-dropdown-background-enabled border-dropdown-border-enabled focus:border-dropdown-border-active " : "text-dropdown-text-secondary bg-dropdown-background-enabled border-dropdown-border-enabled focus:border-dropdown-border-active "} `,
1351
- type: "button",
1352
- children: [
1353
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: `grow ${isTextCenter ? "text-center" : "text-start"}`, children: value.label || placeholder }),
1354
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-8", children: [
1355
- isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}) : error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconDanger, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
1354
+ className: `text-label-medium text-left items-left font-medium mb-4 ${isDisabled ? "text-dropdown-text-disabled" : "text-dropdown-text-primary"}`,
1355
+ children: label
1356
+ }
1357
+ ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
1358
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full flex flex-col relative", ref: dropdownRef, children: [
1359
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
1360
+ "div",
1361
+ __spreadProps(__spreadValues({
1362
+ ref
1363
+ }, rest), {
1364
+ onClick: () => !isDisabled && setIsOpen(!isOpen),
1365
+ className: `w-full rounded-md text-body-small px-16 text-center inline-flex gap-8 items-center border **:focus:outline-none focus:border-2 focus:px-15 focus:py-9
1366
+ ${size === "lg" ? "py-14" : "py-10"}
1367
+ ${isDisabled ? "text-dropdown-text-disabled cursor-not-allowed" : value ? "text-dropdown-text-primary cursor-pointer" : "text-dropdown-text-secondary cursor-pointer"}
1368
+ ${isDisabled ? "pointer-events-none bg-dropdown-background-disabled border-dropdown-border-disabled" : error ? "border-red-600 bg-dropdown-background-enabled focus:border-red-600" : value ? "text-dropdown-text-primary bg-dropdown-background-enabled border-dropdown-border-enabled focus:border-dropdown-border-active " : "text-dropdown-text-secondary bg-dropdown-background-enabled border-dropdown-border-enabled focus:border-dropdown-border-active "}
1369
+ ${className}`,
1370
+ children: [
1356
1371
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1357
- ChevronDown,
1372
+ "p",
1358
1373
  {
1359
- className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
1374
+ className: `grow ${isTextCenter ? "text-center" : "text-start"}`,
1375
+ children: value.label || placeholder
1360
1376
  }
1361
- )
1362
- ] })
1363
- ]
1364
- }
1365
- ),
1366
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
1367
- "div",
1368
- {
1369
- id: "dropdownSearch",
1370
- className: `${isOpen ? "flex" : "hidden"} top-[calc(100%+4px)] left-8 absolute z-10000 bg-white-100 rounded-lg shadow-base w-9/10 min-w-fit flex-col`,
1371
- children: [
1372
- isSearchable ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "p-3", children: [
1373
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { htmlFor: "input-group-search", className: "sr-only", children: "Search" }),
1374
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
1375
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-y-0 rtl:inset-r-0 inset-s-0 flex items-center ps-12 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
1376
- "svg",
1377
- {
1378
- xmlns: "http://www.w3.org/2000/svg",
1379
- width: "20",
1380
- height: "20",
1381
- viewBox: "0 0 20 20",
1382
- fill: "none",
1383
- children: [
1384
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1385
- "mask",
1386
- {
1387
- id: "mask0_3218_5077",
1388
- style: { maskType: "alpha" },
1389
- maskUnits: "userSpaceOnUse",
1390
- x: "0",
1391
- y: "0",
1392
- width: "20",
1393
- height: "20",
1394
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { width: "20", height: "20", fill: "#D9D9D9" })
1395
- }
1396
- ),
1397
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("g", { mask: "url(#mask0_3218_5077)", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1398
- "path",
1399
- {
1400
- d: "M15.8894 16.6476L10.9263 11.6842C10.5096 12.0005 10.0527 12.2454 9.55563 12.419C9.05855 12.5926 8.54556 12.6794 8.01667 12.6794C6.7182 12.6794 5.61354 12.2241 4.70271 11.3134C3.79202 10.4026 3.33667 9.29811 3.33667 8.00005C3.33667 6.702 3.79202 5.59755 4.70271 4.68672C5.61354 3.77603 6.71799 3.32068 8.01604 3.32068C9.3141 3.32068 10.4185 3.77603 11.3294 4.68672C12.2401 5.59755 12.6954 6.70221 12.6954 8.00068C12.6954 8.54554 12.606 9.06651 12.4271 9.56359C12.2481 10.0608 12.0058 10.5097 11.7002 10.9103L16.6633 15.8734L15.8894 16.6476ZM8.01604 11.5963C9.02035 11.5963 9.87077 11.248 10.5673 10.5513C11.264 9.85478 11.6123 9.00436 11.6123 8.00005C11.6123 6.99575 11.264 6.14533 10.5673 5.4488C9.87077 4.75214 9.02035 4.4038 8.01604 4.4038C7.01174 4.4038 6.16132 4.75214 5.46479 5.4488C4.76813 6.14533 4.41979 6.99575 4.41979 8.00005C4.41979 9.00436 4.76813 9.85478 5.46479 10.5513C6.16132 11.248 7.01174 11.5963 8.01604 11.5963Z",
1401
- fill: "#111827"
1402
- }
1403
- ) })
1404
- ]
1405
- }
1406
- ) }),
1377
+ ),
1378
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-8", children: [
1379
+ isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}) : error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconDanger, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
1407
1380
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1408
- "input",
1381
+ ChevronDown,
1409
1382
  {
1410
- type: "text",
1411
- className: "block w-full p-8 ps-40 text-body-small text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-bubblegum focus:border-bubblegum",
1412
- placeholder: "Search...",
1413
- value: search,
1414
- onChange: (e) => setSearch(e.target.value)
1383
+ className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
1415
1384
  }
1416
1385
  )
1417
1386
  ] })
1418
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
1419
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1420
- "ul",
1421
- {
1422
- className: "h-auto max-h-392 overflow-y-auto cursor-pointer",
1423
- "aria-labelledby": "dropdownSearchButton",
1424
- children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
1425
- "div",
1426
- {
1427
- onClick: () => {
1428
- setValue(item);
1429
- setSearch("");
1430
- setIsOpen(false);
1431
- },
1432
- className: "relative text-gray-900 py-12 px-16 rounded-sm text-label-medium hover:bg-gray-100",
1433
- children: [
1434
- item.label,
1435
- value.value === item.value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconCheck, { className: "absolute h-20 w-20 right-24 top-2 translate-y-1/2" })
1436
- ]
1437
- }
1438
- ) }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "px-8 py-8 text-label-medium text-gray-900", children: "No results found" })
1439
- }
1440
- )
1441
- ]
1387
+ ]
1388
+ })
1389
+ ),
1390
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
1391
+ "div",
1392
+ {
1393
+ id: "dropdownSearch",
1394
+ className: `${isOpen ? "flex" : "hidden"} top-[calc(100%+4px)] left-8 absolute z-10000 bg-white-100 rounded-lg shadow-base w-9/10 min-w-fit flex-col`,
1395
+ children: [
1396
+ isSearchable ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "p-3", children: [
1397
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { htmlFor: "input-group-search", className: "sr-only", children: "Search" }),
1398
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
1399
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-y-0 rtl:inset-r-0 inset-s-0 flex items-center ps-12 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
1400
+ "svg",
1401
+ {
1402
+ xmlns: "http://www.w3.org/2000/svg",
1403
+ width: "20",
1404
+ height: "20",
1405
+ viewBox: "0 0 20 20",
1406
+ fill: "none",
1407
+ children: [
1408
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1409
+ "mask",
1410
+ {
1411
+ id: "mask0_3218_5077",
1412
+ style: { maskType: "alpha" },
1413
+ maskUnits: "userSpaceOnUse",
1414
+ x: "0",
1415
+ y: "0",
1416
+ width: "20",
1417
+ height: "20",
1418
+ children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { width: "20", height: "20", fill: "#D9D9D9" })
1419
+ }
1420
+ ),
1421
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("g", { mask: "url(#mask0_3218_5077)", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1422
+ "path",
1423
+ {
1424
+ d: "M15.8894 16.6476L10.9263 11.6842C10.5096 12.0005 10.0527 12.2454 9.55563 12.419C9.05855 12.5926 8.54556 12.6794 8.01667 12.6794C6.7182 12.6794 5.61354 12.2241 4.70271 11.3134C3.79202 10.4026 3.33667 9.29811 3.33667 8.00005C3.33667 6.702 3.79202 5.59755 4.70271 4.68672C5.61354 3.77603 6.71799 3.32068 8.01604 3.32068C9.3141 3.32068 10.4185 3.77603 11.3294 4.68672C12.2401 5.59755 12.6954 6.70221 12.6954 8.00068C12.6954 8.54554 12.606 9.06651 12.4271 9.56359C12.2481 10.0608 12.0058 10.5097 11.7002 10.9103L16.6633 15.8734L15.8894 16.6476ZM8.01604 11.5963C9.02035 11.5963 9.87077 11.248 10.5673 10.5513C11.264 9.85478 11.6123 9.00436 11.6123 8.00005C11.6123 6.99575 11.264 6.14533 10.5673 5.4488C9.87077 4.75214 9.02035 4.4038 8.01604 4.4038C7.01174 4.4038 6.16132 4.75214 5.46479 5.4488C4.76813 6.14533 4.41979 6.99575 4.41979 8.00005C4.41979 9.00436 4.76813 9.85478 5.46479 10.5513C6.16132 11.248 7.01174 11.5963 8.01604 11.5963Z",
1425
+ fill: "#111827"
1426
+ }
1427
+ ) })
1428
+ ]
1429
+ }
1430
+ ) }),
1431
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1432
+ "input",
1433
+ {
1434
+ type: "text",
1435
+ className: "block w-full p-8 ps-40 text-body-small text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-bubblegum focus:border-bubblegum",
1436
+ placeholder: "Search...",
1437
+ value: search,
1438
+ onChange: (e) => setSearch(e.target.value)
1439
+ }
1440
+ )
1441
+ ] })
1442
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
1443
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1444
+ "ul",
1445
+ {
1446
+ className: "h-auto max-h-200 overflow-y-auto cursor-pointer",
1447
+ "aria-labelledby": "dropdownSearchButton",
1448
+ children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
1449
+ "div",
1450
+ {
1451
+ onClick: () => {
1452
+ setValue(item);
1453
+ setSearch("");
1454
+ setIsOpen(false);
1455
+ },
1456
+ className: "relative text-gray-900 py-12 px-16 rounded-sm text-label-medium hover:bg-gray-100 flex items-center justify-between gap-12",
1457
+ children: [
1458
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-label-medium text-dropdown-text-primary", children: item.label }),
1459
+ value.value === item.value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconCheck, { className: "h-20 w-20" })
1460
+ ]
1461
+ }
1462
+ ) }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "px-8 py-8 text-label-medium text-gray-900", children: "No results found" })
1463
+ }
1464
+ )
1465
+ ]
1466
+ }
1467
+ )
1468
+ ] }),
1469
+ error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1470
+ "p",
1471
+ {
1472
+ className: `text-caption-caption text-left items-left text-dropdown-text-danger mt-4 ${isDisabled ? "hidden" : ""}`,
1473
+ children: error
1442
1474
  }
1443
- )
1444
- ] }),
1445
- error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1446
- "p",
1447
- {
1448
- className: `text-caption-caption text-left items-left text-dropdown-text-danger mt-4 ${isDisabled ? "hidden" : ""}`,
1449
- children: error
1450
- }
1451
- ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {})
1452
- ] });
1453
- };
1475
+ ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {})
1476
+ ] });
1477
+ }
1478
+ );
1454
1479
  Dropdown.displayName = "Dropdown";
1455
1480
 
1456
1481
  // src/components/FinancialLogo/FinancialLogo.tsx
@@ -1678,7 +1703,7 @@ var Link = (0, import_react15.forwardRef)(
1678
1703
  const variantClass = linkVariantClasses[variant];
1679
1704
  const iconClass = iconVariantClasses[variant];
1680
1705
  const classes = [
1681
- "flex items-center",
1706
+ "flex items-center cursor-pointer",
1682
1707
  isInline ? "underline" : "",
1683
1708
  styleClass,
1684
1709
  variantClass,
@@ -2090,9 +2115,9 @@ var Tab = (0, import_react19.forwardRef)(
2090
2115
  "div",
2091
2116
  __spreadProps(__spreadValues({
2092
2117
  ref,
2093
- className: `flex items-center justify-center
2118
+ className: `flex items-center justify-center border-b-2
2094
2119
  ${size === "md" ? "text-label-medium px-16 pt-12 pb-8" : "text-label-large p-16"}
2095
- ${value === selected ? isDisabled ? "cursor-not-allowed text-gray-400 border-gray-100 border-b-2" : "text-blue-600 border-blue-600 border-b-2 cursor-pointer" : isDisabled ? "cursor-not-allowed text-gray-400" : "text-gray-600 hover:border-b-2 hover:border-gray-200 cursor-pointer"}
2120
+ ${value === selected ? isDisabled ? "cursor-not-allowed text-gray-400 border-tab-border-disabled" : "text-blue-600 border-blue-600 cursor-pointer" : isDisabled ? "cursor-not-allowed text-gray-400 border-tab-border-disabled" : "text-gray-600 border-tab-border-enabled hover:border-gray-200 cursor-pointer"}
2096
2121
  ${className}`,
2097
2122
  onClick: () => !isDisabled && (setSelected == null ? void 0 : setSelected(value))
2098
2123
  }, rest), {
@@ -2260,6 +2285,7 @@ var TextField = (0, import_react21.forwardRef)(
2260
2285
  isUnrequired = false,
2261
2286
  isClearable = true,
2262
2287
  disabled,
2288
+ type,
2263
2289
  value,
2264
2290
  onChange
2265
2291
  } = _b, props = __objRest(_b, [
@@ -2275,6 +2301,7 @@ var TextField = (0, import_react21.forwardRef)(
2275
2301
  "isUnrequired",
2276
2302
  "isClearable",
2277
2303
  "disabled",
2304
+ "type",
2278
2305
  "value",
2279
2306
  "onChange"
2280
2307
  ]);
@@ -2296,8 +2323,7 @@ var TextField = (0, import_react21.forwardRef)(
2296
2323
  "input",
2297
2324
  __spreadValues({
2298
2325
  ref,
2299
- name: "text-input",
2300
- type: "text",
2326
+ type: type || "text",
2301
2327
  placeholder,
2302
2328
  disabled: isDisabled || disabled || isLoading,
2303
2329
  onFocus: () => setIsFocused(true),
@@ -2388,10 +2414,7 @@ function CheckCircleIcon({ className }) {
2388
2414
  ] });
2389
2415
  }
2390
2416
  function ProgressIcon({ className }) {
2391
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
2392
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.3" }),
2393
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "1s", repeatCount: "indefinite" }) })
2394
- ] });
2417
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, { size: "sm", className });
2395
2418
  }
2396
2419
  function ErrorIcon({ className }) {
2397
2420
  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
package/dist/index.d.mts CHANGED
@@ -109,7 +109,7 @@ interface ChipProps extends HTMLAttributes<HTMLDivElement> {
109
109
  icon?: ReactNode;
110
110
  isOutlined?: boolean;
111
111
  isDark?: boolean;
112
- defaultSelected?: boolean;
112
+ isSelected?: boolean;
113
113
  disabled?: boolean;
114
114
  }
115
115
  declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
@@ -132,11 +132,13 @@ interface DialogProps extends HTMLAttributes<HTMLSpanElement> {
132
132
  }
133
133
  declare const Dialog: react__default.ForwardRefExoticComponent<DialogProps & react__default.RefAttributes<HTMLSpanElement>>;
134
134
 
135
+ type DropdownSize = "md" | "lg";
135
136
  interface DropdownItemsInterface {
136
137
  label: string;
137
138
  value: string;
138
139
  }
139
- interface DropdownProps {
140
+ interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
141
+ size?: DropdownSize;
140
142
  error?: string;
141
143
  label?: string;
142
144
  placeholder?: string;
@@ -147,7 +149,7 @@ interface DropdownProps {
147
149
  setValue: (value: DropdownItemsInterface) => void;
148
150
  dropDownItems?: DropdownItemsInterface[];
149
151
  }
150
- declare const Dropdown: react__default.FC<DropdownProps>;
152
+ declare const Dropdown: react__default.ForwardRefExoticComponent<DropdownProps & react__default.RefAttributes<HTMLDivElement>>;
151
153
 
152
154
  type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'common';
153
155
  type AlertMode = 'inline' | 'page';
@@ -262,7 +264,7 @@ interface TextAreaProps extends HTMLAttributes<HTMLTextAreaElement> {
262
264
  declare const TextArea: react__default.ForwardRefExoticComponent<TextAreaProps & react__default.RefAttributes<HTMLTextAreaElement>>;
263
265
 
264
266
  type TextFieldSize = "md" | "lg";
265
- interface TextFieldProps extends HTMLAttributes<HTMLInputElement> {
267
+ interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
266
268
  inputSize?: TextFieldSize;
267
269
  error?: string;
268
270
  label?: string;
package/dist/index.d.ts CHANGED
@@ -109,7 +109,7 @@ interface ChipProps extends HTMLAttributes<HTMLDivElement> {
109
109
  icon?: ReactNode;
110
110
  isOutlined?: boolean;
111
111
  isDark?: boolean;
112
- defaultSelected?: boolean;
112
+ isSelected?: boolean;
113
113
  disabled?: boolean;
114
114
  }
115
115
  declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
@@ -132,11 +132,13 @@ interface DialogProps extends HTMLAttributes<HTMLSpanElement> {
132
132
  }
133
133
  declare const Dialog: react__default.ForwardRefExoticComponent<DialogProps & react__default.RefAttributes<HTMLSpanElement>>;
134
134
 
135
+ type DropdownSize = "md" | "lg";
135
136
  interface DropdownItemsInterface {
136
137
  label: string;
137
138
  value: string;
138
139
  }
139
- interface DropdownProps {
140
+ interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
141
+ size?: DropdownSize;
140
142
  error?: string;
141
143
  label?: string;
142
144
  placeholder?: string;
@@ -147,7 +149,7 @@ interface DropdownProps {
147
149
  setValue: (value: DropdownItemsInterface) => void;
148
150
  dropDownItems?: DropdownItemsInterface[];
149
151
  }
150
- declare const Dropdown: react__default.FC<DropdownProps>;
152
+ declare const Dropdown: react__default.ForwardRefExoticComponent<DropdownProps & react__default.RefAttributes<HTMLDivElement>>;
151
153
 
152
154
  type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'common';
153
155
  type AlertMode = 'inline' | 'page';
@@ -262,7 +264,7 @@ interface TextAreaProps extends HTMLAttributes<HTMLTextAreaElement> {
262
264
  declare const TextArea: react__default.ForwardRefExoticComponent<TextAreaProps & react__default.RefAttributes<HTMLTextAreaElement>>;
263
265
 
264
266
  type TextFieldSize = "md" | "lg";
265
- interface TextFieldProps extends HTMLAttributes<HTMLInputElement> {
267
+ interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
266
268
  inputSize?: TextFieldSize;
267
269
  error?: string;
268
270
  label?: string;