qaema-ui 0.0.1

package/dist/components/QuickActionItem.js

@@ -0,0 +1,112 @@
+import { j as i } from "../_virtual/jsx-runtime.js";
+import "react";
+import { RxDragHandleHorizontal as g } from "../node_modules/react-icons/rx/index.js";
+import r from "styled-components";
+import h from "./Link.js";
+const m = r.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.m};
+`, x = r.section``, y = r.h4`
+  margin: 0 0 1rem 0;
+  font-weight: ${({ theme: e }) => e.typography.weights.regular};
+  font-size: ${({ theme: e }) => e.typography.sizes.s3};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
+  color: ${({ theme: e }) => `${e.colors.grey.n800}80`};
+`, u = r.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.m};
+`, f = r.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 3.25rem;
+  padding: 0 ${({ theme: e }) => e.spacing.sm};
+  border: ${({ theme: e }) => `1px solid ${e.colors.grey.n150}`};
+  border: 2px solid ${({ theme: e }) => e.colors.grey.n100};
+  border-radius: ${({ theme: e }) => e.borderRadius.md};
+
+  background-color: ${({ theme: e }) => e.colors.grey.n50};
+
+  transition:
+    box-shadow 0.15s ease,
+    border-color 0.15s ease;
+
+  ${({ asButton: e }) => e && `
+      cursor: pointer;
+      &:hover {
+        box-shadow: 0 1px 6px rgba(16, 24, 40, 0.06);
+        border-color: rgba(16, 24, 40, 0.12);
+      }
+      &:active {
+        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) inset;
+      }
+    `}
+`, $ = r.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.s};
+`, b = r.span`
+  display: inline-flex;
+  font-size: ${({ theme: e }) => e.typography.sizes.s6};
+  color: ${({ theme: e }) => e.colors.primary.purple.n450};
+`, j = r.div`
+  color: ${({ theme: e }) => e.colors.grey.n625};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  font-size: ${({ theme: e }) => e.typography.sizes.s2};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
+`, v = r.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: ${({ theme: e }) => e.borderRadius.sm};
+
+  svg {
+    width: 1.5rem;
+    height: 1.875rem;
+    color: ${({ theme: e }) => e.colors.primary.purple.n450};
+  }
+`, w = r.div`
+  display: contents;
+`, z = ({
+  disabled: e,
+  title: n,
+  leftIcon: o,
+  rightAdornment: c,
+  linkProps: s,
+  onClick: t,
+  className: p,
+  draggable: d
+}) => {
+  const l = !e && (!!s || !!t), a = /* @__PURE__ */ i.jsxs(
+    f,
+    {
+      className: p,
+      disabled: e,
+      asButton: l,
+      role: l ? "button" : void 0,
+      "aria-disabled": e || void 0,
+      onClick: e ? void 0 : t,
+      draggable: d,
+      children: [
+        /* @__PURE__ */ i.jsxs($, { children: [
+          o && /* @__PURE__ */ i.jsx(b, { children: o }),
+          /* @__PURE__ */ i.jsx(j, { children: n })
+        ] }),
+        /* @__PURE__ */ i.jsx(v, { children: c ?? /* @__PURE__ */ i.jsx(g, {}) })
+      ]
+    }
+  );
+  return !e && s ? /* @__PURE__ */ i.jsx(w, { children: /* @__PURE__ */ i.jsx(h, { ...s, children: a }) }) : a;
+}, B = ({ sections: e, className: n }) => /* @__PURE__ */ i.jsx(m, { className: n, children: e.map((o, c) => {
+  const s = typeof o.maxVisible == "number" ? o.items.slice(0, o.maxVisible) : o.items;
+  return /* @__PURE__ */ i.jsxs(x, { children: [
+    o.title && /* @__PURE__ */ i.jsx(y, { children: o.title }),
+    /* @__PURE__ */ i.jsx(u, { children: s.map((t) => /* @__PURE__ */ i.jsx(z, { ...t }, t.id)) })
+  ] }, c);
+}) });
+export {
+  B as default
+};

package/dist/components/QuickStartCard.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { BadgeProps } from './Badge';
+import { ButtonProps } from './Button';
+import { LinkProps } from './Link';
+export type QuickStartCardProps = {
+    disabled?: boolean;
+    title: string;
+    description: string;
+    checked: boolean;
+    linkProps?: LinkProps;
+    badgeProps?: BadgeProps;
+    btnLabel?: string;
+    btnProps?: ButtonProps;
+};
+declare const QuickStartCard: React.FC<QuickStartCardProps>;
+export default QuickStartCard;
+//# sourceMappingURL=QuickStartCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickStartCard.d.ts","sourceRoot":"","sources":["../../src/lib/components/QuickStartCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,WAAW,CAAC;CACxB,CAAC;AAqDF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4BjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/QuickStartCard.js

@@ -0,0 +1,70 @@
+import { j as o } from "../_virtual/jsx-runtime.js";
+import "react";
+import { FaRegCircle as a } from "../node_modules/react-icons/fa/index.js";
+import { RiCheckboxCircleLine as d } from "../node_modules/react-icons/ri/index.js";
+import r, { css as x } from "styled-components";
+import y from "./Badge.js";
+import g from "./Button.js";
+import m from "./Link.js";
+const f = r.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: ${({ theme: s }) => `2px solid ${s.colors.grey.n100}`};
+  border-radius: ${({ theme: s }) => s.borderRadius.md};
+  padding: ${({ theme: s }) => s.spacing.sm};
+  transition: box-shadow 0.2s ease;
+
+  ${({ disabled: s }) => s && x`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+`, h = r.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: s }) => s.spacing.s};
+`, u = r.div`
+  font-size: ${({ theme: s }) => s.typography.sizes.s8};
+  color: ${({ theme: s, checked: i }) => i ? s.colors.state.success.n450 : s.colors.primary.purple.n500};
+`, $ = r.div`
+  display: flex;
+  flex-direction: column;
+`, j = r.div`
+  font-weight: ${({ theme: s }) => s.typography.weights.bold};
+  font-size: ${({ theme: s }) => s.typography.sizes.s4};
+  color: ${({ theme: s }) => s.colors.grey.n650};
+`, z = r.div`
+  font-size: ${({ theme: s }) => s.typography.sizes.s3};
+  color: ${({ theme: s }) => s.colors.grey.n400};
+`, v = r.div`
+  color: ${({ theme: s }) => s.colors.primary.purple.n500};
+  font-weight: ${({ theme: s }) => s.typography.weights.regular};
+  font-size: ${({ theme: s }) => s.typography.sizes.s3};
+  cursor: pointer;
+`, D = ({
+  disabled: s = !1,
+  title: i,
+  description: l,
+  checked: e,
+  linkProps: t,
+  badgeProps: n,
+  btnProps: c,
+  btnLabel: p
+}) => /* @__PURE__ */ o.jsxs(f, { disabled: s, children: [
+  /* @__PURE__ */ o.jsxs(h, { children: [
+    /* @__PURE__ */ o.jsx(u, { checked: e, children: e ? /* @__PURE__ */ o.jsx(d, {}) : /* @__PURE__ */ o.jsx(a, {}) }),
+    /* @__PURE__ */ o.jsxs($, { children: [
+      /* @__PURE__ */ o.jsx(j, { children: i }),
+      /* @__PURE__ */ o.jsx(z, { children: l })
+    ] }),
+    n && /* @__PURE__ */ o.jsx(y, { ...n })
+  ] }),
+  t && /* @__PURE__ */ o.jsx(v, { children: /* @__PURE__ */ o.jsx(m, { ...t }) }),
+  c && /* @__PURE__ */ o.jsxs(g, { ...c, children: [
+    p ?? "",
+    " "
+  ] })
+] });
+export {
+  D as default
+};

