qaema-ui 0.0.77 → 0.0.78

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.
Files changed (2) hide show
  1. package/dist/components/PriceCard.js +74 -66
  2. package/package.json +1 -1
package/dist/components/PriceCard.js CHANGED
@@ -1,27 +1,27 @@
1
1
  import { j as i } from "../_virtual/jsx-runtime.js";
2
2
  import "react";
3
- import t, { css as u } from "styled-components";
3
+ import o, { css as b } from "styled-components";
4
4
  import x from "../assets/icons/RiyalIcon.js";
5
5
  import { CurrencyContainer as W } from "../styles/Currency.styles.js";
6
6
  import L from "../assets/svg/Riyal.svg.js";
7
7
  import M from "./Badge.js";
8
- import b from "./Button.js";
8
+ import u from "./Button.js";
9
9
  import P from "./FeaturesList.js";
10
- import h from "./Typography.js";
11
- const N = {
12
- transparent: u`
10
+ import g from "./Typography.js";
11
+ const q = {
12
+ transparent: b`
13
13
  background: rgba(255, 255, 255, 0.72);
14
14
  border: 1px solid ${({ theme: e }) => e.colors.grey.n200};
15
15
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
16
16
  `,
17
- purple: u`
17
+ purple: b`
18
18
  background: linear-gradient(360deg, #ffffff 63.12%, #f1eeff 100%);
19
19
  border: 1px solid #e3deff;
20
20
  box-shadow:
21
21
  0px 4px 6px -2px #10182808,
22
22
  0px 12px 16px -4px #10182814;
23
23
  `
24
- }, O = t.div`
24
+ }, N = o.div`
25
25
  position: relative;
26
26
  width: 100%;
27
27
  max-width: 28.458rem;
@@ -30,51 +30,59 @@ const N = {
30
30
  overflow: hidden;
31
31
  display: flex;
32
32
  flex-direction: column;
33
- ${({ $variant: e }) => N[e]};
34
- `, U = t.div`
33
+ ${({ $variant: e }) => q[e]};
34
+ `, O = o.div`
35
35
  padding: 25px;
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  gap: ${({ theme: e }) => e.spacing.sm};
39
39
  border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n200};
40
- `, V = t.div`
40
+ `, U = o.div`
41
41
  display: flex;
42
42
  align-items: center;
43
43
  justify-content: ${({ $hasMultipleBadges: e }) => e ? "flex-start" : "space-between"};
44
44
  gap: ${({ theme: e }) => e.spacing.s};
45
45
  flex-wrap: wrap;
46
- padding-inline-end: ${({ $hasRibbon: e }) => e ? "8rem" : "0"};
47
- `, q = t(h)`
46
+ min-width: 0;
47
+ /* The ribbon is absolutely positioned at the top inline-end corner, so push
48
+ the whole header below it instead of squeezing the content beside it. */
49
+ padding-block-start: ${({ $hasRibbon: e }) => e ? "2rem" : "0"};
50
+ `, V = o(g)`
48
51
  font-family: ${({ theme: e }) => e.fonts.arabic};
49
52
  font-weight: 600;
50
53
  font-size: ${({ theme: e }) => {
51
- var o;
52
- return (o = e.typography.sizes) == null ? void 0 : o.s3;
54
+ var t;
55
+ return (t = e.typography.sizes) == null ? void 0 : t.s3;
53
56
  }};
54
57
  line-height: 1.75rem;
55
58
  color: ${({ theme: e }) => e.colors.grey.n400};
56
- white-space: nowrap;
57
- `, G = t.div`
59
+ min-width: 0;
60
+ overflow-wrap: anywhere;
61
+ `, G = o.div`
58
62
  display: flex;
59
63
  flex-direction: column;
60
64
  gap: 0.85rem;
61
- `, J = t.div`
65
+ `, J = o.div`
62
66
  display: flex;
63
67
  align-items: center;
64
68
  gap: ${({ theme: e }) => e.spacing.xs};
65
- flex-wrap: nowrap;
69
+ flex-wrap: wrap;
70
+ min-width: 0;
66
71
  span {
67
72
  font-size: ${({ theme: e }) => {
68
- var o;
69
- return (o = e.typography.sizes) == null ? void 0 : o.s2;
73
+ var t;
74
+ return (t = e.typography.sizes) == null ? void 0 : t.s2;
70
75
  }};
71
76
  line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
77
+ white-space: nowrap;
72
78
  }
