qaema-ui 0.0.25 → 0.0.27

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+type SaudiRiyalIconProps = React.SVGProps<SVGSVGElement> & {
+    color?: string;
+};
+export default function SaudiRiyalIcon({ color, ...props }: SaudiRiyalIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/assets/icons/RiyalIcon.js

@@ -0,0 +1,26 @@
+import { j as i } from "../../_virtual/jsx-runtime.js";
+import "react";
+function e({ color: t = "#6D798A", ...l }) {
+  return /* @__PURE__ */ i.jsxs("svg", { width: "18", height: "20", viewBox: "0 0 18 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l, children: [
+    /* @__PURE__ */ i.jsxs("g", { clipPath: "url(#clip0_7331_7983)", children: [
+      /* @__PURE__ */ i.jsx(
+        "path",
+        {
+          d: "M11.2024 17.7177C10.8812 18.4258 10.6689 19.1942 10.5875 20L17.3849 18.5635C17.7061 17.8556 17.9182 17.0871 17.9998 16.2812L11.2024 17.7177Z",
+          fill: t
+        }
+      ),
+      /* @__PURE__ */ i.jsx(
+        "path",
+        {
+          d: "M17.385 14.2599C17.7062 13.552 17.9185 12.7835 17.9999 11.9777L12.705 13.0972V10.945L17.3848 9.9563C17.7061 9.2484 17.9184 8.47985 17.9997 7.67405L12.7048 8.79265V1.0527C11.8934 1.50558 11.1729 2.10842 10.5872 2.81951V9.24028L8.46955 9.68776V0C7.65821 0.452726 6.93766 1.05572 6.35193 1.76681V10.1351L1.61375 11.136C1.29255 11.8439 1.08006 12.6125 0.998561 13.4183L6.35193 12.2873V14.9976L0.614748 16.2096C0.293542 16.9175 0.0812201 17.6861 -0.00012207 18.4919L6.00511 17.2232C6.49396 17.1221 6.91412 16.8347 7.18729 16.4393L8.28861 14.8161V14.8158C8.40294 14.6478 8.46955 14.4454 8.46955 14.2273V11.8398L10.5872 11.3923V15.6967L17.3848 14.2596L17.385 14.2599Z",
+          fill: t
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i.jsx("defs", { children: /* @__PURE__ */ i.jsx("clipPath", { id: "clip0_7331_7983", children: /* @__PURE__ */ i.jsx("rect", { width: "18", height: "20", fill: "white" }) }) })
+  ] });
+}
+export {
+  e as default
+};

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

@@ -0,0 +1 @@
+export { default as SaudiRiyalIcon } from './RiyalIcon';

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

@@ -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/TotalsSummary.d.ts

@@ -2,12 +2,12 @@ export type TotalsSummaryItem = {
     title: string;
     amount: string;
     decimal?: string;
+    color?: string;
 };
 export type TotalsSummaryProps = {
     title: string;
     items: TotalsSummaryItem[];
     showCurrencyIcon?: boolean;
     currencyIconWidth?: string;
-    highlightIndex?: number;
 };
-export default function TotalsSummary({ title, items, showCurrencyIcon, currencyIconWidth, highlightIndex, }: TotalsSummaryProps): import("react/jsx-runtime").JSX.Element;
+export default function TotalsSummary({ title, items, showCurrencyIcon, currencyIconWidth, }: TotalsSummaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TotalsSummary.js

@@ -1,94 +1,84 @@
-import { j as e } from "../_virtual/jsx-runtime.js";
-import i from "styled-components";
-import h from "../assets/svg/RiyalGreen.svg.js";
-import y from "../assets/svg/RiyalGrey.svg.js";
-import { device as a } from "../constants/breakPoints.constant.js";
-const m = i.div`
+import { j as t } from "../_virtual/jsx-runtime.js";
+import o from "styled-components";
+import { device as n } from "../constants/breakPoints.constant.js";
+import p from "../assets/icons/RiyalIcon.js";
+const g = o.div`
   width: 100%;
-`, $ = i.div`
-  font-family: ${({ theme: t }) => t.fonts.english};
-  font-weight: ${({ theme: t }) => t.typography.weights.semiBold};
-  font-size: ${({ theme: t }) => t.typography.sizes.s7};
-  line-height: ${({ theme: t }) => t.typography.lineHeights.l};
-  letter-spacing: ${({ theme: t }) => t.typography.letterSpacings.normal};
-  color: ${({ theme: t }) => t.colors.grey.n800};
-  margin-bottom: ${({ theme: t }) => t.spacing.m};
-`, f = i.div`
+`, c = o.div`
+  font-family: ${({ theme: e }) => e.fonts.english};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  font-size: ${({ theme: e }) => e.typography.sizes.s7};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.l};
+  letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.normal};
+  color: ${({ theme: e }) => e.colors.grey.n800};
+  margin-bottom: ${({ theme: e }) => e.spacing.m};
+`, h = o.div`
   display: flex;
   align-items: flex-start;
-  gap: ${({ theme: t }) => t.spacing.xl};
+  gap: ${({ theme: e }) => e.spacing.xl};
   flex-wrap: wrap;
 
-  @media ${a.tablet} {
-    gap: ${({ theme: t }) => t.spacing.l};
+  @media ${n.tablet} {
+    gap: ${({ theme: e }) => e.spacing.l};
   }
-`, d = i.div`
+`, y = o.div`
   display: flex;
   flex-direction: column;
-  gap: ${({ theme: t }) => t.spacing.xs};
+  gap: ${({ theme: e }) => e.spacing.xs};
   min-width: 10.5rem;
 
-  @media ${a.tablet} {
+  @media ${n.tablet} {
     min-width: 9.5rem;
   }
-`, x = i.div`
-  font-family: ${({ theme: t }) => t.fonts.english};
-  font-weight: ${({ theme: t }) => t.typography.weights.semiBold};
-  font-size: ${({ theme: t }) => t.typography.sizes.s4};
-  line-height: ${({ theme: t }) => t.typography.lineHeights.s};
-  letter-spacing: ${({ theme: t }) => t.typography.letterSpacings.balancedNarrow};
-  color: ${({ theme: t }) => t.colors.grey.n650};
-`, w = i.div`
+`, m = o.div`
+  font-family: ${({ theme: e }) => e.fonts.english};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  font-size: ${({ theme: e }) => e.typography.sizes.s4};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.s};
+  letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.balancedNarrow};
+  color: ${({ theme: e }) => e.colors.grey.n650};
+`, d = o.div`
   display: flex;
   align-items: baseline;
-  gap: ${({ theme: t }) => t.spacing.xxs};
+  gap: ${({ theme: e }) => e.spacing.xxs};
   direction: ltr;
-`, u = i.img`
-  width: ${({ $width: t = "18px" }) => t};
-  height: ${({ $height: t = "20px" }) => t};
-  object-fit: contain;
-  flex-shrink: 0;
-`, j = i.span`
-  font-family: ${({ theme: t }) => t.fonts.arabic};
-  font-weight: ${({ theme: t }) => t.typography.weights.bold};
-  font-size: ${({ theme: t }) => t.typography.sizes.s10};
-  line-height: ${({ theme: t }) => t.typography.lineHeights.xl};
-  letter-spacing: ${({ theme: t }) => t.typography.letterSpacings.balancedNarrow};
+`, $ = o.span`
+  font-family: ${({ theme: e }) => e.fonts.arabic};
+  font-weight: ${({ theme: e }) => e.typography.weights.bold};
+  font-size: ${({ theme: e }) => e.typography.sizes.s10};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.xl};
+  letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.balancedNarrow};
   text-align: center;
-  color: ${({ theme: t, $highlight: s }) => s ? t.colors.state.success.n450 : t.colors.grey.n400};
-`, b = i.span`
-  font-family: ${({ theme: t }) => t.fonts.english};
-  font-weight: ${({ theme: t }) => t.typography.weights.regular};
-  font-size: ${({ theme: t }) => t.typography.sizes.s2};
-  line-height: ${({ theme: t }) => t.typography.lineHeights.xs};
-  letter-spacing: ${({ theme: t }) => t.typography.letterSpacings.normal};
-  color: ${({ theme: t, $highlight: s }) => s ? t.colors.state.success.n450 : t.colors.grey.n400};
+  color: ${({ theme: e, $color: s }) => s || e.colors.grey.n400};
+`, f = o.span`
+  font-family: ${({ theme: e }) => e.fonts.english};
+  font-weight: ${({ theme: e }) => e.typography.weights.regular};
+  font-size: ${({ theme: e }) => e.typography.sizes.s2};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
+  letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.normal};
+  color: ${({ theme: e, $color: s }) => s || e.colors.grey.n400};
 `;
-function B({
-  title: t,
+function b({
+  title: e,
   items: s,
-  showCurrencyIcon: p = !0,
-  currencyIconWidth: g = "18px",
-  highlightIndex: r
+  showCurrencyIcon: r = !0,
+  currencyIconWidth: l = "18px"
 }) {
-  return /* @__PURE__ */ e.jsxs(m, { children: [
-    /* @__PURE__ */ e.jsx($, { children: t }),
-    /* @__PURE__ */ e.jsx(f, { children: s.map((o, l) => {
-      const n = typeof r == "number" && l === r, c = n ? h : y;
-      return /* @__PURE__ */ e.jsxs(d, { children: [
-        /* @__PURE__ */ e.jsx(x, { children: o.title }),
-        /* @__PURE__ */ e.jsxs(w, { children: [
-          p && /* @__PURE__ */ e.jsx(u, { src: c, alt: "Riyal", $width: g, $height: "20px" }),
-          /* @__PURE__ */ e.jsx(j, { $highlight: n, children: o.amount }),
-          o.decimal ? /* @__PURE__ */ e.jsxs(b, { $highlight: n, children: [
-            ".",
-            o.decimal
-          ] }) : null
-        ] })
-      ] }, `${o.title}-${l}`);
-    }) })
+  return /* @__PURE__ */ t.jsxs(g, { children: [
+    /* @__PURE__ */ t.jsx(c, { children: e }),
+    /* @__PURE__ */ t.jsx(h, { children: s.map((i, a) => /* @__PURE__ */ t.jsxs(y, { children: [
+      /* @__PURE__ */ t.jsx(m, { children: i.title }),
+      /* @__PURE__ */ t.jsxs(d, { children: [
+        r && /* @__PURE__ */ t.jsx(p, { width: l, height: "20", color: i.color }),
+        /* @__PURE__ */ t.jsx($, { $color: i.color, children: i.amount }),
+        i.decimal ? /* @__PURE__ */ t.jsxs(f, { $color: i.color, children: [
+          ".",
+          i.decimal
+        ] }) : null
+      ] })
+    ] }, `${i.title}-${a}`)) })
   ] });
 }
 export {
-  B as default
+  b as default
 };

package/dist/styles/Dropdown.styles.d.ts

@@ -35,6 +35,7 @@ export declare const StyledDropItem: import('styled-components/dist/types').ISty
 }, {
     $selected: boolean;
 }>> & string & Omit<import('react-bootstrap/esm/helpers').BsPrefixRefForwardingComponent<"a", import('react-bootstrap').DropdownItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const SpinnerRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TypographyContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const IconsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const SearchContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/styles/Dropdown.styles.js

@@ -1,7 +1,7 @@
 import r, { css as n } from "styled-components";
 import { Scrollbar as i } from "./Scrollbar.styles.js";
-import s from "../node_modules/react-bootstrap/esm/Dropdown.js";
-import t from "../node_modules/react-bootstrap/esm/DropdownToggle.js";
+import t from "../node_modules/react-bootstrap/esm/Dropdown.js";
+import s from "../node_modules/react-bootstrap/esm/DropdownToggle.js";
 import a from "../node_modules/react-bootstrap/esm/DropdownMenu.js";
 import l from "../node_modules/react-bootstrap/esm/DropdownItem.js";
 const x = r.div`
@@ -30,7 +30,7 @@ const x = r.div`
   flex-wrap: wrap;
   gap: ${({ theme: o }) => o.spacing.xs};
   margin-top: ${({ theme: o }) => o.spacing.xs};
-`, u = r.div`
+`, w = r.div`
   display: flex;
   align-items: center;
   background-color: ${({ theme: o }) => o.colors.grey.n100};
@@ -47,11 +47,11 @@ const x = r.div`
       color: ${({ theme: o }) => o.colors.state.error.n450};
     }
   }
