qaema-ui 0.0.32 → 0.0.36

package/dist/_virtual/index2.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 { __require as o } from "../node_modules/prop-types/index.js";
+var p = /* @__PURE__ */ o();
+const s = /* @__PURE__ */ r(p);
 export {
-  m as default
+  s as default
 };

package/dist/_virtual/index3.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 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/index4.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/components/Banner.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export type BannerVariant = 'primary' | 'teal' | 'green' | 'default';
+export type BannerProps = {
+    children: ReactNode;
+    variant?: BannerVariant;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+};
+declare const Banner: ({ children, variant, dismissible, onDismiss }: BannerProps) => import("react/jsx-runtime").JSX.Element;
+export default Banner;

package/dist/components/Banner.js

@@ -0,0 +1,76 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import { IoClose as c } from "../node_modules/react-icons/io5/index.js";
+import s, { css as o } from "styled-components";
+const t = s.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme: r }) => r.spacing.sm};
+  padding: ${({ theme: r }) => `${r.spacing.s} ${r.spacing.m}`};
+  width: 100%;
+  min-height: 3rem;
+  position: relative;
+
+  ${({ $variant: r, theme: n }) => {
+  switch (r) {
+    case "primary":
+      return o`
+          background: linear-gradient(90deg, ${n.colors.primary.purple.n500} 0%, ${n.colors.primary.purple.n400} 100%);
+          color: ${n.colors.grey.n50};
+        `;
+    case "teal":
+      return o`
+          background: ${n.colors.primary.green.n150};
+          color: ${n.colors.grey.n650};
+        `;
+    case "green":
+      return o`
+          background: ${n.colors.state.success.n150};
+          color: ${n.colors.grey.n650};
+        `;
+    case "default":
+    default:
+      return o`
+          background: ${n.colors.grey.n100};
+          color: ${n.colors.grey.n600};
+        `;
+  }
+}}
+`, l = s.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme: r }) => r.spacing.sm};
+  flex: 1;
+`, p = s.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: ${({ theme: r }) => r.spacing.xxs};
+  border-radius: ${({ theme: r }) => r.borderRadius.circle};
+  transition: all 0.2s ease-in-out;
+  color: currentColor;
+  flex-shrink: 0;
+
+  &:hover {
+    opacity: 0.7;
+    ${({ $variant: r, theme: n }) => r === "primary" ? o`
+            background: rgba(255, 255, 255, 0.2);
+          ` : o`
+            background: ${n.colors.grey.n200};
+          `}
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+`, $ = ({ children: r, variant: n = "default", dismissible: a = !1, onDismiss: i }) => /* @__PURE__ */ e.jsxs(t, { $variant: n, children: [
+  /* @__PURE__ */ e.jsx(l, { children: r }),
+  a && /* @__PURE__ */ e.jsx(p, { $variant: n, onClick: i, "aria-label": "Dismiss banner", children: /* @__PURE__ */ e.jsx(c, { size: 20 }) })
+] });
+export {
+  $ as default
+};

package/dist/components/FeatureCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type FeatureCardProps = {
+    icon?: React.ReactNode;
+    title?: string;
+    badge?: React.ReactNode;
+    description?: string;
+    CTAText?: string;
+    CTAAction?: () => void;
+};
+export declare const FeatureCard: React.FC<FeatureCardProps>;

package/dist/components/FeatureCard.js

@@ -0,0 +1,84 @@
+import { j as t } from "../_virtual/jsx-runtime.js";
+import "react";
+import i, { useTheme as l } from "styled-components";
+import c from "./Button.js";
+import { Card as m } from "./Card.js";
+import s from "./Typography.js";
+const g = i(m)`
+  background-color: ${({ theme: r }) => r.colors.grey.n50};
+  width: 23.903rem;
+  min-width: 13.371rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: ${({ theme: r }) => r.spacing.sm};
+  padding: ${({ theme: r }) => r.spacing.sm};
+  border-radius: ${({ theme: r }) => r.borderRadius.md};
+  box-shadow:
+    0px 1.2px 2.39px 0px #0000000f,
+    0px 1.2px 3.59px 0px #0000001a;
+`, x = i.div`
+  border: 1.2px solid ${({ theme: r }) => r.colors.grey.n100};
+  padding: ${({ theme: r }) => r.spacing.xs};
+  border-radius: ${({ theme: r }) => r.borderRadius.md};
+  width: 2.391rem;
+  height: 2.391rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`, h = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: r }) => r.spacing.xxs};
+`, y = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: r }) => r.spacing.xs};
+`, f = i(c)`
+  height: 2.391rem !important;
+  border-radius: ${({ theme: r }) => r.borderRadius.sm} !important;
+  padding: ${({ theme: r }) => r.spacing.s} !important;
+  gap: ${({ theme: r }) => r.spacing.xs} !important;
+  font-size: ${({ theme: r }) => r.typography.sizes.s3} !important;
+  line-height: ${({ theme: r }) => r.typography.lineHeights.s} !important;
+  font-weight: ${({ theme: r }) => r.typography.weights.semiBold} !important;
+  letter-spacing: ${({ theme: r }) => r.typography.letterSpacings.normal} !important;
+  box-shadow:
+    0px 1.2px 2.39px 0px #0000000f,
+    0px 1.2px 3.59px 0px #0000001a !important;
+`, S = ({
+  icon: r,
+  title: a,
+  badge: e,
+  description: p,
+  CTAText: n,
+  CTAAction: d
+}) => {
+  const o = l();
+  return /* @__PURE__ */ t.jsxs(g, { shadowVariant: "none", children: [
+    /* @__PURE__ */ t.jsx(x, { children: r }),
+    /* @__PURE__ */ t.jsxs(h, { children: [
+      /* @__PURE__ */ t.jsxs(y, { children: [
+        /* @__PURE__ */ t.jsx(
+          s,
+          {
+            variant: "h6-lg",
+            fontSize: "s7",
+            lineHeight: "l",
+            letterSpacing: "balancedNarrow",
+            weight: "semiBold",
+            color: o.colors.grey.n800,
+            children: a
+          }
+        ),
+        e && e
+      ] }),
+      /* @__PURE__ */ t.jsx(s, { fontSize: "s3", lineHeight: "s", weight: "regular", color: o.colors.grey.n400, children: p })
+    ] }),
+    n && /* @__PURE__ */ t.jsx(f, { variant: "light-primary", width: "100%", onClick: d, children: n })
+  ] });
+};
+export {
+  S as FeatureCard
+};

package/dist/components/PriceCard.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+export type PriceCardVariant = 'transparent' | 'purple';
+export type FeatureVariant = 'included' | 'excluded';
+export type PriceCardBadge = {
+    label: string;
+    bgColor: string;
+    color: string;
+};
+export type PriceCardFeature = {
+    label: string;
+    variant?: FeatureVariant;
+};
+export type PriceCardPrice = {
+    amount: string;
+    period?: string;
+    color?: string;
+    periodColor?: string;
+};
+export type PriceCardPrimaryAction = {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'light-primary';
+};
+export type PriceCardProps = {
+    title: string;
+    price: PriceCardPrice;
+    description: string;
+    features: PriceCardFeature[];
+    variant?: PriceCardVariant;
+    badges?: PriceCardBadge[];
+    primaryAction?: PriceCardPrimaryAction;
+    featuresTitle?: string;
+    featuresDescription?: string;
+};
+declare const PriceCard: React.FC<PriceCardProps>;
+export default PriceCard;

package/dist/components/PriceCard.js

@@ -0,0 +1,201 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import "react";
+import { FiCheck as m, FiX as y } from "../node_modules/react-icons/fi/index.js";
+import i, { css as l } from "styled-components";
+import { CurrencyContainer as $ } from "../styles/Currency.styles.js";
+import u from "../assets/svg/Riyal.svg.js";
+import b from "./Badge.js";
+import w from "./Button.js";
+import s from "./Typography.js";
+const j = {
+  transparent: l`
+    background: rgba(255, 255, 255, 0.72);
+    border: 1px solid ${({ theme: e }) => e.colors.grey.n200};
+    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
+  `,
+  purple: l`
+    background: linear-gradient(360deg, #ffffff 63.12%, #f1eeff 100%);
+    border: 1px solid #e3deff;
+    box-shadow:
+      0px 4px 6px -2px #10182808,
+      0px 12px 16px -4px #10182814;
+  `
+}, v = i.div`
+  width: 100%;
+  max-width: 28.458rem;
+  border-radius: ${({ theme: e }) => e.borderRadius.xl};
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  ${({ $variant: e }) => j[e]};
+`, z = i.div`
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.sm};
+  border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n200};
+`, F = i.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme: e }) => e.spacing.m};
+  flex-wrap: wrap;
+`, k = i(s)`
+  font-family: ${({ theme: e }) => e.fonts.arabic};
+  font-weight: 600;
+  font-size: ${({ theme: e }) => {
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s5;
+}};
+  line-height: 1.75rem;
+  color: ${({ theme: e }) => e.colors.grey.n400};
+`, C = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+`, B = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  flex-wrap: wrap;
+`, R = i.div`
+  display: flex;
+  align-items: baseline;
+  gap: ${({ theme: e }) => e.spacing.xxs};
+`, T = i.span`
+  font-family: ${({ theme: e }) => e.fonts.english};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  font-size: 2.706rem;
+  line-height: 3.158rem;
+  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
+`, P = i.span`
+  font-family: ${({ theme: e }) => e.fonts.arabic};
+  font-weight: ${({ theme: e }) => e.typography.weights.regular};
+  font-size: ${({ theme: e }) => {
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s5;
+}};
+  line-height: 1.804rem;
+  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
+`, E = i(s)`
+  font-family: ${({ theme: e }) => e.fonts.arabic};
+  font-weight: ${({ theme: e }) => e.typography.weights.regular};
+  font-size: ${({ theme: e }) => {
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s4;
+}};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+  color: ${({ theme: e }) => e.colors.grey.n400};
+`, H = i.div`
+  padding: 2rem 2rem 2.5rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.m};
+`, S = i(s)`
+  font-family: ${({ theme: e }) => e.fonts.arabic};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+  font-size: ${({ theme: e }) => {
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s4;
+}};
+  line-height: 0.7rem;
+  color: ${({ theme: e }) => e.colors.grey.n650};
+  text-transform: uppercase;
+`, D = i(s)`
+  font-family: ${({ theme: e }) => e.fonts.arabic};
+  font-weight: 500;
+  font-size: ${({ theme: e }) => {
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s4;
+}};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+  color: ${({ theme: e }) => e.colors.grey.n400};
+`, I = i.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.s};
+`, V = i.li`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+`, W = i.span`
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg {
+    width: 0.7rem;
+    height: 0.7rem;
+  }
+
+  ${({ theme: e, $variant: o }) => o === "included" ? l`
+          border: 1px solid ${e.colors.secondary.green.n450};
+          color: ${e.colors.secondary.green.n450};
+        ` : l`
+          border: 1px solid ${e.colors.secondary.pink.n450};
+          color: ${e.colors.secondary.pink.n450};
+        `}
+`, L = i(s)`
+  font-family: ${({ theme: e }) => e.fonts.arabic};
+  font-weight: 400;
+  font-size: ${({ theme: e }) => {
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s3;
+}};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+  color: ${({ theme: e }) => e.colors.grey.n400};
+`, M = i.div`
+  width: 100%;
+  margin-top: 1rem;
+
+  button {
+    width: 100%;
+  }
+`, Y = ({
+  title: e,
+  price: o,
+  description: d,
+  features: g,
+  variant: f = "transparent",
+  badges: c = [],
+  primaryAction: t,
+  featuresTitle: h = "FEATURES",
+  featuresDescription: x = "Everything in our free plan plus....."
+}) => /* @__PURE__ */ r.jsxs(v, { $variant: f, children: [
+  /* @__PURE__ */ r.jsxs(z, { children: [
+    /* @__PURE__ */ r.jsxs(F, { children: [
+      /* @__PURE__ */ r.jsx(k, { children: e }),
+      c.length > 0 && /* @__PURE__ */ r.jsx(B, { children: c.map((n, a) => /* @__PURE__ */ r.jsx(b, { label: n.label, bgColor: n.bgColor, color: n.color }, `${n.label}-${a}`)) })
+    ] }),
+    /* @__PURE__ */ r.jsxs(R, { children: [
+      /* @__PURE__ */ r.jsx($, { src: u, alt: "Riyal" }),
+      /* @__PURE__ */ r.jsx(T, { $color: o.color, children: o.amount }),
+      /* @__PURE__ */ r.jsx(P, { $color: o.periodColor, children: o.period ?? "/ Month" })
+    ] }),
+    /* @__PURE__ */ r.jsx(E, { children: d }),
+    /* @__PURE__ */ r.jsx(M, { children: t && /* @__PURE__ */ r.jsx(w, { variant: t.variant ?? "primary", onClick: t.onClick, children: t.label }) })
+  ] }),
+  /* @__PURE__ */ r.jsxs(H, { children: [
+    /* @__PURE__ */ r.jsxs(C, { children: [
+      /* @__PURE__ */ r.jsx(S, { children: h }),
+      /* @__PURE__ */ r.jsx(D, { children: x })
+    ] }),
+    /* @__PURE__ */ r.jsx(I, { children: g.map((n, a) => {
+      const p = n.variant ?? "included";
+      return /* @__PURE__ */ r.jsxs(V, { children: [
+        /* @__PURE__ */ r.jsx(W, { $variant: p, children: p === "included" ? /* @__PURE__ */ r.jsx(m, {}) : /* @__PURE__ */ r.jsx(y, {}) }),
+        /* @__PURE__ */ r.jsx(L, { children: n.label })
+      ] }, `${n.label}-${a}`);
+    }) })
+  ] })
+] });
+export {
+  Y as default
+};

package/dist/components/ProductCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type ProductCardProps = {
+    image?: React.ReactNode;
+    category?: string;
+    title?: string;
+    description?: string;
+};
+export declare const ProductCard: React.FC<ProductCardProps>;

package/dist/components/ProductCard.js

@@ -0,0 +1,65 @@
+import { j as i } from "../_virtual/jsx-runtime.js";
+import "react";
+import r from "styled-components";
+import s from "./Badge.js";
+import { Card as l } from "./Card.js";
+import d from "./Typography.js";
+const a = r(l)`
+  background-color: ${({ theme: e }) => e.colors.grey.n50};
+  width: 23.5rem;
+  /* height: 25.188rem; */
+  border-radius: 1.875rem;
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${({ theme: e }) => e.spacing.xl};
+  padding-bottom: ${({ theme: e }) => e.spacing.m};
+`, c = r.div`
+  width: 100%;
+  height: 13.813rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  & img,
+  & svg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+`, g = r.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 ${({ theme: e }) => e.spacing.m};
+  gap: ${({ theme: e }) => e.spacing.sm};
+`, p = r.div`
+  display: inline-flex;
+  width: fit-content;
+  align-self: flex-start;
+  & > div {
+    border-radius: ${({ theme: e }) => e.borderRadius.sm};
+    & > span {
+      font-size: ${({ theme: e }) => e.typography.sizes.s3};
+    }
+  }
+`, m = r.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.xs};
+`, w = ({ image: e, category: t, title: n, description: o }) => /* @__PURE__ */ i.jsxs(a, { shadowVariant: "default", children: [
+  e && /* @__PURE__ */ i.jsx(c, { children: e }),
+  /* @__PURE__ */ i.jsxs(g, { children: [
+    t && /* @__PURE__ */ i.jsx(p, { children: /* @__PURE__ */ i.jsx(s, { label: t, weight: "semiBold" }) }),
+    /* @__PURE__ */ i.jsxs(m, { children: [
+      n && /* @__PURE__ */ i.jsx(d, { fontSize: "s7", lineHeight: "l", letterSpacing: "balancedNarrow", weight: "semiBold", children: n }),
+      o && /* @__PURE__ */ i.jsx(d, { fontSize: "s3", lineHeight: "s", letterSpacing: "normal", weight: "regular", children: o })
+    ] })
+  ] })
+] });
+export {
+  w as ProductCard
+};

package/dist/components/index.d.ts

@@ -26,6 +26,10 @@ export { default as Image } from './Image';
 export type { ImageProps } from './Image';
 export { default as Card } from './Card';
 export type { CardProps } from './Card';
+export { FeatureCard } from './FeatureCard';
+export type { FeatureCardProps } from './FeatureCard';
+export { ProductCard } from './ProductCard';
+export type { ProductCardProps } from './ProductCard';
 export { default as MethodCard } from './MethodCard';
 export type { MethodCardProps } from './MethodCard';
 export { default as RadioButton } from './Radio';
@@ -93,6 +97,8 @@ export type { QuickStartCardProps } from './QuickStartCard';
 export { default as Divider } from './Divider';
 export type { DividerProps } from './Divider';
 export { default as Badge } from './Badge';
+export { default as Banner } from './Banner';
+export type { BannerProps, BannerVariant } from './Banner';
 export { default as AddOnCardInput } from './AddOnCardInput';
 export type { AddOnCardInputProps } from './AddOnCardInput';
 export { default as ConfirmationPopup } from './ConfirmationPopup';
@@ -147,3 +153,5 @@ export { default as TotalsSummary } from './TotalsSummary';
 export type { TotalsSummaryProps, TotalsSummaryItem } from './TotalsSummary';
 export { default as NextActionBox } from './NextActionBox';
 export type { NextActionBoxProps, NextActionItem } from './NextActionBox';
+export { default as PriceCard } from './PriceCard';
+export type { PriceCardProps, PriceCardFeature, PriceCardBadge } from './PriceCard';

package/dist/index.js

@@ -1,18 +1,18 @@
-import { default as r } from "./components/Button.js";
-import { default as a } from "./components/InputField.js";
+import { default as o } from "./components/Button.js";
+import { default as t } from "./components/InputField.js";
 import { default as d } from "./components/TextArea.js";
 import { default as u } from "./components/Typography.js";
-import { default as m } from "./components/DropDown.js";
+import { default as l } from "./components/DropDown.js";
 import { default as x } from "./components/SearchBar.js";
-import { default as n } from "./components/Hint.js";
+import { default as i } from "./components/Hint.js";
 import { Alert as c } from "./components/Alert.js";
 import { default as I } from "./components/Tabs.js";
 import { default as k } from "./components/InfoCard.js";
 import { default as T } from "./components/ThemeProvider.js";
 import { default as b } from "./components/PackageCard.js";
-import { default as D } from "./components/Draggable.js";
-import { default as y } from "./components/Image.js";
-import { Card as H } from "./components/Card.js";
+import { default as B } from "./components/Draggable.js";
+import { default as L } from "./components/Image.js";
+import { Card as F } from "./components/Card.js";
 import { MethodCard as R } from "./components/MethodCard.js";
 import { default as w } from "./components/Radio.js";
 import { default as G } from "./components/RadioInput.js";
@@ -25,21 +25,21 @@ import { default as K } from "./components/Modal.js";
 import { default as X } from "./components/Stepper.js";
 import { default as _ } from "./components/ProgressBar.js";
 import { default as ee } from "./components/InfoItem.js";
-import { default as re } from "./components/AmountItem.js";
-import { default as ae } from "./components/Layout.js";
+import { default as oe } from "./components/AmountItem.js";
+import { default as te } from "./components/Layout.js";
 import { default as de } from "./components/DatePicker.js";
 import { default as ue } from "./components/PasswordInputField.js";
-import { default as me } from "./components/ToastNotification.js";
+import { default as le } from "./components/ToastNotification.js";
 import { default as xe } from "./components/OTP.js";
-import { default as ne } from "./components/NumberInput.js";
+import { default as ie } from "./components/NumberInput.js";
 import { default as ce } from "./components/CollapsableCard.js";
 import { default as Ie } from "./components/Toggle.js";
 import { default as ke } from "./components/Spinner.js";
 import { default as Te } from "./components/AddOnCard.js";
 import { default as be } from "./components/Legend.js";
-import { default as De } from "./components/HorizontalChart.js";
-import { default as ye } from "./components/Chart.js";
-import { default as He } from "./components/ActionInput.js";
+import { default as Be } from "./components/HorizontalChart.js";
+import { default as Le } from "./components/Chart.js";
+import { default as Fe } from "./components/ActionInput.js";
 import { default as Re } from "./components/StatusFeedback.js";
 import { default as we } from "./components/StepperProcess.js";
 import { default as Ge } from "./components/Table/Table.js";
@@ -51,107 +51,115 @@ import { default as Ee } from "./components/NavItem.js";
 import { default as Ke } from "./components/QuickStartCard.js";
 import { default as Xe } from "./components/Divider.js";
 import { default as _e } from "./components/Badge.js";
-import { default as eo } from "./components/AddOnCardInput.js";
-import { default as ro } from "./components/ConfirmationPopup.js";
-import { default as ao } from "./components/BulletItem.js";
-import { default as po } from "./components/CardsList.js";
-import { default as lo } from "./components/StatCard.js";
-import { default as so } from "./components/ListToolbar.js";
-import { default as io } from "./components/Pagination.js";
-import { default as Co } from "./components/ViewItem.js";
-import { default as go } from "./components/NavigationPanel.js";
-import { default as Po } from "./components/ToggleForm.js";
-import { default as So } from "./components/ToggleHeader.js";
-import { default as ho } from "./components/QuickActionItem.js";
-import { default as Ao } from "./components/StatIndicator.js";
-import { default as Lo } from "./components/ReconciliationGroups.js";
-import { default as Bo } from "./components/AccordionCard.js";
-import { default as Fo } from "./components/FileDownloadCard.js";
-import { default as vo, HelpCardGroup as wo } from "./components/HelpCard.js";
-import { default as Go } from "./components/ConfigList.js";
-import { default as Oo } from "./components/RequestCard.js";
-import { default as Qo } from "./components/RequestSummaryCard.js";
-import { default as zo } from "./components/PaymentLinkDetails.js";
-import { default as Zo } from "./components/PaymentTooltip.js";
-import { default as Eo } from "./components/ModalWithRequestCard.js";
-import { default as Ko } from "./components/DropDownWithTable/DropDownWithTable.js";
-import { default as Xo } from "./components/TotalsSummary.js";
-import { default as _o } from "./components/NextActionBox.js";
-import { default as er } from "./hooks/useFormikInput.js";
-import { default as rr } from "./hooks/useZIndex.js";
-import { default as ar } from "./hooks/useBreakpointCheck.js";
-import { OptionSelectGroup as dr } from "./components/OptionCardGroup.js";
-import { defaultTheme as ur } from "./theme/theme.js";
-import { darkColors as mr, lightColors as sr } from "./theme/colors.js";
-import { setQaemaCoreLanguage as ir } from "./i18n/i18n.js";
-import { breakPoints as Cr, device as cr } from "./constants/breakPoints.constant.js";
+import { default as er } from "./components/Banner.js";
+import { default as or } from "./components/AddOnCardInput.js";
+import { default as tr } from "./components/ConfirmationPopup.js";
+import { default as dr } from "./components/BulletItem.js";
+import { default as ur } from "./components/CardsList.js";
+import { default as lr } from "./components/StatCard.js";
+import { default as xr } from "./components/ListToolbar.js";
+import { default as ir } from "./components/Pagination.js";
+import { default as cr } from "./components/ViewItem.js";
+import { default as Ir } from "./components/NavigationPanel.js";
+import { default as kr } from "./components/ToggleForm.js";
+import { default as Tr } from "./components/ToggleHeader.js";
+import { default as br } from "./components/QuickActionItem.js";
+import { default as Br } from "./components/StatIndicator.js";
+import { default as Lr } from "./components/ReconciliationGroups.js";
+import { default as Fr } from "./components/AccordionCard.js";
+import { default as Rr } from "./components/FileDownloadCard.js";
+import { default as wr, HelpCardGroup as Nr } from "./components/HelpCard.js";
+import { default as Mr } from "./components/ConfigList.js";
+import { default as qr } from "./components/RequestCard.js";
+import { default as Wr } from "./components/RequestSummaryCard.js";
+import { default as Vr } from "./components/PaymentLinkDetails.js";
+import { default as jr } from "./components/PaymentTooltip.js";
+import { default as Jr } from "./components/ModalWithRequestCard.js";
+import { default as Ur } from "./components/DropDownWithTable/DropDownWithTable.js";
+import { default as Yr } from "./components/TotalsSummary.js";
+import { default as $r } from "./components/NextActionBox.js";
+import { default as ro } from "./components/PriceCard.js";
+import { default as ao } from "./hooks/useFormikInput.js";
+import { default as fo } from "./hooks/useZIndex.js";
+import { default as uo } from "./hooks/useBreakpointCheck.js";
+import { FeatureCard as lo } from "./components/FeatureCard.js";
+import { ProductCard as xo } from "./components/ProductCard.js";
+import { OptionSelectGroup as io } from "./components/OptionCardGroup.js";
+import { defaultTheme as co } from "./theme/theme.js";
+import { darkColors as Io, lightColors as Po } from "./theme/colors.js";
+import { setQaemaCoreLanguage as So } from "./i18n/i18n.js";
+import { breakPoints as ho, device as bo } from "./constants/breakPoints.constant.js";
 export {
-  Bo as AccordionCard,
-  He as ActionInput,
+  Fr as AccordionCard,
+  Fe as ActionInput,
   Te as AddOnCard,
-  eo as AddOnCardInput,
+  or as AddOnCardInput,
   c as Alert,
-  re as AmountItem,
+  oe as AmountItem,
   _e as Badge,
-  ao as BulletItem,
-  r as Button,
-  H as Card,
-  po as CardsList,
-  ye as Chart,
+  er as Banner,
+  dr as BulletItem,
+  o as Button,
+  F as Card,
+  ur as CardsList,
+  Le as Chart,
   O as Checkbox,
   ce as CollapsableCard,
-  Go as ConfigList,
-  ro as ConfirmationPopup,
+  Mr as ConfigList,
+  tr as ConfirmationPopup,
   de as DatePicker,
   Xe as Divider,
-  D as Draggable,
-  m as DropDown,
-  Ko as DropDownWithTable,
-  Fo as FileDownloadCard,
+  B as Draggable,
+  l as DropDown,
+  Ur as DropDownWithTable,
+  lo as FeatureCard,
+  Rr as FileDownloadCard,
   Q as Header,
-  vo as HelpCard,
-  wo as HelpCardGroup,
-  n as Hint,
-  De as HorizontalChart,
-  y as Image,
+  wr as HelpCard,
+  Nr as HelpCardGroup,
+  i as Hint,
+  Be as HorizontalChart,
+  L as Image,
   k as InfoCard,
   ee as InfoItem,
-  a as InputField,
-  ae as Layout,
+  t as InputField,
+  te as Layout,
   be as Legend,
   Z as Link,
-  so as ListToolbar,
+  xr as ListToolbar,
   R as MethodCard,
   K as Modal,
-  Eo as ModalWithRequestCard,
+  Jr as ModalWithRequestCard,
   Ee as NavItem,
-  go as NavigationPanel,
-  _o as NextActionBox,
-  ne as NumberInput,
-  dr as OptionSelectGroup,
+  Ir as NavigationPanel,
+  $r as NextActionBox,
+  ie as NumberInput,
+  io as OptionSelectGroup,
   xe as OtpInput,
   b as PackageCard,
   Ze as PageHeader,
-  io as Pagination,
+  ir as Pagination,
   ue as PasswordInputField,
-  zo as PaymentLinkDetails,
-  Zo as PaymentTooltip,
+  Vr as PaymentLinkDetails,
+  jr as PaymentTooltip,
   Qe as PhoneInputField,
   E as PriceAmount,
+  ro as PriceCard,
+  xo as ProductCard,
   _ as ProgressBar,
-  ho as QuickActionItem,
+  br as QuickActionItem,
   Ke as QuickStartCard,
   w as RadioButton,
   G as RadioInput,
-  Lo as ReconciliationGroups,
-  Oo as RequestCard,
-  Qo as RequestSummaryCard,
+  Lr as ReconciliationGroups,
+  qr as RequestCard,
+  Wr as RequestSummaryCard,
   x as SearchBar,
   ze as SectionHeader,
   Oe as SideMenuLinks,
   ke as Spinner,
-  lo as StatCardGroup,
-  Ao as StatIndicator,
+  lr as StatCardGroup,
+  Br as StatIndicator,
   Re as StatusFeedback,
   X as Stepper,
   we as StepperProcess,
@@ -160,20 +168,20 @@ export {
   I as Tabs,
   d as TextArea,
   T as ThemeProvider,
-  me as ToastNotification,
+  le as ToastNotification,
   Ie as Toggle,
-  Po as ToggleForm,
-  So as ToggleHeader,
-  Xo as TotalsSummary,
+  kr as ToggleForm,
+  Tr as ToggleHeader,
+  Yr as TotalsSummary,
   u as Typography,
-  Co as ViewItem,
-  Cr as breakPoints,
-  mr as darkColors,
-  ur as defaultTheme,
-  cr as device,
-  sr as lightColors,
-  ir as setQaemaCoreLanguage,
-  ar as useBreakpointCheck,
-  er as useFormikInput,
-  rr as useZIndex
+  cr as ViewItem,
+  ho as breakPoints,
+  Io as darkColors,
+  co as defaultTheme,
+  bo as device,
+  Po as lightColors,
+  So as setQaemaCoreLanguage,
+  uo as useBreakpointCheck,
+  ao as useFormikInput,
+  fo as useZIndex
 };

package/dist/node_modules/react-bootstrap/esm/CloseButton.js

@@ -1,4 +1,4 @@
-import o from "../../../_virtual/index4.js";
+import o from "../../../_virtual/index2.js";
 import * as p from "react";
 import n from "../../../_virtual/index.js";
 import { j as i } from "../../../_virtual/jsx-runtime.js";

package/dist/node_modules/react-bootstrap/esm/Feedback.js

@@ -1,6 +1,6 @@
 import i from "../../../_virtual/index.js";
 import * as f from "react";
-import e from "../../../_virtual/index4.js";
+import e from "../../../_virtual/index2.js";
 import { j as l } from "../../../_virtual/jsx-runtime.js";
 const c = {
   /**

package/dist/node_modules/react-bootstrap/esm/Form.js

@@ -1,5 +1,5 @@
 import i from "../../../_virtual/index.js";
-import o from "../../../_virtual/index4.js";
+import o from "../../../_virtual/index2.js";
 import * as s from "react";
 import f from "./FormCheck.js";
 import l from "./FormControl.js";

package/dist/node_modules/react-bootstrap/esm/Image.js

@@ -1,6 +1,6 @@
 import f from "../../../_virtual/index.js";
 import * as d from "react";
-import o from "../../../_virtual/index4.js";
+import o from "../../../_virtual/index2.js";
 import { useBootstrapPrefix as u } from "./ThemeProvider.js";
 import { j as p } from "../../../_virtual/jsx-runtime.js";
 o.string, o.bool, o.bool, o.bool, o.bool;

package/dist/node_modules/react-helmet-async/lib/index.esm.js

@@ -2,9 +2,9 @@ var Q = Object.defineProperty;
 var X = (e, t, r) => t in e ? Q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
 var h = (e, t, r) => X(e, typeof t != "symbol" ? t + "" : t, r);
 import y, { Component as R } from "react";
-import ee from "../../../_virtual/index2.js";
+import ee from "../../../_virtual/index3.js";
 import F from "../../../_virtual/browser.js";
-import te from "../../../_virtual/index3.js";
+import te from "../../../_virtual/index4.js";
 var Y = /* @__PURE__ */ ((e) => (e.BASE = "base", e.BODY = "body", e.HEAD = "head", e.HTML = "html", e.LINK = "link", e.META = "meta", e.NOSCRIPT = "noscript", e.SCRIPT = "script", e.STYLE = "style", e.TITLE = "title", e.FRAGMENT = "Symbol(react.fragment)", e))(Y || {}), $ = {
   link: { rel: ["amphtml", "canonical", "alternate"] },
   script: { type: ["application/ld+json"] },

package/dist/node_modules/react-icons/fi/index.js

@@ -1,28 +1,36 @@
-import { GenIcon as t } from "../lib/iconBase.js";
+import { GenIcon as r } from "../lib/iconBase.js";
 import "../lib/iconContext.js";
-function i(r) {
-  return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polyline", attr: { points: "6 9 12 15 18 9" }, child: [] }] })(r);
+function i(t) {
+  return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polyline", attr: { points: "20 6 9 17 4 12" }, child: [] }] })(t);
 }
-function e(r) {
-  return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polyline", attr: { points: "9 18 15 12 9 6" }, child: [] }] })(r);
+function e(t) {
+  return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polyline", attr: { points: "6 9 12 15 18 9" }, child: [] }] })(t);
 }
-function l(r) {
-  return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }, child: [] }] })(r);
+function l(t) {
+  return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polyline", attr: { points: "9 18 15 12 9 6" }, child: [] }] })(t);
 }
-function c(r) {
-  return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "5", y1: "12", x2: "19", y2: "12" }, child: [] }] })(r);
+function c(t) {
+  return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }, child: [] }] })(t);
 }
-function a(r) {
-  return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "circle", attr: { cx: "12", cy: "12", r: "1" }, child: [] }, { tag: "circle", attr: { cx: "19", cy: "12", r: "1" }, child: [] }, { tag: "circle", attr: { cx: "5", cy: "12", r: "1" }, child: [] }] })(r);
+function a(t) {
+  return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "5", y1: "12", x2: "19", y2: "12" }, child: [] }] })(t);
 }
-function d(r) {
-  return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "12", y1: "5", x2: "12", y2: "19" }, child: [] }, { tag: "line", attr: { x1: "5", y1: "12", x2: "19", y2: "12" }, child: [] }] })(r);
+function d(t) {
+  return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "circle", attr: { cx: "12", cy: "12", r: "1" }, child: [] }, { tag: "circle", attr: { cx: "19", cy: "12", r: "1" }, child: [] }, { tag: "circle", attr: { cx: "5", cy: "12", r: "1" }, child: [] }] })(t);
+}
+function u(t) {
+  return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "12", y1: "5", x2: "12", y2: "19" }, child: [] }, { tag: "line", attr: { x1: "5", y1: "12", x2: "19", y2: "12" }, child: [] }] })(t);
+}
+function s(t) {
+  return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "18", y1: "6", x2: "6", y2: "18" }, child: [] }, { tag: "line", attr: { x1: "6", y1: "6", x2: "18", y2: "18" }, child: [] }] })(t);
 }
 export {
-  i as FiChevronDown,
-  e as FiChevronRight,
-  l as FiFolder,
-  c as FiMinus,
-  a as FiMoreHorizontal,
-  d as FiPlus
+  i as FiCheck,
+  e as FiChevronDown,
+  l as FiChevronRight,
+  c as FiFolder,
+  a as FiMinus,
+  d as FiMoreHorizontal,
+  u as FiPlus,
+  s as FiX
 };

package/dist/node_modules/react-smooth/es6/Animate.js

@@ -1,5 +1,5 @@
 import x, { Children as w, cloneElement as z, PureComponent as F } from "react";
-import a from "../../../_virtual/index4.js";
+import a from "../../../_virtual/index2.js";
 import { deepEqual as H } from "../../fast-equals/dist/esm/index.js";
 import L from "./AnimateManager.js";
 import { configEasing as V } from "./easing.js";

package/dist/node_modules/react-transition-group/esm/Transition.js

@@ -1,6 +1,6 @@
 import C from "../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";
 import D from "../../@babel/runtime/helpers/esm/inheritsLoose.js";
-import o from "../../../_virtual/index4.js";
+import o from "../../../_virtual/index2.js";
 import v from "react";
 import b from "react-dom";
 import T from "./config.js";

package/dist/node_modules/react-transition-group/esm/utils/PropTypes.js

@@ -1,4 +1,4 @@
-import e from "../../../../_virtual/index4.js";
+import e from "../../../../_virtual/index2.js";
 var n = process.env.NODE_ENV !== "production" ? e.oneOfType([e.number, e.shape({
   enter: e.number,
   exit: e.number,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qaema-ui",
   "private": false,
-  "version": "0.0.32",
+  "version": "0.0.36",
   "type": "module",
   "publishConfig": {
     "access": "public"