qaema-ui 0.0.26 → 0.0.28

package/dist/_virtual/index.js

@@ -1,7 +1,7 @@
-import { getDefaultExportFromCjs as s } from "./_commonjsHelpers.js";
-import { __require as r } from "../node_modules/classnames/index.js";
-var a = r();
-const t = /* @__PURE__ */ s(a);
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as t } from "../node_modules/react-helmet-async/node_modules/react-fast-compare/index.js";
+var a = t();
+const m = /* @__PURE__ */ r(a);
 export {
-  t as default
+  m as default
 };

package/dist/_virtual/index2.js

@@ -1,7 +1,7 @@
 import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as o } from "../node_modules/prop-types/index.js";
-var p = /* @__PURE__ */ o();
-const s = /* @__PURE__ */ r(p);
+import { __require as o } from "../node_modules/shallowequal/index.js";
+var a = o();
+const t = /* @__PURE__ */ r(a);
 export {
-  s as default
+  t as default
 };

package/dist/_virtual/index3.js

@@ -1,7 +1,7 @@
-import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as t } from "../node_modules/react-helmet-async/node_modules/react-fast-compare/index.js";
-var a = t();
-const m = /* @__PURE__ */ r(a);
+import { getDefaultExportFromCjs as s } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/classnames/index.js";
+var a = r();
+const t = /* @__PURE__ */ s(a);
 export {
-  m as default
+  t as default
 };

package/dist/_virtual/index4.js

@@ -1,7 +1,7 @@
 import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as o } from "../node_modules/shallowequal/index.js";
-var a = o();
-const t = /* @__PURE__ */ r(a);
+import { __require as o } from "../node_modules/prop-types/index.js";
+var p = /* @__PURE__ */ o();
+const s = /* @__PURE__ */ r(p);
 export {
-  t as default
+  s as default
 };

package/dist/assets/icons/RiyalIcon.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 type SaudiRiyalIconProps = React.SVGProps<SVGSVGElement> & {
     color?: string;
 };

