qaema-ui 0.0.1

package/dist/components/NavItem.js

@@ -0,0 +1,106 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import s, { useTheme as g, css as c } from "styled-components";
+import { useNavItemVariant as u } from "../hooks/useNavItemVariant.js";
+import h from "./Link.js";
+import v from "./Typography.js";
+const b = {
+  bullet: c`
+    border-radius: ${({ theme: o }) => o.borderRadius.circle};
+    background-color: ${({ theme: o }) => o.colors.secondary.pink.n450};
+  `,
+  badge: c`
+    border: ${({ theme: o }) => `1px solid ${o.colors.primary.purple.n450}`};
+    border-radius: ${({ theme: o }) => o.borderRadius.sm};
+    background-color: ${({ theme: o }) => o.colors.primary.purple.n450};
+  `
+}, x = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing.xs};
+  border: none;
+
+  background-color: transparent;
+  cursor: pointer;
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  p {
+    text-align: start;
+    margin: 0;
+    white-space: nowrap;
+  }
+`, $ = s.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:active {
+    background-color: ${(o) => o.$activeBgColor};
+  }
+
+  &:hover {
+    background-color: ${(o) => o.$activeBgColor};
+  }
+  ${(o) => o.$active && c`
+      border: 1px solid transparent;
+      border-radius: ${o.theme.borderRadius.sm};
+      background-color: ${o.$activeBgColor};
+    `}
+`, y = s.div`
+  width: 1.5rem;
+  height: 1.5rem;
+  text-align: center;
+  color: ${({ theme: o }) => o.colors.grey.n50};
+  font-weight: ${({ theme: o }) => o.typography.weights.semiBold};
+  ${({ $variant: o }) => b[o]}
+`, B = ({ item: o }) => {
+  const e = o == null ? void 0 : o.icon, n = g(), { color: t, bgColor: p, activeBgColor: a, activeColor: l } = u(o == null ? void 0 : o.variant), d = /* @__PURE__ */ r.jsxs(x, { children: [
+    /* @__PURE__ */ r.jsxs("div", { style: { display: "flex", alignItems: "center", gap: n.spacing.xs }, children: [
+      e && /* @__PURE__ */ r.jsx(e, { color: o.active ? l : t, size: 20 }),
+      /* @__PURE__ */ r.jsx(v, { component: "p", variant: "smText", color: o.active ? l : t, children: o == null ? void 0 : o.title })
+    ] }),
+    (o == null ? void 0 : o.count) && /* @__PURE__ */ r.jsx(y, { $variant: (o == null ? void 0 : o.notificationVariant) ?? "badge", children: /* @__PURE__ */ r.jsx("span", { children: o.count }) })
+  ] }), i = {
+    padding: `${n.spacing.xs} ${n.spacing.sm}`,
+    width: "100%",
+    hoverBgColor: a,
+    activeBgColor: a
+  };
+  return /* @__PURE__ */ r.jsx(
+    $,
+    {
+      $variant: (o == null ? void 0 : o.variant) ?? "normal",
+      $bgColor: p,
+      $activeBgColor: a ?? "",
+      $active: !!(o != null && o.active),
+      children: (o == null ? void 0 : o.component) === "link" && o.path ? /* @__PURE__ */ r.jsx(h, { to: o.path, state: o.state, component: o.linkComponent, ...i, children: d }) : /* @__PURE__ */ r.jsx(
+        "button",
+        {
+          onClick: o.onClick,
+          style: {
+            ...i,
+            border: "none",
+            background: "transparent",
+            cursor: "pointer",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            width: "100%"
+          },
+          children: d
+        }
+      )
+    },
+    o == null ? void 0 : o.title
+  );
+};
+export {
+  B as default
+};

package/dist/components/NavigationPanel.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { NavItemType } from './NavItem';
+export type NavigationCategory = {
+    title: string;
+    items: NavItemType[];
+};
+export type NavigationPanelProps = {
+    title?: string;
+    categories: NavigationCategory[];
+    highlightList?: string[];
+    style?: React.CSSProperties;
+    linkComponent?: React.ComponentType;
+};
+declare const NavigationPanel: React.FC<NavigationPanelProps>;
+export default NavigationPanel;
+//# sourceMappingURL=NavigationPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationPanel.d.ts","sourceRoot":"","sources":["../../src/lib/components/NavigationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAgB,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGhE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,kBAAkB,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACrC,CAAC;AAoBF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6BnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/NavigationPanel.js

