impact-nova 1.7.20 → 1.7.22

package/dist/components/ui/report-card/report-card.js

@@ -1,78 +1,104 @@
-import { jsx as a, jsxs as c } from "react/jsx-runtime";
-import * as i from "react";
-import { cn as n } from "../../../lib/utils.js";
-import { CheckmarkSuccess as p } from "../../../icons/index.js";
-const f = i.createContext({ selected: !1 }), m = {
-  purple: "linear-gradient(135deg, #F1DEFE 0%, #F6EDFD 33%, #F6EDFD 66%, #EDD3FE 100%)",
-  blue: "linear-gradient(135deg, #F1F3FD 0%, #E2E6FF 33%, #F7F8FF 66%, #EAEDFF 100%)"
-}, u = i.forwardRef(
-  ({ className: r, selected: e = !1, variant: o = "purple", gradient: t, children: s, ...d }, l) => /* @__PURE__ */ a(f.Provider, { value: { selected: e }, children: /* @__PURE__ */ c(
+import { jsx as a } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as d } from "../../../lib/utils.js";
+const p = s.createContext({ selected: !1 }), x = "var(--Colors-Neutrals-Border-Subtle, #D9DDE7)", v = "var(--Colors-Primary-Surface-Default, #4259EE)", b = "linear-gradient(281deg, var(--Colors-Greys-50, #FAFAFA) 1.7%, var(--Colors-Greys-0, #FFF) 69.58%, var(--Colors-Greys-50, #FAFAFA) 97.56%)", g = "linear-gradient(281deg, var(--Colors-Blue_01-100, #ECEEFD) 1.7%, #FFF 48.25%, var(--Colors-Blue_01-100, #ECEEFD) 97.56%)", E = s.forwardRef(
+  ({ className: r, selected: e = !1, children: o, style: t, onMouseEnter: f, onMouseLeave: m, ...u }, C) => {
+    const [R, l] = s.useState(!1), c = e || R, n = c ? v : x;
+    return /* @__PURE__ */ a(p.Provider, { value: { selected: e }, children: /* @__PURE__ */ a(
+      "div",
+      {
+        ref: C,
+        style: {
+          width: "331px",
+          height: "132px",
+          padding: "12px",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          gap: "12px",
+          borderRadius: "12px",
+          borderTop: `1px solid ${n}`,
+          borderRight: `1px solid ${n}`,
+          borderBottom: `2px solid ${n}`,
+          borderLeft: `4px solid ${n}`,
+          background: c ? g : b,
+          transition: "border-color 150ms ease, background 150ms ease",
+          ...t
+        },
+        className: d(
+          "relative flex cursor-pointer select-none",
+          "outline-none focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0",
+          r
+        ),
+        "data-component": "report-card",
+        "data-selected": e || void 0,
+        role: "option",
+        "aria-selected": e,
+        tabIndex: 0,
+        onMouseEnter: (i) => {
+          l(!0), f?.(i);
+        },
+        onMouseLeave: (i) => {
+          l(!1), m?.(i);
+        },
+        ...u,
+        children: o
+      }
+    ) });
+  }
+);
+E.displayName = "ReportCardRoot";
+const D = ({ className: r }) => {
+  const { selected: e } = s.useContext(p);
+  return /* @__PURE__ */ a(
     "div",
     {
-      ref: l,
-      className: n(
-        "relative flex max-w-[332px] shrink-0 p-3 flex-col items-start gap-[18px] rounded-lg border transition-colors cursor-pointer",
-        "outline-none focus:outline-none focus-visible:outline-none",
-        "focus:ring-0 focus-visible:ring-0 active:ring-0",
-        "focus:ring-offset-0 focus-visible:ring-offset-0",
-        "focus:border-stroke-hairline",
-        e ? "border-stroke-hairline" : "border-stroke-hairline hover:border-brand hover:ring-1 hover:ring-brand focus:hover:ring-0",
+      className: d(
+        "w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
+        e ? "border-brand" : "border-[#C1C7D4]",
         r
       ),
-      style: {
-        width: 331.88,
-        background: t ?? m[o]
-      },
-      "data-component": "report-card",
-      "data-selected": e || void 0,
-      role: "option",
-      "aria-selected": e,
-      tabIndex: 0,
-      ...d,
-      children: [
-        e && /* @__PURE__ */ a(p, { size: 14, alt: "Selected", className: "absolute top-3 right-3 shrink-0" }),
-        s
-      ]
+      "aria-hidden": "true",
+      children: e && /* @__PURE__ */ a("div", { className: "w-2.5 h-2.5 rounded-full bg-brand" })
     }
-  ) })
-);
-u.displayName = "ReportCardRoot";
-const g = i.forwardRef(
+  );
+};
+D.displayName = "ReportCardRadio";
+const F = s.forwardRef(
   ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ a(
     "div",
     {
       ref: t,
-      className: n("flex flex-col items-start gap-3 w-full", r),
+      className: d("flex flex-col items-start gap-2 w-full", r),
       "data-slot": "report-card-content",
       ...o,
       children: e
     }
   )
 );
-g.displayName = "ReportCardContent";
-const x = i.forwardRef(
+F.displayName = "ReportCardContent";
+const N = s.forwardRef(
   ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ a(
     "div",
     {
       ref: t,
-      className: n(
-        "flex items-center justify-center w-9 h-9 rounded-full bg-white shrink-0",
+      className: d(
+        "flex items-center justify-center shrink-0",
         r
       ),
       "data-slot": "report-card-icon",
       ...o,
-      children: /* @__PURE__ */ a("div", { className: "w-6 h-6 flex items-center justify-center [&_svg]:w-6 [&_svg]:h-6", children: e })
+      children: e
     }
   )
 );
-x.displayName = "ReportCardIcon";
-const h = i.forwardRef(
+N.displayName = "ReportCardIcon";
+const w = s.forwardRef(
   ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ a(
     "h3",
     {
       ref: t,
-      className: n(
-        "font-manrope text-[14px] font-semibold leading-[21px] text-[#0D152C]",
+      className: d(
+        "font-manrope text-[16px] font-medium leading-[125%] text-[#0D152C] capitalize",
         r
       ),
       ...o,
@@ -80,14 +106,27 @@ const h = i.forwardRef(
     }
   )
 );
-h.displayName = "ReportCardTitle";
-const R = i.forwardRef(
+w.displayName = "ReportCardTitle";
+const y = s.forwardRef(
+  ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: t,
+      className: d("flex items-center gap-1 w-full", r),
+      "data-slot": "report-card-title-row",
+      ...o,
+      children: e
+    }
+  )
+);
+y.displayName = "ReportCardTitleRow";
+const h = s.forwardRef(
   ({ className: r, children: e, ...o }, t) => /* @__PURE__ */ a(
     "p",
     {
       ref: t,
-      className: n(
-        "font-manrope text-[12px] font-medium leading-[134%] text-[#1F2B4D]",
+      className: d(
+        "font-manrope text-[12px] font-medium leading-[16px] text-[#60697D]",
         r
       ),
       ...o,
@@ -95,11 +134,13 @@ const R = i.forwardRef(
     }
   )
 );
-R.displayName = "ReportCardDescription";
+h.displayName = "ReportCardDescription";
 export {
-  g as ReportCardContent,
-  R as ReportCardDescription,
-  x as ReportCardIcon,
-  u as ReportCardRoot,
-  h as ReportCardTitle
+  F as ReportCardContent,
+  h as ReportCardDescription,
+  N as ReportCardIcon,
+  D as ReportCardRadio,
+  E as ReportCardRoot,
+  w as ReportCardTitle,
+  y as ReportCardTitleRow
 };

package/dist/icons/assets/Product.svg.js

@@ -0,0 +1,5 @@
+import * as L from "react";
+const e = (t) => /* @__PURE__ */ L.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ L.createElement("path", { d: "M8 1.34619C8.23099 1.34619 8.45089 1.4067 8.66016 1.52783L13.3271 4.21143C13.5364 4.3326 13.699 4.492 13.8145 4.68994C13.9298 4.88785 13.9873 5.10785 13.9873 5.3501V10.6499C13.9873 10.8921 13.9298 11.1122 13.8145 11.3101C13.6989 11.5081 13.5365 11.6684 13.3271 11.7896L8.66016 14.4731C8.45097 14.5942 8.23089 14.6548 8 14.6548C7.76911 14.6548 7.54903 14.5942 7.33984 14.4731L2.67285 11.7896C2.46351 11.6684 2.30106 11.5081 2.18555 11.3101C2.07024 11.1122 2.0127 10.8921 2.0127 10.6499V5.3501C2.01271 5.10785 2.07015 4.88785 2.18555 4.68994C2.30101 4.492 2.46364 4.3326 2.67285 4.21143L7.33984 1.52783C7.54911 1.4067 7.76901 1.34619 8 1.34619ZM12.6602 6.05615L8.66016 8.37158L8.6543 8.36182V12.9722L8.67285 12.9614L12.6729 10.644L12.6787 10.6548V6.04541L12.6602 6.05615ZM5.34375 4.18896L4.04395 4.93896L4.02539 4.94971L4.04395 4.96143L7.99316 7.24365L7.9873 7.25537L8.00586 7.24463L9.30664 6.49463L9.3252 6.48389L9.30664 6.47314L5.35645 4.18896L5.34961 4.19971L5.3623 4.17822L5.34375 4.18896ZM7.99414 2.65576L6.69336 3.40576L6.6748 3.4165L6.69336 3.42725L10.6602 5.69482L10.6543 5.70459L10.6729 5.69482L11.9561 4.96143L11.9746 4.95068L11.9561 4.93896L8.00586 2.65576L8.0127 2.64502L7.99414 2.65576ZM7.33984 8.37256L3.33984 6.05615L3.32129 6.04541V10.6333H3.30859L3.32715 10.644L7.32715 12.9614L7.3457 12.9722V8.3833H7.3584L7.33984 8.37256Z", fill: "#1F2B4D", stroke: "#31416E", strokeWidth: 0.025 }));
+export {
+  e as default
+};

package/dist/icons/assets/report_1.svg.js

@@ -0,0 +1,5 @@
+import * as t from "react";
+const H = (e) => /* @__PURE__ */ t.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ t.createElement("path", { d: "M1.33301 0.0126953H10.667C11.0302 0.0127724 11.3409 0.141682 11.5996 0.400391C11.8583 0.659099 11.9872 0.969823 11.9873 1.33301V10.667C11.9872 11.0302 11.8583 11.3409 11.5996 11.5996C11.3409 11.8583 11.0302 11.9872 10.667 11.9873H1.33301C0.969823 11.9872 0.659099 11.8583 0.400391 11.5996C0.141682 11.3409 0.0127724 11.0302 0.0126953 10.667V1.33301C0.0127725 0.969823 0.141682 0.659099 0.400391 0.400391C0.659099 0.141682 0.969823 0.0127725 1.33301 0.0126953ZM1.32129 10.6787H10.6787V8.4375H1.32129V10.6787ZM3.32129 8.91211V10.2207H2.0127V8.91211H3.32129ZM1.32129 7.12891H10.6787V4.87109H1.32129V7.12891ZM3.32129 5.3457V6.6543H2.0127V5.3457H3.32129ZM1.32129 3.5625H10.6787V1.32129H1.32129V3.5625ZM3.32129 1.7793V3.08789H2.0127V1.7793H3.32129Z", fill: "#1F2B4D", stroke: "#31416E", strokeWidth: 0.025 }));
+export {
+  H as default
+};

package/dist/icons/index.d.ts

@@ -127,6 +127,8 @@ export declare const TrendingNeutral: IconComponent;
 export declare const IllustrationIcon1: IconComponent;
 export declare const Report1: ImageComponent;
 export declare const Report2: ImageComponent;
+export declare const ReportExtract: IconComponent;
+export declare const ProductBox: IconComponent;
 export declare const BillOrReceipt: ImageComponent;
 export declare const ChecklistWithPen: ImageComponent;
 export declare const Dollar: ImageComponent;