package/dist/components/AccordionCard.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export interface Transaction {
     id: string;
     amount: number;

package/dist/components/ActionInput.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { ButtonProps } from './Button';
+import React from 'react';
+import type { ButtonProps } from './Button';
 export type ActionInputProps = {
     initialExpanded?: boolean;
     onApply?: (code: string) => void;

package/dist/components/AddOnCardInput.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { AddOnCardProps } from './AddOnCard';
+import type React from 'react';
+import { type AddOnCardProps } from './AddOnCard';
 type AddOnCardInputOption = {
     data: AddOnCardProps;
     value: string;

package/dist/components/Alert.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export type AlertType = 'information' | 'error' | 'success' | 'warning' | 'default';
 type AlertProps = {
     alertType?: AlertType;

package/dist/components/AmountItem.d.ts

@@ -1,5 +1,5 @@
-import { AmountCellData, CellType } from './Table/Table.types';
-import { TypographyProps } from './Typography';
+import type { AmountCellData, CellType } from './Table/Table.types';
+import { type TypographyProps } from './Typography';
 type AmountItemProps = {
     data: AmountCellData;
     type?: CellType;

package/dist/components/Badge.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { BadgeVariant } from '../hooks/useBadgeVariant';
-import { FontWeight } from '../theme/theme';
+import type { ReactNode } from 'react';
+import { type BadgeVariant } from '@hooks/useBadgeVariant';
+import type { FontWeight } from '@theme/theme';
 export type BadgeProps = {
     bgColor?: string;
     color?: string;

package/dist/components/Button.d.ts

@@ -1,5 +1,6 @@
-import { default as React, ReactNode } from 'react';
-import { ButtonVariant } from '../hooks/useButtonVariant';
+import React from 'react';
+import type { ReactNode } from 'react';
+import { type ButtonVariant } from '@hooks/useButtonVariant';
 type ButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
 type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonProps = {

package/dist/components/Card.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export type CardProps = {
     children?: React.ReactNode;
     className?: string;

package/dist/components/CardsList.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { ButtonVariant } from 'react-bootstrap/esm/types';
+import React from 'react';
+import type { ButtonVariant } from 'react-bootstrap/esm/types';
 type cardListItem = {
     primaryButtonTitle: string;
     primaryButtonOnClick?: (item: cardListItem) => void;

package/dist/components/Chart.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ReactElement } from 'react';
+import React, { type ReactElement } from 'react';
 type ChartType = 'area' | 'line' | 'bar' | 'pie';
 type ChartDataType = {
     [key: string]: string | number | undefined;

package/dist/components/ChartLegend/ChartLegend.d.ts

@@ -1,5 +1,5 @@
-import { default as React } from 'react';
-import { LegendItem } from '../Chart';
+import React from 'react';
+import type { LegendItem } from '@components/Chart';
 interface ChartLegendProps {
     yColor: string;
     yyColor?: string;

package/dist/components/ChartLegend/ChartLegend.js

@@ -1,27 +1,28 @@
 import { j as e } from "../../_virtual/jsx-runtime.js";
 import "react";
-import { useTheme as d } from "styled-components";
+import { useTheme as c } from "styled-components";
 import h from "../../assets/svg/Riyal.svg.js";
 import g from "../Image.js";
 import i from "../Typography.js";
 import { StyledLegendContainer as p, LegendRow as x, LegendName as j, LegendValue as u } from "./styles.js";
-const C = ({ yColor: o, yyColor: m, legendItems: n }) => {
-  const s = d();
+const C = ({ yColor: s, yyColor: m, legendItems: n }) => {
+  const o = c();
   if (n && n.length)
     return /* @__PURE__ */ e.jsx(p, { children: n.map((r, t) => {
-      const l = r.showRiyal ?? !0, a = r.value, c = r.color ?? (t === 1 ? m ?? o : o);
+      const l = r.showRiyal ?? !0, a = r.value, d = r.color ?? (t === 1 ? m ?? s : s);
       return /* @__PURE__ */ e.jsxs(x, { children: [
         /* @__PURE__ */ e.jsxs(j, { children: [
-          /* @__PURE__ */ e.jsx("span", { className: "legend-dot", style: { background: c } }),
+          /* @__PURE__ */ e.jsx("span", { className: "legend-dot", style: { background: d } }),
           /* @__PURE__ */ e.jsx(i, { variant: "mdText", weight: "semiBold", children: r.name })
         ] }),
         /* @__PURE__ */ e.jsx(u, { children: a && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-          l && /* @__PURE__ */ e.jsx(g, { src: h, style: { verticalAlign: "middle" }, width: s.spacing.sm, height: s.spacing.sm }),
+          l && /* @__PURE__ */ e.jsx(g, { src: h, style: { verticalAlign: "middle" }, width: o.spacing.sm, height: o.spacing.sm }),
           /* @__PURE__ */ e.jsx(i, { variant: "mdText", children: a })
         ] }) })
       ] }, `${r.name}-${t}`);
     }) });
 };
 export {
-  C as ChartLegend
+  C as ChartLegend,
+  C as default
 };

package/dist/components/ChartLegend/PieChartLegend.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 type PieChartLegendItem = {
     name: string;
     value: number;

package/dist/components/ChartLegend/styles.d.ts

@@ -1,5 +1,5 @@
-export declare const StyledLegendContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const PieLegendContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LegendRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LegendName: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const LegendValue: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledLegendContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PieLegendContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LegendRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LegendName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const LegendValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/CollapsableCard.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export type CollapsableCardProps = {
     initialExpanded?: boolean;
     title?: string;

package/dist/components/ConfigList.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export type ConfigStatus = 'active' | 'inactive' | string;
 export type ConfigItem = {
     id: string | number;

package/dist/components/ConfirmationPopup.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export type ConfirmationPopupProps = {
     variant?: string;
     item: string;

package/dist/components/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export interface DatePickerProps {
     value: Date | null;
     onChange: (date: Date | null) => void;

package/dist/components/DatePicker.js

@@ -4,7 +4,7 @@ import { useTranslation as te } from "react-i18next";
 import { FaRegCalendarAlt as oe, FaAngleDown as ne, FaAngleLeft as se } from "../node_modules/react-icons/fa/index.js";
 import i, { useTheme as ie } from "styled-components";
 import ae from "./Hint.js";
-import { format as b } from "../node_modules/date-fns/format.js";
+import { formatDate as b } from "../node_modules/date-fns/format.js";
 import { parse as le } from "../node_modules/date-fns/parse.js";
 import { isBefore as L } from "../node_modules/date-fns/isBefore.js";
 import { isAfter as z } from "../node_modules/date-fns/isAfter.js";

package/dist/components/Divider.d.ts

@@ -1,7 +1,7 @@
 export type DividerProps = {
     marginVertical?: string;
 };
-declare const Divider: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>, DividerProps>, DividerProps>> & string;
 export default Divider;

package/dist/components/Draggable.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export type UploadState = 'idle-drag' | 'hover-drag' | 'pressed-drag';
 export type DraggableFile = File & {
     data?: string;

package/dist/components/DropDown.d.ts

@@ -1,4 +1,4 @@
-import { StringOrNumberRecord } from 'types/objects.types';
+import type { StringOrNumberRecord } from 'types/objects.types';
 export type DropDownOptionValue = StringOrNumberRecord | string | number;
 export type DropDownOption = {
     label: string;

package/dist/components/DropDownWithTable/DropDownWithTable.d.ts

@@ -1,3 +1,3 @@
-import { DropDownWithTableProps } from './DropDownWithTable.types';
+import type { DropDownWithTableProps } from './DropDownWithTable.types';
 declare const DropDownWithTable: <T extends Record<string, unknown>>(props: DropDownWithTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default DropDownWithTable;

package/dist/components/DropDownWithTable/DropDownWithTable.js

@@ -1,21 +1,21 @@
 import { j as t } from "../../_virtual/jsx-runtime.js";
-import { useRef as g, useState as v, useCallback as ne, useEffect as D } from "react";
-import { createPortal as re } from "react-dom";
-import { FaTimes as k, FaAngleDown as oe } from "../../node_modules/react-icons/fa/index.js";
-import { useTheme as le } from "styled-components";
-import { HelperTextWrapper as ie } from "../PhoneInputField.js";
-import se from "../SearchBar.js";
-import ae from "../Typography.js";
-import ce from "../../hooks/useZIndex.js";
-import { useQaemaCoreTranslation as de } from "../../i18n/i18n.js";
-import { StyledDropDownContainer as ue, StyledlabelContainer as fe, StyledDropDown as me, StyledDropDownToggle as he, StyledDropDownTitle as pe, IconsContainer as xe, StyledDropDownMenu as Se, SearchContainer as je, StyledOptionsContainer as we, StyledDropItem as ye, SelectedTagsContainer as ge, SelectedTag as ve } from "../../styles/Dropdown.styles.js";
-import Ce from "./Table/Table.js";
-import be from "../../node_modules/react-bootstrap/esm/Spinner.js";
-const He = (d) => {
+import { useRef as g, useState as v, useCallback as re, useEffect as D } from "react";
+import { createPortal as oe } from "react-dom";
+import { FaTimes as k, FaAngleDown as le } from "../../node_modules/react-icons/fa/index.js";
+import { useTheme as ie } from "styled-components";
+import { HelperTextWrapper as se } from "../PhoneInputField.js";
+import ae from "../SearchBar.js";
+import ce from "../Spinner.js";
+import de from "../Typography.js";
+import ue from "../../hooks/useZIndex.js";
+import { useQaemaCoreTranslation as fe } from "../../i18n/i18n.js";
+import { StyledDropDownContainer as me, StyledlabelContainer as he, StyledDropDown as pe, StyledDropDownToggle as xe, StyledDropDownTitle as Se, IconsContainer as je, StyledDropDownMenu as we, SearchContainer as ye, StyledOptionsContainer as ge, SpinnerRow as ve, SelectedTagsContainer as Ce, SelectedTag as be } from "../../styles/Dropdown.styles.js";
+import De from "./Table/Table.js";
+const Me = (d) => {
   const {
     label: T,
-    options: P,
-    placeholder: R = "Select Something",
+    options: R,
+    placeholder: P = "Select Something",
     optional: W = !1,
     error: s = "",
     disabled: S = !1,
@@ -26,21 +26,22 @@ const He = (d) => {
     icon: F,
     allowSearch: H,
     searchHandler: M,
-    searchPlaceholder: B,
+    searchPlaceholder: N,
     onToggle: i,
     multiSelect: f = !1,
-    isLoading: N = !1,
+    isLoading: B = !1,
     currentSelectedOptions: h = [],
-    isInteractive: I = !1,
+    isInteractive: E = !1,
     //Table related props
     columns: A,
     isTableHeadVisible: V = !1,
     getDisplayValue: y,
-    isRowDisabled: Q
-  } = d, p = le(), { t: E } = de(), C = g(null), a = g(null), X = g(null), Y = g(d.currentSelectedOptions !== void 0), [u, b] = v(!1), [Z, q] = v(0), [L, G] = v({ top: 0, left: 0 }), [l, x] = v(h), $ = F ?? /* @__PURE__ */ t.jsx(t.Fragment, {}), J = ce("dropdown"), m = ne(() => {
+    isRowDisabled: Q,
+    rowClassName: X
+  } = d, p = ie(), { t: I } = fe(), C = g(null), a = g(null), Y = g(null), Z = g(d.currentSelectedOptions !== void 0), [u, b] = v(!1), [q, G] = v(0), [L, J] = v({ top: 0, left: 0 }), [l, x] = v(h), O = F ?? /* @__PURE__ */ t.jsx(t.Fragment, {}), K = ue("dropdown"), m = re(() => {
     if (a != null && a.current) {
       const e = a.current.getBoundingClientRect();
-      q(a.current.offsetWidth / 16), G({
+      G(a.current.offsetWidth / 16), J({
         top: e.bottom + window.scrollY,
         left: e.left + window.scrollX
       });
@@ -49,24 +50,24 @@ const He = (d) => {
   D(() => (u && (m(), window.addEventListener("resize", m), window.addEventListener("scroll", m, !0)), () => {
     window.removeEventListener("resize", m), window.removeEventListener("scroll", m, !0);
   }), [u, m]), D(() => {
-    if (!Y.current) return;
+    if (!Z.current) return;
     (h.length !== l.length || h.some((n, o) => {
       var c;
       return n[r] !== ((c = l[o]) == null ? void 0 : c[r]);
     })) && x(h);
   }, [h]);
-  const K = (e, n, o, c = "default") => o ? p.colors.grey.n400 : e ? p.colors.state.error.n450 : n ? p.colors.primary.dark.n600 : c === "light-primary" ? p.colors.primary.purple.n450 : p.colors.grey.n300, O = (e) => l.some((n) => typeof n == "object" && typeof e == "object" ? n[r] === e[r] : n.value === e.value), U = (e) => {
+  const U = (e, n, o, c = "default") => o ? p.colors.grey.n400 : e ? p.colors.state.error.n450 : n ? p.colors.primary.dark.n600 : c === "light-primary" ? p.colors.primary.purple.n450 : p.colors.grey.n300, $ = (e) => l.some((n) => typeof n == "object" && typeof e == "object" ? n[r] === e[r] : n.value === e.value), _ = (e) => {
     if (f) {
-      const n = O(e);
+      const n = $(e);
       let o;
       n ? o = l.filter((c) => typeof c == "object" && typeof e == "object" ? c[r] !== e[r] : c.value !== e.value) : o = [...l, e], x(o), w(o);
     } else
       x([e]), w(e), b(!1), i == null || i(!1);
-  }, _ = (e) => {
+  }, ee = (e) => {
     const n = l.filter((o) => typeof o == "object" && typeof e == "object" ? o[r] !== e[r] : o.value !== e.value);
     x(n), w(n);
-  }, ee = (e) => {
-    if (e.length === 0) return R;
+  }, te = (e) => {
+    if (e.length === 0) return P;
     if (!f) {
       const n = e[0];
       if (y)
@@ -76,7 +77,7 @@ const He = (d) => {
       if (r)
         return String(n == null ? void 0 : n[r]);
     }
-    return `${e.length} ${E("SELECTED")}`;
+    return `${e.length} ${I("SELECTED")}`;
   };
   D(() => {
     const e = (n) => {
@@ -86,14 +87,14 @@ const He = (d) => {
       document.removeEventListener("mousedown", e);
     };
   }, [u, i]);
-  const te = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ t.jsx(ie, { error: s, children: s });
-  return /* @__PURE__ */ t.jsxs(ue, { children: [
-    T && /* @__PURE__ */ t.jsxs(fe, { children: [
+  const ne = () => E || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ t.jsx(se, { error: s, children: s });
+  return /* @__PURE__ */ t.jsxs(me, { children: [
+    T && /* @__PURE__ */ t.jsxs(he, { children: [
       /* @__PURE__ */ t.jsx("label", { children: T }),
-      W && /* @__PURE__ */ t.jsx("span", { children: E("OPTIONAL") })
+      W && /* @__PURE__ */ t.jsx("span", { children: I("OPTIONAL") })
     ] }),
     /* @__PURE__ */ t.jsxs(
-      me,
+      pe,
       {
         show: u,
         onToggle: () => {
@@ -102,20 +103,20 @@ const He = (d) => {
         placement: "bottom-start",
         autoClose: f ? "outside" : !0,
         children: [
-          /* @__PURE__ */ t.jsx(he, { disabled: S, ref: a, $valid: !s, $variant: d.variant || "default", children: /* @__PURE__ */ t.jsx(pe, { $valid: !s, $isInteractive: I, children: /* @__PURE__ */ t.jsxs("div", { className: "title-container", children: [
+          /* @__PURE__ */ t.jsx(xe, { disabled: S, ref: a, $valid: !s, $variant: d.variant || "default", children: /* @__PURE__ */ t.jsx(Se, { $valid: !s, $isInteractive: E, children: /* @__PURE__ */ t.jsxs("div", { className: "title-container", children: [
             /* @__PURE__ */ t.jsxs("div", { className: "heading-container", children: [
-              z && typeof $ == "function" && /* @__PURE__ */ t.jsx($, {}),
+              z && typeof O == "function" && /* @__PURE__ */ t.jsx(O, {}),
               /* @__PURE__ */ t.jsx(
-                ae,
+                de,
                 {
                   component: "span",
                   variant: "mdText",
-                  color: K(s, l.length > 0, S, d.variant || "default"),
-                  children: ee(l)
+                  color: U(s, l.length > 0, S, d.variant || "default"),
+                  children: te(l)
                 }
               )
             ] }),
-            /* @__PURE__ */ t.jsxs(xe, { children: [
+            /* @__PURE__ */ t.jsxs(je, { children: [
               !f && l.length > 0 && !S && /* @__PURE__ */ t.jsx(
                 k,
                 {
@@ -125,43 +126,47 @@ const He = (d) => {
                   }
                 }
               ),
-              !S && /* @__PURE__ */ t.jsx(oe, {})
+              !S && /* @__PURE__ */ t.jsx(le, {})
             ] })
           ] }) }) }),
-          u && re(
+          u && oe(
             /* @__PURE__ */ t.jsxs(
-              Se,
+              we,
               {
                 ref: C,
-                $menuWidth: Z,
-                $zIndex: J,
+                $menuWidth: q,
+                $zIndex: K,
                 style: {
                   position: "fixed",
                   top: `${L.top}px`,
                   left: `${L.left}px`
                 },
                 children: [
-                  H && /* @__PURE__ */ t.jsx(je, { children: /* @__PURE__ */ t.jsx(se, { placeholder: B, onSearch: M }) }),
-                  /* @__PURE__ */ t.jsx(
-                    we,
+                  H && /* @__PURE__ */ t.jsx(ye, { children: /* @__PURE__ */ t.jsx(ae, { placeholder: N, onSearch: M }) }),
+                  /* @__PURE__ */ t.jsxs(
+                    ge,
                     {
-                      ref: X,
+                      ref: Y,
                       onScroll: (e) => {
                         var n;
                         (n = d.onScroll) == null || n.call(d, e);
                       },
-                      children: N ? /* @__PURE__ */ t.jsx(ye, { $selected: !1, children: /* @__PURE__ */ t.jsx(be, {}) }) : /* @__PURE__ */ t.jsx(
-                        Ce,
-                        {
-                          keyField: r,
-                          data: P,
-                          columns: A,
-                          onRowClick: (e) => U(e),
-                          isRowSelected: (e) => O(e),
-                          isTableHeadVisible: V,
-                          isRowDisabled: Q
-                        }
-                      )
+                      children: [
+                        /* @__PURE__ */ t.jsx(
+                          De,
+                          {
+                            keyField: r,
+                            data: R,
+                            columns: A,
+                            onRowClick: (e) => _(e),
+                            isRowSelected: (e) => $(e),
+                            isTableHeadVisible: V,
+                            isRowDisabled: Q,
+                            rowClassName: X
+                          }
+                        ),
+                        B && /* @__PURE__ */ t.jsx(ve, { children: /* @__PURE__ */ t.jsx(ce, {}) })
+                      ]
                     }
                   )
                 ]
@@ -172,13 +177,13 @@ const He = (d) => {
         ]
       }
     ),
-    f && l.length > 0 && /* @__PURE__ */ t.jsx(ge, { children: l.map((e) => /* @__PURE__ */ t.jsxs(ve, { children: [
+    f && l.length > 0 && /* @__PURE__ */ t.jsx(Ce, { children: l.map((e) => /* @__PURE__ */ t.jsxs(be, { children: [
       y ? y(e) : String(j ? e[j] : e[r]),
-      /* @__PURE__ */ t.jsx(k, { onClick: () => _(e) })
+      /* @__PURE__ */ t.jsx(k, { onClick: () => ee(e) })
     ] }, String(e[r]))) }),
-    te()
+    ne()
   ] });
 };
 export {
-  He as default
+  Me as default
 };

package/dist/components/DropDownWithTable/DropDownWithTable.types.d.ts

@@ -1,4 +1,4 @@
-import { TableColumn } from './Table/Table.types';
+import type { TableColumn } from './Table/Table.types';
 export interface DropDownWithTableProps<T extends Record<string, unknown>> {
     label?: string;
     options: T[];
@@ -25,4 +25,5 @@ export interface DropDownWithTableProps<T extends Record<string, unknown>> {
     isTableHeadVisible?: boolean;
     getDisplayValue?: (option: T) => string;
     isRowDisabled?: (row: T) => boolean;
+    rowClassName?: (row: T, index: number) => string;
 }

package/dist/components/DropDownWithTable/Table/Table.d.ts

@@ -1,3 +1,3 @@
-import { TableProps } from './Table.types';
+import type { TableProps } from './Table.types';
 declare function Table<T extends Record<string, unknown>>({ columns, data, keyField, selectable, onRowSelect, rowActions, stickyHeader, loading, emptyStateMessage, pagination, onRowClick, rowClassName, isRowDisabled, breakpoint, alignHeader, isTableHeadVisible, isRowSelected: externalIsRowSelected, }: Readonly<TableProps<T>>): import("react/jsx-runtime").JSX.Element;
 export default Table;