@thecb/components 7.13.0-beta.2 → 7.13.0-beta.3

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 (7) hide show
  1. package/dist/index.cjs.js +202 -200
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +202 -200
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/atoms/icons/KioskImage.js +132 -129
  7. package/src/components/atoms/icons/PointOfSaleImage.js +68 -67
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "7.13.0-beta.2",
3
+ "version": "7.13.0-beta.3",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "typings": "dist/index.d.ts",
package/src/components/atoms/icons/KioskImage.js CHANGED
@@ -3,54 +3,55 @@ import React from "react";
3
3
  const KioskImage = () => {
4
4
  return (
5
5
  <svg
6
- width="191"
7
- height="96"
6
+ width={191}
7
+ height={96}
8
8
  viewBox="0 0 191 96"
9
9
  fill="none"
10
10
  xmlns="http://www.w3.org/2000/svg"
11
+ {...props}
11
12
  >
12
13
  <path
13
- fill-rule="evenodd"
14
- clip-rule="evenodd"
14
+ fillRule="evenodd"
15
+ clipRule="evenodd"
15
16
  d="M12.4433 28.1096C12.4164 28.11 12.3894 28.1102 12.3624 28.1102C9.63896 28.1102 7.43115 25.9085 7.43115 23.1926C7.43115 20.4766 9.63896 18.2749 12.3624 18.2749C13.4748 18.2749 14.5012 18.6422 15.3263 19.2619C16.1831 16.4509 18.8028 14.4053 21.9017 14.4053C25.4863 14.4053 28.4299 17.1426 28.7452 20.6355C29.4629 20.0662 30.3716 19.726 31.3599 19.726C33.6816 19.726 35.5636 21.6029 35.5636 23.9181C35.5636 26.2334 33.6816 28.1102 31.3599 28.1102C31.3058 28.1102 31.2519 28.1092 31.1983 28.1072V28.1105H12.4433V28.1096Z"
16
17
  fill="#3B5BDB"
17
- fill-opacity="0.3"
18
+ fillOpacity={0.3}
18
19
  />
19
20
  <path
20
- fill-rule="evenodd"
21
- clip-rule="evenodd"
21
+ fillRule="evenodd"
22
+ clipRule="evenodd"
22
23
  d="M17.077 59.7212C17.0639 59.7214 17.0507 59.7215 17.0375 59.7215C15.7078 59.7215 14.6299 58.6466 14.6299 57.3205C14.6299 55.9945 15.7078 54.9196 17.0375 54.9196C17.5806 54.9196 18.0817 55.0989 18.4845 55.4014C18.9029 54.029 20.1819 53.0303 21.6949 53.0303C23.4451 53.0303 24.8824 54.3669 25.0362 56.0724C25.3866 55.7944 25.8302 55.6283 26.3128 55.6283C27.4463 55.6283 28.3652 56.5447 28.3652 57.6751C28.3652 58.8054 27.4463 59.7218 26.3128 59.7218C26.2864 59.7218 26.26 59.7213 26.2339 59.7203V59.7217H17.077V59.7212Z"
23
24
  fill="#3B5BDB"
24
- fill-opacity="0.3"
25
+ fillOpacity={0.3}
25
26
  />
26
27
  <path
27
- fill-rule="evenodd"
28
- clip-rule="evenodd"
28
+ fillRule="evenodd"
29
+ clipRule="evenodd"
29
30
  d="M51.8554 45.6714C51.8755 45.6718 51.8958 45.6719 51.916 45.6719C53.9561 45.6719 55.6099 43.9769 55.6099 41.886C55.6099 39.7952 53.9561 38.1002 51.916 38.1002C51.0827 38.1002 50.3139 38.383 49.6959 38.86C49.0541 36.6959 47.0917 35.1211 44.7705 35.1211C42.0852 35.1211 39.8802 37.2286 39.6442 39.9179C39.1066 39.4796 38.4259 39.2177 37.6855 39.2177C35.9465 39.2177 34.5367 40.6626 34.5367 42.445C34.5367 44.2274 35.9465 45.6723 37.6855 45.6723C37.7261 45.6723 37.7665 45.6715 37.8066 45.67V45.6721H51.8554V45.6714Z"
30
31
  fill="#3B5BDB"
31
- fill-opacity="0.3"
32
+ fillOpacity={0.3}
32
33
  />
33
34
  <path
34
- fill-rule="evenodd"
35
- clip-rule="evenodd"
35
+ fillRule="evenodd"
36
+ clipRule="evenodd"
36
37
  d="M150.742 16.4655C150.66 16.4725 150.577 16.476 150.493 16.476C148.894 16.476 147.597 15.183 147.597 13.588C147.597 11.993 148.894 10.7 150.493 10.7C150.688 10.7 150.878 10.7192 151.062 10.7558C151.584 8.82245 153.354 7.39941 155.457 7.39941C157.417 7.39941 159.087 8.63418 159.728 10.366C159.937 10.263 160.173 10.2052 160.422 10.2052C161.008 10.2052 161.518 10.5242 161.789 10.9973C162.175 10.807 162.61 10.7 163.07 10.7C164.669 10.7 165.966 11.993 165.966 13.588C165.966 15.183 164.669 16.476 163.07 16.476C163.042 16.476 163.015 16.4756 162.987 16.4748V16.476H150.742V16.4655Z"
37
38
  fill="#3B5BDB"
38
- fill-opacity="0.3"
39
+ fillOpacity={0.3}
39
40
  />
40
41
  <path
41
42
  d="M115.317 86.6337C115.317 88.8967 104.441 90.7313 91.0246 90.7313C77.6081 90.7313 66.7319 88.8967 66.7319 86.6337C66.7319 84.3707 77.6081 82.5361 91.0246 82.5361C104.441 82.5361 115.317 84.3707 115.317 86.6337Z"
42
43
  fill="#3B5BDB"
43
- fill-opacity="0.3"
44
+ fillOpacity={0.3}
44
45
  />
45
46
  <path
46
- fill-rule="evenodd"
47
- clip-rule="evenodd"
47
+ fillRule="evenodd"
48
+ clipRule="evenodd"
48
49
  d="M67.656 5.85669C66.0341 5.85669 64.3904 5.64884 64.3904 8.59922V75.4381C64.3904 78.3885 65.9995 78.4389 67.6214 78.4389H115.307C116.929 78.4389 118.244 78.3885 118.244 75.4381L118.209 8.85746C118.209 5.90708 116.271 5.85669 114.649 5.85669H67.656Z"
49
50
  fill="white"
50
51
  />
51
52
  <path
52
- fill-rule="evenodd"
53
- clip-rule="evenodd"
53
+ fillRule="evenodd"
54
+ clipRule="evenodd"
54
55
  d="M118.209 8.85746C118.209 5.90708 116.271 5.85669 114.649 5.85669H67.656C67.5556 5.85669 67.455 5.85589 67.3548 5.85509C65.8368 5.84305 64.3904 5.83158 64.3904 8.59922V75.4381C64.3904 78.3885 65.9995 78.4389 67.6214 78.4389H115.307C116.929 78.4389 118.244 78.3885 118.244 75.4381L118.209 8.85746ZM115.903 75.4381L115.868 8.85746C115.868 8.55226 115.836 8.36846 115.811 8.27076C115.764 8.25927 115.696 8.24597 115.602 8.23432C115.354 8.20357 115.063 8.19815 114.649 8.19815H67.656C67.5462 8.19815 67.4378 8.19729 67.3401 8.19651L67.3335 8.19646C67.2309 8.19565 67.1397 8.19495 67.051 8.19498C66.9336 8.19503 66.8349 8.19644 66.7493 8.19961C66.7392 8.30204 66.7318 8.43357 66.7318 8.59922V75.4381C66.7318 75.7386 66.7553 75.9409 66.7793 76.0687C66.9759 76.092 67.2256 76.0974 67.6214 76.0974H115.307C115.552 76.0974 115.729 76.0952 115.866 76.0889C115.886 75.9395 115.903 75.7279 115.903 75.4381Z"
55
56
  fill="#292A33"
56
57
  />
@@ -59,11 +60,11 @@ const KioskImage = () => {
59
60
  fill="#EBEFFB"
60
61
  />
61
62
  <rect
62
- x="162.573"
63
- y="70.0283"
64
- width="12.5769"
65
- height="2.64072"
66
- rx="1.32036"
63
+ x={162.573}
64
+ y={70.0283}
65
+ width={12.5769}
66
+ height={2.64072}
67
+ rx={1.32036}
67
68
  fill="#292A33"
68
69
  />
69
70
  <path
@@ -75,53 +76,53 @@ const KioskImage = () => {
75
76
  fill="#292A33"
76
77
  />
77
78
  <rect
78
- x="17.4429"
79
- y="70.0283"
80
- width="8.10877"
81
- height="2.64072"
82
- rx="1.32036"
79
+ x={17.4429}
80
+ y={70.0283}
81
+ width={8.10877}
82
+ height={2.64072}
83
+ rx={1.32036}
83
84
  fill="#292A33"
84
85
  />
85
86
  <rect
86
- x="93.0732"
87
- y="70.2441"
88
- width="8.10877"
89
- height="2.64072"
90
- rx="1.32036"
87
+ x={93.0732}
88
+ y={70.2441}
89
+ width={8.10877}
90
+ height={2.64072}
91
+ rx={1.32036}
91
92
  fill="#292A33"
92
93
  />
93
94
  <rect
94
- x="112.689"
95
- y="56.1953"
96
- width="8.10877"
97
- height="2.64072"
98
- rx="1.32036"
95
+ x={112.689}
96
+ y={56.1953}
97
+ width={8.10877}
98
+ height={2.64072}
99
+ rx={1.32036}
99
100
  transform="rotate(90 112.689 56.1953)"
100
101
  fill="#292A33"
101
102
  />
102
103
  <rect
103
- x="104.781"
104
- y="70.2441"
105
- width="8.10877"
106
- height="2.64072"
107
- rx="1.32036"
104
+ x={104.781}
105
+ y={70.2441}
106
+ width={8.10877}
107
+ height={2.64072}
108
+ rx={1.32036}
108
109
  fill="#292A33"
109
110
  />
110
111
  <path
111
- fill-rule="evenodd"
112
- clip-rule="evenodd"
112
+ fillRule="evenodd"
113
+ clipRule="evenodd"
113
114
  d="M96.4624 31.5838C95.8425 31.5838 95.2796 32.0356 95.1249 32.7055C95.0174 33.1711 94.5519 33.4615 94.0853 33.3542C93.6187 33.2469 93.3276 32.7825 93.4352 32.3169C93.7555 30.9299 94.9667 29.8535 96.4624 29.8535C97.9582 29.8535 99.1694 30.9299 99.4897 32.3169C99.5972 32.7825 99.3062 33.2469 98.8396 33.3542C98.3729 33.4615 97.9075 33.1711 97.8 32.7055C97.6452 32.0356 97.0824 31.5838 96.4624 31.5838Z"
114
115
  fill="#3B5BDB"
115
116
  />
116
117
  <path
117
- fill-rule="evenodd"
118
- clip-rule="evenodd"
118
+ fillRule="evenodd"
119
+ clipRule="evenodd"
119
120
  d="M80.3179 31.5838C79.6979 31.5838 79.1351 32.0356 78.9804 32.7055C78.8728 33.1711 78.4074 33.4615 77.9408 33.3542C77.4742 33.2469 77.1831 32.7825 77.2907 32.3169C77.611 30.9299 78.8221 29.8535 80.3179 29.8535C81.8137 29.8535 83.0248 30.9299 83.3452 32.3169C83.4527 32.7825 83.1616 33.2469 82.695 33.3542C82.2284 33.4615 81.763 33.1711 81.6554 32.7055C81.5007 32.0356 80.9379 31.5838 80.3179 31.5838Z"
120
121
  fill="#3B5BDB"
121
122
  />
122
123
  <path
123
- fill-rule="evenodd"
124
- clip-rule="evenodd"
124
+ fillRule="evenodd"
125
+ clipRule="evenodd"
125
126
  d="M82.8702 42.6553C83.349 42.6553 83.7372 43.0426 83.7372 43.5204C83.7372 44.2447 84.3256 44.8319 85.0514 44.8319H91.7293C92.4551 44.8319 93.0435 44.2447 93.0435 43.5204C93.0435 43.0426 93.4317 42.6553 93.9105 42.6553C94.3894 42.6553 94.7775 43.0426 94.7775 43.5204C94.7775 45.2003 93.4128 46.5622 91.7293 46.5622H85.0514C83.3679 46.5622 82.0032 45.2003 82.0032 43.5204C82.0032 43.0426 82.3914 42.6553 82.8702 42.6553Z"
126
127
  fill="#3B5BDB"
127
128
  />
@@ -131,27 +132,27 @@ const KioskImage = () => {
131
132
  fill="white"
132
133
  />
133
134
  <rect
134
- x="144.722"
135
- y="23.8203"
136
- width="7.44683"
137
- height="1.98054"
138
- rx="0.990269"
135
+ x={144.722}
136
+ y={23.8203}
137
+ width={7.44683}
138
+ height={1.98054}
139
+ rx={0.990269}
139
140
  fill="#959CA8"
140
141
  />
141
142
  <rect
142
- x="137.606"
143
- y="23.8203"
144
- width="4.4681"
145
- height="1.98054"
146
- rx="0.990269"
143
+ x={137.606}
144
+ y={23.8203}
145
+ width={4.4681}
146
+ height={1.98054}
147
+ rx={0.990269}
147
148
  fill="#959CA8"
148
149
  />
149
150
  <rect
150
- x="124.367"
151
- y="23.8203"
152
- width="10.5911"
153
- height="1.98054"
154
- rx="0.990269"
151
+ x={124.367}
152
+ y={23.8203}
153
+ width={10.5911}
154
+ height={1.98054}
155
+ rx={0.990269}
155
156
  fill="#959CA8"
156
157
  />
157
158
  <path
@@ -161,43 +162,43 @@ const KioskImage = () => {
161
162
  </g>
162
163
  <g filter="url(#filter1_d_4997_39198)">
163
164
  <rect
164
- x="125.836"
165
- y="28.1113"
166
- width="53.2862"
167
- height="9.2416"
168
- rx="4.5008"
165
+ x={125.836}
166
+ y={28.1113}
167
+ width={53.2862}
168
+ height={9.2416}
169
+ rx={4.5008}
169
170
  fill="white"
170
171
  />
171
172
  <rect
172
- x="164.229"
173
- y="31.7422"
174
- width="11.253"
175
- height="1.98054"
176
- rx="0.990269"
173
+ x={164.229}
174
+ y={31.7422}
175
+ width={11.253}
176
+ height={1.98054}
177
+ rx={0.990269}
177
178
  fill="#959CA8"
178
179
  />
179
180
  <rect
180
- x="147.68"
181
- y="31.7422"
182
- width="13.9008"
183
- height="1.98054"
184
- rx="0.990269"
181
+ x={147.68}
182
+ y={31.7422}
183
+ width={13.9008}
184
+ height={1.98054}
185
+ rx={0.990269}
185
186
  fill="#959CA8"
186
187
  />
187
188
  <rect
188
- x="140.233"
189
- y="31.7422"
190
- width="4.79907"
191
- height="1.98054"
192
- rx="0.990269"
189
+ x={140.233}
190
+ y={31.7422}
191
+ width={4.79907}
192
+ height={1.98054}
193
+ rx={0.990269}
193
194
  fill="#959CA8"
194
195
  />
195
196
  <rect
196
- x="129.477"
197
- y="31.7422"
198
- width="8.10877"
199
- height="1.98054"
200
- rx="0.990269"
197
+ x={129.477}
198
+ y={31.7422}
199
+ width={8.10877}
200
+ height={1.98054}
201
+ rx={0.990269}
201
202
  fill="#959CA8"
202
203
  />
203
204
  </g>
@@ -210,8 +211,8 @@ const KioskImage = () => {
210
211
  fill="#3B5BDB"
211
212
  />
212
213
  <path
213
- fill-rule="evenodd"
214
- clip-rule="evenodd"
214
+ fillRule="evenodd"
215
+ clipRule="evenodd"
215
216
  d="M83.3283 63.4473C84.1249 63.5441 84.692 64.267 84.595 65.0618C84.5327 65.5717 84.5006 66.0914 84.5006 66.6193C84.5006 68.5554 84.9326 70.3868 85.7044 72.0265C86.0456 72.7512 85.7333 73.6147 85.007 73.9551C84.2807 74.2955 83.4154 73.984 83.0742 73.2592C82.1247 71.2419 81.5947 68.9903 81.5947 66.6193C81.5947 65.974 81.634 65.3372 81.7104 64.7112C81.8074 63.9164 82.5318 63.3505 83.3283 63.4473Z"
216
217
  fill="#3B5BDB"
217
218
  />
@@ -221,11 +222,11 @@ const KioskImage = () => {
221
222
  />
222
223
  <g filter="url(#filter2_d_4997_39198)">
223
224
  <rect
224
- x="128.195"
225
- y="30.5869"
226
- width="18.5343"
227
- height="18.4832"
228
- rx="8.439"
225
+ x={128.195}
226
+ y={30.5869}
227
+ width={18.5343}
228
+ height={18.4832}
229
+ rx={8.439}
229
230
  fill="#3B5BDB"
230
231
  />
231
232
  </g>
@@ -235,12 +236,14 @@ const KioskImage = () => {
235
236
  />
236
237
  <mask
237
238
  id="mask0_4997_39198"
238
- style="mask-type:luminance"
239
+ style={{
240
+ maskType: "luminance",
241
+ }}
239
242
  maskUnits="userSpaceOnUse"
240
- x="134"
241
- y="34"
242
- width="7"
243
- height="12"
243
+ x={134}
244
+ y={34}
245
+ width={7}
246
+ height={12}
244
247
  >
245
248
  <path
246
249
  d="M138.41 45.0735V44.0862C139.872 43.8932 140.787 43.0549 140.787 41.8526C140.787 40.6557 140.19 39.7843 138.75 39.4369L137.474 39.1225C136.614 38.8964 136.362 38.6647 136.362 38.2015C136.362 37.6223 136.899 37.2252 137.77 37.2252C138.613 37.2252 138.93 37.6554 139.029 38.3614L140.644 38.3338C140.661 37.1922 139.823 36.2435 138.443 36.0009V34.9033H137.058V35.9953C135.645 36.2104 134.637 37.0874 134.648 38.389C134.665 39.6134 135.442 40.3248 136.652 40.573L137.95 40.8543C138.722 41.0308 139.089 41.2735 139.089 41.8636C139.089 42.4317 138.525 42.8563 137.737 42.8563C136.861 42.8563 136.247 42.4703 136.078 41.7423L134.413 41.7753C134.561 43.1707 135.53 43.9208 137.03 44.0918V45.0735H138.41Z"
@@ -249,10 +252,10 @@ const KioskImage = () => {
249
252
  </mask>
250
253
  <g mask="url(#mask0_4997_39198)">
251
254
  <rect
252
- x="129.951"
253
- y="32.2012"
254
- width="15.2974"
255
- height="15.2552"
255
+ x={129.951}
256
+ y={32.2012}
257
+ width={15.2974}
258
+ height={15.2552}
256
259
  fill="white"
257
260
  />
258
261
  </g>
@@ -261,22 +264,22 @@ const KioskImage = () => {
261
264
  fill="white"
262
265
  />
263
266
  <path
264
- fill-rule="evenodd"
265
- clip-rule="evenodd"
267
+ fillRule="evenodd"
268
+ clipRule="evenodd"
266
269
  d="M106.537 78.4391H75.5124V84.8781H106.537V78.4391ZM73.1709 76.0977V86.0489C73.1709 86.6955 73.6951 87.2196 74.3416 87.2196H107.707C108.354 87.2196 108.878 86.6955 108.878 86.0489V76.0977H73.1709Z"
267
270
  fill="#292A33"
268
271
  />
269
272
  <defs>
270
273
  <filter
271
274
  id="filter0_d_4997_39198"
272
- x="107.093"
273
- y="9.03814"
274
- width="59.8678"
275
- height="31.5438"
275
+ x={107.093}
276
+ y={9.03814}
277
+ width={59.8678}
278
+ height={31.5438}
276
279
  filterUnits="userSpaceOnUse"
277
- color-interpolation-filters="sRGB"
280
+ colorInterpolationFilters="sRGB"
278
281
  >
279
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
282
+ <feFlood floodOpacity={0} result="BackgroundImageFix" />
280
283
  <feColorMatrix
281
284
  in="SourceAlpha"
282
285
  type="matrix"
@@ -284,7 +287,7 @@ const KioskImage = () => {
284
287
  result="hardAlpha"
285
288
  />
286
289
  <feOffset />
287
- <feGaussianBlur stdDeviation="5.57566" />
290
+ <feGaussianBlur stdDeviation={5.57566} />
288
291
  <feComposite in2="hardAlpha" operator="out" />
289
292
  <feColorMatrix
290
293
  type="matrix"
@@ -304,14 +307,14 @@ const KioskImage = () => {
304
307
  </filter>
305
308
  <filter
306
309
  id="filter1_d_4997_39198"
307
- x="114.685"
308
- y="16.96"
309
- width="75.5888"
310
- height="31.5438"
310
+ x={114.685}
311
+ y={16.96}
312
+ width={75.5888}
313
+ height={31.5438}
311
314
  filterUnits="userSpaceOnUse"
312
- color-interpolation-filters="sRGB"
315
+ colorInterpolationFilters="sRGB"
313
316
  >
314
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
317
+ <feFlood floodOpacity={0} result="BackgroundImageFix" />
315
318
  <feColorMatrix
316
319
  in="SourceAlpha"
317
320
  type="matrix"
@@ -319,7 +322,7 @@ const KioskImage = () => {
319
322
  result="hardAlpha"
320
323
  />
321
324
  <feOffset />
322
- <feGaussianBlur stdDeviation="5.57566" />
325
+ <feGaussianBlur stdDeviation={5.57566} />
323
326
  <feComposite in2="hardAlpha" operator="out" />
324
327
  <feColorMatrix
325
328
  type="matrix"
@@ -339,14 +342,14 @@ const KioskImage = () => {
339
342
  </filter>
340
343
  <filter
341
344
  id="filter2_d_4997_39198"
342
- x="113.195"
343
- y="15.5869"
344
- width="48.5344"
345
- height="48.4834"
345
+ x={113.195}
346
+ y={15.5869}
347
+ width={48.5344}
348
+ height={48.4834}
346
349
  filterUnits="userSpaceOnUse"
347
- color-interpolation-filters="sRGB"
350
+ colorInterpolationFilters="sRGB"
348
351
  >
349
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
352
+ <feFlood floodOpacity={0} result="BackgroundImageFix" />
350
353
  <feColorMatrix
351
354
  in="SourceAlpha"
352
355
  type="matrix"
@@ -354,7 +357,7 @@ const KioskImage = () => {
354
357
  result="hardAlpha"
355
358
  />
356
359
  <feOffset />
357
- <feGaussianBlur stdDeviation="7.5" />
360
+ <feGaussianBlur stdDeviation={7.5} />
358
361
  <feComposite in2="hardAlpha" operator="out" />
359
362
  <feColorMatrix
360
363
  type="matrix"