-`, w = r(s)`
+`, u = r(t)`
   width: 100%;
   max-height: 3.5rem;
   min-width: 5rem !important;
-`, f = r(t)`
+`, f = r(s)`
   width: 100%;
   box-shadow: ${({ $valid: o }) => o ? "0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);" : "none"};
   padding: 0px;
@@ -150,6 +150,12 @@ const x = r.div`
   &:hover {
     background-color: ${({ theme: o }) => o.colors.grey.n100};
   }
+`, k = r.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${({ theme: o }) => o.spacing.sm};
+  width: 100%;
 `;
 r.div`
   overflow: hidden;
@@ -157,13 +163,13 @@ r.div`
   white-space: nowrap;
   width: 100%;
 `;
-const k = r.div`
+const z = r.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
   gap: ${({ theme: o }) => o.spacing.xs};
-`, z = r.div`
+`, C = r.div`
   display: flex;
   align-items: center;
   column-gap: 0.625rem;
@@ -171,11 +177,12 @@ const k = r.div`
   padding: ${({ theme: o }) => o.spacing.xs} 1.25rem;
 `;
 export {
-  k as IconsContainer,
-  z as SearchContainer,
-  u as SelectedTag,
+  z as IconsContainer,
+  C as SearchContainer,
+  w as SelectedTag,
   h as SelectedTagsContainer,
-  w as StyledDropDown,
+  k as SpinnerRow,
+  u as StyledDropDown,
   x as StyledDropDownContainer,
   v as StyledDropDownMenu,
   b as StyledDropDownTitle,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qaema-ui",
   "private": false,
-  "version": "0.0.25",
+  "version": "0.0.27",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/dist/assets/svg/RiyalGreen.svg.js

@@ -1,4 +0,0 @@
-const e = "data:image/svg+xml,%3csvg%20width='18'%20height='20'%20viewBox='0%200%2018%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_7331_6281)'%3e%3cpath%20d='M11.2023%2017.7177C10.8811%2018.4258%2010.6687%2019.1942%2010.5874%2020L17.3848%2018.5635C17.706%2017.8556%2017.9181%2017.0871%2017.9996%2016.2812L11.2023%2017.7177Z'%20fill='%231DBA63'/%3e%3cpath%20d='M17.3851%2014.2599C17.7063%2013.552%2017.9187%2012.7835%2018%2011.9777L12.7051%2013.0972V10.945L17.385%209.9563C17.7062%209.2484%2017.9185%208.47985%2017.9998%207.67405L12.7049%208.79265V1.0527C11.8936%201.50558%2011.173%202.10842%2010.5873%202.81951V9.24028L8.46968%209.68776V0C7.65833%200.452726%206.93778%201.05572%206.35206%201.76681V10.1351L1.61387%2011.136C1.29267%2011.8439%201.08019%2012.6125%200.998683%2013.4183L6.35206%2012.2873V14.9976L0.61487%2016.2096C0.293664%2016.9175%200.0813422%2017.6861%200%2018.4919L6.00523%2017.2232C6.49408%2017.1221%206.91425%2016.8347%207.18741%2016.4393L8.28874%2014.8161V14.8158C8.40306%2014.6478%208.46968%2014.4454%208.46968%2014.2273V11.8398L10.5873%2011.3923V15.6967L17.385%2014.2596L17.3851%2014.2599Z'%20fill='%231DBA63'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_7331_6281'%3e%3crect%20width='18'%20height='20'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
-export {
-  e as default
-};

package/dist/assets/svg/RiyalGrey.svg.js

@@ -1,4 +0,0 @@
-const e = "data:image/svg+xml,%3csvg%20width='18'%20height='21'%20viewBox='0%200%2018%2021'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_7331_6256)'%3e%3cpath%20d='M11.2023%2018.7177C10.8811%2019.4258%2010.6687%2020.1942%2010.5874%2021L17.3848%2019.5635C17.706%2018.8556%2017.9181%2018.0871%2017.9996%2017.2812L11.2023%2018.7177Z'%20fill='%236D798A'/%3e%3cpath%20d='M17.3851%2015.2599C17.7063%2014.552%2017.9187%2013.7835%2018%2012.9777L12.7051%2014.0972V11.945L17.385%2010.9563C17.7062%2010.2484%2017.9185%209.47985%2017.9998%208.67405L12.7049%209.79265V2.0527C11.8936%202.50558%2011.173%203.10842%2010.5873%203.81951V10.2403L8.46968%2010.6878V1C7.65833%201.45273%206.93778%202.05572%206.35206%202.76681V11.1351L1.61387%2012.136C1.29267%2012.8439%201.08019%2013.6125%200.998683%2014.4183L6.35206%2013.2873V15.9976L0.61487%2017.2096C0.293664%2017.9175%200.0813422%2018.6861%200%2019.4919L6.00523%2018.2232C6.49408%2018.1221%206.91425%2017.8347%207.18741%2017.4393L8.28874%2015.8161V15.8158C8.40306%2015.6478%208.46968%2015.4454%208.46968%2015.2273V12.8398L10.5873%2012.3923V16.6967L17.385%2015.2596L17.3851%2015.2599Z'%20fill='%236D798A'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_7331_6256'%3e%3crect%20width='18'%20height='20'%20fill='white'%20transform='translate(0%201)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
-export {
-  e as default
-};

package/dist/node_modules/react-bootstrap/esm/Spinner.js

@@ -1,26 +0,0 @@
-import i from "../../../_virtual/index.js";
-import * as f from "react";
-import { useBootstrapPrefix as c } from "./ThemeProvider.js";
-import { j as d } from "../../../_virtual/jsx-runtime.js";
-const x = /* @__PURE__ */ f.forwardRef(({
-  bsPrefix: r,
-  variant: e,
-  animation: t = "border",
-  size: o,
-  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  as: a = "div",
-  className: m,
-  ...p
-}, n) => {
-  r = c(r, "spinner");
-  const s = `${r}-${t}`;
-  return /* @__PURE__ */ d.jsx(a, {
-    ref: n,
-    ...p,
-    className: i(m, s, o && `${s}-${o}`, e && `text-${e}`)
-  });
-});
-x.displayName = "Spinner";
-export {
-  x as default
-};