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

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 +198 -196
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +198 -196
  4. package/dist/index.esm.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/atoms/icons/KioskImage.js +131 -129
  7. package/src/components/atoms/icons/PointOfSaleImage.js +67 -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.4",
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,54 @@ 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
11
  >
12
12
  <path
13
- fill-rule="evenodd"
14
- clip-rule="evenodd"
13
+ fillRule="evenodd"
14
+ clipRule="evenodd"
15
15
  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
16
  fill="#3B5BDB"
17
- fill-opacity="0.3"
17
+ fillOpacity={0.3}
18
18
  />
19
19
  <path
20
- fill-rule="evenodd"
21
- clip-rule="evenodd"
20
+ fillRule="evenodd"
21
+ clipRule="evenodd"
22
22
  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
23
  fill="#3B5BDB"
24
- fill-opacity="0.3"
24
+ fillOpacity={0.3}
25
25
  />
26
26
  <path
27
- fill-rule="evenodd"
28
- clip-rule="evenodd"
27
+ fillRule="evenodd"
28
+ clipRule="evenodd"
29
29
  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
30
  fill="#3B5BDB"
31
- fill-opacity="0.3"
31
+ fillOpacity={0.3}
32
32
  />
33
33
  <path
34
- fill-rule="evenodd"
35
- clip-rule="evenodd"
34
+ fillRule="evenodd"
35
+ clipRule="evenodd"
36
36
  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
37
  fill="#3B5BDB"
38
- fill-opacity="0.3"
38
+ fillOpacity={0.3}
39
39
  />
40
40
  <path
41
41
  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
42
  fill="#3B5BDB"
43
- fill-opacity="0.3"
43
+ fillOpacity={0.3}
44
44
  />
45
45
  <path
46
- fill-rule="evenodd"
47
- clip-rule="evenodd"
46
+ fillRule="evenodd"
47
+ clipRule="evenodd"
48
48
  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
49
  fill="white"
50
50
  />
51
51
  <path
52
- fill-rule="evenodd"
53
- clip-rule="evenodd"
52
+ fillRule="evenodd"
53
+ clipRule="evenodd"
54
54
  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
55
  fill="#292A33"
56
56
  />
