qaema-ui 0.0.31 → 0.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Banner.d.ts +10 -0
- package/dist/components/Banner.js +76 -0
- package/dist/components/FeatureCard.d.ts +10 -0
- package/dist/components/FeatureCard.js +84 -0
- package/dist/components/ProductCard.d.ts +8 -0
- package/dist/components/ProductCard.js +65 -0
- package/dist/components/SummaryCard.js +28 -32
- package/dist/components/TotalsSummary.d.ts +1 -1
- package/dist/components/TotalsSummary.js +30 -27
- package/dist/components/index.d.ts +6 -0
- package/dist/index.js +101 -95
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export type BannerVariant = 'primary' | 'teal' | 'green' | 'default';
|
|
3
|
+
export type BannerProps = {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
variant?: BannerVariant;
|
|
6
|
+
dismissible?: boolean;
|
|
7
|
+
onDismiss?: () => void;
|
|
8
|
+
};
|
|
9
|
+
declare const Banner: ({ children, variant, dismissible, onDismiss }: BannerProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default Banner;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { j as e } from "../_virtual/jsx-runtime.js";
|
|
2
|
+
import { IoClose as c } from "../node_modules/react-icons/io5/index.js";
|
|
3
|
+
import s, { css as o } from "styled-components";
|
|
4
|
+
const t = s.div`
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
justify-content: space-between;
|
|
8
|
+
gap: ${({ theme: r }) => r.spacing.sm};
|
|
9
|
+
padding: ${({ theme: r }) => `${r.spacing.s} ${r.spacing.m}`};
|
|
10
|
+
width: 100%;
|
|
11
|
+
min-height: 3rem;
|
|
12
|
+
position: relative;
|
|
13
|
+
|
|
14
|
+
${({ $variant: r, theme: n }) => {
|
|
15
|
+
switch (r) {
|
|
16
|
+
case "primary":
|
|
17
|
+
return o`
|
|
18
|
+
background: linear-gradient(90deg, ${n.colors.primary.purple.n500} 0%, ${n.colors.primary.purple.n400} 100%);
|
|
19
|
+
color: ${n.colors.grey.n50};
|
|
20
|
+
`;
|
|
21
|
+
case "teal":
|
|
22
|
+
return o`
|
|
23
|
+
background: ${n.colors.primary.green.n150};
|
|
24
|
+
color: ${n.colors.grey.n650};
|
|
25
|
+
`;
|
|
26
|
+
case "green":
|
|
27
|
+
return o`
|
|
28
|
+
background: ${n.colors.state.success.n150};
|
|
29
|
+
color: ${n.colors.grey.n650};
|
|
30
|
+
`;
|
|
31
|
+
case "default":
|
|
32
|
+
default:
|
|
33
|
+
return o`
|
|
34
|
+
background: ${n.colors.grey.n100};
|
|
35
|
+
color: ${n.colors.grey.n600};
|
|
36
|
+
`;
|
|
37
|
+
}
|
|
38
|
+
}}
|
|
39
|
+
`, l = s.div`
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: space-between;
|
|
43
|
+
gap: ${({ theme: r }) => r.spacing.sm};
|
|
44
|
+
flex: 1;
|
|
45
|
+
`, p = s.button`
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
background: transparent;
|
|
50
|
+
border: none;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
padding: ${({ theme: r }) => r.spacing.xxs};
|
|
53
|
+
border-radius: ${({ theme: r }) => r.borderRadius.circle};
|
|
54
|
+
transition: all 0.2s ease-in-out;
|
|
55
|
+
color: currentColor;
|
|
56
|
+
flex-shrink: 0;
|
|
57
|
+
|
|
58
|
+
&:hover {
|
|
59
|
+
opacity: 0.7;
|
|
60
|
+
${({ $variant: r, theme: n }) => r === "primary" ? o`
|
|
61
|
+
background: rgba(255, 255, 255, 0.2);
|
|
62
|
+
` : o`
|
|
63
|
+
background: ${n.colors.grey.n200};
|
|
64
|
+
`}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&:active {
|
|
68
|
+
opacity: 0.5;
|
|
69
|
+
}
|
|
70
|
+
`, $ = ({ children: r, variant: n = "default", dismissible: a = !1, onDismiss: i }) => /* @__PURE__ */ e.jsxs(t, { $variant: n, children: [
|
|
71
|
+
/* @__PURE__ */ e.jsx(l, { children: r }),
|
|
72
|
+
a && /* @__PURE__ */ e.jsx(p, { $variant: n, onClick: i, "aria-label": "Dismiss banner", children: /* @__PURE__ */ e.jsx(c, { size: 20 }) })
|
|
73
|
+
] });
|
|
74
|
+
export {
|
|
75
|
+
$ as default
|
|
76
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type FeatureCardProps = {
|
|
3
|
+
icon?: React.ReactNode;
|
|
4
|
+
title?: string;
|
|
5
|
+
badge?: React.ReactNode;
|
|
6
|
+
description?: string;
|
|
7
|
+
CTAText?: string;
|
|
8
|
+
CTAAction?: () => void;
|
|
9
|
+
};
|
|
10
|
+
export declare const FeatureCard: React.FC<FeatureCardProps>;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { j as t } from "../_virtual/jsx-runtime.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import i, { useTheme as l } from "styled-components";
|
|
4
|
+
import c from "./Button.js";
|
|
5
|
+
import { Card as m } from "./Card.js";
|
|
6
|
+
import s from "./Typography.js";
|
|
7
|
+
const g = i(m)`
|
|
8
|
+
background-color: ${({ theme: r }) => r.colors.grey.n50};
|
|
9
|
+
width: 23.903rem;
|
|
10
|
+
min-width: 13.371rem;
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
align-items: flex-start;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
gap: ${({ theme: r }) => r.spacing.sm};
|
|
16
|
+
padding: ${({ theme: r }) => r.spacing.sm};
|
|
17
|
+
border-radius: ${({ theme: r }) => r.borderRadius.md};
|
|
18
|
+
box-shadow:
|
|
19
|
+
0px 1.2px 2.39px 0px #0000000f,
|
|
20
|
+
0px 1.2px 3.59px 0px #0000001a;
|
|
21
|
+
`, x = i.div`
|
|
22
|
+
border: 1.2px solid ${({ theme: r }) => r.colors.grey.n100};
|
|
23
|
+
padding: ${({ theme: r }) => r.spacing.xs};
|
|
24
|
+
border-radius: ${({ theme: r }) => r.borderRadius.md};
|
|
25
|
+
width: 2.391rem;
|
|
26
|
+
height: 2.391rem;
|
|
27
|
+
display: flex;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
align-items: center;
|
|
30
|
+
`, h = i.div`
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
gap: ${({ theme: r }) => r.spacing.xxs};
|
|
34
|
+
`, y = i.div`
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
gap: ${({ theme: r }) => r.spacing.xs};
|
|
38
|
+
`, f = i(c)`
|
|
39
|
+
height: 2.391rem !important;
|
|
40
|
+
border-radius: ${({ theme: r }) => r.borderRadius.sm} !important;
|
|
41
|
+
padding: ${({ theme: r }) => r.spacing.s} !important;
|
|
42
|
+
gap: ${({ theme: r }) => r.spacing.xs} !important;
|
|
43
|
+
font-size: ${({ theme: r }) => r.typography.sizes.s3} !important;
|
|
44
|
+
line-height: ${({ theme: r }) => r.typography.lineHeights.s} !important;
|
|
45
|
+
font-weight: ${({ theme: r }) => r.typography.weights.semiBold} !important;
|
|
46
|
+
letter-spacing: ${({ theme: r }) => r.typography.letterSpacings.normal} !important;
|
|
47
|
+
box-shadow:
|
|
48
|
+
0px 1.2px 2.39px 0px #0000000f,
|
|
49
|
+
0px 1.2px 3.59px 0px #0000001a !important;
|
|
50
|
+
`, S = ({
|
|
51
|
+
icon: r,
|
|
52
|
+
title: a,
|
|
53
|
+
badge: e,
|
|
54
|
+
description: p,
|
|
55
|
+
CTAText: n,
|
|
56
|
+
CTAAction: d
|
|
57
|
+
}) => {
|
|
58
|
+
const o = l();
|
|
59
|
+
return /* @__PURE__ */ t.jsxs(g, { shadowVariant: "none", children: [
|
|
60
|
+
/* @__PURE__ */ t.jsx(x, { children: r }),
|
|
61
|
+
/* @__PURE__ */ t.jsxs(h, { children: [
|
|
62
|
+
/* @__PURE__ */ t.jsxs(y, { children: [
|
|
63
|
+
/* @__PURE__ */ t.jsx(
|
|
64
|
+
s,
|
|
65
|
+
{
|
|
66
|
+
variant: "h6-lg",
|
|
67
|
+
fontSize: "s7",
|
|
68
|
+
lineHeight: "l",
|
|
69
|
+
letterSpacing: "balancedNarrow",
|
|
70
|
+
weight: "semiBold",
|
|
71
|
+
color: o.colors.grey.n800,
|
|
72
|
+
children: a
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
e && e
|
|
76
|
+
] }),
|
|
77
|
+
/* @__PURE__ */ t.jsx(s, { fontSize: "s3", lineHeight: "s", weight: "regular", color: o.colors.grey.n400, children: p })
|
|
78
|
+
] }),
|
|
79
|
+
n && /* @__PURE__ */ t.jsx(f, { variant: "light-primary", width: "100%", onClick: d, children: n })
|
|
80
|
+
] });
|
|
81
|
+
};
|
|
82
|
+
export {
|
|
83
|
+
S as FeatureCard
|
|
84
|
+
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { j as i } from "../_virtual/jsx-runtime.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import r from "styled-components";
|
|
4
|
+
import s from "./Badge.js";
|
|
5
|
+
import { Card as l } from "./Card.js";
|
|
6
|
+
import d from "./Typography.js";
|
|
7
|
+
const a = r(l)`
|
|
8
|
+
background-color: ${({ theme: e }) => e.colors.grey.n50};
|
|
9
|
+
width: 23.5rem;
|
|
10
|
+
/* height: 25.188rem; */
|
|
11
|
+
border-radius: 1.875rem;
|
|
12
|
+
padding: 0;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
align-items: flex-start;
|
|
17
|
+
gap: ${({ theme: e }) => e.spacing.xl};
|
|
18
|
+
padding-bottom: ${({ theme: e }) => e.spacing.m};
|
|
19
|
+
`, c = r.div`
|
|
20
|
+
width: 100%;
|
|
21
|
+
height: 13.813rem;
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
|
|
27
|
+
& img,
|
|
28
|
+
& svg {
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: 100%;
|
|
31
|
+
object-fit: cover;
|
|
32
|
+
display: block;
|
|
33
|
+
}
|
|
34
|
+
`, g = r.div`
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
padding: 0 ${({ theme: e }) => e.spacing.m};
|
|
38
|
+
gap: ${({ theme: e }) => e.spacing.sm};
|
|
39
|
+
`, p = r.div`
|
|
40
|
+
display: inline-flex;
|
|
41
|
+
width: fit-content;
|
|
42
|
+
align-self: flex-start;
|
|
43
|
+
& > div {
|
|
44
|
+
border-radius: ${({ theme: e }) => e.borderRadius.sm};
|
|
45
|
+
& > span {
|
|
46
|
+
font-size: ${({ theme: e }) => e.typography.sizes.s3};
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
`, m = r.div`
|
|
50
|
+
display: flex;
|
|
51
|
+
flex-direction: column;
|
|
52
|
+
gap: ${({ theme: e }) => e.spacing.xs};
|
|
53
|
+
`, w = ({ image: e, category: t, title: n, description: o }) => /* @__PURE__ */ i.jsxs(a, { shadowVariant: "default", children: [
|
|
54
|
+
e && /* @__PURE__ */ i.jsx(c, { children: e }),
|
|
55
|
+
/* @__PURE__ */ i.jsxs(g, { children: [
|
|
56
|
+
t && /* @__PURE__ */ i.jsx(p, { children: /* @__PURE__ */ i.jsx(s, { label: t, weight: "semiBold" }) }),
|
|
57
|
+
/* @__PURE__ */ i.jsxs(m, { children: [
|
|
58
|
+
n && /* @__PURE__ */ i.jsx(d, { fontSize: "s7", lineHeight: "l", letterSpacing: "balancedNarrow", weight: "semiBold", children: n }),
|
|
59
|
+
o && /* @__PURE__ */ i.jsx(d, { fontSize: "s3", lineHeight: "s", letterSpacing: "normal", weight: "regular", children: o })
|
|
60
|
+
] })
|
|
61
|
+
] })
|
|
62
|
+
] });
|
|
63
|
+
export {
|
|
64
|
+
w as ProductCard
|
|
65
|
+
};
|
|
@@ -3,7 +3,7 @@ import a, { useTheme as b } from "styled-components";
|
|
|
3
3
|
import j from "./Badge.js";
|
|
4
4
|
import m from "./Button.js";
|
|
5
5
|
import { Card as v } from "./Card.js";
|
|
6
|
-
import
|
|
6
|
+
import l from "./Typography.js";
|
|
7
7
|
const w = a.div`
|
|
8
8
|
padding-bottom: ${(r) => r.theme.spacing.s};
|
|
9
9
|
border-bottom: 1px solid ${(r) => r.theme.colors.grey.n100};
|
|
@@ -11,7 +11,7 @@ const w = a.div`
|
|
|
11
11
|
display: inline-block;
|
|
12
12
|
text-align: start;
|
|
13
13
|
}
|
|
14
|
-
`, k = a(
|
|
14
|
+
`, k = a(l)`
|
|
15
15
|
font-family: ${({ theme: r }) => r.fonts.arabic};
|
|
16
16
|
font-weight: ${({ theme: r }) => r.typography.weights.semiBold};
|
|
17
17
|
font-size: 15px;
|
|
@@ -26,7 +26,7 @@ const w = a.div`
|
|
|
26
26
|
border-radius: ${({ theme: r }) => r.borderRadius.md};
|
|
27
27
|
display: flex;
|
|
28
28
|
justify-content: space-between;
|
|
29
|
-
align-items:
|
|
29
|
+
align-items: center;
|
|
30
30
|
|
|
31
31
|
${({ $variant: r, theme: e }) => {
|
|
32
32
|
switch (r) {
|
|
@@ -54,20 +54,14 @@ const w = a.div`
|
|
|
54
54
|
}
|
|
55
55
|
}}
|
|
56
56
|
`, T = a.button`
|
|
57
|
-
width: 3.9375rem;
|
|
58
|
-
height: 2rem;
|
|
59
57
|
padding: 0.75rem;
|
|
60
58
|
border-radius: 0.25rem;
|
|
61
59
|
border: none;
|
|
62
60
|
cursor: pointer;
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
background:${e.colors.secondary.orange.n150};
|
|
68
|
-
color: ${i};
|
|
69
|
-
`;
|
|
70
|
-
}}
|
|
61
|
+
${({ $variant: r, theme: e }) => `
|
|
62
|
+
background: transparent;
|
|
63
|
+
color: ${r === "information" ? e.colors.primary.purple.n450 : r === "error" ? e.colors.state.error.n450 : r === "success" ? e.colors.state.success.n450 : e.colors.secondary.orange.n450};
|
|
64
|
+
`}
|
|
71
65
|
|
|
72
66
|
font-weight: ${({ theme: r }) => r.typography.weights.semiBold};
|
|
73
67
|
font-size: ${({ theme: r }) => r.typography.sizes.s2};
|
|
@@ -91,7 +85,7 @@ const w = a.div`
|
|
|
91
85
|
display: flex;
|
|
92
86
|
flex-direction: column;
|
|
93
87
|
gap: ${(r) => r.theme.spacing.s};
|
|
94
|
-
`, z = a(
|
|
88
|
+
`, z = a(l)`
|
|
95
89
|
font-family: ${({ theme: r }) => r.fonts.arabic};
|
|
96
90
|
font-weight: ${({ theme: r }) => r.typography.weights.regular};
|
|
97
91
|
font-size: ${({ theme: r }) => r.typography.sizes.s2};
|
|
@@ -113,21 +107,23 @@ const w = a.div`
|
|
|
113
107
|
value: i,
|
|
114
108
|
color: g
|
|
115
109
|
}) => {
|
|
116
|
-
const
|
|
117
|
-
let
|
|
110
|
+
const y = b();
|
|
111
|
+
let c = null;
|
|
118
112
|
if (r === "badge") {
|
|
119
113
|
const s = i;
|
|
120
|
-
|
|
114
|
+
c = /* @__PURE__ */ n.jsx(j, { ...s });
|
|
121
115
|
} else if (r === "trend") {
|
|
122
|
-
const s = typeof i == "object" && i !== null ? i : { value: i }, t = s.direction ?? "neutral", d =
|
|
123
|
-
|
|
124
|
-
} else
|
|
116
|
+
const s = typeof i == "object" && i !== null ? i : { value: i }, t = s.direction ?? "neutral", d = y.colors.state.success.n450, o = y.colors.state.error.n450, h = t === "up" ? d : t === "down" ? o : g;
|
|
117
|
+
c = /* @__PURE__ */ n.jsx(l, { variant: "smText", color: h, children: typeof s.value == "number" ? s.value.toString() : s.value });
|
|
118
|
+
} else if (r === "component")
|
|
119
|
+
c = i;
|
|
120
|
+
else {
|
|
125
121
|
const s = i;
|
|
126
|
-
|
|
122
|
+
c = /* @__PURE__ */ n.jsx(l, { variant: "smText", color: g, children: typeof s == "number" ? s.toString() : s });
|
|
127
123
|
}
|
|
128
124
|
return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
|
|
129
|
-
/* @__PURE__ */ n.jsx(
|
|
130
|
-
|
|
125
|
+
r !== "component" && /* @__PURE__ */ n.jsx(l, { variant: "smText", weight: "semiBold", children: e }),
|
|
126
|
+
c
|
|
131
127
|
] });
|
|
132
128
|
};
|
|
133
129
|
function G({
|
|
@@ -135,8 +131,8 @@ function G({
|
|
|
135
131
|
total: e,
|
|
136
132
|
title: i,
|
|
137
133
|
subtitle: g,
|
|
138
|
-
btnLabel:
|
|
139
|
-
btnConfig:
|
|
134
|
+
btnLabel: y,
|
|
135
|
+
btnConfig: c,
|
|
140
136
|
trailingActionsConfig: s,
|
|
141
137
|
callout: t
|
|
142
138
|
}) {
|
|
@@ -144,19 +140,19 @@ function G({
|
|
|
144
140
|
return /* @__PURE__ */ n.jsxs(v, { padding: "2rem", shadowVariant: "none", hoverEffect: !1, border: `1px solid ${d.colors.grey.n100}`, children: [
|
|
145
141
|
/* @__PURE__ */ n.jsxs(w, { children: [
|
|
146
142
|
/* @__PURE__ */ n.jsxs(S, { children: [
|
|
147
|
-
/* @__PURE__ */ n.jsx(
|
|
148
|
-
|
|
149
|
-
|
|
143
|
+
/* @__PURE__ */ n.jsx(l, { variant: "h6", weight: "semiBold", children: i }),
|
|
144
|
+
c && /* @__PURE__ */ n.jsxs(m, { ...c, children: [
|
|
145
|
+
y ?? "",
|
|
150
146
|
" "
|
|
151
147
|
] })
|
|
152
148
|
] }),
|
|
153
|
-
/* @__PURE__ */ n.jsx(
|
|
149
|
+
/* @__PURE__ */ n.jsx(l, { variant: "caption", color: d.colors.grey.n400, children: g })
|
|
154
150
|
] }),
|
|
155
151
|
/* @__PURE__ */ n.jsxs(R, { children: [
|
|
156
152
|
r.map((o, u) => {
|
|
157
|
-
var
|
|
158
|
-
return ((
|
|
159
|
-
/* @__PURE__ */ n.jsx(
|
|
153
|
+
var h;
|
|
154
|
+
return ((h = o == null ? void 0 : o.items) == null ? void 0 : h.length) === 0 ? null : /* @__PURE__ */ n.jsxs(C, { children: [
|
|
155
|
+
/* @__PURE__ */ n.jsx(l, { variant: "span", weight: "regular", color: d.colors.grey.n400, children: o.title }),
|
|
160
156
|
o.items.map((p, $) => /* @__PURE__ */ n.jsx(f, { children: /* @__PURE__ */ n.jsx(x, { variant: p == null ? void 0 : p.variant, label: p.label, value: p.value, color: d.colors.grey.n400 }) }, `${u}-${$}`))
|
|
161
157
|
] }, o.title);
|
|
162
158
|
}),
|
|
@@ -10,4 +10,4 @@ export type TotalsSummaryProps = {
|
|
|
10
10
|
showCurrencyIcon?: boolean;
|
|
11
11
|
currencyIconWidth?: string;
|
|
12
12
|
};
|
|
13
|
-
export default function TotalsSummary({ title, items, showCurrencyIcon, currencyIconWidth
|
|
13
|
+
export default function TotalsSummary({ title, items, showCurrencyIcon, currencyIconWidth }: TotalsSummaryProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { j as
|
|
1
|
+
import { j as i } from "../_virtual/jsx-runtime.js";
|
|
2
2
|
import o from "styled-components";
|
|
3
|
-
import { device as n } from "../constants/breakPoints.constant.js";
|
|
4
3
|
import p from "../assets/icons/RiyalIcon.js";
|
|
4
|
+
import { device as n } from "../constants/breakPoints.constant.js";
|
|
5
5
|
const g = o.div`
|
|
6
6
|
width: 100%;
|
|
7
|
+
direction: inherit;
|
|
7
8
|
`, c = o.div`
|
|
8
9
|
font-family: ${({ theme: e }) => e.fonts.english};
|
|
9
10
|
font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
|
|
@@ -21,7 +22,7 @@ const g = o.div`
|
|
|
21
22
|
@media ${n.tablet} {
|
|
22
23
|
gap: ${({ theme: e }) => e.spacing.l};
|
|
23
24
|
}
|
|
24
|
-
`,
|
|
25
|
+
`, d = o.div`
|
|
25
26
|
display: flex;
|
|
26
27
|
flex-direction: column;
|
|
27
28
|
gap: ${({ theme: e }) => e.spacing.xs};
|
|
@@ -30,55 +31,57 @@ const g = o.div`
|
|
|
30
31
|
@media ${n.tablet} {
|
|
31
32
|
min-width: 9.5rem;
|
|
32
33
|
}
|
|
33
|
-
`,
|
|
34
|
+
`, y = o.div`
|
|
34
35
|
font-family: ${({ theme: e }) => e.fonts.english};
|
|
35
36
|
font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
|
|
36
37
|
font-size: ${({ theme: e }) => e.typography.sizes.s4};
|
|
37
38
|
line-height: ${({ theme: e }) => e.typography.lineHeights.s};
|
|
38
39
|
letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.balancedNarrow};
|
|
39
40
|
color: ${({ theme: e }) => e.colors.grey.n650};
|
|
40
|
-
`,
|
|
41
|
+
`, m = o.div`
|
|
41
42
|
display: flex;
|
|
42
43
|
align-items: baseline;
|
|
43
44
|
gap: ${({ theme: e }) => e.spacing.xxs};
|
|
44
|
-
direction:
|
|
45
|
-
|
|
45
|
+
direction: inherit;
|
|
46
|
+
[dir='rtl'] & {
|
|
47
|
+
flex-direction: row-reverse;
|
|
48
|
+
}
|
|
49
|
+
`, f = o.span`
|
|
46
50
|
font-family: ${({ theme: e }) => e.fonts.arabic};
|
|
47
51
|
font-weight: ${({ theme: e }) => e.typography.weights.bold};
|
|
48
52
|
font-size: ${({ theme: e }) => e.typography.sizes.s10};
|
|
49
53
|
line-height: ${({ theme: e }) => e.typography.lineHeights.xl};
|
|
50
54
|
letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.balancedNarrow};
|
|
51
55
|
text-align: center;
|
|
52
|
-
color: ${({ theme: e, $color:
|
|
53
|
-
|
|
56
|
+
color: ${({ theme: e, $color: r }) => r || e.colors.grey.n400};
|
|
57
|
+
direction: ltr;
|
|
58
|
+
unicode-bidi: plaintext;
|
|
59
|
+
`, $ = o.span`
|
|
54
60
|
font-family: ${({ theme: e }) => e.fonts.english};
|
|
55
61
|
font-weight: ${({ theme: e }) => e.typography.weights.regular};
|
|
56
62
|
font-size: ${({ theme: e }) => e.typography.sizes.s2};
|
|
57
63
|
line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
|
|
58
64
|
letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.normal};
|
|
59
|
-
color: ${({ theme: e, $color:
|
|
65
|
+
color: ${({ theme: e, $color: r }) => r || e.colors.grey.n400};
|
|
66
|
+
direction: ltr;
|
|
67
|
+
unicode-bidi: plaintext;
|
|
60
68
|
`;
|
|
61
|
-
function
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
/* @__PURE__ */ t.jsx(m, { children: i.title }),
|
|
71
|
-
/* @__PURE__ */ t.jsxs(d, { children: [
|
|
72
|
-
r && /* @__PURE__ */ t.jsx(p, { width: l, height: "20", color: i.color }),
|
|
73
|
-
/* @__PURE__ */ t.jsx($, { $color: i.color, children: i.amount }),
|
|
74
|
-
i.decimal ? /* @__PURE__ */ t.jsxs(f, { $color: i.color, children: [
|
|
69
|
+
function j({ title: e, items: r, showCurrencyIcon: s = !0, currencyIconWidth: l = "18px" }) {
|
|
70
|
+
return /* @__PURE__ */ i.jsxs(g, { children: [
|
|
71
|
+
/* @__PURE__ */ i.jsx(c, { children: e }),
|
|
72
|
+
/* @__PURE__ */ i.jsx(h, { children: r.map((t, a) => /* @__PURE__ */ i.jsxs(d, { children: [
|
|
73
|
+
/* @__PURE__ */ i.jsx(y, { children: t.title }),
|
|
74
|
+
/* @__PURE__ */ i.jsxs(m, { children: [
|
|
75
|
+
s && /* @__PURE__ */ i.jsx(p, { width: l, height: "20", color: t.color }),
|
|
76
|
+
/* @__PURE__ */ i.jsx(f, { $color: t.color, children: t.amount }),
|
|
77
|
+
t.decimal ? /* @__PURE__ */ i.jsxs($, { $color: t.color, children: [
|
|
75
78
|
".",
|
|
76
|
-
|
|
79
|
+
t.decimal
|
|
77
80
|
] }) : null
|
|
78
81
|
] })
|
|
79
|
-
] }, `${
|
|
82
|
+
] }, `${t.title}-${a}`)) })
|
|
80
83
|
] });
|
|
81
84
|
}
|
|
82
85
|
export {
|
|
83
|
-
|
|
86
|
+
j as default
|
|
84
87
|
};
|
|
@@ -26,6 +26,10 @@ export { default as Image } from './Image';
|
|
|
26
26
|
export type { ImageProps } from './Image';
|
|
27
27
|
export { default as Card } from './Card';
|
|
28
28
|
export type { CardProps } from './Card';
|
|
29
|
+
export { FeatureCard } from './FeatureCard';
|
|
30
|
+
export type { FeatureCardProps } from './FeatureCard';
|
|
31
|
+
export { ProductCard } from './ProductCard';
|
|
32
|
+
export type { ProductCardProps } from './ProductCard';
|
|
29
33
|
export { default as MethodCard } from './MethodCard';
|
|
30
34
|
export type { MethodCardProps } from './MethodCard';
|
|
31
35
|
export { default as RadioButton } from './Radio';
|
|
@@ -93,6 +97,8 @@ export type { QuickStartCardProps } from './QuickStartCard';
|
|
|
93
97
|
export { default as Divider } from './Divider';
|
|
94
98
|
export type { DividerProps } from './Divider';
|
|
95
99
|
export { default as Badge } from './Badge';
|
|
100
|
+
export { default as Banner } from './Banner';
|
|
101
|
+
export type { BannerProps, BannerVariant } from './Banner';
|
|
96
102
|
export { default as AddOnCardInput } from './AddOnCardInput';
|
|
97
103
|
export type { AddOnCardInputProps } from './AddOnCardInput';
|
|
98
104
|
export { default as ConfirmationPopup } from './ConfirmationPopup';
|
package/dist/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { default as
|
|
1
|
+
import { default as o } from "./components/Button.js";
|
|
2
2
|
import { default as a } from "./components/InputField.js";
|
|
3
3
|
import { default as d } from "./components/TextArea.js";
|
|
4
4
|
import { default as u } from "./components/Typography.js";
|
|
5
|
-
import { default as
|
|
5
|
+
import { default as l } from "./components/DropDown.js";
|
|
6
6
|
import { default as x } from "./components/SearchBar.js";
|
|
7
|
-
import { default as
|
|
7
|
+
import { default as i } from "./components/Hint.js";
|
|
8
8
|
import { Alert as c } from "./components/Alert.js";
|
|
9
9
|
import { default as I } from "./components/Tabs.js";
|
|
10
10
|
import { default as k } from "./components/InfoCard.js";
|
|
11
11
|
import { default as T } from "./components/ThemeProvider.js";
|
|
12
12
|
import { default as b } from "./components/PackageCard.js";
|
|
13
|
-
import { default as
|
|
14
|
-
import { default as
|
|
15
|
-
import { Card as
|
|
13
|
+
import { default as B } from "./components/Draggable.js";
|
|
14
|
+
import { default as L } from "./components/Image.js";
|
|
15
|
+
import { Card as F } from "./components/Card.js";
|
|
16
16
|
import { MethodCard as R } from "./components/MethodCard.js";
|
|
17
17
|
import { default as w } from "./components/Radio.js";
|
|
18
18
|
import { default as G } from "./components/RadioInput.js";
|
|
@@ -25,21 +25,21 @@ import { default as K } from "./components/Modal.js";
|
|
|
25
25
|
import { default as X } from "./components/Stepper.js";
|
|
26
26
|
import { default as _ } from "./components/ProgressBar.js";
|
|
27
27
|
import { default as ee } from "./components/InfoItem.js";
|
|
28
|
-
import { default as
|
|
28
|
+
import { default as oe } from "./components/AmountItem.js";
|
|
29
29
|
import { default as ae } from "./components/Layout.js";
|
|
30
30
|
import { default as de } from "./components/DatePicker.js";
|
|
31
31
|
import { default as ue } from "./components/PasswordInputField.js";
|
|
32
|
-
import { default as
|
|
32
|
+
import { default as le } from "./components/ToastNotification.js";
|
|
33
33
|
import { default as xe } from "./components/OTP.js";
|
|
34
|
-
import { default as
|
|
34
|
+
import { default as ie } from "./components/NumberInput.js";
|
|
35
35
|
import { default as ce } from "./components/CollapsableCard.js";
|
|
36
36
|
import { default as Ie } from "./components/Toggle.js";
|
|
37
37
|
import { default as ke } from "./components/Spinner.js";
|
|
38
38
|
import { default as Te } from "./components/AddOnCard.js";
|
|
39
39
|
import { default as be } from "./components/Legend.js";
|
|
40
|
-
import { default as
|
|
41
|
-
import { default as
|
|
42
|
-
import { default as
|
|
40
|
+
import { default as Be } from "./components/HorizontalChart.js";
|
|
41
|
+
import { default as Le } from "./components/Chart.js";
|
|
42
|
+
import { default as Fe } from "./components/ActionInput.js";
|
|
43
43
|
import { default as Re } from "./components/StatusFeedback.js";
|
|
44
44
|
import { default as we } from "./components/StepperProcess.js";
|
|
45
45
|
import { default as Ge } from "./components/Table/Table.js";
|
|
@@ -51,107 +51,113 @@ import { default as Ee } from "./components/NavItem.js";
|
|
|
51
51
|
import { default as Ke } from "./components/QuickStartCard.js";
|
|
52
52
|
import { default as Xe } from "./components/Divider.js";
|
|
53
53
|
import { default as _e } from "./components/Badge.js";
|
|
54
|
-
import { default as
|
|
55
|
-
import { default as
|
|
56
|
-
import { default as
|
|
57
|
-
import { default as
|
|
58
|
-
import { default as
|
|
59
|
-
import { default as
|
|
60
|
-
import { default as
|
|
61
|
-
import { default as
|
|
62
|
-
import { default as
|
|
63
|
-
import { default as
|
|
64
|
-
import { default as
|
|
65
|
-
import { default as
|
|
66
|
-
import { default as
|
|
67
|
-
import { default as
|
|
68
|
-
import { default as
|
|
69
|
-
import { default as
|
|
70
|
-
import { default as
|
|
71
|
-
import { default as
|
|
72
|
-
import { default as
|
|
73
|
-
import { default as
|
|
74
|
-
import { default as
|
|
75
|
-
import { default as
|
|
76
|
-
import { default as
|
|
77
|
-
import { default as
|
|
78
|
-
import { default as
|
|
79
|
-
import { default as
|
|
80
|
-
import { default as
|
|
81
|
-
import { default as
|
|
82
|
-
import { default as
|
|
83
|
-
import {
|
|
84
|
-
import {
|
|
85
|
-
import {
|
|
86
|
-
import {
|
|
87
|
-
import {
|
|
54
|
+
import { default as er } from "./components/Banner.js";
|
|
55
|
+
import { default as or } from "./components/AddOnCardInput.js";
|
|
56
|
+
import { default as ar } from "./components/ConfirmationPopup.js";
|
|
57
|
+
import { default as dr } from "./components/BulletItem.js";
|
|
58
|
+
import { default as ur } from "./components/CardsList.js";
|
|
59
|
+
import { default as lr } from "./components/StatCard.js";
|
|
60
|
+
import { default as xr } from "./components/ListToolbar.js";
|
|
61
|
+
import { default as ir } from "./components/Pagination.js";
|
|
62
|
+
import { default as cr } from "./components/ViewItem.js";
|
|
63
|
+
import { default as Ir } from "./components/NavigationPanel.js";
|
|
64
|
+
import { default as kr } from "./components/ToggleForm.js";
|
|
65
|
+
import { default as Tr } from "./components/ToggleHeader.js";
|
|
66
|
+
import { default as br } from "./components/QuickActionItem.js";
|
|
67
|
+
import { default as Br } from "./components/StatIndicator.js";
|
|
68
|
+
import { default as Lr } from "./components/ReconciliationGroups.js";
|
|
69
|
+
import { default as Fr } from "./components/AccordionCard.js";
|
|
70
|
+
import { default as Rr } from "./components/FileDownloadCard.js";
|
|
71
|
+
import { default as wr, HelpCardGroup as Nr } from "./components/HelpCard.js";
|
|
72
|
+
import { default as Mr } from "./components/ConfigList.js";
|
|
73
|
+
import { default as qr } from "./components/RequestCard.js";
|
|
74
|
+
import { default as Wr } from "./components/RequestSummaryCard.js";
|
|
75
|
+
import { default as Vr } from "./components/PaymentLinkDetails.js";
|
|
76
|
+
import { default as jr } from "./components/PaymentTooltip.js";
|
|
77
|
+
import { default as Jr } from "./components/ModalWithRequestCard.js";
|
|
78
|
+
import { default as Ur } from "./components/DropDownWithTable/DropDownWithTable.js";
|
|
79
|
+
import { default as Yr } from "./components/TotalsSummary.js";
|
|
80
|
+
import { default as $r } from "./components/NextActionBox.js";
|
|
81
|
+
import { default as ro } from "./hooks/useFormikInput.js";
|
|
82
|
+
import { default as to } from "./hooks/useZIndex.js";
|
|
83
|
+
import { default as fo } from "./hooks/useBreakpointCheck.js";
|
|
84
|
+
import { FeatureCard as uo } from "./components/FeatureCard.js";
|
|
85
|
+
import { ProductCard as lo } from "./components/ProductCard.js";
|
|
86
|
+
import { OptionSelectGroup as xo } from "./components/OptionCardGroup.js";
|
|
87
|
+
import { defaultTheme as io } from "./theme/theme.js";
|
|
88
|
+
import { darkColors as co, lightColors as go } from "./theme/colors.js";
|
|
89
|
+
import { setQaemaCoreLanguage as Po } from "./i18n/i18n.js";
|
|
90
|
+
import { breakPoints as So, device as To } from "./constants/breakPoints.constant.js";
|
|
88
91
|
export {
|
|
89
|
-
|
|
90
|
-
|
|
92
|
+
Fr as AccordionCard,
|
|
93
|
+
Fe as ActionInput,
|
|
91
94
|
Te as AddOnCard,
|
|
92
|
-
|
|
95
|
+
or as AddOnCardInput,
|
|
93
96
|
c as Alert,
|
|
94
|
-
|
|
97
|
+
oe as AmountItem,
|
|
95
98
|
_e as Badge,
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
99
|
+
er as Banner,
|
|
100
|
+
dr as BulletItem,
|
|
101
|
+
o as Button,
|
|
102
|
+
F as Card,
|
|
103
|
+
ur as CardsList,
|
|
104
|
+
Le as Chart,
|
|
101
105
|
O as Checkbox,
|
|
102
106
|
ce as CollapsableCard,
|
|
103
|
-
|
|
104
|
-
|
|
107
|
+
Mr as ConfigList,
|
|
108
|
+
ar as ConfirmationPopup,
|
|
105
109
|
de as DatePicker,
|
|
106
110
|
Xe as Divider,
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
+
B as Draggable,
|
|
112
|
+
l as DropDown,
|
|
113
|
+
Ur as DropDownWithTable,
|
|
114
|
+
uo as FeatureCard,
|
|
115
|
+
Rr as FileDownloadCard,
|
|
111
116
|
Q as Header,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
+
wr as HelpCard,
|
|
118
|
+
Nr as HelpCardGroup,
|
|
119
|
+
i as Hint,
|
|
120
|
+
Be as HorizontalChart,
|
|
121
|
+
L as Image,
|
|
117
122
|
k as InfoCard,
|
|
118
123
|
ee as InfoItem,
|
|
119
124
|
a as InputField,
|
|
120
125
|
ae as Layout,
|
|
121
126
|
be as Legend,
|
|
122
127
|
Z as Link,
|
|
123
|
-
|
|
128
|
+
xr as ListToolbar,
|
|
124
129
|
R as MethodCard,
|
|
125
130
|
K as Modal,
|
|
126
|
-
|
|
131
|
+
Jr as ModalWithRequestCard,
|
|
127
132
|
Ee as NavItem,
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
133
|
+
Ir as NavigationPanel,
|
|
134
|
+
$r as NextActionBox,
|
|
135
|
+
ie as NumberInput,
|
|
136
|
+
xo as OptionSelectGroup,
|
|
132
137
|
xe as OtpInput,
|
|
133
138
|
b as PackageCard,
|
|
134
139
|
Ze as PageHeader,
|
|
135
|
-
|
|
140
|
+
ir as Pagination,
|
|
136
141
|
ue as PasswordInputField,
|
|
137
|
-
|
|
138
|
-
|
|
142
|
+
Vr as PaymentLinkDetails,
|
|
143
|
+
jr as PaymentTooltip,
|
|
139
144
|
Qe as PhoneInputField,
|
|
140
145
|
E as PriceAmount,
|
|
146
|
+
lo as ProductCard,
|
|
141
147
|
_ as ProgressBar,
|
|
142
|
-
|
|
148
|
+
br as QuickActionItem,
|
|
143
149
|
Ke as QuickStartCard,
|
|
144
150
|
w as RadioButton,
|
|
145
151
|
G as RadioInput,
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
152
|
+
Lr as ReconciliationGroups,
|
|
153
|
+
qr as RequestCard,
|
|
154
|
+
Wr as RequestSummaryCard,
|
|
149
155
|
x as SearchBar,
|
|
150
156
|
ze as SectionHeader,
|
|
151
157
|
Oe as SideMenuLinks,
|
|
152
158
|
ke as Spinner,
|
|
153
|
-
|
|
154
|
-
|
|
159
|
+
lr as StatCardGroup,
|
|
160
|
+
Br as StatIndicator,
|
|
155
161
|
Re as StatusFeedback,
|
|
156
162
|
X as Stepper,
|
|
157
163
|
we as StepperProcess,
|
|
@@ -160,20 +166,20 @@ export {
|
|
|
160
166
|
I as Tabs,
|
|
161
167
|
d as TextArea,
|
|
162
168
|
T as ThemeProvider,
|
|
163
|
-
|
|
169
|
+
le as ToastNotification,
|
|
164
170
|
Ie as Toggle,
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
171
|
+
kr as ToggleForm,
|
|
172
|
+
Tr as ToggleHeader,
|
|
173
|
+
Yr as TotalsSummary,
|
|
168
174
|
u as Typography,
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
175
|
+
cr as ViewItem,
|
|
176
|
+
So as breakPoints,
|
|
177
|
+
co as darkColors,
|
|
178
|
+
io as defaultTheme,
|
|
179
|
+
To as device,
|
|
180
|
+
go as lightColors,
|
|
181
|
+
Po as setQaemaCoreLanguage,
|
|
182
|
+
fo as useBreakpointCheck,
|
|
183
|
+
ro as useFormikInput,
|
|
184
|
+
to as useZIndex
|
|
179
185
|
};
|