qaema-ui 0.0.1

package/dist/components/InputLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../src/lib/components/InputLabel.tsx"],"names":[],"mappings":"AAMA,KAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAmBF,QAAA,MAAM,cAAc,GAAI,qBAAqB,mBAAmB,4CAW/D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/InputLabel.js

@@ -0,0 +1,34 @@
+import { j as t } from "../_virtual/jsx-runtime.js";
+import s from "styled-components";
+import { useQaemaCoreTranslation as o } from "../i18n/i18n.js";
+import { Optional as n } from "./InputField.js";
+const a = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xxs};
+  label {
+    font-size: ${({ theme: e }) => e.typography.sizes.s4};
+    font-weight: ${({ theme: e }) => e.typography.weights.regular};
+    line-height: ${({ theme: e }) => e.typography.lineHeights.s};
+  }
+  span {
+    font-size: ${({ theme: e }) => e.typography.sizes.s2};
+    font-weight: ${({ theme: e }) => e.typography.weights.regular};
+    line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
+    color: ${({ theme: e }) => e.colors.grey.n350};
+  }
+`, y = ({ label: e, optional: i }) => {
+  const { t: r } = o();
+  return /* @__PURE__ */ t.jsx(a, { children: e && /* @__PURE__ */ t.jsxs("label", { children: [
+    e,
+    " ",
+    i && /* @__PURE__ */ t.jsxs(n, { children: [
+      " ",
+      r("OPTIONAL")
+    ] })
+  ] }) });
+};
+export {
+  y as default
+};

package/dist/components/Layout.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode, default as React } from 'react';
+import { HeaderProps } from './Header';
+import { SidemenuProps } from './Sidemenu';
+export type LayoutProps = {
+    header: HeaderProps;
+    sideMenu: SidemenuProps;
+    children: ReactNode;
+    showMenu: boolean;
+    setShowMenu: () => void;
+};
+declare const Layout: React.FC<LayoutProps>;
+export default Layout;
+//# sourceMappingURL=Layout.d.ts.map

package/dist/components/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/lib/components/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAeF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAUjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Layout.js

@@ -0,0 +1,25 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import "react";
+import s from "styled-components";
+import { device as a } from "../constants/breakPoints.constant.js";
+import l from "./Header.js";
+import p from "./Sidemenu.js";
+const u = s.div`
+  height: calc(100vh - 5.25rem);
+  background-color: ${({ theme: r }) => r.colors.primary.purple.n75};
+  overflow-y: auto;
+  @media ${a.tablet} {
+    margin: unset;
+  }
+  ${({ theme: r }) => r.dir === "rtl" ? "margin-right: 20rem; margin-left:0" : "margin-left: 20rem; margin-right:0"}
+`, j = (r) => {
+  const { header: o, sideMenu: i, children: n, showMenu: m = !1, setShowMenu: t } = r;
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(l, { ...o, setOpen: t }),
+    /* @__PURE__ */ e.jsx(p, { ...i, open: m, setOpen: t }),
+    /* @__PURE__ */ e.jsx(u, { children: n })
+  ] });
+};
+export {
+  j as default
+};

package/dist/components/Legend.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+type SegmentType = {
+    color: string;
+    name: string;
+    value?: string | number;
+};
+export type LegendProps = {
+    segment: SegmentType;
+};
+declare const Legend: React.FC<LegendProps>;
+export default Legend;
+//# sourceMappingURL=Legend.d.ts.map

package/dist/components/Legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/lib/components/Legend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoC/B,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AACF,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6BjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Legend.js

@@ -0,0 +1,50 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import { FaSquareFull as t } from "../node_modules/react-icons/fa/index.js";
+import s, { useTheme as n } from "styled-components";
+import a from "../assets/svg/Riyal.svg.js";
+import { CurrencyContainer as c } from "../styles/Currency.styles.js";
+import l from "./Typography.js";
+const d = s.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`, x = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: ${({ theme: r }) => r.spacing.xxs};
+`, p = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${({ theme: r }) => r.spacing.xxs};
+`, h = s.div`
+  width: ${({ theme: r }) => r.spacing.s};
+  height: ${({ theme: r }) => r.spacing.s};
+  flex-shrink: 0;
+  margin-right: 5px;
+`, v = (r) => {
+  const { segment: i } = r, o = n();
+  return /* @__PURE__ */ e.jsxs(d, { children: [
+    /* @__PURE__ */ e.jsxs(x, { children: [
+      /* @__PURE__ */ e.jsx(h, { children: /* @__PURE__ */ e.jsx(t, { color: i == null ? void 0 : i.color }) }),
+      /* @__PURE__ */ e.jsx(l, { variant: "smText", weight: "semiBold", children: i == null ? void 0 : i.name })
+    ] }),
+    (i == null ? void 0 : i.value) !== void 0 && (i == null ? void 0 : i.value) !== null && /* @__PURE__ */ e.jsxs(p, { children: [
+      /* @__PURE__ */ e.jsx(
+        c,
+        {
+          src: a,
+          alt: "Riyal",
+          width: o.spacing.s,
+          height: o.spacing.s,
+          style: { filter: o.colors.grey.n400, opacity: 0.6 }
+        }
+      ),
+      /* @__PURE__ */ e.jsx(l, { variant: "smText", color: o.colors.grey.n400, children: i == null ? void 0 : i.value })
+    ] })
+  ] });
+};
+export {
+  v as default
+};