@@ -59,11 +59,11 @@ const KioskImage = () => {
59
59
  fill="#EBEFFB"
60
60
  />
61
61
  <rect
62
- x="162.573"
63
- y="70.0283"
64
- width="12.5769"
65
- height="2.64072"
66
- rx="1.32036"
62
+ x={162.573}
63
+ y={70.0283}
64
+ width={12.5769}
65
+ height={2.64072}
66
+ rx={1.32036}
67
67
  fill="#292A33"
68
68
  />
69
69
  <path
@@ -75,53 +75,53 @@ const KioskImage = () => {
75
75
  fill="#292A33"
76
76
  />
77
77
  <rect
78
- x="17.4429"
79
- y="70.0283"
80
- width="8.10877"
81
- height="2.64072"
82
- rx="1.32036"
78
+ x={17.4429}
79
+ y={70.0283}
80
+ width={8.10877}
81
+ height={2.64072}
82
+ rx={1.32036}
83
83
  fill="#292A33"
84
84
  />
85
85
  <rect
86
- x="93.0732"
87
- y="70.2441"
88
- width="8.10877"
89
- height="2.64072"
90
- rx="1.32036"
86
+ x={93.0732}
87
+ y={70.2441}
88
+ width={8.10877}
89
+ height={2.64072}
90
+ rx={1.32036}
91
91
  fill="#292A33"
92
92
  />
93
93
  <rect
94
- x="112.689"
95
- y="56.1953"
96
- width="8.10877"
97
- height="2.64072"
98
- rx="1.32036"
94
+ x={112.689}
95
+ y={56.1953}
96
+ width={8.10877}
97
+ height={2.64072}
98
+ rx={1.32036}
99
99
  transform="rotate(90 112.689 56.1953)"
100
100
  fill="#292A33"
101
101
  />
102
102
  <rect
103
- x="104.781"
104
- y="70.2441"
105
- width="8.10877"
106
- height="2.64072"
107
- rx="1.32036"
103
+ x={104.781}
104
+ y={70.2441}
105
+ width={8.10877}
106
+ height={2.64072}
107
+ rx={1.32036}
108
108
  fill="#292A33"
109
109
  />
110
110
  <path
111
- fill-rule="evenodd"
112
- clip-rule="evenodd"
111
+ fillRule="evenodd"
112
+ clipRule="evenodd"
113
113
  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
114
  fill="#3B5BDB"
115
115
  />
116
116
  <path
117
- fill-rule="evenodd"
118
- clip-rule="evenodd"
117
+ fillRule="evenodd"
118
+ clipRule="evenodd"
119
119
  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
120
  fill="#3B5BDB"
121
121
  />
122
122
  <path
123
- fill-rule="evenodd"
124
- clip-rule="evenodd"
123
+ fillRule="evenodd"
124
+ clipRule="evenodd"
125
125
  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
126
  fill="#3B5BDB"
127
127
  />
@@ -131,27 +131,27 @@ const KioskImage = () => {
131
131
  fill="white"
132
132
  />
133
133
  <rect
134
- x="144.722"
135
- y="23.8203"
136
- width="7.44683"
137
- height="1.98054"
138
- rx="0.990269"
134
+ x={144.722}
135
+ y={23.8203}
136
+ width={7.44683}
137
+ height={1.98054}
138
+ rx={0.990269}
139
139
  fill="#959CA8"
140
140
  />
141
141
  <rect
142
- x="137.606"
143
- y="23.8203"
144
- width="4.4681"
145
- height="1.98054"
146
- rx="0.990269"
142
+ x={137.606}
143
+ y={23.8203}
144
+ width={4.4681}
145
+ height={1.98054}
146
+ rx={0.990269}
147
147
  fill="#959CA8"
148
148
  />
149
149
  <rect
150
- x="124.367"
151
- y="23.8203"
152
- width="10.5911"
153
- height="1.98054"
154
- rx="0.990269"
150
+ x={124.367}
151
+ y={23.8203}
152
+ width={10.5911}
153
+ height={1.98054}
154
+ rx={0.990269}
155
155
  fill="#959CA8"
156
156
  />
157
157
  <path
@@ -161,43 +161,43 @@ const KioskImage = () => {
161
161
  </g>
162
162
  <g filter="url(#filter1_d_4997_39198)">
163
163
  <rect
164
- x="125.836"
165
- y="28.1113"
166
- width="53.2862"
167
- height="9.2416"
168
- rx="4.5008"
164
+ x={125.836}
165
+ y={28.1113}
166
+ width={53.2862}
167
+ height={9.2416}
168
+ rx={4.5008}
169
169
  fill="white"
170
170
  />
171
171
  <rect
172
- x="164.229"
173
- y="31.7422"
174
- width="11.253"
175
- height="1.98054"
176
- rx="0.990269"
172
+ x={164.229}
173
+ y={31.7422}
174
+ width={11.253}
175
+ height={1.98054}
176
+ rx={0.990269}
177
177
  fill="#959CA8"
178
178
  />
179
179
  <rect
180
- x="147.68"
181
- y="31.7422"
182
- width="13.9008"
183
- height="1.98054"
184
- rx="0.990269"
180
+ x={147.68}
181
+ y={31.7422}
182
+ width={13.9008}
183
+ height={1.98054}
184
+ rx={0.990269}
185
185
  fill="#959CA8"
186
186
  />
187
187
  <rect
188
- x="140.233"
189
- y="31.7422"
190
- width="4.79907"
191
- height="1.98054"
192
- rx="0.990269"
188
+ x={140.233}
189
+ y={31.7422}
190
+ width={4.79907}
191
+ height={1.98054}
192
+ rx={0.990269}
193
193
  fill="#959CA8"
194
194
  />
195
195
  <rect
196
- x="129.477"
197
- y="31.7422"
198
- width="8.10877"
199
- height="1.98054"
200
- rx="0.990269"
196
+ x={129.477}
197
+ y={31.7422}
198
+ width={8.10877}
199
+ height={1.98054}
200
+ rx={0.990269}
201
201
  fill="#959CA8"
202
202
  />
203
203
  </g>
@@ -210,8 +210,8 @@ const KioskImage = () => {
210
210
  fill="#3B5BDB"
211
211
  />
212
212
  <path
213
- fill-rule="evenodd"
214
- clip-rule="evenodd"
213
+ fillRule="evenodd"
214
+ clipRule="evenodd"
215
215
  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
216
  fill="#3B5BDB"
217
217
  />
@@ -221,11 +221,11 @@ const KioskImage = () => {
221
221
  />
222
222
  <g filter="url(#filter2_d_4997_39198)">
223
223
  <rect
224
- x="128.195"
225
- y="30.5869"
226
- width="18.5343"
227
- height="18.4832"
228
- rx="8.439"
224
+ x={128.195}
225
+ y={30.5869}
226
+ width={18.5343}
227
+ height={18.4832}
228
+ rx={8.439}
229
229
  fill="#3B5BDB"
230
230
  />
231
231
  </g>
@@ -235,12 +235,14 @@ const KioskImage = () => {
235
235
  />
236
236
  <mask
237
237
  id="mask0_4997_39198"
238
- style="mask-type:luminance"
238
+ style={{
239
+ maskType: "luminance",
240
+ }}
239
241
  maskUnits="userSpaceOnUse"
240
- x="134"
241
- y="34"
242
- width="7"
243
- height="12"
242
+ x={134}
243
+ y={34}
244
+ width={7}
245
+ height={12}
244
246
  >
245
247
  <path
246
248
  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 +251,10 @@ const KioskImage = () => {
249
251
  </mask>
250
252
  <g mask="url(#mask0_4997_39198)">
251
253
  <rect
252
- x="129.951"
253
- y="32.2012"
254
- width="15.2974"
255
- height="15.2552"
254
+ x={129.951}
255
+ y={32.2012}
256
+ width={15.2974}
257
+ height={15.2552}
256
258
  fill="white"
257
259
  />
258
260
  </g>
@@ -261,22 +263,22 @@ const KioskImage = () => {
261
263
  fill="white"
262
264
  />
263
265
  <path
264
- fill-rule="evenodd"
265
- clip-rule="evenodd"
266
+ fillRule="evenodd"
267
+ clipRule="evenodd"
266
268
  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
269
  fill="#292A33"
268
270
  />
269
271
  <defs>
270
272
  <filter
271
273
  id="filter0_d_4997_39198"
272
- x="107.093"
273
- y="9.03814"
274
- width="59.8678"
275
- height="31.5438"
274
+ x={107.093}
275
+ y={9.03814}
276
+ width={59.8678}
277
+ height={31.5438}
276
278
  filterUnits="userSpaceOnUse"
277
- color-interpolation-filters="sRGB"
279
+ colorInterpolationFilters="sRGB"
278
280
  >
279
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
281
+ <feFlood floodOpacity={0} result="BackgroundImageFix" />
280
282
  <feColorMatrix
281
283
  in="SourceAlpha"
282
284
  type="matrix"
@@ -284,7 +286,7 @@ const KioskImage = () => {
284
286
  result="hardAlpha"
285
287
  />
286
288
  <feOffset />
287
- <feGaussianBlur stdDeviation="5.57566" />
289
+ <feGaussianBlur stdDeviation={5.57566} />
288
290
  <feComposite in2="hardAlpha" operator="out" />
289
291
  <feColorMatrix
290
292
  type="matrix"
@@ -304,14 +306,14 @@ const KioskImage = () => {
304
306
  </filter>
305
307
  <filter
306
308
  id="filter1_d_4997_39198"
307
- x="114.685"
308
- y="16.96"
309
- width="75.5888"
310
- height="31.5438"
309
+ x={114.685}
310
+ y={16.96}
311
+ width={75.5888}
312
+ height={31.5438}
311
313
  filterUnits="userSpaceOnUse"
312
- color-interpolation-filters="sRGB"
314
+ colorInterpolationFilters="sRGB"
313
315
  >
314
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
316
+ <feFlood floodOpacity={0} result="BackgroundImageFix" />
315
317
  <feColorMatrix
316
318
  in="SourceAlpha"
317
319
  type="matrix"
@@ -319,7 +321,7 @@ const KioskImage = () => {
319
321
  result="hardAlpha"
320
322
  />
321
323
  <feOffset />
322
- <feGaussianBlur stdDeviation="5.57566" />
324
+ <feGaussianBlur stdDeviation={5.57566} />
323
325
  <feComposite in2="hardAlpha" operator="out" />
324
326
  <feColorMatrix
325
327
  type="matrix"
@@ -339,14 +341,14 @@ const KioskImage = () => {
339
341
  </filter>
340
342
  <filter
341
343
  id="filter2_d_4997_39198"
342
- x="113.195"
343
- y="15.5869"
344
- width="48.5344"
345
- height="48.4834"
344
+ x={113.195}
345
+ y={15.5869}
346
+ width={48.5344}
347
+ height={48.4834}
346
348
  filterUnits="userSpaceOnUse"
347
- color-interpolation-filters="sRGB"
349
+ colorInterpolationFilters="sRGB"
348
350
  >
349
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
351
+ <feFlood floodOpacity={0} result="BackgroundImageFix" />
350
352
  <feColorMatrix
351
353
  in="SourceAlpha"
352
354
  type="matrix"
@@ -354,7 +356,7 @@ const KioskImage = () => {
354
356
  result="hardAlpha"
355
357
  />
356
358
  <feOffset />
357
- <feGaussianBlur stdDeviation="7.5" />
359
+ <feGaussianBlur stdDeviation={7.5} />
358
360
  <feComposite in2="hardAlpha" operator="out" />
359
361
  <feColorMatrix
360
362
  type="matrix"