@@ -0,0 +1,44 @@
+import { j as i } from "../_virtual/jsx-runtime.js";
+import "react";
+import t from "styled-components";
+import m from "./Divider.js";
+import d from "./NavItem.js";
+import a from "./Typography.js";
+const p = t.div`
+  width: 22.25rem;
+  height: 28.75rem;
+  padding: ${({ theme: r }) => r.spacing.m};
+  border-radius: ${({ theme: r }) => r.borderRadius.lg};
+  background-color: ${({ theme: r }) => r.colors.grey.n50};
+  border: 1px solid ${({ theme: r }) => r.colors.grey.n150};
+  display: flex;
+  flex-direction: column;
+
+  gap: ${({ theme: r }) => r.spacing.xs};
+`, c = t(a)`
+  margin-bottom: ${({ theme: r }) => r.spacing.xxs};
+  color: ${({ theme: r }) => r.colors.grey.n350};
+`, v = ({ title: r, categories: n, style: s = {}, linkComponent: l }) => /* @__PURE__ */ i.jsxs(p, { style: s, children: [
+  r && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    /* @__PURE__ */ i.jsx(a, { variant: "h6", children: r }),
+    /* @__PURE__ */ i.jsx(m, {})
+  ] }),
+  n.map((o) => /* @__PURE__ */ i.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ i.jsx(c, { variant: "smText", children: o.title }),
+    o.items.map((e) => /* @__PURE__ */ i.jsx(
+      d,
+      {
+        item: {
+          ...e,
+          component: "link",
+          linkComponent: l,
+          variant: "primary"
+        }
+      },
+      e.title
+    ))
+  ] }, o.title))
+] });
+export {
+  v as default
+};

package/dist/components/NumberInput.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export type NumberInputProps = {
+    name: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder: string;
+    label: string;
+    error: string;
+    disabled?: boolean;
+    touched?: boolean;
+    isInteractive?: boolean;
+    optional?: boolean;
+};
+declare const NumberInput: React.FC<NumberInputProps>;
+export default NumberInput;
+//# sourceMappingURL=NumberInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/lib/components/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAUF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgD3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/NumberInput.js

@@ -0,0 +1,51 @@
+import { j as y } from "../_virtual/jsx-runtime.js";
+import { useState as N, useEffect as h } from "react";
+import j from "./InputField.js";
+const a = (e) => e.replace(/,/g, ""), o = (e) => {
+  const t = a(e);
+  return t ? Number(t).toLocaleString() : "";
+}, I = ({
+  name: e,
+  value: t,
+  onChange: f,
+  label: c,
+  placeholder: u,
+  error: i,
+  disabled: m,
+  touched: p = !1,
+  isInteractive: l = !1,
+  optional: d = !1
+}) => {
+  const [g, s] = N("");
+  h(() => {
+    if (t) {
+      const r = o(t == null ? void 0 : t.toString());
+      s(r);
+    }
+  }, [t]);
+  const x = (r) => {
+    const b = r.target.value, n = a(b);
+    /^\d*$/.test(n) && (s(o(n)), f(r));
+  };
+  return /* @__PURE__ */ y.jsx(
+    j,
+    {
+      name: e,
+      label: c,
+      placeholder: u,
+      value: g,
+      onChange: x,
+      type: "text",
+      error: i,
+      success: !1,
+      readonly: !1,
+      disabled: m,
+      touched: p,
+      isInteractive: l,
+      optional: d
+    }
+  );
+};
+export {
+  I as default
+};

package/dist/components/OTP.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface OtpInputProps {
+    length?: number;
+    onComplete: (otp: string) => void;
+    last4Number: string;
+}
+declare const OtpInput: React.FC<OtpInputProps>;
+export default OtpInput;
+//# sourceMappingURL=OTP.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OTP.d.ts","sourceRoot":"","sources":["../../src/lib/components/OTP.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsGrC,CAAC;AA2DF,eAAe,QAAQ,CAAC"}

package/dist/components/OTP.js