73
- `, K = t.div`
79
+ `, K = o.div`
74
80
  position: absolute;
75
81
  top: 0;
76
82
  inset-inline-end: 0;
77
- width: 141px;
83
+ z-index: 1;
84
+ min-width: 141px;
85
+ max-width: 70%;
78
86
  height: 48px;
79
87
  padding: 0 ${({ theme: e }) => e.spacing.m};
80
88
  display: flex;
@@ -88,101 +96,101 @@ const N = {
88
96
  font-size: ${({ theme: e }) => e.typography.sizes.s4};
89
97
  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
90
98
  white-space: nowrap;
91
- `, Q = t.div`
99
+ `, Q = o.div`
92
100
  display: flex;
93
101
  align-items: baseline;
94
102
  gap: ${({ theme: e }) => e.spacing.xxs};
95
- `, w = t(x).attrs(({ theme: e }) => ({
103
+ `, w = o(x).attrs(({ theme: e }) => ({
96
104
  color: e.colors.grey.n350,
97
105
  width: "18",
98
106
  height: "20"
99
- }))``, X = t.span`
107
+ }))``, X = o.span`
100
108
  font-family: ${({ theme: e }) => e.fonts.english};
101
109
  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
102
110
  font-size: 2.25rem;
103
111
  line-height: 2.5rem;
104
- color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
105
- `, Y = t.span`
112
+ color: ${({ $color: e, theme: t }) => e ?? t.colors.grey.n800};
113
+ `, Y = o.span`
106
114
  font-family: ${({ theme: e }) => e.fonts.arabic};
107
115
  font-weight: ${({ theme: e }) => e.typography.weights.regular};
108
116
  font-size: ${({ theme: e }) => {
109
- var o;
110
- return (o = e.typography.sizes) == null ? void 0 : o.s5;
117
+ var t;
118
+ return (t = e.typography.sizes) == null ? void 0 : t.s5;
111
119
  }};
112
120
  line-height: 1.804rem;
113
- color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
114
- `, Z = t(h)`
121
+ color: ${({ $color: e, theme: t }) => e ?? t.colors.grey.n800};
122
+ `, Z = o(g)`
115
123
  font-family: ${({ theme: e }) => e.fonts.arabic};
116
124
  font-weight: ${({ theme: e }) => e.typography.weights.regular};
117
125
  font-size: ${({ theme: e }) => {
118
- var o;
119
- return (o = e.typography.sizes) == null ? void 0 : o.s2;
126
+ var t;
127
+ return (t = e.typography.sizes) == null ? void 0 : t.s2;
120
128
  }};
121
129
  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
122
130
  color: ${({ theme: e }) => e.colors.grey.n400};
123
- `, _ = t.div`
131
+ `, _ = o.div`
124
132
  padding: 2rem 2rem 2.5rem 2rem;
125
133
  display: flex;
126
134
  flex-direction: column;
127
135
  gap: ${({ theme: e }) => e.spacing.s};
128
- `, A = t(h)`
136
+ `, A = o(g)`
129
137
  font-family: ${({ theme: e }) => e.fonts.arabic};
130
138
  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
131
139
  font-size: ${({ theme: e }) => {
132
- var o;
133
- return (o = e.typography.sizes) == null ? void 0 : o.s3;
140
+ var t;
141
+ return (t = e.typography.sizes) == null ? void 0 : t.s3;
134
142
  }};
135
143
  line-height: 0.7rem;
136
144
  color: ${({ theme: e }) => e.colors.grey.n650};
137
145
  text-transform: uppercase;
138
- `, ee = t(h)`
146
+ `, ee = o(g)`
139
147
  font-family: ${({ theme: e }) => e.fonts.arabic};
140
148
  font-weight: 500;
141
149
  font-size: ${({ theme: e }) => {
142
- var o;
143
- return (o = e.typography.sizes) == null ? void 0 : o.s2;
150
+ var t;
151
+ return (t = e.typography.sizes) == null ? void 0 : t.s2;
144
152
  }};
145
153
  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
146
154
  color: ${({ theme: e }) => e.colors.grey.n400};
147
- `, ie = t.div`
155
+ `, ie = o.div`
148
156
  display: flex;
149
157
  align-items: center;
150
158
  gap: ${({ theme: e }) => e.spacing.xs};
151
- `, d = t.span`
159
+ `, d = o.span`
152
160
  font-family: ${({ theme: e }) => e.fonts.arabic};
153
161
  font-weight: ${({ theme: e }) => e.typography.weights.bold};
154
- font-size: ${({ $isDiscounted: e, theme: o }) => e ? "1.50rem" : o.typography.sizes.s9};
162
+ font-size: ${({ $isDiscounted: e, theme: t }) => e ? "1.50rem" : t.typography.sizes.s9};
155
163
  line-height: ${({ theme: e }) => e.typography.lineHeights.xl};
156
164
  letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.balancedNarrow};