package/dist/components/Link.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+type CommonProps = {
+    color?: string;
+    fontSize?: string | number;
+    fontWeight?: string | number;
+    textDecoration?: string;
+    hoverColor?: string;
+    padding?: string;
+    hoverBgColor?: string;
+    activeBgColor?: string;
+    width?: string;
+};
+export type LinkProps = CommonProps & {
+    to: string;
+    state?: {
+        [key: string]: unknown;
+    };
+    children: React.ReactNode;
+    component?: React.ElementType;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    style?: React.CSSProperties;
+    wrapper?: boolean;
+    onClick?: React.MouseEventHandler;
+};
+declare const Link: React.FC<LinkProps>;
+export default Link;
+//# sourceMappingURL=Link.d.ts.map

package/dist/components/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/lib/components/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,CAAC;AAgDF,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiD7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Link.js

@@ -0,0 +1,82 @@
+import { j as i } from "../_virtual/jsx-runtime.js";
+import "react";
+import x from "../node_modules/react-bootstrap/esm/Nav.js";
+import a from "styled-components";
+const m = a(x.Link)`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme: t }) => t.spacing.xs};
+  color: ${(t) => t.color ?? "inherit"};
+  font-size: ${(t) => typeof t.fontSize == "number" ? `${t.fontSize}rem` : t.fontSize ?? "inherit"};
+  font-weight: ${(t) => t.fontWeight ?? "inherit"};
+  text-decoration: ${(t) => t.textDecoration ?? "none"};
+  padding: ${(t) => t.padding ?? "0"};
+  width: ${(t) => t.width ?? "auto"};
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    color: ${(t) => t.hoverColor ?? t.color ?? "inherit"};
+    background-color: ${(t) => t.hoverBgColor ?? "transparent"};
+  }
+
+  &:active {
+    background-color: ${(t) => t.activeBgColor ?? "transparent"};
+  }
+`, u = a.a`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme: t }) => t.spacing.xs};
+  color: ${(t) => t.color ?? "inherit"};
+  font-size: ${(t) => typeof t.fontSize == "number" ? `${t.fontSize}rem` : t.fontSize ?? "inherit"};
+  font-weight: ${(t) => t.fontWeight ?? "inherit"};
+  text-decoration: ${(t) => t.textDecoration ?? "none"};
+  padding: ${(t) => t.padding ?? "0"};
+  width: ${(t) => t.width ?? "auto"};
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    color: ${(t) => t.hoverColor ?? t.color ?? "inherit"};
+    background-color: ${(t) => t.hoverBgColor ?? "transparent"};
+  }
+`, l = a.span`
+  display: inline-flex;
+  align-items: center;
+  ${(t) => t.position === "left" ? `margin-right: ${t.theme.spacing.xs};` : `margin-left: ${t.theme.spacing.xs};`}
+`, k = (t) => {
+  const { to: n, state: f, children: s, component: d, leftIcon: o, rightIcon: r, wrapper: g = !1, onClick: c, ...h } = t, $ = typeof n == "string" && (n.startsWith("http://") || n.startsWith("https://"));
+  if (d) {
+    const p = a(d)`
+      display: ${({ $wrapper: e }) => e ? "unset" : "inline-flex"};
+      align-items: center;
+      color: ${(e) => e.color ?? e.theme.colors.primary.purple.n450};
+      font-size: ${(e) => typeof e.fontSize == "number" ? `${e.fontSize}rem` : e.fontSize ?? "inherit"};
+      font-weight: ${(e) => e.fontWeight ?? "inherit"};
+      text-decoration: ${(e) => e.textDecoration ?? "none"};
+      padding: ${(e) => e.padding ?? "0"};
+      width: ${(e) => e.width ?? "auto"};
+      transition: all 0.2s ease-in-out;
+
+      &:hover {
+        color: ${(e) => e.hoverColor ?? e.color ?? "inherit"};
+        background-color: ${(e) => e.hoverBgColor ?? "transparent"};
+      }
+    `;
+    return /* @__PURE__ */ i.jsxs(p, { to: n, state: f, $wrapper: g, ...h, onClick: c, children: [
+      o && /* @__PURE__ */ i.jsx(l, { position: "left", children: o }),
+      s,
+      r && /* @__PURE__ */ i.jsx(l, { position: "right", children: r })
+    ] });
+  }
+  return $ ? /* @__PURE__ */ i.jsxs(u, { href: n, target: "_blank", rel: "noopener noreferrer", ...h, onClick: c, children: [
+    o && /* @__PURE__ */ i.jsx(l, { position: "left", children: o }),
+    s,
+    r && /* @__PURE__ */ i.jsx(l, { position: "right", children: r })
+  ] }) : /* @__PURE__ */ i.jsxs(m, { href: n, ...h, onClick: c, children: [
+    o && /* @__PURE__ */ i.jsx(l, { position: "left", children: o }),
+    s,
+    r && /* @__PURE__ */ i.jsx(l, { position: "right", children: r })
+  ] });
+};
+export {
+  k as default
+};