@@ -0,0 +1,120 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { useState as w, useRef as T } from "react";
+import a, { useTheme as O } from "styled-components";
+import P from "../assets/images/OTP.png.js";
+import y from "./Button.js";
+import s from "./Typography.js";
+const B = ({ length: e = 4, onComplete: f, last4Number: m = "0000" }) => {
+  const [u, h] = w(Array(e).fill("")), c = T([]), l = O(), i = l.dir === "rtl", g = (t, n) => {
+    var p, x;
+    if (isNaN(Number(n))) return;
+    const o = [...u];
+    o[t] = n, h(o), n && (i && t > 0 ? (p = c.current[t - 1]) == null || p.focus() : !i && t < e - 1 && ((x = c.current[t + 1]) == null || x.focus())), o.every((v) => v !== "") && f(o.join(""));
+  }, j = (t, n) => {
+    var o, p;
+    n.key === "Backspace" && !u[t] && (i && t < e - 1 ? (o = c.current[t + 1]) == null || o.focus() : !i && t > 0 && ((p = c.current[t - 1]) == null || p.focus()));
+  }, b = (t) => {
+    t.preventDefault();
+    const n = t.clipboardData.getData("text/plain").trim();
+    if (n.length === e && !isNaN(Number(n))) {
+      const o = n.split("").slice(0, e);
+      h(o), f(o.join(""));
+    }
+  };
+  return /* @__PURE__ */ r.jsxs($, { dir: i ? "rtl" : "ltr", children: [
+    /* @__PURE__ */ r.jsxs(R, { children: [
+      /* @__PURE__ */ r.jsx(s, { variant: "h5", children: i ? "كلمة مرور لمرة واحدة" : "One Time Password" }),
+      /* @__PURE__ */ r.jsx(N, { src: P, alt: "OTP" }),
+      /* @__PURE__ */ r.jsx(s, { variant: "h6", children: i ? "أدخل الرمز الذي يصلك عبر الرسائل النصية القصيرة" : "Enter the code you receive via SMS" })
+    ] }),
+    i ? /* @__PURE__ */ r.jsxs(s, { variant: "caption", color: l.colors.grey.n400, children: [
+      "تم إرسال كلمة مرور لمرة واحدة (OTP) إلى رقم هاتفك المحمول المسجل المنتهي بـ",
+      /* @__PURE__ */ r.jsxs(d, { children: [
+        "•••• ",
+        m
+      ] }),
+      "."
+    ] }) : /* @__PURE__ */ r.jsxs(s, { variant: "caption", color: l.colors.grey.n400, children: [
+      "A One-Time Password (OTP) has been sent to your registered mobile number ending in ",
+      /* @__PURE__ */ r.jsxs(d, { children: [
+        "•••• ",
+        m
+      ] }),
+      "."
+    ] }),
+    /* @__PURE__ */ r.jsx(k, { children: u.map((t, n) => /* @__PURE__ */ r.jsx(
+      D,
+      {
+        type: "text",
+        maxLength: 1,
+        value: t,
+        ref: (o) => c.current[n] = o,
+        onChange: (o) => g(n, o.target.value),
+        onKeyDown: (o) => j(n, o),
+        onPaste: b,
+        autoFocus: i ? n === e - 1 : n === 0,
+        inputMode: "numeric",
+        dir: "ltr"
+      },
+      n
+    )) }),
+    i ? /* @__PURE__ */ r.jsxs(s, { variant: "caption", color: l.colors.grey.n400, children: [
+      "سيتم انتهاء صلاحية رمز OTP ",
+      /* @__PURE__ */ r.jsx(d, { children: "خلال 24 ثانية." }),
+      /* @__PURE__ */ r.jsx(y, { onClick: () => {
+      }, size: "xxs", variant: "outline-primary", children: "إعادة إرسال الرمز" })
+    ] }) : /* @__PURE__ */ r.jsxs(s, { variant: "caption", color: l.colors.grey.n400, children: [
+      "The OTP will be expired in ",
+      /* @__PURE__ */ r.jsx(d, { children: "24s" }),
+      /* @__PURE__ */ r.jsx(y, { onClick: () => {
+      }, size: "xxs", variant: "outline-primary", children: "Resend code" })
+    ] })
+  ] });
+}, $ = a.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  direction: ${({ dir: e }) => e || "ltr"};
+`, k = a.div`
+  display: flex;
+  gap: ${({ theme: e }) => e.spacing.s};
+  margin: ${({ theme: e }) => e.spacing.s} 0px;
+  justify-content: center;
+`, D = a.input`
+  width: 2rem;
+                height: 3.5rem;
+                text-align: center;
+                font-size: 20px;
+                font-weight: 500;
+                border: 1px solid ${({ theme: e }) => e.colors.grey.n150};
+                border-radius: 12px;
+                transition: all 0.2s ease;
+                direction: ltr; /* Force LTR for numbers */
+
+                &:focus {
+                    outline: none;
+                border-color: ${({ theme: e }) => e.colors.primary.purple.n450};
+                box-shadow: ${({ theme: e }) => e.boxShadow.s3};
+    }
+
+                &::-webkit-inner-spin-button,
+                &::-webkit-outer-spin-button {
+                    -webkit - appearance: none;
+                margin: 0;
+    }
+                `, N = a.img`
+  align-self: center;
+  padding: ${({ theme: e }) => e.spacing.m} 0;
+`, d = a.span`
+  font-weight: ${({ theme: e }) => e.typography.weights.bold};
+  font-size: ${({ theme: e }) => e.typography.sizes.s2};
+  color: ${({ theme: e }) => e.colors.grey.n600};
+  unicode-bidi: plaintext; /* Proper handling of mixed-direction text */
+`, R = a.div`
+  display: flex;
+  flex-direction: column;
+`;
+export {
+  B as default
+};

package/dist/components/OptionCardGroup.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+export type OptionSelectCardProps = {
+    id: string | number;
+    title: string;
+    description?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    rightAdornment?: React.ReactNode;
+    name?: string;
+    value?: string | number;
+    onSelect?: (id: OptionSelectCardProps['id']) => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export type OptionSelectGroupProps = {
+    items: OptionSelectCardProps[];
+    rowGap?: number;
+    columnGap?: number;
+    columns?: 1 | 2;
+    name?: string;
+    value?: string | number;
+    onChange?: (value: string | number) => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const OptionSelectGroupWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $rowGap: number;
+    $columnGap: number;
+    $columns: 1 | 2;
+}>> & string;
+export declare const OptionSelectCard: React.FC<OptionSelectCardProps>;
+export declare const OptionSelectGroup: React.FC<OptionSelectGroupProps>;
+export default OptionSelectGroup;
+//# sourceMappingURL=OptionCardGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionCardGroup.d.ts","sourceRoot":"","sources":["../../src/lib/components/OptionCardGroup.tsx"],"names":[],"mappings":"AAuQA,OAAO,KAA6C,MAAM,OAAO,CAAC;AASlE,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,qBAAqB,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,qBAAqB,EAAE,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AA2GF,eAAO,MAAM,wBAAwB;aAC1B,MAAM;gBACH,MAAM;cACR,CAAC,GAAG,CAAC;YAahB,CAAC;AAKF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA4E5D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgC9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/OptionCardGroup.js

@@ -0,0 +1,190 @@
+import { j as s } from "../_virtual/jsx-runtime.js";
+import { useMemo as k, createContext as G, useContext as R } from "react";
+import c, { css as j } from "styled-components";
+import z from "./RadioInput.js";
+const v = G(null), S = () => R(v), I = c.button`
+  all: unset;
+  box-sizing: border-box;
+  width: 100%;
+  height: 4.25rem;
+  padding: 1rem;
+
+  display: grid;
+  grid-template-columns: 1.5rem 1fr 1.5rem;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.s};
+  background: ${({ theme: e }) => e.colors.grey.n50};
+  cursor: pointer;
+
+  border: none;
+  box-shadow: none;
+
+  transition:
+    background-color 0.2s ease,
+    opacity 0.2s ease;
+
+  ${({ $disabled: e }) => e && j`
+      cursor: not-allowed;
+      opacity: 0.6;
+    `}
+
+  &:hover {
+    ${({ $disabled: e, theme: o }) => !e && j`
+        background: ${o.colors.grey.n100};
+      `}
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme: e }) => e.colors.primary.purple.n450};
+    outline-offset: 2px;
+    border-radius: ${({ theme: e }) => e.borderRadius.md};
+  }
+`, D = c.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme: e }) => {
+  var o, t;
+  return (t = (o = e.colors) == null ? void 0 : o.grey) == null ? void 0 : t.n650;
+}};
+  width: 1.5rem;
+  height: 1.5rem;
+  align-self: start;
+  margin-top: 2px;
+
+  svg {
+    width: 1.125rem;
+    height: 0.875rem;
+    color: inherit;
+  }
+`, N = c.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.xxs};
+
+  .title {
+    margin: 0;
+    font-weight: 600;
+    font-size: ${({ theme: e }) => e.typography.sizes.s4};
+    color: ${({ theme: e }) => {
+  var o, t;
+  return (t = (o = e.colors) == null ? void 0 : o.grey) == null ? void 0 : t.n650;
+}};
+    line-height: ${({ theme: e }) => e.typography.lineHeights.s};
+    letter-spacing: -0.25px;
+  }
+
+  .desc {
+    margin: 0;
+    color: ${({ theme: e }) => {
+  var o, t;
+  return (t = (o = e.colors) == null ? void 0 : o.grey) == null ? void 0 : t.n400;
+}};
+    font-size: ${({ theme: e }) => e.typography.sizes.s3};
+    line-height: ${({ theme: e }) => e.typography.lineHeights.s};
+    letter-spacing: -0.25px;
+  }
+`, O = c.div`
+  display: flex;
+  justify-content: flex-end;
+  align-self: start;
+  transform: translateY(-1px);
+`, V = c.div`
+  display: grid;
+  grid-auto-rows: 4.25rem;
+  grid-template-columns: ${({ $columns: e }) => e === 2 ? "repeat(2, 22.75rem)" : "22.75rem"};
+  justify-content: start;
+  row-gap: ${({ $rowGap: e }) => `${e}px`};
+  column-gap: ${({ $columnGap: e }) => `${e}px`};
+
+  @media (max-width: 780px) {
+    grid-template-columns: 1fr;
+    grid-auto-rows: 68px;
+  }
+`, E = ({
+  id: e,
+  title: o,
+  description: t,
+  selected: m,
+  disabled: n = !1,
+  icon: a,
+  rightAdornment: p,
+  name: x,
+  value: h,
+  onSelect: l,
+  className: d,
+  style: g
+}) => {
+  const r = S(), u = h ?? e, y = r == null ? void 0 : r.value, $ = r && typeof y < "u", b = $ ? y === u : !!m, w = (r == null ? void 0 : r.name) ?? x ?? String(e), f = () => {
+    n || ($ && (r != null && r.onChange) ? r.onChange(u) : l == null || l(e));
+  }, C = (i) => {
+    n || (i.key === " " || i.key === "Enter") && (i.preventDefault(), f());
+  };
+  return /* @__PURE__ */ s.jsxs(
+    I,
+    {
+      className: d,
+      style: g,
+      onClick: f,
+      onKeyDown: C,
+      $disabled: n,
+      "aria-disabled": n || void 0,
+      tabIndex: n ? -1 : 0,
+      children: [
+        /* @__PURE__ */ s.jsx(D, { children: a }),
+        /* @__PURE__ */ s.jsxs(N, { children: [
+          /* @__PURE__ */ s.jsx("h5", { className: "title", children: o }),
+          !!t && /* @__PURE__ */ s.jsx("p", { className: "desc", children: t })
+        ] }),
+        /* @__PURE__ */ s.jsxs(O, { onClick: (i) => i.stopPropagation(), children: [
+          p,
+          /* @__PURE__ */ s.jsx(
+            z,
+            {
+              name: w,
+              label: "",
+              options: [{ label: "", value: String(u) }],
+              value: b ? String(u) : "",
+              onChange: (i) => {
+                i.preventDefault(), f();
+              },
+              disabled: n,
+              optional: !1
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, M = ({
+  items: e,
+  rowGap: o = 12,
+  columnGap: t = 26,
+  columns: m = 2,
+  name: n,
+  value: a,
+  onChange: p,
+  className: x,
+  style: h
+}) => {
+  const l = k(() => ({ name: n, value: a, onChange: p }), [n, a, p]), d = typeof a < "u";
+  return /* @__PURE__ */ s.jsx(v.Provider, { value: l, children: /* @__PURE__ */ s.jsx(
+    V,
+    {
+      className: x,
+      style: h,
+      $rowGap: o,
+      $columnGap: t,
+      $columns: m,
+      role: d ? "radiogroup" : void 0,
+      "aria-label": d ? n : void 0,
+      children: e.map((g) => /* @__PURE__ */ s.jsx(E, { ...g }, g.id))
+    }
+  ) });
+};
+export {
+  E as OptionSelectCard,
+  M as OptionSelectGroup,
+  V as OptionSelectGroupWrapper,
+  M as default
+};

package/dist/components/PackageCard.d.ts

@@ -0,0 +1,22 @@
+export type PackageCardProps = {
+    planTitle: string;
+    planDescription: string;
+    offerBadgLabel?: string;
+    isPopular?: boolean;
+    popularBadgLabel?: string;
+    bulletsList: string[];
+    primaryAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    secondaryAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    amount: string;
+    period?: string;
+    backgroundColor?: string;
+};
+declare const PackageCard: (props: PackageCardProps) => import("react/jsx-runtime").JSX.Element;
+export default PackageCard;
+//# sourceMappingURL=PackageCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PackageCard.d.ts","sourceRoot":"","sources":["../../src/lib/components/PackageCard.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE;QACd,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,eAAe,CAAC,EAAE;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAoEF,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA8D3C,CAAC;AAEF,eAAe,WAAW,CAAC"}