qaema-ui 0.0.1

package/dist/components/Hint.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { HintVariant } from '../hooks/useHintVariant';
+export type HintProps = {
+    variant: HintVariant;
+    showLeadIcon?: boolean;
+    showLink?: boolean;
+    title: string;
+    linkLabel?: string;
+    linkHandler?: () => void;
+};
+declare const Hint: React.FC<HintProps>;
+export default Hint;
+//# sourceMappingURL=Hint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hint.d.ts","sourceRoot":"","sources":["../../src/lib/components/Hint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAQ/C,OAAuB,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAIzE,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,EAAE,WAAW,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AA6CF,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAkC7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Hint.js

@@ -0,0 +1,71 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import "react";
+import { CgCloseR as d } from "../node_modules/react-icons/cg/index.js";
+import { GrStatusInfo as x } from "../node_modules/react-icons/gr/index.js";
+import { TbInfoTriangle as g, TbExclamationMark as f } from "../node_modules/react-icons/tb/index.js";
+import s from "styled-components";
+import h from "../hooks/useHintVariant.js";
+import u from "./Typography.js";
+import j from "../node_modules/react-bootstrap/esm/Button.js";
+const y = {
+  neutral: /* @__PURE__ */ r.jsx(x, {}),
+  info: /* @__PURE__ */ r.jsx(f, {}),
+  warning: /* @__PURE__ */ r.jsx(g, {}),
+  error: /* @__PURE__ */ r.jsx(d, {})
+}, $ = s.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${({ theme: t }) => t.spacing.xs};
+  padding: ${({ theme: t }) => t.spacing.sm};
+  border-radius: 10%;
+  font-size: ${({ theme: t }) => t.typography.sizes.s3};
+  line-height: 1;
+`, T = s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  background-color: ${({ $color: t }) => `${t}20`};
+  border-radius: 50%;
+  svg {
+    color: ${({ $color: t }) => t};
+    width: 16px;
+    height: 16px;
+  }
+`, b = s(u)`
+  padding: 0;
+  margin: 0;
+  span {
+    font-weight: ${({ theme: t }) => t.typography.weights.semiBold};
+  }
+`, E = ({
+  variant: t = "neutral",
+  showLeadIcon: n = !0,
+  showLink: e = !1,
+  title: a,
+  linkLabel: l = "Link",
+  linkHandler: p = () => {
+  }
+}) => {
+  const o = h(t), c = a.split(/(\*\*[^*]+\*\*)/g).map((i, m) => i.startsWith("**") && i.endsWith("**") ? /* @__PURE__ */ r.jsx("span", { children: i.slice(2, -2) }, m) : i);
+  return /* @__PURE__ */ r.jsxs($, { $color: o, children: [
+    n && /* @__PURE__ */ r.jsx(T, { $color: o, children: y[t] }),
+    /* @__PURE__ */ r.jsxs(b, { variant: "smText", color: o, children: [
+      c,
+      e && /* @__PURE__ */ r.jsx(
+        j,
+        {
+          as: "a",
+          onClick: (i) => {
+            i.preventDefault(), p();
+          },
+          children: l
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  E as default
+};

package/dist/components/HorizontalChart.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+type HorizontalChartData = {
+    name: string;
+    value: number;
+    color: string;
+};
+export type HorizontalChartProps = {
+    data: Array<HorizontalChartData>;
+};
+export declare const LabelRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const HorizontalChart: React.FC<HorizontalChartProps>;
+export default HorizontalChart;
+//# sourceMappingURL=HorizontalChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalChart.d.ts","sourceRoot":"","sources":["../../src/lib/components/HorizontalChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AACF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;CAClC,CAAC;AAgDF,eAAO,MAAM,QAAQ,yMAMpB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6CnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/HorizontalChart.js

@@ -0,0 +1,56 @@
+import { j as o } from "../_virtual/jsx-runtime.js";
+import { Container as c, Row as p, Col as d, setConfiguration as g } from "react-grid-system";
+import i, { useTheme as h } from "styled-components";
+import x from "./Legend.js";
+g({ gutterWidth: 40 });
+const m = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.l};
+`, u = i.div`
+  display: flex;
+  width: 100%;
+  height: ${({ theme: e }) => e.spacing.s};
+  overflow: hidden;
+  margin: ${({ theme: e }) => `${e.spacing.m} 0`};
+  background-color: transparent;
+`, f = i.div`
+  height: 100%;
+  width: ${({ $percentage: e }) => `${e}%`};
+  background-color: ${({ $color: e }) => e};
+  transition: width 0.3s ease;
+  position: relative;
+  z-index: 1;
+  margin-left: ${({ $isFirst: e }) => e ? "0" : "-10px"};
+
+  clip-path: ${({ $isFirst: e, $isLast: n }) => e && n ? "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" : e ? "polygon(0% 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%)" : n ? "polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%)" : "polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%)"};
+`, $ = i.div`
+  // display: flex;
+  // align-items: baseline;
+  // gap: ${({ theme: e }) => e.spacing.xs};
+  font-size: ${({ theme: e }) => e.typography.sizes.s3};
+  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
+`, C = ({ data: e }) => {
+  const n = h(), a = e.slice(0, 6), l = a.reduce((t, r) => t + r.value, 0), s = a.map((t) => ({
+    percentage: l === 0 ? 100 / a.length : t.value / l * 100,
+    ...t
+  }));
+  return /* @__PURE__ */ o.jsxs(m, { children: [
+    /* @__PURE__ */ o.jsx(u, { children: s.map((t, r) => /* @__PURE__ */ o.jsx(
+      f,
+      {
+        $color: t.color,
+        $percentage: t.percentage,
+        $isFirst: r === 0,
+        $isLast: r === s.length - 1,
+        title: `${t.name}: ${t.value} (${t.percentage.toFixed(1)}%)`
+      },
+      t.name
+    )) }),
+    /* @__PURE__ */ o.jsx(c, { fluid: !0, style: { margin: 0 }, children: /* @__PURE__ */ o.jsx(p, { children: s.map((t) => /* @__PURE__ */ o.jsx(d, { md: 4, sm: 6, xs: 12, style: { marginBottom: n.spacing.xs }, children: /* @__PURE__ */ o.jsx($, { children: /* @__PURE__ */ o.jsx(x, { segment: t }) }) }, t.color)) }) })
+  ] });
+};
+export {
+  $ as LabelRow,
+  C as default
+};

package/dist/components/Image.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { Theme } from '../theme/theme';
+export type ImageProps = {
+    src?: string;
+    alt?: string;
+    ratio?: keyof Theme['image']['ratios'];
+    placeholderSrc?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number;
+};
+declare const Image: React.FC<ImageProps>;
+export default Image;
+//# sourceMappingURL=Image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../src/lib/components/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAI1C,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,KAAK,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAyBF,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAkB/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Image.js

@@ -0,0 +1,34 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import "react";
+import t from "styled-components";
+import n from "../assets/images/placeholder.png.js";
+const f = t.div`
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  width: ${({ $width: e }) => typeof e == "number" ? `${e}px` : e ?? "100%"};
+  height: ${({ $height: e }) => typeof e == "number" ? `${e}px` : "auto"};
+  ${({ $height: e, $ratio: o }) => !e && `aspect-ratio: ${o.replace(":", "/")};`}
+`, h = t.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: ${({ $borderRadius: e }) => e ? `${e}px` : "0"};
+  display: block;
+`, b = ({
+  src: e,
+  alt: o = "",
+  ratio: i = "1:1",
+  placeholderSrc: a = n,
+  className: p,
+  style: s,
+  width: c,
+  height: m,
+  borderRadius: d
+}) => {
+  const l = e ?? a;
+  return /* @__PURE__ */ r.jsx(f, { className: p, style: s, $ratio: i, $width: c, $height: m, children: /* @__PURE__ */ r.jsx(h, { src: l, alt: o, $borderRadius: d }) });
+};
+export {
+  b as default
+};

package/dist/components/InfoCard.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export type InfoCardProps = {
+    title: string;
+    subTitle?: string;
+    bulletsList?: Array<string>;
+    hint?: string;
+    hasBorder?: boolean;
+    hasBackground?: boolean;
+    backgroundColor?: string;
+};
+declare const InfoCard: React.FC<InfoCardProps>;
+export default InfoCard;
+//# sourceMappingURL=InfoCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCard.d.ts","sourceRoot":"","sources":["../../src/lib/components/InfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAqBF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgCrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/InfoCard.js

@@ -0,0 +1,43 @@
+import { j as n } from "../_virtual/jsx-runtime.js";
+import "react";
+import c, { useTheme as h } from "styled-components";
+import { Card as g } from "./Card.js";
+import x from "./InfoCardBulletItem.js";
+import e from "./Typography.js";
+const f = c.div`
+  display: flex;
+  flex-direction: column;
+`, y = c.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: o }) => o.spacing.s};
+  h6 {
+    margin-top: 0;
+    margin-bottom: ${({ theme: o }) => o.spacing.xxs};
+    font-weight: ${({ theme: o }) => o.typography.weights.semiBold};
+  }
+  caption {
+    text-align: start;
+    margin-top: 0;
+  }
+`, $ = (o) => {
+  const { title: i, subTitle: a, bulletsList: r, hint: s, hasBorder: d = !0, hasBackground: p = !0, backgroundColor: m } = o, t = h();
+  return /* @__PURE__ */ n.jsx(
+    g,
+    {
+      shadowVariant: "none",
+      hoverEffect: !1,
+      border: d ? `1px solid ${t.colors.grey.n200}` : "none",
+      backgroundColor: p ? m : t.colors.grey.n50,
+      children: /* @__PURE__ */ n.jsxs(y, { children: [
+        i && /* @__PURE__ */ n.jsx(e, { variant: "h6", children: i }),
+        a && /* @__PURE__ */ n.jsx(e, { variant: "caption", color: t.colors.grey.n400, children: a }),
+        r && (r == null ? void 0 : r.length) > 0 && /* @__PURE__ */ n.jsx(f, { children: r == null ? void 0 : r.map((l) => /* @__PURE__ */ n.jsx(x, { title: l }, l)) }),
+        s && /* @__PURE__ */ n.jsx(e, { variant: "caption", color: t.colors.grey.n400, children: s })
+      ] })
+    }
+  );
+};
+export {
+  $ as default
+};

package/dist/components/InfoCardBulletItem.d.ts

@@ -0,0 +1,7 @@
+export type InfoCardBulletItemProps = {
+    showBullet?: boolean;
+    title: string;
+};
+declare const InfoCardBulletItem: React.FC<InfoCardBulletItemProps>;
+export default InfoCardBulletItem;
+//# sourceMappingURL=InfoCardBulletItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCardBulletItem.d.ts","sourceRoot":"","sources":["../../src/lib/components/InfoCardBulletItem.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,uBAAuB,GAAG;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAkBF,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAWzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/InfoCardBulletItem.js

@@ -0,0 +1,28 @@
+import { j as t } from "../_virtual/jsx-runtime.js";
+import { SiListmonk as i } from "../node_modules/react-icons/si/index.js";
+import s, { useTheme as m } from "styled-components";
+import n from "./Typography.js";
+const a = s.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme: r }) => r.spacing.xs};
+  align-items: center;
+  svg {
+    color: ${({ theme: r }) => r.colors.primary.purple.n450};
+    width: 0.8rem;
+    height: 0.8rem;
+  }
+  .bullet-title {
+    margin: 0;
+    color: ${({ theme: r }) => r.colors.grey.n650};
+  }
+`, h = (r) => {
+  const { showBullet: e = !0, title: o } = r, l = m();
+  return /* @__PURE__ */ t.jsxs(a, { children: [
+    e && /* @__PURE__ */ t.jsx(i, {}),
+    /* @__PURE__ */ t.jsx(n, { variant: "caption", color: l.colors.primary.dark.n600, children: o })
+  ] });
+};
+export {
+  h as default
+};

package/dist/components/InfoItem.d.ts

@@ -0,0 +1,9 @@
+import { CellData, CellType } from './Table/Table.types';
+type InfoItemProps = {
+    data: CellData;
+    type: CellType;
+    width?: string;
+};
+declare const InfoItem: React.FC<InfoItemProps>;
+export default InfoItem;
+//# sourceMappingURL=InfoItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoItem.d.ts","sourceRoot":"","sources":["../../src/lib/components/InfoItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AA2B9D,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwBF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6BrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/InfoItem.js

@@ -0,0 +1,48 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import m, { useTheme as d } from "styled-components";
+import f from "../assets/images/placeholder.png.js";
+import u from "../assets/images/SaudiFlag.png.js";
+import p from "../assets/svg/maleAvatar.svg.js";
+import l from "./Typography.js";
+const g = m.img`
+  width: ${({ $width: e = "2rem" }) => e};
+  height: 2rem;
+  object-fit: contain;
+  flex-shrink: 0;
+  border-radius: ${({ $borderRadius: e = "0%" }) => e};
+`, h = m.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+`, c = { textAlign: "start", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, x = {
+  user: p,
+  flag: u,
+  product: f
+}, v = {
+  user: "50%",
+  flag: "50%",
+  product: "50%"
+}, j = {
+  user: "2rem",
+  flag: "2rem",
+  product: "2.625rem"
+};
+function y(e) {
+  return ["user", "flag", "product"].includes(e);
+}
+const R = ({ data: e, type: t }) => {
+  var n;
+  const a = d();
+  let o, i, s;
+  return y(t) && (o = ((n = e.imageSrc) == null ? void 0 : n.trim()) ?? x[t], i = j[t], s = v[t]), /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    o && /* @__PURE__ */ r.jsx(g, { src: o, alt: e.name, $width: i, $borderRadius: s }),
+    /* @__PURE__ */ r.jsxs(h, { children: [
+      /* @__PURE__ */ r.jsx(l, { variant: "smText", style: c, children: e.name }),
+      e.description && /* @__PURE__ */ r.jsx(l, { variant: "caption", color: a.colors.grey.n350, style: c, children: e.description })
+    ] })
+  ] });
+};
+export {
+  R as default
+};

package/dist/components/InputField.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export type InputFieldProps = {
+    label?: string;
+    optional?: boolean;
+    placeholder?: string;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    type?: string;
+    disabled?: boolean;
+    success?: boolean;
+    error?: string;
+    touched?: boolean;
+    readonly?: boolean;
+    helperText?: string | React.ReactNode;
+    helperTextLink?: {
+        text: string;
+        onClick: () => void;
+    };
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    checked?: boolean;
+    name?: string;
+    isInteractive?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>;
+export declare const Optional: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const InputField: React.FC<InputFieldProps>;
+export default InputField;
+//# sourceMappingURL=InputField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../src/lib/components/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,cAAc,CAAC,EAAE;QACf,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;AA2KzE,eAAO,MAAM,QAAQ,2MAOpB,CAAC;AAgDF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4FzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/InputField.js

@@ -0,0 +1,240 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import "react";
+import i, { useTheme as H, css as c } from "styled-components";
+import { useQaemaCoreTranslation as R } from "../i18n/i18n.js";
+const g = {
+  success: c`
+    color: ${({ theme: o }) => o.colors.state.success.n450};
+    border: 0.063rem solid ${({ theme: o }) => o.colors.state.success.n450};
+    box-shadow: ${({ theme: o }) => o.boxShadow.s1};
+    outline: 0;
+    &:focus {
+      box-shadow: ${({ theme: o }) => o.boxShadow.s1};
+      outline: 0;
+    }
+  `,
+  readonly: c`
+    background-color: ${({ theme: o }) => o.colors.grey.n150};
+    box-shadow: ${({ theme: o }) => o.boxShadow.s3};
+    color: ${({ theme: o }) => o.colors.state.success.n750};
+    border: 0.063rem solid ${({ theme: o }) => o.colors.grey.n100};
+    cursor: not-allowed;
+    pointer-events: none;
+  `,
+  disabled: c`
+    background-color: ${({ theme: o }) => o.colors.grey.n100};
+    box-shadow: ${({ theme: o }) => o.boxShadow.s3};
+    border: 0.063rem solid ${({ theme: o }) => o.colors.grey.n100};
+    cursor: not-allowed;
+  `,
+  error: c`
+    color: ${({ theme: o }) => o.colors.state.error.n450};
+    border: 0.063rem solid ${({ theme: o }) => o.colors.state.error.n450};
+    box-shadow: ${({ theme: o }) => o.boxShadow.s1};
+    outline: 0;
+  `,
+  idle: c`
+    background-color: ${({ theme: o }) => o.colors.grey.n50};
+    border: 0.063rem solid ${({ theme: o }) => o.colors.grey.n150};
+    color: ${({ theme: o }) => o.colors.state.success.n750};
+    box-shadow: ${({ theme: o }) => o.boxShadow.s2};
+    border-color: ${({ theme: o }) => o.colors.grey.n100};
+    &:focus {
+      background-color: ${({ theme: o }) => o.colors.grey.n50};
+      border: 0.063rem solid ${({ theme: o }) => o.colors.grey.n100};
+      box-shadow: ${({ theme: o }) => o.boxShadow.s1};
+      outline: 0;
+    }
+  `
+}, E = i.div`
+  ${({ success: o, error: r, readonly: t, disabled: s, touched: n }) => s ? g.disabled : t ? g.readonly : o ? g.success : r && n ? g.error : g.idle}
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: o }) => o.spacing.xs};
+  flex-direction: 'row';
+  padding: 0rem ${({ theme: o }) => o.spacing.sm};
+  width: 100%;
+  height: 3.5rem;
+  border-radius: ${({ theme: o }) => o.borderRadius.lg};
+  padding-top: ${({ theme: o }) => o.spacing.s};
+  padding-bottom: ${({ theme: o }) => o.spacing.s};
+  transition: all 0.2s ease;
+  box-shadow: ${({ theme: o }) => o.boxShadow.s3};
+
+  /* Ensure correct text alignment */
+  text-align: ${({ theme: o }) => o.dir === "rtl" ? "right" : "left"};
+  direction: ${({ theme: o }) => o.dir === "rtl" ? "rtl" : "ltr"};
+
+  /* Hover state - only when not disabled */
+  &:hover {
+    ${({ disabled: o }) => !o && c`
+        background-color: ${({ theme: r }) => r.colors.grey.n50};
+        box-shadow: ${({ theme: r }) => r.boxShadow.s2};
+      `}
+  }
+
+  /* Active state - only when not disabled */
+  &:active {
+    ${({ disabled: o }) => !o && c`
+        background-color: ${({ theme: r }) => r.colors.grey.n100};
+        box-shadow: ${({ theme: r }) => r.boxShadow.s1};
+      `}
+  }
+`, I = i.input`
+  width: 100%;
+  height: 3.3rem;
+  padding-top: ${({ theme: o }) => o.spacing.s};
+  padding-bottom: ${({ theme: o }) => o.spacing.s};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  border: none;
+  align-self: center;
+  outline: 0;
+  background: transparent; /* Inherit background from parent */
+  font-size: ${({ theme: o }) => o.typography.sizes.s5};
+
+  color: ${({ success: o, error: r, disabled: t, touched: s }) => t ? ({ theme: n }) => n.colors.grey.n400 : o ? ({ theme: n }) => n.colors.state.success.n450 : r && s ? ({ theme: n }) => n.colors.state.error.n450 : ({ theme: n }) => n.colors.state.success.n750};
+
+  /* Ensure correct text alignment */
+  text-align: ${({ theme: o }) => o.dir === "rtl" ? "right" : "left"};
+  direction: ${({ theme: o }) => o.dir === "rtl" ? "rtl" : "ltr"};
+
+  /* Fix placeholder alignment */
+  &::placeholder {
+    font-size: ${({ theme: o }) => o.typography.sizes.s5};
+    text-align: ${({ theme: o }) => o.dir === "rtl" ? "right" : "left"};
+    color: ${({ theme: o }) => o.colors.grey.n300};
+  }
+  &:-webkit-autofill {
+    -webkit-text-fill-color: ${({ theme: o }) => o.colors.state.success.n750};
+    transition: background-color 5000s ease-in-out 0s;
+  }
+  &:disabled {
+    font-size: ${({ theme: o }) => o.typography.sizes.s5};
+    cursor: not-allowed;
+  }
+
+  &:-webkit-autofill {
+    box-shadow: none;
+  }
+`, b = i.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: ${({ success: o, error: r, touched: t }) => o ? ({ theme: s }) => s.colors.state.success.n450 : r && t ? ({ theme: s }) => s.colors.state.error.n450 : ({ theme: s }) => s.colors.state.success.n750};
+`, O = i.span`
+  color: ${({ theme: o }) => o.colors.grey.n300};
+  font-size: ${({ theme: o }) => o.typography.sizes.s2};
+  /* Automatically switch alignment for RTL */
+  display: flex;
+  justify-content: ${({ theme: o }) => o.dir === "rtl" ? "flex-end" : "flex-start"};
+  text-align: ${({ theme: o }) => o.dir === "rtl" ? "right" : "left"};
+`, W = i.div`
+  display: flex;
+  font-family: ${({ theme: o }) => o.dir === "rtl" ? o.fonts.arabic : o.fonts.english};
+  flex-direction: column;
+  row-gap: ${({ theme: o }) => o.spacing.xs};
+  align-items: 'flex-start';
+`, G = i.label`
+  display: flex;
+  align-items: flex-end;
+  column-gap: ${({ theme: o }) => o.spacing.xs};
+  color: ${({ theme: o }) => o.colors.grey.n700};
+  font-size: ${({ theme: o }) => o.typography.sizes.s4};
+  font-weight: 400;
+  text-align: ${({ theme: o }) => o.dir === "rtl" ? "right" : "left"};
+`, N = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing.xxs};
+  font-size: ${({ theme: o }) => o.typography.sizes.s3};
+  color: ${({ error: o, touched: r }) => o && r ? ({ theme: t }) => t.colors.state.error.n450 : ({ theme: t }) => t.colors.grey.n400};
+  margin-top: ${({ theme: o }) => o.spacing.xxs};
+  flex-direction: ${({ theme: o }) => o.dir === "rtl" ? "row-reverse" : "row"};
+  justify-content: ${({ theme: o }) => o.dir === "rtl" ? "flex-end" : "flex-start"};
+  text-align: ${({ theme: o }) => o.dir === "rtl" ? "right" : "left"};
+`, w = i.span`
+  color: ${({ theme: o }) => o.colors.primary.purple.n500};
+  text-decoration: underline;
+  cursor: pointer;
+  &:hover {
+    text-decoration: none;
+  }
+
+  /* Automatically switch alignment for RTL */
+  display: flex;
+  justify-content: ${({ theme: o }) => o.dir === "rtl" ? "flex-end" : "flex-start"};
+  text-align: ${({ theme: o }) => o.dir === "rtl" ? "right" : "left"};
+`, D = ({
+  label: o,
+  placeholder: r,
+  value: t,
+  onChange: s,
+  type: n = "text",
+  disabled: u = !1,
+  helperText: x,
+  optional: m = !1,
+  helperTextLink: a,
+  success: f = !1,
+  error: l = "",
+  touched: d = !1,
+  readonly: $ = !1,
+  startIcon: p,
+  endIcon: h,
+  onBlur: j = () => {
+  },
+  checked: S,
+  name: y = "",
+  isInteractive: k = !1,
+  ...v
+}) => {
+  const z = H(), { t: C } = R(), F = () => l || (z.dir == "rtl" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    a && /* @__PURE__ */ e.jsx(w, { onClick: a.onClick, children: a.text }),
+    x
+  ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    x,
+    a && /* @__PURE__ */ e.jsx(w, { onClick: a.onClick, children: a.text })
+  ] })), A = () => k || !x && !a && (!l || !d) ? null : /* @__PURE__ */ e.jsx(N, { error: l, touched: d, children: F() });
+  return /* @__PURE__ */ e.jsxs(W, { children: [
+    o && /* @__PURE__ */ e.jsxs(G, { children: [
+      o,
+      " ",
+      m && /* @__PURE__ */ e.jsxs(O, { children: [
+        " ",
+        C("OPTIONAL")
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs(E, { success: f, readonly: $, disabled: u, touched: d, error: l, children: [
+      p && /* @__PURE__ */ e.jsx(b, { success: f, error: l, touched: d, children: p }),
+      /* @__PURE__ */ e.jsx(
+        I,
+        {
+          success: f,
+          error: l,
+          readonly: $,
+          onBlur: j,
+          checked: S,
+          touched: d,
+          value: t,
+          id: y,
+          onChange: s,
+          type: n,
+          disabled: u,
+          placeholder: r,
+          name: y,
+          ...v
+        }
+      ),
+      h && /* @__PURE__ */ e.jsx(b, { success: f, error: l, touched: d, children: h })
+    ] }),
+    A()
+  ] });
+};
+export {
+  O as Optional,
+  D as default
+};

package/dist/components/InputLabel.d.ts

@@ -0,0 +1,7 @@
+type LabelContainerProps = {
+    label?: string;
+    optional?: boolean;
+};
+declare const LabelContainer: ({ label, optional }: LabelContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default LabelContainer;
+//# sourceMappingURL=InputLabel.d.ts.map