qaema-ui 0.0.1

package/dist/components/Filter.js

@@ -0,0 +1,252 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { useRef as C, useState as w, useEffect as L } from "react";
+import { FaFilter as R } from "../node_modules/react-icons/fa6/index.js";
+import c, { useTheme as A } from "styled-components";
+import { useQaemaCoreTranslation as z } from "../i18n/i18n.js";
+import { Scrollbar as I } from "../styles/Scrollbar.styles.js";
+import S from "./Button.js";
+import N from "./Radio.js";
+import O from "./Typography.js";
+const B = c.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: ${({ theme: n }) => `1px solid ${n.colors.grey.n100}`};
+  border-radius: ${({ theme: n }) => n.borderRadius.circle};
+  background-color: ${({ theme: n }) => n.colors.grey.n50};
+  box-shadow: 0px 0.86px 2.57px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: none;
+    background-color: ${({ theme: n }) => n.colors.grey.n100};
+  }
+`, D = c(I)`
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme: n }) => n.spacing.m} 0;
+  background-color: ${({ theme: n }) => n.colors.grey.n50};
+  border-radius: ${({ theme: n }) => n.borderRadius.lg};
+  box-shadow: ${({ theme: n }) => n.boxShadow.s5};
+  min-width: 16rem;
+  max-width: 23rem;
+  max-height: 35.25rem;
+  overflow-y: auto;
+`, Q = c.div`
+  width: 100%;
+  padding: ${({ theme: n }) => n.spacing.xs} ${({ theme: n }) => n.spacing.l};
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme: n }) => n.colors.grey.n100};
+  }
+`, U = c.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 0.625rem;
+  gap: ${({ theme: n }) => n.spacing.xs};
+`, H = c.span`
+  margin-left: 8px;
+  color: #666;
+  display: inline-flex;
+  align-items: center;
+`;
+c.label`
+  font-size: 14px;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+`;
+const F = c.input`
+  width: 100%;
+  height: 2rem;
+  border-radius: ${({ theme: n }) => n.borderRadius.lg};
+  padding: ${({ theme: n }) => n.spacing.s} ${({ theme: n }) => n.spacing.xs};
+  transition: all 0.2s ease;
+  box-shadow: ${({ theme: n }) => n.boxShadow.s3};
+  font-size: ${({ theme: n }) => n.typography.sizes.s3};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  border: none;
+  outline: 0;
+  margin-top: ${({ theme: n }) => n.spacing.xs};
+`, G = c.div``, P = c.button`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: none;
+  border: none;
+  padding: 0;
+  width: 100%;
+  outline: none;
+`, f = c(F).attrs({ type: "date" })``, V = c.select`
+  width: 100%;
+  padding: 6px 12px;
+  margin: 4px 0;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+`, M = c.div`
+  display: flex;
+  gap: ${({ theme: n }) => n.spacing.xs};
+`, W = {
+  text: [
+    { label: "EQUALS", value: "=" },
+    { label: "CONTAINS", value: "like" }
+  ],
+  number: [
+    { label: "EQUALS", value: "=" },
+    { label: "LESS_THAN", value: "<" },
+    { label: "GREATER_THAN", value: ">" }
+  ],
+  date: [
+    { label: "EQUALS", value: "=" },
+    { label: "BETWEEN", value: "between" },
+    { label: "BEFORE", value: "<" },
+    { label: "AFTER", value: ">" }
+  ],
+  select: [{ label: "EQUALS", value: "=" }]
+}, Y = ({ fields: n, onSelect: j, activeFilters: b = [] }) => {
+  const [v, m] = w(null), [i, g] = w({}), [d, u] = w({}), { t: p } = z(), l = A();
+  L(() => {
+    const e = {}, t = {};
+    b.forEach(({ fieldName: o, operator: a, value: y, value2: s }) => {
+      a && (e[o] = a), y && (t[o] = y), a === "between" && s && (t[`${o}_end`] = s);
+    }), g(e), u(t);
+  }, [b]);
+  const $ = (e) => {
+    m((t) => t === e ? null : e);
+  }, h = (e, t) => {
+    u((o) => {
+      const a = { ...o };
+      return delete a[e], delete a[`${e}_end`], a;
+    }), g((o) => ({ ...o, [e]: t }));
+  }, x = (e, t) => {
+    u((o) => ({ ...o, [e]: t }));
+  }, T = (e) => {
+    const t = i[e.accessor], o = d[e.accessor];
+    if (!t || !o) {
+      j({ fieldName: e.accessor });
+      return;
+    }
+    const a = {
+      fieldName: e.accessor,
+      operator: t,
+      value: o,
+      ...t === "between" && { value2: d[`${e.accessor}_end`] }
+    };
+    j(a);
+  }, E = (e) => b.some((t) => t.fieldName === e && t.value), k = (e) => {
+    u((t) => {
+      const o = { ...t };
+      return delete o[e], delete o[`${e}_end`], o;
+    }), u((t) => {
+      const o = { ...t };
+      return delete o[e], delete o[`${e}_end`], o;
+    }), m(null);
+  }, _ = (e) => {
+    var y;
+    const t = e.accessor, o = i[t], a = d[t] || "";
+    return e.type === "select" ? /* @__PURE__ */ r.jsxs(V, { value: a, onChange: (s) => x(t, s.target.value), children: [
+      /* @__PURE__ */ r.jsx("option", { value: "", children: p("LBL_SELECT") }),
+      (y = e.options) == null ? void 0 : y.map((s) => /* @__PURE__ */ r.jsx("option", { value: s.value, children: s.label }, s.value))
+    ] }) : e.type === "date" ? o === "between" ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+      /* @__PURE__ */ r.jsx(f, { value: a, onChange: (s) => x(t, s.target.value), placeholder: "Start date" }),
+      /* @__PURE__ */ r.jsx(
+        f,
+        {
+          value: d[`${t}_end`] || "",
+          onChange: (s) => x(`${t}_end`, s.target.value),
+          placeholder: "End date"
+        }
+      )
+    ] }) : /* @__PURE__ */ r.jsx(f, { value: a, onChange: (s) => x(t, s.target.value) }) : /* @__PURE__ */ r.jsx(
+      F,
+      {
+        placeholder: `${p("SEARCH")} ${e.header.toLowerCase()}...`,
+        value: a,
+        onChange: (s) => x(t, s.target.value)
+      }
+    );
+  };
+  return /* @__PURE__ */ r.jsx(D, { children: n == null ? void 0 : n.map((e) => {
+    var t;
+    return /* @__PURE__ */ r.jsxs(Q, { children: [
+      /* @__PURE__ */ r.jsxs(P, { onClick: () => $(e.accessor), children: [
+        /* @__PURE__ */ r.jsx(O, { variant: "smText", children: e.header }),
+        E(e.accessor) && /* @__PURE__ */ r.jsx(H, { children: /* @__PURE__ */ r.jsx(R, { size: 12 }) })
+      ] }),
+      v === e.accessor && /* @__PURE__ */ r.jsxs(U, { children: [
+        (t = W[e.type]) == null ? void 0 : t.map((o) => /* @__PURE__ */ r.jsxs(G, { children: [
+          /* @__PURE__ */ r.jsx(
+            N,
+            {
+              name: `operator-${e.accessor}`,
+              label: p(o.label),
+              value: o.value,
+              onChange: () => h(e.accessor, o.value),
+              $selected: i[e.accessor] === o.value,
+              $size: "sm"
+            }
+          ),
+          i[e.accessor] === o.value && _(e)
+        ] }, o.value)),
+        /* @__PURE__ */ r.jsxs(M, { children: [
+          /* @__PURE__ */ r.jsx(S, { size: "xs", onClick: () => T(e), style: { height: "2rem", borderRadius: l.borderRadius.sm }, children: p(E(e.accessor) ? "UPDATE" : "LBL_APPLY") }),
+          /* @__PURE__ */ r.jsx(S, { size: "xs", variant: "outline-primary", onClick: () => k(e.accessor), style: { height: "2rem" }, children: p("CANCEL") })
+        ] })
+      ] })
+    ] }, e.accessor);
+  }) });
+}, re = ({ fields: n, activeFilters: j = [], setActiveFilters: b }) => {
+  const v = A(), m = C(null), i = C(null), [g, d] = w(!1), u = () => {
+    d((l) => !l);
+  }, p = (l) => {
+    b(($) => {
+      const h = $.filter((x) => x.fieldName !== l.fieldName);
+      return l != null && l.value ? [...h, l] : h;
+    });
+  };
+  return L(() => {
+    const l = ($) => {
+      const h = $.target;
+      i.current && !i.current.contains(h) && m.current && !m.current.contains(h) && d(!1);
+    };
+    return g ? document.addEventListener("mousedown", l) : document.removeEventListener("mousedown", l), () => {
+      document.removeEventListener("mousedown", l);
+    };
+  }, [g]), /* @__PURE__ */ r.jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ r.jsx(B, { ref: m, onClick: u, children: /* @__PURE__ */ r.jsx(R, { color: v.colors.grey.n400, size: "1rem" }) }),
+    g && /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        ref: i,
+        style: {
+          position: "absolute",
+          top: "40px",
+          left: v.dir == "rtl" ? "unset" : 0,
+          right: v.dir == "rtl" ? 0 : "unset",
+          zIndex: 999
+        },
+        children: /* @__PURE__ */ r.jsx(Y, { fields: n, onSelect: p, activeFilters: j })
+      }
+    )
+  ] });
+};
+export {
+  M as ButtonGroup,
+  f as DateInput,
+  Q as DropdownItem,
+  D as DropdownList,
+  P as FieldHeader,
+  U as FieldOptions,
+  B as FilterButton,
+  H as FilterIcon,
+  G as RadioGroup,
+  F as SearchInput,
+  V as SelectInput,
+  re as default
+};