157
165
  color: ${({ theme: e }) => e.colors.grey.n350};
158
- `, oe = t(d)`
166
+ `, te = o(d)`
159
167
  text-decoration: line-through !important;
160
168
  font-size: 1.5rem;
161
- `, te = t.span`
169
+ `, oe = o.span`
162
170
  font-family: ${({ theme: e }) => e.fonts.arabic};
163
171
  font-weight: ${({ theme: e }) => e.typography.weights.regular};
164
172
  font-size: ${({ theme: e }) => e.typography.sizes.s4};
165
173
  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
166
174
  color: ${({ theme: e }) => e.colors.grey.n350};
167
- `, j = t.span`
175
+ `, j = o.span`
168
176
  font-family: ${({ theme: e }) => e.fonts.arabic};
169
177
  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
170
178
  font-size: ${({ theme: e }) => e.typography.sizes.s4};
171
179
  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
172
180
  color: #17954f;
173
- `, ne = t.div`
181
+ `, ne = o.div`
174
182
  display: flex;
175
183
  align-items: center;
176
184
  gap: 5px;
177
185
  font-size: 16px;
178
- `, re = t(d)`
186
+ `, re = o(d)`
179
187
  color: #17954f;
180
188
  font-size: 16px;
181
- `, se = t(x).attrs({
189
+ `, se = o(x).attrs({
182
190
  color: "#17954f",
183
191
  width: "16",
184
192
  height: "18"
185
- })``, le = t.div`
193
+ })``, le = o.div`
186
194
  width: 100%;
187
195
  margin-top: 1rem;
188
196
  display: flex;
@@ -194,11 +202,11 @@ const N = {
194
202
  }
