qaema-ui 0.0.52 → 0.0.54

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/components/Divider.d.ts

@@ -1,5 +1,6 @@
 export type DividerProps = {
     marginVertical?: string;
+    color?: 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;

package/dist/components/Divider.js

@@ -1,12 +1,13 @@
-import t from "styled-components";
-const e = t.div.attrs((r) => ({
-  marginVertical: r.marginVertical
+import o from "styled-components";
+const a = o.div.attrs((r) => ({
+  marginVertical: r.marginVertical,
+  color: r.color
 }))`
   width: 100%;
   height: 0;
-  border: 1px solid ${({ theme: r }) => r.colors.grey.n150};
+  border: 1px solid ${({ color: r, theme: i }) => r ?? i.colors.grey.n150};
   margin: ${({ marginVertical: r, theme: i }) => `${r ?? i.spacing.xxs} 0`};
 `;
 export {
-  e as default
+  a as default
 };

package/dist/components/DropDown.js

@@ -10,14 +10,14 @@ import { HelperTextWrapper as pe } from "./PhoneInputField.js";
 import Se from "./SearchBar.js";
 import me from "./Spinner.js";
 import F from "./Typography.js";
-const Le = (f) => {
+const Le = (i) => {
   const {
     label: b,
     options: m,
     // value,
     placeholder: H = "Select Something",
     optional: M = !1,
-    error: s = "",
+    error: f = "",
     disabled: h = !1,
     selectIdentifier: D,
     keyIdentifier: v = "id",
@@ -27,21 +27,21 @@ const Le = (f) => {
     allowSearch: R,
     searchHandler: A,
     searchPlaceholder: B,
-    onToggle: o,
-    multiSelect: c = !1,
+    onToggle: s,
+    multiSelect: o = !1,
     isLoading: Q = !1,
     currentSelectedOptions: y = [],
     isInteractive: I = !1,
     endIcon: T
-  } = f, u = g(null), p = g(null), d = te(), { t: k } = ae(), U = g(null), [a, x] = w(y), [i, O] = w(!1), [Z, q] = w(0), $ = P ?? /* @__PURE__ */ r.jsx(r.Fragment, {}), G = le("dropdown"), S = _(() => {
+  } = i, c = g(null), p = g(null), u = te(), { t: k } = ae(), U = g(null), [a, x] = w(y), [d, O] = w(!1), [Z, q] = w(0), $ = P ?? /* @__PURE__ */ r.jsx(r.Fragment, {}), G = le("dropdown"), S = _(() => {
     var e, n;
-    (e = u == null ? void 0 : u.current) != null && e.offsetWidth && p.current && q(((n = u.current) == null ? void 0 : n.offsetWidth) / 16);
+    (e = c == null ? void 0 : c.current) != null && e.offsetWidth && p.current && q(((n = c.current) == null ? void 0 : n.offsetWidth) / 16);
   }, []);
-  C(() => (i && (S(), window.addEventListener("resize", S)), () => window.removeEventListener("resize", S)), [i, S]), C(() => {
+  C(() => (d && (S(), window.addEventListener("resize", S)), () => window.removeEventListener("resize", S)), [d, S]), C(() => {
     x(y);
   }, [y]);
-  const J = (e, n, t, l = "default") => t ? d.colors.grey.n400 : e ? d.colors.state.error.n450 : n ? d.colors.primary.dark.n600 : l === "light-primary" ? d.colors.primary.purple.n450 : d.colors.grey.n300, E = (e) => a.some((n) => typeof n.value == "object" && typeof e.value == "object" ? n.value[v] === e.value[v] : n.value === e.value), K = (e) => {
-    if (c) {
+  const J = (e, n, t, l = "default") => t ? u.colors.grey.n400 : e ? u.colors.state.error.n450 : n ? u.colors.primary.dark.n600 : l === "light-primary" ? u.colors.primary.purple.n450 : u.colors.grey.n300, E = (e) => a.some((n) => typeof n.value == "object" && typeof e.value == "object" ? n.value[v] === e.value[v] : n.value === e.value), K = (e) => {
+    if (o) {
       const n = E(e);
       let t;
       n ? t = a.filter((l) => typeof l.value == "object" && typeof e.value == "object" ? l.value[v] !== e.value[v] : l.value !== e.value) : t = [...a, e], x(t), j(t.map((l) => l.value));
@@ -52,17 +52,17 @@ const Le = (f) => {
     x(n), j(n.map((t) => t.value));
   }, X = () => {
     var e;
-    return a.length === 0 ? H : c ? `${a.length} ${k("SELECTED")}` : (e = a[0]) == null ? void 0 : e.label;
+    return a.length === 0 ? H : o ? `${a.length} ${k("SELECTED")}` : (e = a[0]) == null ? void 0 : e.label;
   };
   C(() => {
     const e = (n) => {
-      p.current && u.current && !p.current.contains(n.target) && !u.current.contains(n.target) && (O(!1), o == null || o(!1));
+      p.current && c.current && !p.current.contains(n.target) && !c.current.contains(n.target) && (O(!1), s == null || s(!1));
     };
-    return i && document.addEventListener("mousedown", e), () => {
+    return d && document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
-  }, [i, o]);
-  const Y = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ r.jsx(pe, { error: s, children: s });
+  }, [d, s]);
+  const Y = () => I ? null : /* @__PURE__ */ r.jsx(pe, { error: f || "", children: f && f });
   return /* @__PURE__ */ r.jsxs(se, { children: [
     b && /* @__PURE__ */ r.jsxs(oe, { children: [
       /* @__PURE__ */ r.jsx("label", { children: b }),
@@ -71,14 +71,14 @@ const Le = (f) => {
     /* @__PURE__ */ r.jsxs(
       ce,
       {
-        show: i,
+        show: d,
         onToggle: () => {
-          o == null || o(!i), O((e) => !e);
+          s == null || s(!d), O((e) => !e);
         },
         placement: "bottom-start",
-        autoClose: c ? "outside" : !0,
+        autoClose: o ? "outside" : !0,
         children: [
-          /* @__PURE__ */ r.jsx(ue, { disabled: h, ref: u, $valid: !s, $variant: f.variant || "default", children: /* @__PURE__ */ r.jsx(de, { $valid: !s, $isInteractive: I, $hasDyncWidth: !h, children: /* @__PURE__ */ r.jsxs("div", { className: "title-container", children: [
+          /* @__PURE__ */ r.jsx(ue, { disabled: h, ref: c, $valid: !f, $variant: i.variant || "default", children: /* @__PURE__ */ r.jsx(de, { $valid: !f, $isInteractive: I, $hasDyncWidth: !h, children: /* @__PURE__ */ r.jsxs("div", { className: "title-container", children: [
             /* @__PURE__ */ r.jsxs("div", { className: "heading-container", children: [
               N && typeof $ == "function" && /* @__PURE__ */ r.jsx($, {}),
               /* @__PURE__ */ r.jsx(
@@ -86,26 +86,26 @@ const Le = (f) => {
                 {
                   component: "span",
                   variant: "mdText",
-                  color: J(s, a.length > 0, h, f.variant || "default"),
+                  color: J(f, a.length > 0, h, i.variant || "default"),
                   children: X()
                 }
               )
             ] }),
             (T || !h) && /* @__PURE__ */ r.jsxs(ie, { children: [
               T,
-              !c && a.length > 0 && !h && /* @__PURE__ */ r.jsx(
+              !o && a.length > 0 && !h && /* @__PURE__ */ r.jsx(
                 W,
                 {
                   style: { cursor: "pointer", marginLeft: "0.5rem" },
                   onClick: (e) => {
-                    e.stopPropagation(), x([]), j(c ? [] : "");
+                    e.stopPropagation(), x([]), j(o ? [] : "");
                   }
                 }
               ),
               !h && /* @__PURE__ */ r.jsx(ee, {})
             ] })
           ] }) }) }),
-          i && /* @__PURE__ */ r.jsxs(fe, { ref: p, $menuWidth: Z, $zIndex: G, children: [
+          d && /* @__PURE__ */ r.jsxs(fe, { ref: p, $menuWidth: Z, $zIndex: G, children: [
             R && /* @__PURE__ */ r.jsx(he, { children: /* @__PURE__ */ r.jsx(Se, { placeholder: B, onSearch: A }) }),
             /* @__PURE__ */ r.jsxs(
               ve,
@@ -113,7 +113,7 @@ const Le = (f) => {
                 ref: U,
                 onScroll: (e) => {
                   var n;
-                  (n = f.onScroll) == null || n.call(f, e);
+                  (n = i.onScroll) == null || n.call(i, e);
                 },
                 children: [
                   m == null ? void 0 : m.map((e) => {
@@ -125,7 +125,7 @@ const Le = (f) => {
                         onClick: () => K(e),
                         $selected: n,
                         children: [
-                          c && (n ? /* @__PURE__ */ r.jsx(re, { color: d.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(ne, { color: d.colors.primary.purple.n450 })),
+                          o && (n ? /* @__PURE__ */ r.jsx(re, { color: u.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(ne, { color: u.colors.primary.purple.n450 })),
                           " ",
                           /* @__PURE__ */ r.jsx(F, { variant: "smText", children: e == null ? void 0 : e.label })
                         ]
@@ -141,7 +141,7 @@ const Le = (f) => {
         ]
       }
     ),
-    c && a.length > 0 && /* @__PURE__ */ r.jsx(xe, { children: a.map((e) => {
+    o && a.length > 0 && /* @__PURE__ */ r.jsx(xe, { children: a.map((e) => {
       var n, t, l;
       return /* @__PURE__ */ r.jsxs(
         je,

package/dist/components/InputField.js

@@ -120,7 +120,7 @@ const g = {
   &:-webkit-autofill {
     box-shadow: none;
   }
-`, b = i.span`
+`, y = i.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -153,11 +153,13 @@ const g = {
   gap: ${({ theme: o }) => o.spacing.xxs};
   font-size: ${({ theme: o }) => o.typography.sizes.s3};
   color: ${({ error: o, touched: r }) => o && r ? ({ theme: t }) => t.colors.state.error.n450 : ({ theme: t }) => t.colors.grey.n400};
-  margin-top: ${({ theme: o }) => o.spacing.xxs};
+
   flex-direction: ${({ theme: o }) => o.dir === "rtl" ? "row-reverse" : "row"};
   justify-content: ${({ theme: o }) => o.dir === "rtl" ? "flex-end" : "flex-start"};
   text-align: ${({ theme: o }) => o.dir === "rtl" ? "right" : "left"};
-`, w = i.span`
+  min-height: 1.2rem;
+  visibility: ${({ error: o, touched: r }) => o && r ? "visible" : "hidden"};
+`, m = i.span`
   color: ${({ theme: o }) => o.colors.primary.purple.n500};
   text-decoration: underline;
   cursor: pointer;
@@ -177,7 +179,7 @@ const g = {
   type: n = "text",
   disabled: u = !1,
   helperText: x,
-  optional: m = !1,
+  optional: w = !1,
   helperTextLink: a,
   success: f = !1,
   error: l = "",
@@ -187,29 +189,29 @@ const g = {
   endIcon: h,
   onBlur: j = () => {
   },
-  checked: S,
-  name: y = "",
-  isInteractive: k = !1,
-  ...v
+  checked: v,
+  name: b = "",
+  isInteractive: S = !1,
+  ...k
 }) => {
   const z = H(), { t: C } = R(), F = () => l || (z.dir == "rtl" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    a && /* @__PURE__ */ e.jsx(w, { onClick: a.onClick, children: a.text }),
+    a && /* @__PURE__ */ e.jsx(m, { onClick: a.onClick, children: a.text }),
     x
   ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     x,
-    a && /* @__PURE__ */ e.jsx(w, { onClick: a.onClick, children: a.text })
-  ] })), A = () => k || !x && !a && (!l || !d) ? null : /* @__PURE__ */ e.jsx(N, { error: l, touched: d, children: F() });
+    a && /* @__PURE__ */ e.jsx(m, { onClick: a.onClick, children: a.text })
+  ] })), A = () => S ? null : /* @__PURE__ */ e.jsx(N, { error: l, touched: d, children: (x || a || l) && F() });
   return /* @__PURE__ */ e.jsxs(W, { children: [
     o && /* @__PURE__ */ e.jsxs(G, { children: [
       o,
       " ",
-      m && /* @__PURE__ */ e.jsxs(O, { children: [
+      w && /* @__PURE__ */ e.jsxs(O, { children: [
         " ",
         C("OPTIONAL")
       ] })
     ] }),
     /* @__PURE__ */ e.jsxs(E, { success: f, readonly: $, disabled: u, touched: d, error: l, children: [
-      p && /* @__PURE__ */ e.jsx(b, { success: f, error: l, touched: d, children: p }),
+      p && /* @__PURE__ */ e.jsx(y, { success: f, error: l, touched: d, children: p }),
       /* @__PURE__ */ e.jsx(
         I,
         {
@@ -217,19 +219,19 @@ const g = {
           error: l,
           readonly: $,
           onBlur: j,
-          checked: S,
+          checked: v,
           touched: d,
           value: t,
-          id: y,
+          id: b,
           onChange: s,
           type: n,
           disabled: u,
           placeholder: r,
-          name: y,
-          ...v
+          name: b,
+          ...k
         }
       ),
-      h && /* @__PURE__ */ e.jsx(b, { success: f, error: l, touched: d, children: h })
+      h && /* @__PURE__ */ e.jsx(y, { success: f, error: l, touched: d, children: h })
     ] }),
     A()
   ] });

package/dist/components/PhoneInputField.js

@@ -441,10 +441,11 @@ const _t = f.div`
   gap: ${({ theme: s }) => s.spacing.xxs};
   font-size: ${({ theme: s }) => s.typography.sizes.s3};
   color: ${({ error: s }) => s ? ({ theme: o }) => o.colors.state.error.n450 : ({ theme: o }) => o.colors.grey.n400};
-  margin-top: ${({ theme: s }) => s.spacing.xxs};
   flex-direction: ${({ theme: s }) => s.dir === "rtl" ? "row-reverse" : "row"};
   justify-content: ${({ theme: s }) => s.dir === "rtl" ? "flex-end" : "flex-start"};
   text-align: ${({ theme: s }) => s.dir === "rtl" ? "right" : "left"};
+  min-height: 1.2rem;
+  visibility: ${({ error: s }) => s ? "visible" : "hidden"};
 `, fg = ({
   label: s,
   value: o,
@@ -458,7 +459,7 @@ const _t = f.div`
   name: j = "",
   maxLength: e
 }) => {
-  const z = w.find((l) => l.code === k) ?? w.find((l) => l.code === "SA"), [d, c] = x(z), [i, b] = x(o), $ = () => t ? /* @__PURE__ */ r.jsx(Qt, { error: t, children: t }) : null;
+  const z = w.find((l) => l.code === k) ?? w.find((l) => l.code === "SA"), [d, c] = x(z), [i, b] = x(o), $ = () => /* @__PURE__ */ r.jsx(Qt, { error: t || "", children: t && t });
   return /* @__PURE__ */ r.jsxs(Mt, { children: [
     /* @__PURE__ */ r.jsx(Nt, { label: s, optional: m }),
     /* @__PURE__ */ r.jsx(

package/dist/components/Sidemenu.js

@@ -1,17 +1,18 @@
-import { j as o } from "../_virtual/jsx-runtime.js";
-import { useState as y, useEffect as H } from "react";
+import { j as i } from "../_virtual/jsx-runtime.js";
+import { useState as m, useEffect as H } from "react";
 import { FaTimesCircle as O, FaSearch as R } from "../node_modules/react-icons/fa/index.js";
-import s, { useTheme as X } from "styled-components";
-import { device as w } from "../constants/breakPoints.constant.js";
+import o, { useTheme as X } from "styled-components";
+import { device as S } from "../constants/breakPoints.constant.js";
 import K from "../hooks/useZIndex.js";
-import { useQaemaCoreTranslation as U } from "../i18n/i18n.js";
+import { useQaemaCoreTranslation as M } from "../i18n/i18n.js";
+import U from "./Divider.js";
 import V from "./Image.js";
 import j from "./Link.js";
-import S from "./NavItem.js";
-import k from "./Typography.js";
+import b from "./NavItem.js";
+import w from "./Typography.js";
 import Z from "../node_modules/react-bootstrap/esm/Button.js";
 import _ from "../node_modules/react-bootstrap/esm/Form.js";
-const A = s.div`
+const v = o.div`
   direction: ${({ theme: r }) => r == null ? void 0 : r.dir};
   position: fixed;
   top: 0;
@@ -28,7 +29,7 @@ const A = s.div`
   flex-direction: column;
   gap: 1rem;
 
-  @media ${w.tablet} {
+  @media ${S.tablet} {
     transform: ${({ theme: r }) => r.dir === "ltr" ? "translateX(-100%)" : "translateX(100%)"}; /* Hide menu off-screen */
     margin-left: 0;
 
@@ -42,19 +43,19 @@ const A = s.div`
   ${({ theme: r }) => {
   if ((r == null ? void 0 : r.dir) === "rtl") return `padding-left: 0 !important;padding-right: ${r.spacing.xs};`;
 }}
-`, J = s.div`
+`, A = o.div`
   display: flex;
   flex-direction: row;
   width: 100%;
   justify-content: space-between;
-`, Q = s.div`
+`, J = o.div`
   padding-right: ${({ theme: r }) => r.spacing.sm};
   padding-left: ${({ theme: r }) => r.spacing.sm};
   cursor: pointer;
-`, q = s.div`
+`, Q = o.div`
   display: none;
 
-  @media ${w.tablet} {
+  @media ${S.tablet} {
     display: unset;
     padding-right: ${({ theme: r }) => r.spacing.s};
     padding-left: ${({ theme: r }) => r.spacing.s};
@@ -63,41 +64,42 @@ const A = s.div`
       height: 1.5rem;
     }
   }
-`, G = s.div`
+`, q = o.div`
   padding-right: ${({ theme: r }) => r.spacing.s};
   padding-left: ${({ theme: r }) => r.spacing.s};
-`, Y = s.div`
+`, G = o.div`
   justify-content: space-between;
   display: flex;
   flex-direction: column;
   height: 100%;
-`, v = s.div`
+`, Y = o.div`
   display: flex;
   flex-direction: row;
   gap: ${({ theme: r }) => r.spacing.xxs};
   padding: ${({ theme: r }) => r.spacing.xs};
-  background-color: ${({ theme: r }) => r.colors.grey.n100};
+  background-color: ${({ theme: r }) => r.colors.grey.n150};
   border: 1px solid transparent;
   border-radius: ${({ theme: r }) => r.borderRadius.lg};
-`, P = s(Z)`
+`, P = o(Z)`
   border: none;
   padding: 0;
   margin-top: ${({ theme: r }) => r.spacing.xxs};
-  background-color: ${({ theme: r }) => r.colors.grey.n100};
+  background-color: ${({ theme: r }) => r.colors.grey.n150};
   font-family: ${({ theme: r }) => r.dir === "rtl" ? r.fonts.arabic : r.fonts.english} !important;
   direction: ${({ theme: r }) => r.dir} !important;
   svg {
-    background-color: ${({ theme: r }) => r.colors.grey.n100};
+    background-color: ${({ theme: r }) => r.colors.grey.n150};
   }
-`, I = s(_.Control)`
+`, I = o(_.Control)`
   padding: ${({ theme: r }) => r.spacing.xxs};
   border: none;
-  background-color: ${({ theme: r }) => r.colors.grey.n100};
+  background-color: ${({ theme: r }) => r.colors.grey.n150};
+  color: ${({ theme: r }) => r.colors.grey.n350};
 
   &:focus-visible {
     outline: none;
   }
-`, b = s.div`
+`, rr = o.div`
   padding-right: ${({ theme: r }) => r.spacing.s};
   button {
     width: 100%;
@@ -106,74 +108,89 @@ const A = s.div`
   ${({ theme: r }) => {
   if ((r == null ? void 0 : r.dir) === "rtl") return `padding-right: 0 !important;padding-left: ${r.spacing.s};`;
 }}
-`, rr = s(k)`
+`, nr = o(w)`
   padding-right: ${({ theme: r }) => r.spacing.s};
   padding-left: ${({ theme: r }) => r.spacing.s};
   margin-top: 0;
   margin-bottom: ${({ theme: r }) => r.spacing.xs};
-`, nr = s.div`
+`, ir = o.div`
   padding: ${({ theme: r }) => r.spacing.m};
   text-align: center;
-`, ur = (r) => {
-  const { logoSrc: C, searchPlaceHolder: T, categories: c, linkComponent: f, open: E, setOpen: L, currentPath: u, extraSideMenuItems: p, onLogoClick: B } = r, a = X(), { t: D } = U(), F = K("sidemenu"), [l, M] = y(""), [t, N] = y(c), g = (n) => {
-    const e = [];
-    c == null || c.forEach((d) => {
+`, or = o.div`
+  button {
+    width: 100%;
+    border-radius: ${({ theme: r }) => r.spacing.xxs};
+  }
+`, sr = o(U)`
+  margin-left: -${({ theme: r }) => r.spacing.xs};
+  width: calc(100% + ${({ theme: r }) => r.spacing.xs});
+  ${({ theme: r }) => {
+  if ((r == null ? void 0 : r.dir) === "rtl") return `margin-left: 0; margin-right: -${r.spacing.xs}; width: calc(100% + ${r.spacing.xs});`;
+}}
+  margin-bottom: ${({ theme: r }) => r.spacing.sm};
+`, mr = (r) => {
+  const { logoSrc: C, searchPlaceHolder: k, categories: a, linkComponent: f, open: T, setOpen: E, currentPath: u, extraSideMenuItems: l, onLogoClick: D } = r, p = X(), { t: L } = M(), B = K("sidemenu"), [c, F] = m(""), [e, W] = m(a), g = (n) => {
+    const t = [];
+    a == null || a.forEach((d) => {
       var h;
-      const i = (h = d == null ? void 0 : d.navItems) == null ? void 0 : h.filter((x) => {
-        var $, m;
-        return (m = ($ = x == null ? void 0 : x.title) == null ? void 0 : $.toLowerCase()) == null ? void 0 : m.includes(n == null ? void 0 : n.toLowerCase());
+      const s = (h = d == null ? void 0 : d.navItems) == null ? void 0 : h.filter((x) => {
+        var $, y;
+        return (y = ($ = x == null ? void 0 : x.title) == null ? void 0 : $.toLowerCase()) == null ? void 0 : y.includes(n == null ? void 0 : n.toLowerCase());
       });
-      (i == null ? void 0 : i.length) > 0 && e.push({ ...d, navItems: i });
-    }), N(e);
-  }, W = (n) => {
-    n.key === "Enter" && g(l);
+      (s == null ? void 0 : s.length) > 0 && t.push({ ...d, navItems: s });
+    }), W(t);
+  }, N = (n) => {
+    n.key === "Enter" && g(c);
   };
   H(() => {
-    l === "" && g(l);
-  }, [l]);
-  const z = (n, e) => n ? e === n || (e == null ? void 0 : e.startsWith(n + "/")) : !1;
-  return /* @__PURE__ */ o.jsxs(A, { className: E ? "active" : "", $zIndex: F, children: [
-    /* @__PURE__ */ o.jsxs(J, { children: [
-      /* @__PURE__ */ o.jsx(Q, { onClick: B, children: /* @__PURE__ */ o.jsx(V, { src: C, width: "6.336rem", height: "2rem" }) }),
-      /* @__PURE__ */ o.jsx(q, { onClick: () => L(!1), children: /* @__PURE__ */ o.jsx(O, { color: a.colors.primary.purple.n450 }) })
+    c === "" && g(c);
+  }, [c]);
+  const z = (n, t) => n ? t === n || (t == null ? void 0 : t.startsWith(n + "/")) : !1;
+  return /* @__PURE__ */ i.jsxs(v, { className: T ? "active" : "", $zIndex: B, children: [
+    /* @__PURE__ */ i.jsxs(A, { children: [
+      /* @__PURE__ */ i.jsx(J, { onClick: D, children: /* @__PURE__ */ i.jsx(V, { src: C, width: "6.336rem", height: "2rem" }) }),
+      /* @__PURE__ */ i.jsx(Q, { onClick: () => E(!1), children: /* @__PURE__ */ i.jsx(O, { color: p.colors.primary.purple.n450 }) })
     ] }),
-    /* @__PURE__ */ o.jsx(G, { children: /* @__PURE__ */ o.jsxs(v, { children: [
-      /* @__PURE__ */ o.jsx(
+    /* @__PURE__ */ i.jsx(q, { children: /* @__PURE__ */ i.jsxs(Y, { children: [
+      /* @__PURE__ */ i.jsx(
         P,
         {
           onClick: () => {
-            g(l);
+            g(c);
           },
-          children: /* @__PURE__ */ o.jsx(R, { color: a.colors.grey.n400 })
+          children: /* @__PURE__ */ i.jsx(R, { color: p.colors.grey.n350 })
         }
       ),
-      /* @__PURE__ */ o.jsx(
+      /* @__PURE__ */ i.jsx(
         I,
         {
-          placeholder: T ?? "Search",
-          value: l,
+          placeholder: k ?? "Search",
+          value: c,
           onChange: (n) => {
-            M(n.target.value);
+            F(n.target.value);
           },
-          onKeyDown: W
+          onKeyDown: N
         }
       )
     ] }) }),
-    /* @__PURE__ */ o.jsxs(Y, { children: [
-      /* @__PURE__ */ o.jsxs("div", { children: [
-        (t == null ? void 0 : t.length) === 0 && /* @__PURE__ */ o.jsx(nr, { children: /* @__PURE__ */ o.jsx(k, { variant: "smText", children: D("NO_RESULTS_FOUND") }) }),
-        (t == null ? void 0 : t.length) > 0 && (t == null ? void 0 : t.map((n) => {
-          var e, d;
-          return ((e = n == null ? void 0 : n.navItems) == null ? void 0 : e.length) === 0 ? null : /* @__PURE__ */ o.jsxs(b, { children: [
-            /* @__PURE__ */ o.jsx(rr, { variant: "xsText", color: a.colors.grey.n300, children: n == null ? void 0 : n.title }),
-            (d = n == null ? void 0 : n.navItems) == null ? void 0 : d.map((i) => /* @__PURE__ */ o.jsx(j, { to: (i == null ? void 0 : i.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ o.jsx(S, { item: { variant: "normal", active: z(i.path, u), ...i } }) }, i == null ? void 0 : i.path))
+    /* @__PURE__ */ i.jsxs(G, { children: [
+      /* @__PURE__ */ i.jsxs("div", { children: [
+        (e == null ? void 0 : e.length) === 0 && /* @__PURE__ */ i.jsx(ir, { children: /* @__PURE__ */ i.jsx(w, { variant: "smText", children: L("NO_RESULTS_FOUND") }) }),
+        (e == null ? void 0 : e.length) > 0 && (e == null ? void 0 : e.map((n) => {
+          var t, d;
+          return ((t = n == null ? void 0 : n.navItems) == null ? void 0 : t.length) === 0 ? null : /* @__PURE__ */ i.jsxs(rr, { children: [
+            /* @__PURE__ */ i.jsx(nr, { variant: "xsText", color: p.colors.grey.n300, children: n == null ? void 0 : n.title }),
+            (d = n == null ? void 0 : n.navItems) == null ? void 0 : d.map((s) => /* @__PURE__ */ i.jsx(j, { to: (s == null ? void 0 : s.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ i.jsx(b, { item: { variant: "normal", active: z(s.path, u), ...s } }) }, s == null ? void 0 : s.path))
           ] }, n == null ? void 0 : n.title);
         }))
       ] }),
-      /* @__PURE__ */ o.jsx(b, { children: p == null ? void 0 : p.map((n) => /* @__PURE__ */ o.jsx(j, { to: (n == null ? void 0 : n.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ o.jsx(S, { item: { variant: "normal", active: u === n.path, ...n } }) }, n == null ? void 0 : n.path)) })
+      /* @__PURE__ */ i.jsxs(or, { children: [
+        (l == null ? void 0 : l.length) > 0 && /* @__PURE__ */ i.jsx(sr, { color: p.colors.grey.n150 }),
+        l == null ? void 0 : l.map((n) => /* @__PURE__ */ i.jsx(j, { to: (n == null ? void 0 : n.path) ?? "/", component: f, wrapper: !0, children: /* @__PURE__ */ i.jsx(b, { item: { variant: "normal", active: u === n.path, ...n } }) }, n == null ? void 0 : n.path))
+      ] })
     ] })
   ] });
 };
 export {
-  ur as default
+  mr as default
 };