package/dist/components/ListToolbar.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { ButtonProps } from './Button';
+import { FilterProps } from './Filter';
+import { FilterActiveBarProps } from './FilterActiveBar';
+import { SearchBarProps } from './SearchBar';
+type ActionButton = ButtonProps & {
+    label: string;
+};
+export type ListToolbarProps = {
+    searchBarProps?: SearchBarProps;
+    actionButtonProps?: ActionButton;
+    outlineButtonsProps?: ActionButton[];
+    filterProps?: FilterProps & FilterActiveBarProps;
+};
+declare const ListToolbar: React.FC<ListToolbarProps>;
+export default ListToolbar;
+//# sourceMappingURL=ListToolbar.d.ts.map

package/dist/components/ListToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../src/lib/components/ListToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAwB,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7D,KAAK,YAAY,GAAG,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,mBAAmB,CAAC,EAAE,YAAY,EAAE,CAAC;IACrC,WAAW,CAAC,EAAE,WAAW,GAAG,oBAAoB,CAAC;CAClD,CAAC;AAqCF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuD3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/ListToolbar.js

@@ -0,0 +1,87 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import "react";
+import { FaPlus as j } from "../node_modules/react-icons/fa6/index.js";
+import s, { useTheme as g } from "styled-components";
+import { breakPoints as h, device as a } from "../constants/breakPoints.constant.js";
+import y from "../hooks/useBreakpointCheck.js";
+import o from "./Button.js";
+import v from "./Filter.js";
+import p from "./FilterActiveBar.js";
+import w from "./SearchBar.js";
+const F = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: ${({ theme: m }) => m.spacing.l};
+  @media ${a.mobile} {
+    flex-direction: column;
+  }
+`, R = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.625rem;
+  @media ${a.mobile} {
+    align-self: flex-start;
+  }
+`, T = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.625rem;
+  @media ${a.mobile} {
+    margin-top: 1rem;
+    align-self: flex-end;
+  }
+`, I = ({ searchBarProps: m, actionButtonProps: l, filterProps: r, outlineButtonsProps: t }) => {
+  var c;
+  const x = g(), f = y(h.mobile), n = {
+    borderRadius: x.borderRadius.sm,
+    padding: "0 1.25rem",
+    height: "2rem",
+    minWidth: "auto"
+  }, d = (i) => i ? Object.fromEntries(Object.entries(i).filter(([b]) => b !== "label")) : {};
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs(F, { children: [
+      /* @__PURE__ */ e.jsxs(R, { children: [
+        m && /* @__PURE__ */ e.jsx(w, { ...m }),
+        r && /* @__PURE__ */ e.jsx(v, { ...r })
+      ] }),
+      /* @__PURE__ */ e.jsxs(T, { children: [
+        t == null ? void 0 : t.map((i) => /* @__PURE__ */ e.jsx(
+          o,
+          {
+            style: {
+              ...n
+            },
+            size: "xs",
+            variant: "outline-primary",
+            ...d(i),
+            children: i.label
+          },
+          i.label
+        )),
+        (l == null ? void 0 : l.label) && /* @__PURE__ */ e.jsx(
+          o,
+          {
+            style: {
+              ...n
+            },
+            leftIcon: /* @__PURE__ */ e.jsx(j, { size: "1rem" }),
+            size: f ? "xxs" : "xs",
+            ...d(l),
+            children: l.label
+          }
+        )
+      ] })
+    ] }),
+    r && ((c = r.activeFilters) == null ? void 0 : c.length) > 0 && /* @__PURE__ */ e.jsx(p, { ...r })
+  ] });
+};
+export {
+  I as default
+};

package/dist/components/MethodCard.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export type MethodCardProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number;
+    backgroundColor?: string;
+    padding?: number | string;
+    margin?: number | string;
+    border?: string;
+    image?: React.ReactNode;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    actions?: React.ReactNode;
+};
+export declare const MethodCard: React.FC<MethodCardProps>;
+export default MethodCard;
+//# sourceMappingURL=MethodCard.d.ts.map

package/dist/components/MethodCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MethodCard.d.ts","sourceRoot":"","sources":["../../src/lib/components/MethodCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,eAAe,GAAG;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAG5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AA2CF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuChD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/MethodCard.js

@@ -0,0 +1,68 @@
+import { j as i } from "../_virtual/jsx-runtime.js";
+import "react";
+import t, { css as n } from "styled-components";
+import { Card as u } from "./Card.js";
+const C = t.div`
+  ${() => n`
+      width: 100%;
+      height: '10rem';
+      overflow: hidden;
+    `}
+`, j = t.div`
+  ${({ $padding: e }) => {
+  let r;
+  return e !== void 0 ? r = typeof e == "number" ? `${e}px` : e : r = "1rem", n`
+      padding: ${r};
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    `;
+}}
+`, g = t.div`
+  ${() => n`
+    display: flex;
+    flex-direction: column;
+    gap: ${({ theme: e }) => e.spacing.xs};
+    padding: ${({ theme: e }) => e.spacing.sm};
+  `};
+`, b = ({
+  className: e,
+  style: r,
+  width: c,
+  height: x,
+  borderRadius: m,
+  backgroundColor: p,
+  padding: s,
+  margin: f,
+  border: h,
+  image: d,
+  title: o,
+  content: l,
+  actions: a
+}) => /* @__PURE__ */ i.jsxs(
+  u,
+  {
+    className: e,
+    style: r,
+    width: c,
+    height: x,
+    borderRadius: m,
+    backgroundColor: p,
+    padding: s,
+    margin: f,
+    border: h,
+    children: [
+      d && /* @__PURE__ */ i.jsx(C, { children: d }),
+      (o || l) && /* @__PURE__ */ i.jsxs(j, { $padding: s, children: [
+        o,
+        l
+      ] }),
+      a && /* @__PURE__ */ i.jsx(g, { children: a })
+    ]
+  }
+);
+export {
+  b as MethodCard,
+  b as default
+};

package/dist/components/Modal.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { ZIndexVariant } from '../hooks/useZIndex';
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ModalProps = {
+    title?: string;
+    content: React.ReactNode;
+    actions?: React.ReactNode;
+    onClose?: () => void;
+    maxHeight?: boolean;
+    size?: ModalSize;
+    closeOnOverlayClick?: boolean;
+    zIndexVariant?: ZIndexVariant;
+};
+declare const Modal: React.FC<ModalProps>;
+export default Modal;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/lib/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAkB,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjE,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AA0GF,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA+C/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Modal.js

@@ -0,0 +1,117 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import { useState as h } from "react";
+import { IoCloseOutline as y } from "../node_modules/react-icons/io5/index.js";
+import t from "styled-components";
+import $ from "../hooks/useZIndex.js";
+const d = (o, r) => {
+  switch (r) {
+    case "sm":
+      return o.spacing.sm;
+    case "md":
+      return o.spacing.m;
+    default:
+      return o.spacing.l;
+  }
+}, b = t.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${({ theme: o }) => o.colors.grey.n800 + "4d"};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: ${({ $zIndex: o }) => o};
+  backdrop-filter: blur(2px);
+`, v = t.div`
+  background-color: ${({ theme: o }) => o.colors.grey.n50};
+  border-radius: ${({ theme: o }) => o.borderRadius.sm};
+  box-shadow: ${({ theme: o }) => o.boxShadow.s5};
+  width: ${({ $size: o }) => ({
+  sm: "25rem",
+  md: "31.25rem",
+  lg: "37.5rem",
+  xl: "68.438rem"
+})[o]};
+  max-width: 95vw;
+  max-height: 95vh;
+  overflow: auto;
+  animation: fadeIn 0.3s ease-out;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`, j = t.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${({ theme: o }) => o.spacing.m};
+  border-bottom: 1px solid ${({ theme: o }) => o.colors.grey.n150};
+  position: sticky;
+  top: 0;
+  background-color: ${({ theme: o }) => o.colors.grey.n50};
+  z-index: 1;
+`, k = t.h3`
+  margin: 0;
+  font-size: ${({ theme: o }) => o.typography.sizes.s6};
+  font-weight: ${({ theme: o }) => o.typography.weights.semiBold};
+  color: ${({ theme: o }) => o.colors.grey.n650};
+`, w = t.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: ${({ theme: o }) => o.typography.sizes.s5};
+  color: ${({ theme: o }) => o.colors.primary.purple.n450};
+  max-width: 85.5rem;
+  max-height: 53.44rem;
+  &:hover {
+    color: ${({ theme: o }) => o.colors.primary.purple.n200};
+  }
+`, z = t.div`
+  padding: ${({ theme: o, $size: r }) => d(o, r)};
+  max-height: ${({ $maxHeight: o }) => o ? "95vh" : "calc(80vh - 100px)"};
+  overflow-y: auto;
+`, M = t.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${({ theme: o }) => o.spacing.sm};
+  padding: ${({ theme: o, $size: r }) => d(o, r)};
+  border-top: 1px solid ${({ theme: o }) => o.colors.grey.n150};
+  position: sticky;
+  bottom: 0;
+  background-color: ${({ theme: o }) => o.colors.grey.n50};
+`, B = ({
+  title: o,
+  content: r,
+  actions: i,
+  onClose: s,
+  size: n = "md",
+  closeOnOverlayClick: c = !0,
+  zIndexVariant: m = "modal",
+  maxHeight: p = !1
+}) => {
+  const [g, u] = h(!0), x = $(m), a = () => {
+    u(!1), s == null || s();
+  }, f = (l) => {
+    l.target === l.currentTarget && c && a();
+  };
+  return g ? /* @__PURE__ */ e.jsx(b, { onClick: f, $zIndex: x, children: /* @__PURE__ */ e.jsxs(v, { $size: n, children: [
+    /* @__PURE__ */ e.jsxs(j, { children: [
+      /* @__PURE__ */ e.jsx(k, { children: o }),
+      s && /* @__PURE__ */ e.jsx(w, { onClick: a, "aria-label": "Close modal", children: /* @__PURE__ */ e.jsx(y, {}) })
+    ] }),
+    /* @__PURE__ */ e.jsx(z, { $size: n, $maxHeight: p, children: r }),
+    i && /* @__PURE__ */ e.jsx(M, { $size: n, children: i })
+  ] }) }) : null;
+};
+export {
+  B as default
+};

package/dist/components/ModalWithRequestCard.d.ts

@@ -0,0 +1,8 @@
+import { ModalProps } from './Modal';
+import { RequestCardProps } from './RequestCard';
+export type ModalWithRequestCardProps = {
+    modalProps: ModalProps;
+    requestCardProps: RequestCardProps;
+};
+export default function ModalWithRequestCard({ modalProps, requestCardProps }: ModalWithRequestCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalWithRequestCard.d.ts.map

package/dist/components/ModalWithRequestCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalWithRequestCard.d.ts","sourceRoot":"","sources":["../../src/lib/components/ModalWithRequestCard.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,MAAM,MAAM,yBAAyB,GAAG;IACtC,UAAU,EAAE,UAAU,CAAC;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;CACpC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAAE,UAAU,EAAE,gBAAgB,EAAE,EAAE,yBAAyB,2CAEvG"}

package/dist/components/ModalWithRequestCard.js

@@ -0,0 +1,9 @@
+import { j as t } from "../_virtual/jsx-runtime.js";
+import e from "./Modal.js";
+import s from "./RequestCard.js";
+function n({ modalProps: o, requestCardProps: r }) {
+  return /* @__PURE__ */ t.jsx(e, { ...o, content: /* @__PURE__ */ t.jsx(s, { ...r }) });
+}
+export {
+  n as default
+};

package/dist/components/NavItem.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { NavItemVariant } from '../hooks/useNavItemVariant';
+type NotificationVariant = 'bullet' | 'badge';
+type NavItemComponentType = 'button' | 'link';
+export type NavItemType = {
+    path?: string;
+    state?: {
+        [key: string]: unknown;
+    };
+    icon?: React.ElementType;
+    code?: string;
+    title: string;
+    variant?: NavItemVariant;
+    notificationVariant?: NotificationVariant;
+    count?: number;
+    component?: NavItemComponentType;
+    onClick?: (value: unknown) => void;
+    linkComponent?: React.ElementType;
+    active?: boolean;
+};
+export type NavItemProps = {
+    item: NavItemType;
+};
+declare const NavItem: React.FC<NavItemProps>;
+export default NavItem;
+//# sourceMappingURL=NavItem.d.ts.map

package/dist/components/NavItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../src/lib/components/NavItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,cAAc,EAAqB,MAAM,0BAA0B,CAAC;AAKlF,KAAK,mBAAmB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC9C,KAAK,oBAAoB,GAAG,QAAQ,GAAG,MAAM,CAAC;AA2D9C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAWF,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4DnC,CAAC;AAEF,eAAe,OAAO,CAAC"}