package/dist/components/Radio.d.ts

@@ -0,0 +1,15 @@
+export type RadioButtonProps = {
+    label?: string;
+    name: string;
+    value: string | number;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    showInfo?: boolean;
+    $variant?: 'primary' | 'hover' | 'pressed' | 'disabled' | 'grey';
+    $size?: 'sm' | 'md' | 'lg';
+    $selected?: boolean;
+    $disabled?: boolean;
+    optional?: boolean;
+};
+declare const RadioButton: ({ name, label, value, showInfo, $variant, $size, $selected, $disabled, onChange, optional, }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioButton;
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/lib/components/Radio.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACjE,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAsGF,QAAA,MAAM,WAAW,GAAI,8FAWlB,gBAAgB,4CAgBlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/Radio.js

@@ -0,0 +1,111 @@
+import { j as o } from "../_virtual/jsx-runtime.js";
+import { CiSquareInfo as f } from "../node_modules/react-icons/ci/index.js";
+import n from "styled-components";
+import { useQaemaCoreTranslation as h } from "../i18n/i18n.js";
+import { Optional as g } from "./InputField.js";
+import x from "./Typography.js";
+const c = (r) => {
+  switch (r) {
+    case "sm":
+      return "1rem";
+    case "lg":
+      return "1.5rem";
+    default:
+      return "1.25rem";
+  }
+}, y = (r, e, t) => {
+  if (t) return "#8A94A1";
+  switch (e) {
+    case "hover":
+      return "#7259FF";
+    case "pressed":
+      return "#4735AC";
+    case "grey":
+      return r.colors.grey.n350;
+    default:
+      return "#7259FF";
+  }
+}, b = (r, e, t) => {
+  if (!t) return "transparent";
+  switch (e) {
+    case "hover":
+      return "#D5CDFF";
+    case "pressed":
+      return "#271B6E";
+    case "grey":
+      return r.colors.grey.n350;
+    case "primary":
+    default:
+      return "#4735AC";
+  }
+}, j = n.label`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme: r }) => r.spacing.s};
+  align-items: center;
+  cursor: pointer;
+`, w = n(x)`
+  color: ${({ $variant: r }) => r === "grey" ? "#8A94A1" : "inherit"};
+`, C = n.div`
+  width: 1.625rem;
+  height: 1.625rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, A = n.input.attrs({ type: "radio" })`
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+`, v = n.div`
+  width: ${({ $size: r }) => c(r)};
+  height: ${({ $size: r }) => c(r)};
+  background-color: white;
+  border: 2px solid ${({ theme: r, $variant: e, $disabled: t }) => y(r, e, t)};
+  border-radius: 50%;
+  position: relative;
+  transition: all 0.2s ease-in-out;
+  cursor: ${({ $disabled: r }) => r ? "not-allowed" : "pointer"};
+
+  &::before {
+    content: '';
+    display: block;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 50%;
+    background-color: ${({ theme: r, $variant: e, $selected: t }) => b(r, e, t)};
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`, $ = ({
+  name: r,
+  label: e,
+  value: t,
+  showInfo: l,
+  $variant: s,
+  $size: d,
+  $selected: i,
+  $disabled: a,
+  onChange: p,
+  optional: u = !1
+}) => {
+  const { t: m } = h();
+  return /* @__PURE__ */ o.jsxs(j, { children: [
+    /* @__PURE__ */ o.jsx(A, { name: r, value: t, checked: i, disabled: a, onChange: p }),
+    /* @__PURE__ */ o.jsx(v, { $variant: s, $size: d, $selected: i, $disabled: a }),
+    /* @__PURE__ */ o.jsxs(w, { variant: "smText", component: "span", $variant: s, children: [
+      e,
+      " ",
+      u && /* @__PURE__ */ o.jsxs(g, { children: [
+        " ",
+        m("OPTIONAL")
+      ] })
+    ] }),
+    l && /* @__PURE__ */ o.jsx(C, { children: /* @__PURE__ */ o.jsx(f, { size: 12, color: "#6C7481" }) })
+  ] });
+};
+export {
+  $ as default
+};

package/dist/components/RadioInput.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+type RadioInputOption = {
+    label: string;
+    value: string | number;
+};
+type BadgeConfig = {
+    label?: string;
+    showIcon?: boolean;
+    showFor?: string | number | ((opt: RadioInputOption) => boolean);
+    variant?: 'purple';
+};
+export type RadioInputProps = {
+    name: string;
+    label?: string;
+    options: Array<RadioInputOption>;
+    value: string | number;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    optional?: boolean;
+    error?: string;
+    badge?: BadgeConfig;
+};
+declare const RadioInput: React.FC<RadioInputProps>;
+export default RadioInput;
+//# sourceMappingURL=RadioInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../src/lib/components/RadioInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AACF,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,gBAAgB,KAAK,OAAO,CAAC,CAAC;IACjE,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAQF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,CAAC;AA+CF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgDzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/RadioInput.js

@@ -0,0 +1,89 @@
+import { j as l } from "../_virtual/jsx-runtime.js";
+import { TbSparkles as y } from "../node_modules/react-icons/tb/index.js";
+import o from "styled-components";
+import { useQaemaCoreTranslation as m } from "../i18n/i18n.js";
+import w from "./Hint.js";
+import { Optional as $ } from "./InputField.js";
+import j from "./Radio.js";
+const b = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+`, v = o.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: ${({ theme: e }) => e.spacing.xs};
+`, F = o.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};
+  }
+`, z = o.span`
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  gap: 8px;
+  border-radius: 4px;
+  background: ${({ theme: e }) => {
+  var n, i, s;
+  return ((s = (i = (n = e.colors) == null ? void 0 : n.primary) == null ? void 0 : i.purple) == null ? void 0 : s.n100) || "#F1EEFF";
+}};
+  color: ${({ theme: e }) => {
+  var n, i, s;
+  return ((s = (i = (n = e.colors) == null ? void 0 : n.primary) == null ? void 0 : i.purple) == null ? void 0 : s.n450) || "#7259FF";
+}};
+  font-size: ${({ theme: e }) => e.typography.sizes.s2 || "10px"};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+  font-weight: 400;
+`, R = o(y)`
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+`, E = (e) => {
+  const { name: n, label: i = "", options: s, value: p, disabled: h, optional: c = !1, onChange: g, error: a, badge: r } = e, { t: d } = m();
+  if (!(s != null && s.length)) return null;
+  const x = (t) => r != null && r.showFor ? typeof r.showFor == "function" ? !!r.showFor(t) : r.showFor === t.value : !1, f = (r == null ? void 0 : r.label) ?? "Recommended";
+  return /* @__PURE__ */ l.jsxs(v, { children: [
+    i && /* @__PURE__ */ l.jsxs(F, { children: [
+      /* @__PURE__ */ l.jsx("label", { children: i }),
+      c && /* @__PURE__ */ l.jsx($, { children: d("OPTIONAL") })
+    ] }),
+    s.map((t) => {
+      const u = x(t);
+      return /* @__PURE__ */ l.jsxs(b, { children: [
+        /* @__PURE__ */ l.jsx(
+          j,
+          {
+            name: n,
+            label: t.label,
+            value: t.value,
+            $selected: p === (t == null ? void 0 : t.value),
+            onChange: g,
+            $disabled: h
+          }
+        ),
+        u && /* @__PURE__ */ l.jsxs(z, { children: [
+          (r == null ? void 0 : r.showIcon) !== !1 && /* @__PURE__ */ l.jsx(R, {}),
+          f
+        ] })
+      ] }, t.value);
+    }),
+    a && /* @__PURE__ */ l.jsx(w, { variant: "error", title: a })
+  ] });
+};
+export {
+  E as default
+};

package/dist/components/ReconciliationGroups.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+type TableConfig = {
+    titleRef: string;
+    titleAmount: string;
+    titleActions?: string;
+    rows?: TableRowData[];
+};
+type TableRowData = {
+    id: string | number;
+    ref: string;
+    subRef?: string;
+    amount?: React.ReactNode | string;
+    action?: React.ReactNode | string;
+};
+export type RecoGroup = {
+    id: string | number;
+    title: string;
+    totalDebitLabel?: string;
+    totalCreditLabel?: string;
+    totalDebit?: string;
+    totalCredit?: string;
+    leftTable: TableConfig;
+    rightTable: TableConfig;
+    defaultExpanded?: boolean;
+};
+export type ReconciliationGroupsProps = {
+    groups: RecoGroup[];
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const ReconciliationGroups: React.FC<ReconciliationGroupsProps>;
+export default ReconciliationGroups;
+export type { TableConfig };
+//# sourceMappingURL=ReconciliationGroups.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReconciliationGroups.d.ts","sourceRoot":"","sources":["../../src/lib/components/ReconciliationGroups.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;CACvB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAClC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,WAAW,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AA0NF,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAwC7D,CAAC;AAEF,eAAe,oBAAoB,CAAC;AACpC,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ReconciliationGroups.js

@@ -0,0 +1,191 @@
+import { j as t } from "../_virtual/jsx-runtime.js";
+import { useMemo as y, useState as f } from "react";
+import { FiChevronDown as j, FiChevronRight as u, FiFolder as $ } from "../node_modules/react-icons/fi/index.js";
+import i from "styled-components";
+import { device as g } from "../constants/breakPoints.constant.js";
+const w = i.div`
+  width: 100%;
+  background: ${({ theme: e }) => e.colors.grey.n50};
+  border: 1px solid ${({ theme: e }) => e.colors.grey.n150};
+  border-radius: ${({ theme: e }) => e.borderRadius.lg};
+  overflow: hidden;
+`, v = i.div`
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.l};
+  padding: 0.75rem 1rem;
+  background: ${({ theme: e }) => e.colors.primary.green.n100};
+  border-top: 1px solid ${({ theme: e }) => e.colors.grey.n150};
+  border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n150};
+
+  @media ${g.tablet} {
+    grid-template-columns: 1fr;
+    row-gap: ${({ theme: e }) => e.spacing.s};
+    text-align: center;
+  }
+`, T = i.button`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: ${({ theme: e }) => e.typography.sizes.s4};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.s};
+  letter-spacing: -0.0025em;
+  color: ${({ theme: e }) => e.colors.grey.n500};
+`, R = i.div`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xl};
+  width: 100%;
+  @media ${g.tablet} {
+    justify-content: center;
+    gap: ${({ theme: e }) => e.spacing.s};
+    flex-wrap: wrap;
+  }
+`, c = i.div`
+  display: inline-flex;
+  gap: ${({ theme: e }) => e.spacing.s};
+  align-items: center;
+  font-weight: ${({ theme: e }) => e.typography.weights.bold};
+  color: ${({ theme: e }) => e.colors.grey.n800};
+  white-space: nowrap;
+`, C = i.div`
+  overflow: hidden;
+  transition: max-height 0.25s ease;
+  ${({ $expanded: e }) => e ? "max-height: 2000px;" : "max-height: 0;"}
+`, k = i.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: ${({ theme: e }) => e.spacing.xl};
+  padding: 1rem 1.25rem 1.25rem;
+  @media (max-width: 992px) {
+    grid-template-columns: 1fr;
+    gap: ${({ theme: e }) => e.spacing.s};
+  }
+`, z = i.div`
+  background: ${({ theme: e }) => e.colors.grey.n50};
+  border: 0;
+  border-radius: 0;
+  overflow: visible;
+`, B = i.div`
+  width: 100%;
+  overflow-x: visible;
+`, D = i.table`
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+`, H = i.thead`
+  background: ${({ theme: e }) => e.colors.grey.n50};
+  color: ${({ theme: e }) => e.colors.grey.n650};
+`, G = i.tr`
+  border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n150};
+`, a = i.th`
+  text-align: left;
+  padding: 0.75rem 1rem;
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  font-size: ${({ theme: e }) => e.typography.sizes.s3};
+  white-space: nowrap;
+
+  &:first-child {
+    width: 60%;
+  }
+  &:nth-child(2) {
+    width: 25%;
+  }
+  &:nth-child(3) {
+    width: 15%;
+  }
+`, L = i.tbody``, p = i.tr`
+  border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n150};
+  background: ${({ theme: e }) => e.colors.grey.n50};
+  height: 3.5rem;
+`, s = i.td`
+  padding: 0.75rem 1rem;
+  vertical-align: middle;
+`, S = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+
+  .sub {
+    color: ${({ theme: e }) => e.colors.grey.n350};
+    font-weight: ${({ theme: e }) => e.typography.weights.regular};
+    font-size: ${({ theme: e }) => e.typography.sizes.s3};
+    line-height: ${({ theme: e }) => e.typography.lineHeights.xxs};
+  }
+`, A = i.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  font-weight: ${({ theme: e }) => e.typography.weights.bold};
+`, E = i.div`
+  display: flex;
+  align-items: center;
+
+  button,
+  a {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    font-weight: ${({ theme: e }) => e.typography.weights.bold};
+    color: ${({ theme: e }) => e.colors.state.error.n400};
+    cursor: pointer;
+  }
+`, h = ({ tableConfig: e }) => {
+  var n;
+  return /* @__PURE__ */ t.jsx(z, { children: /* @__PURE__ */ t.jsx(B, { children: /* @__PURE__ */ t.jsxs(D, { role: "table", children: [
+    /* @__PURE__ */ t.jsx(H, { children: /* @__PURE__ */ t.jsxs(G, { children: [
+      /* @__PURE__ */ t.jsx(a, { scope: "col", children: e.titleRef }),
+      /* @__PURE__ */ t.jsx(a, { scope: "col", children: e.titleAmount }),
+      /* @__PURE__ */ t.jsx(a, { scope: "col", children: e.titleActions ?? "" })
+    ] }) }),
+    /* @__PURE__ */ t.jsx(L, { children: (n = e.rows) != null && n.length ? e.rows.map((o) => /* @__PURE__ */ t.jsxs(p, { role: "row", children: [
+      /* @__PURE__ */ t.jsx(s, { role: "cell", children: /* @__PURE__ */ t.jsxs(S, { children: [
+        /* @__PURE__ */ t.jsx("div", { children: o.ref }),
+        o.subRef && /* @__PURE__ */ t.jsx("div", { className: "sub", children: o.subRef })
+      ] }) }),
+      /* @__PURE__ */ t.jsx(s, { role: "cell", children: /* @__PURE__ */ t.jsx(A, { children: o.amount ?? "" }) }),
+      /* @__PURE__ */ t.jsx(s, { role: "cell", children: /* @__PURE__ */ t.jsx(E, { children: o.action ?? "" }) })
+    ] }, o.id)) : /* @__PURE__ */ t.jsx(p, { children: /* @__PURE__ */ t.jsx(s, { colSpan: 3 }) }) })
+  ] }) }) });
+}, q = ({ groups: e, className: n, style: o }) => {
+  const x = y(() => Object.fromEntries(e.map((r) => [r.id, !!r.defaultExpanded])), [e]), [m, b] = f(x);
+  return /* @__PURE__ */ t.jsx(w, { className: n, style: o, children: e.map((r) => {
+    const l = !!m[r.id];
+    return /* @__PURE__ */ t.jsxs("div", { children: [
+      /* @__PURE__ */ t.jsxs(v, { children: [
+        /* @__PURE__ */ t.jsxs(T, { onClick: () => b((d) => ({ ...d, [r.id]: !d[r.id] })), "aria-expanded": l, children: [
+          l ? /* @__PURE__ */ t.jsx(j, {}) : /* @__PURE__ */ t.jsx(u, {}),
+          /* @__PURE__ */ t.jsx($, {}),
+          r.title
+        ] }),
+        /* @__PURE__ */ t.jsxs(R, { children: [
+          /* @__PURE__ */ t.jsxs(c, { children: [
+            r.totalDebitLabel && /* @__PURE__ */ t.jsx("span", { children: r.totalDebitLabel }),
+            r.totalDebit && /* @__PURE__ */ t.jsx("span", { children: r.totalDebit })
+          ] }),
+          /* @__PURE__ */ t.jsxs(c, { children: [
+            r.totalCreditLabel && /* @__PURE__ */ t.jsx("span", { children: r.totalCreditLabel }),
+            r.totalCredit && /* @__PURE__ */ t.jsx("span", { children: r.totalCredit })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ t.jsx(C, { $expanded: l, children: /* @__PURE__ */ t.jsxs(k, { children: [
+        /* @__PURE__ */ t.jsx(h, { tableConfig: r.leftTable }),
+        /* @__PURE__ */ t.jsx(h, { tableConfig: r.rightTable })
+      ] }) })
+    ] }, r.id);
+  }) });
+};
+export {
+  q as default
+};