195
203
  `, $e = ({
196
204
  title: e,
197
- price: o,
205
+ price: t,
198
206
  description: z,
199
207
  hintComponent: v,
200
208
  secondaryPrice: l,
201
- discount: g,
209
+ discount: h,
202
210
  discountLabel: m,
203
211
  features: C,
204
212
  variant: R = "transparent",
@@ -220,11 +228,11 @@ const N = {
220
228
  mobileHintComponent: I
221
229
  }) => {
222
230
  const p = f.find((n) => n.ribbon), $ = f.filter((n) => !n.ribbon);
223
- return /* @__PURE__ */ i.jsxs(O, { $variant: R, children: [
231
+ return /* @__PURE__ */ i.jsxs(N, { $variant: R, children: [
224
232
  p && /* @__PURE__ */ i.jsx(K, { $bgColor: p.bgColor, $color: p.color, children: p.label }),
225
- /* @__PURE__ */ i.jsxs(U, { children: [
226
- /* @__PURE__ */ i.jsxs(V, { $hasRibbon: !!p, $hasMultipleBadges: f.length > 1, children: [
227
- /* @__PURE__ */ i.jsx(q, { children: e }),
233
+ /* @__PURE__ */ i.jsxs(O, { children: [
234
+ /* @__PURE__ */ i.jsxs(U, { $hasRibbon: !!p, $hasMultipleBadges: f.length > 1, children: [
235
+ /* @__PURE__ */ i.jsx(V, { children: e }),
228
236
  $.length > 0 && /* @__PURE__ */ i.jsx(J, { children: $.map((n, a) => /* @__PURE__ */ i.jsx(
229
237
  M,
230
238
  {
@@ -240,25 +248,25 @@ const N = {
240
248
  ] }),
241
249
  /* @__PURE__ */ i.jsxs(Q, { children: [
242
250
  /* @__PURE__ */ i.jsx(W, { src: L, alt: "Riyal" }),
243
- /* @__PURE__ */ i.jsx(X, { $color: o.color, children: o.amount }),
244
- /* @__PURE__ */ i.jsx(Y, { $color: o.periodColor, children: o.period ?? "/ Month" })
251
+ /* @__PURE__ */ i.jsx(X, { $color: t.color, children: t.amount }),
252
+ /* @__PURE__ */ i.jsx(Y, { $color: t.periodColor, children: t.period ?? "/ Month" })
245
253
  ] }),
246
254
  l && /* @__PURE__ */ i.jsxs(ie, { children: [
247
255
  l.originalAmount && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
248
256
  /* @__PURE__ */ i.jsx(w, {}),
249
- /* @__PURE__ */ i.jsxs(oe, { children: [
257
+ /* @__PURE__ */ i.jsxs(te, { children: [
250
258
  l.originalAmount,
251
259
  " "
252
260
  ] })
253
261
  ] }),
254
262
  /* @__PURE__ */ i.jsx(w, {}),
255
- /* @__PURE__ */ i.jsx(d, { $isDiscounted: !!(g && l.originalAmount), children: l.amount }),
256
- /* @__PURE__ */ i.jsx(te, { children: l.label })
263
+ /* @__PURE__ */ i.jsx(d, { $isDiscounted: !!(h && l.originalAmount), children: l.amount }),
264
+ /* @__PURE__ */ i.jsx(oe, { children: l.label })
257
265
  ] }),
258
- g ? /* @__PURE__ */ i.jsxs(ne, { children: [
259
- /* @__PURE__ */ i.jsx(j, { children: g.label }),
266
+ h ? /* @__PURE__ */ i.jsxs(ne, { children: [
267
+ /* @__PURE__ */ i.jsx(j, { children: h.label }),
260
268
  /* @__PURE__ */ i.jsx(se, { style: { width: "14px", height: "16px" } }),
261
- /* @__PURE__ */ i.jsx(re, { children: g.amount })
269
+ /* @__PURE__ */ i.jsx(re, { children: h.amount })
262
270
  ] }) : m && /* @__PURE__ */ i.jsx(j, { children: m }),
263
271
  /* @__PURE__ */ i.jsx(Z, { children: z }),
264
272
  D && y.length > 0 && /* @__PURE__ */ i.jsx("div", { style: { marginTop: "0.50rem" }, children: /* @__PURE__ */ i.jsx(
@@ -329,8 +337,8 @@ const N = {
329
337
  ) }),
330
338
  I,
331
339
  /* @__PURE__ */ i.jsxs(le, { children: [
332
- B && /* @__PURE__ */ i.jsx(b, { variant: (r == null ? void 0 : r.variant) ?? "primary", onClick: r == null ? void 0 : r.onPrimaryActionClick, children: r == null ? void 0 : r.label }),
333
- k && /* @__PURE__ */ i.jsx(b, { variant: (s == null ? void 0 : s.variant) ?? "light-primary", onClick: s == null ? void 0 : s.onSecondaryActionClick, children: s == null ? void 0 : s.label })
340
+ B && /* @__PURE__ */ i.jsx(u, { variant: (r == null ? void 0 : r.variant) ?? "primary", onClick: r == null ? void 0 : r.onPrimaryActionClick, children: r == null ? void 0 : r.label }),
341
+ k && /* @__PURE__ */ i.jsx(u, { variant: (s == null ? void 0 : s.variant) ?? "light-primary", onClick: s == null ? void 0 : s.onSecondaryActionClick, children: s == null ? void 0 : s.label })
334
342
  ] })
335
343
  ] }),
336
344
  S && /* @__PURE__ */ i.jsxs(_, { children: [
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "qaema-ui",
3
3
  "private": false,
4
- "version": "0.0.77",
4
+ "version": "0.0.78",
5
5
  "type": "module",
6
6
  "publishConfig": {
7
7
  "access": "public"