package/dist/components/FilterActiveBar.d.ts

@@ -0,0 +1,9 @@
+import { FilterData, FilterField } from './Filter';
+export type FilterActiveBarProps = {
+    fields: FilterField[];
+    activeFilters: FilterData[];
+    onRemove: (fieldName: string) => void;
+};
+declare const FilterActiveBar: ({ fields, activeFilters, onRemove }: FilterActiveBarProps) => import("react/jsx-runtime").JSX.Element;
+export default FilterActiveBar;
+//# sourceMappingURL=FilterActiveBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterActiveBar.d.ts","sourceRoot":"","sources":["../../src/lib/components/FilterActiveBar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAiBxD,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAIF,QAAA,MAAM,eAAe,GAAI,qCAAqC,oBAAoB,4CA8CjF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/FilterActiveBar.js

@@ -0,0 +1,41 @@
+import { j as n } from "../_virtual/jsx-runtime.js";
+import { useTranslation as f } from "react-i18next";
+import s from "styled-components";
+import x from "../hooks/useBadgeVariant.js";
+import v from "./Badge.js";
+import g from "./Typography.js";
+const j = s.div`
+  margin-bottom: ${({ theme: o }) => o.spacing.l};
+`, B = s.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`, S = ({ fields: o, activeFilters: i, onRemove: l }) => {
+  const { t: d } = f(), c = x("default"), m = (e) => {
+    l(e);
+  }, p = (e) => {
+    const r = o.find((t) => t.accessor === e.fieldName);
+    if (!r) return e.value;
+    const a = (t, u, h) => /* @__PURE__ */ n.jsxs(g, { variant: "span", color: c.color, children: [
+      t,
+      " ",
+      /* @__PURE__ */ n.jsx("strong", { children: d(h) }),
+      " ",
+      u
+    ] });
+    switch (e.operator) {
+      case "=":
+        return a(r.header, e.value, "LBL_IS");
+      case "like":
+        return a(r.header, e.value, "CONTAINS");
+      case "between":
+        return a(r.header, e.value, "BETWEEN");
+      default:
+        return a(r.header, e.value, "LBL_IS");
+    }
+  };
+  return /* @__PURE__ */ n.jsx(j, { children: /* @__PURE__ */ n.jsx(B, { children: i.map((e) => o.find((a) => a.accessor === e.fieldName) ? /* @__PURE__ */ n.jsx(v, { onClose: () => m(e.fieldName), children: p(e) }, e.fieldName) : null) }) });
+};
+export {
+  S as default
+};

package/dist/components/Header.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode, default as React } from 'react';
+import { NavItemType } from './NavItem';
+export type HeaderProps = {
+    setOpen: (value: boolean) => void;
+    profileImg: string;
+    title: string;
+    subTitle?: string;
+    navItems?: {
+        upSection: Array<NavItemType>;
+        downSection?: Array<NavItemType>;
+    };
+    leftComponent?: ReactNode;
+};
+declare const Header: React.FC<HeaderProps>;
+export default Header;
+//# sourceMappingURL=Header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/lib/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAC5F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAgB,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAGtD,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE;QAAE,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;QAAC,WAAW,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAA;KAAE,CAAC;IAC/E,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B,CAAC;AA+KF,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+FjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Header.js

@@ -0,0 +1,198 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { useState as $, useRef as w, useEffect as b } from "react";
+import { FaAngleDown as W } from "../node_modules/react-icons/fa6/index.js";
+import { RxHamburgerMenu as H } from "../node_modules/react-icons/rx/index.js";
+import t, { useTheme as z } from "styled-components";
+import { device as s } from "../constants/breakPoints.constant.js";
+import A from "../hooks/useBreakpointCheck.js";
+import B from "../hooks/useZIndex.js";
+import j from "./NavItem.js";
+import S from "./Typography.js";
+import Z from "../node_modules/react-bootstrap/esm/Image.js";
+import F from "../node_modules/react-bootstrap/esm/Dropdown.js";
+import k from "../node_modules/react-bootstrap/esm/Navbar.js";
+import O from "../node_modules/react-bootstrap/esm/Button.js";
+import P from "../node_modules/react-bootstrap/esm/DropdownToggle.js";
+import q from "../node_modules/react-bootstrap/esm/DropdownMenu.js";
+const G = t(k)`
+  position: sticky;
+  top: 0;
+  z-index: ${({ $zIndex: e }) => e};
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: ${({ theme: e }) => `0.875rem ${e.spacing.xl}`};
+  border-bottom: ${({ theme: e }) => `1px solid ${e.colors.grey.n150}`};
+  height: 5.25rem;
+
+  .toggle {
+    display: none;
+  }
+  ${({ theme: e }) => e.dir === "rtl" ? `
+      margin-left: 0 !important;
+      margin-right: 20rem;
+    ` : "margin-left: 20rem;margin-right: 0 !important;"}
+
+  @media  ${s.tablet} {
+    padding: ${({ theme: e }) => e.spacing.xxs};
+    margin-left: 0;
+    .profile {
+      display: none;
+    }
+    .toggle {
+      display: block;
+    }
+    ${({ theme: e }) => e.dir === "rtl" ? "margin-right: 0 !important;" : ""}
+  }
+`, J = t.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.625rem;
+
+  .toggle {
+    display: none;
+  }
+
+  @media ${s.tablet} {
+    .toggle {
+      display: block;
+      height: 100%;
+      border: none;
+      background-color: transparent;
+    }
+  }
+`, K = t(k.Collapse)`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.m};
+  @media ${s.mobile} {
+    gap: unset;
+  }
+`, Q = t.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme: e }) => e.spacing.s};
+  padding: ${({ theme: e }) => `${e.spacing.xs} ${e.spacing.sm}`};
+  @media ${s.mobile} {
+    gap: unset;
+  }
+`, U = t(P)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.33rem;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: start;
+  cursor: pointer;
+  svg {
+    color: ${({ theme: e }) => e.colors.primary.purple.n500};
+  }
+  &:focus-visible {
+    outline: none;
+  }
+`, V = t.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme: e }) => e.spacing.s};
+`, X = t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  p {
+    margin: 0;
+  }
+`, Y = t.div`
+  width: ${({ theme: e }) => e.spacing.xl};
+  height: ${({ theme: e }) => e.spacing.xl};
+  border: 1px solid transparent;
+  border-radius: 50%;
+  overflow: hidden;
+`, _ = t(q)`
+  position: absolute;
+  transform: ${({ theme: e }) => e.dir === "ltr" ? "translate3d(-3rem, 0rem, 0rem)" : "translate3d(3rem, 0rem, 0rem)"};
+  margin-top: 2.05rem;
+  background-color: ${({ theme: e }) => e.colors.grey.n50};
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.sm};
+  padding: ${({ theme: e }) => `${e.spacing.sm} ${e.spacing.xs}`};
+  box-shadow: ${({ theme: e }) => e.boxShadow.s5};
+
+  .separator {
+    height: 0.1rem;
+    background-color: ${({ theme: e }) => e.colors.grey.n150};
+  }
+
+  ${({ theme: e }) => e.dir === "rtl" ? ` @media  ${s.tablet}  {
+      left: 1rem !important;  
+      margin-top: ${e.spacing.s};
+      transform:none;
+    }` : `@media  ${s.tablet}  {
+      right: 1rem;
+      margin-top: ${e.spacing.s};
+      transform:none;
+  }`}
+`, v = t.div`
+  display: flex;
+  flex-direction: column;
+`, I = t(O)`
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+`, ee = t.div`
+  border: none;
+  background-color: transparent;
+  padding: ${({ theme: e }) => e.spacing.s};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`, he = (e) => {
+  var f, u, x, h;
+  const { setOpen: g, profileImg: T, title: D, subTitle: C, navItems: o, leftComponent: L } = e, [i, m] = $(!1), a = z(), l = w(null), c = w(null), [M, N] = $(0), E = B("header"), R = A(), p = () => {
+    var n, d;
+    (n = l == null ? void 0 : l.current) != null && n.offsetWidth && c.current && N(((d = l.current) == null ? void 0 : d.offsetWidth) / 16);
+  };
+  return b(() => (i && (p(), window.addEventListener("resize", p)), () => window.removeEventListener("resize", p)), [i]), b(() => {
+    const n = (d) => {
+      var y;
+      (y = c.current) != null && y.contains(d.target) && m(!1);
+    };
+    return i && document.addEventListener("click", n), () => {
+      document.removeEventListener("click", n);
+    };
+  }, [i]), /* @__PURE__ */ r.jsxs(G, { dir: a.dir, $zIndex: E, children: [
+    /* @__PURE__ */ r.jsxs(J, { children: [
+      R && /* @__PURE__ */ r.jsx(I, { onClick: () => g(!0), children: /* @__PURE__ */ r.jsx(H, { color: a.colors.primary.purple.n500 }) }),
+      L
+    ] }),
+    /* @__PURE__ */ r.jsx(K, { children: /* @__PURE__ */ r.jsxs(Q, { children: [
+      /* @__PURE__ */ r.jsx(Y, { children: /* @__PURE__ */ r.jsx(Z, { src: T, width: "100%", height: "100%" }) }),
+      /* @__PURE__ */ r.jsxs(F, { show: i, onToggle: () => m(!i), autoClose: !0, children: [
+        /* @__PURE__ */ r.jsxs(U, { ref: l, children: [
+          /* @__PURE__ */ r.jsx(V, { className: "profile", children: /* @__PURE__ */ r.jsxs(X, { children: [
+            /* @__PURE__ */ r.jsx(S, { variant: "smText", children: D }),
+            /* @__PURE__ */ r.jsx(S, { variant: "xsText", color: a.colors.grey.n300, children: C })
+          ] }) }),
+          /* @__PURE__ */ r.jsx(ee, { children: /* @__PURE__ */ r.jsx(W, {}) })
+        ] }),
+        i && (o == null ? void 0 : o.upSection) && ((f = o == null ? void 0 : o.upSection) == null ? void 0 : f.length) > 0 && /* @__PURE__ */ r.jsxs(_, { show: i, ref: c, $menuWidth: M, children: [
+          /* @__PURE__ */ r.jsx(v, { children: (u = o == null ? void 0 : o.upSection) == null ? void 0 : u.map((n) => /* @__PURE__ */ r.jsx(j, { item: n }, n == null ? void 0 : n.code)) }),
+          /* @__PURE__ */ r.jsx("div", { className: "separator" }),
+          (o == null ? void 0 : o.downSection) && ((x = o == null ? void 0 : o.downSection) == null ? void 0 : x.length) > 0 && /* @__PURE__ */ r.jsx(v, { children: (h = o == null ? void 0 : o.downSection) == null ? void 0 : h.map((n) => /* @__PURE__ */ r.jsx(j, { item: n }, n == null ? void 0 : n.code)) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  he as default
+};

package/dist/components/HelpCard.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export type HelpCardProps = {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    actionLabel: string;
+    actionHref?: string;
+    onActionClick?: () => void;
+    actionAriaLabel?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    className?: string;
+};
+export declare const HelpCardGroup: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    min?: number;
+    gap?: number;
+}>> & string;
+declare const HelpCard: React.FC<HelpCardProps>;
+export default HelpCard;
+//# sourceMappingURL=HelpCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpCard.d.ts","sourceRoot":"","sources":["../../src/lib/components/HelpCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsGF,eAAO,MAAM,aAAa;UAAsB,MAAM;UAAQ,MAAM;YAMnE,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoCrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/HelpCard.js

@@ -0,0 +1,140 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { LuArrowUpRight as p } from "../node_modules/react-icons/lu/index.js";
+import o from "styled-components";
+const x = o.section`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  width: 100%;
+  min-width: 0;
+  min-height: 10.25rem;
+  box-sizing: border-box;
+  padding: ${({ theme: e }) => e.spacing.sm};
+  border-radius: ${({ theme: e }) => e.borderRadius.md};
+  background: ${({ theme: e }) => e.colors.grey.n50};
+  box-shadow:
+    0px 1px 2px 0px #0000000f,
+    0px 1px 3px 0px #0000001a;
+`, m = o.div`
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid ${({ theme: e }) => e.colors.grey.n250};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: ${({ theme: e }) => e.colors.primary.purple.n450};
+  }
+`, y = o.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.xxs};
+  flex: 1 1 auto;
+  min-height: 0;
+`, u = o.div`
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  font-size: ${({ theme: e }) => e.typography.sizes.s5};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+  letter-spacing: -0.25px;
+  color: ${({ theme: e }) => e.colors.grey.n800};
+`, $ = o.p`
+  margin: 0;
+  color: ${({ theme: e }) => e.colors.grey.n400};
+  font-size: ${({ theme: e }) => {
+  var i;
+  return (i = e.typography.sizes) == null ? void 0 : i.s4;
+}};
+  line-height: ${({ theme: e }) => {
+  var i;
+  return (i = e.typography.lineHeights) == null ? void 0 : i.m;
+}};
+`, f = o.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: auto;
+  height: 2rem;
+`, b = o.a`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  font-size: ${({ theme: e }) => {
+  var i;
+  return (i = e.typography.sizes) == null ? void 0 : i.s4;
+}};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  color: ${({ theme: e }) => e.colors.primary.purple.n450};
+  text-decoration: none;
+  border: none;
+  outline: none;
+  &:hover {
+    text-decoration: underline;
+  }
+`, j = o.button`
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  font-size: ${({ theme: e }) => {
+  var i;
+  return (i = e.typography.sizes) == null ? void 0 : i.s4;
+}};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  color: ${({ theme: e }) => e.colors.primary.purple.n450};
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled) {
+    text-decoration: underline;
+  }
+`, C = o.div`
+  display: grid;
+  grid-template-columns: ${({ min: e = 221.6667 }) => `repeat(auto-fill, minmax(${e}px, max-content))`};
+  gap: ${({ gap: e = 8 }) => `${e}px`};
+  justify-content: start;
+  align-items: stretch;
+`, H = ({
+  icon: e,
+  title: i,
+  description: n,
+  actionLabel: t,
+  actionHref: s,
+  onActionClick: d,
+  actionAriaLabel: c,
+  disabled: a,
+  isLoading: g,
+  className: h
+}) => {
+  const l = c ?? t;
+  return /* @__PURE__ */ r.jsxs(x, { className: h, role: "group", "aria-label": `${i} card`, children: [
+    e && /* @__PURE__ */ r.jsx(m, { children: e }),
+    /* @__PURE__ */ r.jsxs(y, { children: [
+      /* @__PURE__ */ r.jsx(u, { children: i }),
+      n && /* @__PURE__ */ r.jsx($, { children: n })
+    ] }),
+    /* @__PURE__ */ r.jsx(f, { children: s ? /* @__PURE__ */ r.jsxs(b, { href: a ? void 0 : s, "aria-label": l, children: [
+      t,
+      " ",
+      /* @__PURE__ */ r.jsx(p, { "aria-hidden": !0 })
+    ] }) : /* @__PURE__ */ r.jsxs(j, { onClick: d, "aria-label": l, disabled: a || g, children: [
+      t,
+      " ",
+      /* @__PURE__ */ r.jsx(p, { "aria-hidden": !0 })
+    ] }) })
+  ] });
+};
+export {
+  C as HelpCardGroup,
+  H as default
+};