@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/src/components/atoms/icons/PointOfSaleImage.js CHANGED
@@ -3,37 +3,38 @@ import React from "react";
3
3
  const PointOfSaleImage = () => {
4
4
  return (
5
5
  <svg
6
- width="180"
7
- height="96"
6
+ width={180}
7
+ height={96}
8
8
  viewBox="0 0 180 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="M142.706 17.5583C140.253 17.3968 138.314 15.3563 138.314 12.8627C138.314 10.2637 140.421 8.15681 143.02 8.15681C143.913 8.15681 144.749 8.40592 145.46 8.8385C146.262 5.91385 148.939 3.76465 152.118 3.76465C155.728 3.76465 158.691 6.53709 158.994 10.0693C159.633 9.65335 160.396 9.41171 161.216 9.41171C163.468 9.41171 165.294 11.2377 165.294 13.4901C165.294 15.7426 163.468 17.5686 161.216 17.5686C161.11 17.5686 161.005 17.5646 160.902 17.5567V17.5686H152.118H143.02H142.706V17.5583Z"
16
17
  fill="#15749D"
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="M20.3531 64.627C18.9669 64.627 17.8433 63.5034 17.8433 62.1172C17.8433 60.7311 18.9669 59.6074 20.3531 59.6074C20.7424 59.6074 21.1111 59.6961 21.44 59.8544C21.9913 58.9536 22.9843 58.3525 24.1178 58.3525C25.5139 58.3525 26.6971 59.2646 27.104 60.5253C27.4257 60.3406 27.7986 60.2349 28.1962 60.2349C29.4091 60.2349 30.3923 61.2181 30.3923 62.431C30.3923 63.6438 29.4091 64.627 28.1962 64.627H24.1178H20.3531Z"
23
24
  fill="#15749D"
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="M60.8237 8.78431H53.608H49.147V8.77384C49.0663 8.78078 48.9846 8.78431 48.9021 8.78431C47.3428 8.78431 46.0786 7.52018 46.0786 5.96078C46.0786 4.40139 47.3428 3.13726 48.9021 3.13726C49.067 3.13726 49.2286 3.15139 49.3857 3.1785C49.9123 1.34307 51.6033 0 53.608 0C55.4761 0 57.0719 1.1663 57.7068 2.81047C57.8935 2.7321 58.0986 2.68878 58.3139 2.68878C58.8648 2.68878 59.3494 2.97248 59.6292 3.40162C59.992 3.232 60.3968 3.13726 60.8237 3.13726C62.3831 3.13726 63.6472 4.40139 63.6472 5.96078C63.6472 7.43768 62.5133 8.64973 61.0686 8.77384V8.78431H60.8237Z"
30
31
  fill="#15749D"
31
- fill-opacity="0.3"
32
+ fillOpacity={0.3}
32
33
  />
33
34
  <path
34
35
  d="M109.451 91.9212C109.451 94.1737 100.883 95.9996 90.3138 95.9996C79.7446 95.9996 71.1765 94.1737 71.1765 91.9212C71.1765 89.6687 79.7446 87.8428 90.3138 87.8428C100.883 87.8428 109.451 89.6687 109.451 91.9212Z"
35
36
  fill="#15749D"
36
- fill-opacity="0.3"
37
+ fillOpacity={0.3}
37
38
  />
38
39
  <path
39
40
  d="M49.8433 32H130.784V80.3137C130.784 81.0068 130.223 81.5686 129.53 81.5686H51.0982C50.4051 81.5686 49.8433 81.0068 49.8433 80.3137V32Z"
@@ -56,8 +57,8 @@ const PointOfSaleImage = () => {
56
57
  fill="#292A33"
57
58
  />
58
59
  <path
59
- fill-rule="evenodd"
60
- clip-rule="evenodd"
60
+ fillRule="evenodd"
61
+ clipRule="evenodd"
61
62
  d="M129.53 21.3335H51.0982C50.4051 21.3335 49.8433 21.8954 49.8433 22.5884V80.3139C49.8433 81.007 50.4051 81.5688 51.0982 81.5688H129.53C130.223 81.5688 130.784 81.007 130.784 80.3139V22.5884C130.784 21.8954 130.223 21.3335 129.53 21.3335ZM51.0982 19.4512C49.3655 19.4512 47.9609 20.8558 47.9609 22.5884V80.3139C47.9609 82.0466 49.3655 83.4512 51.0982 83.4512H129.53C131.262 83.4512 132.667 82.0466 132.667 80.3139V22.5884C132.667 20.8558 131.262 19.4512 129.53 19.4512H51.0982Z"
62
63
  fill="#292A33"
63
64
  />
@@ -78,20 +79,20 @@ const PointOfSaleImage = () => {
78
79
  fill="#292A33"
79
80
  />
80
81
  <path
81
- fill-rule="evenodd"
82
- clip-rule="evenodd"
82
+ fillRule="evenodd"
83
+ clipRule="evenodd"
83
84
  d="M99.7255 48.4773C98.639 48.4773 97.8554 49.1092 97.6631 49.7849C97.5435 50.2053 97.1057 50.4491 96.6854 50.3295C96.265 50.2098 96.0211 49.7721 96.1408 49.3517C96.5631 47.8673 98.0747 46.8945 99.7255 46.8945C101.376 46.8945 102.888 47.8673 103.31 49.3517C103.43 49.7721 103.186 50.2098 102.766 50.3295C102.345 50.4491 101.907 50.2053 101.788 49.7849C101.596 49.1092 100.812 48.4773 99.7255 48.4773Z"
84
85
  fill="#292A33"
85
86
  />
86
87
  <path
87
- fill-rule="evenodd"
88
- clip-rule="evenodd"
88
+ fillRule="evenodd"
89
+ clipRule="evenodd"
89
90
  d="M82.1569 48.4773C81.0704 48.4773 80.2868 49.1092 80.0945 49.7849C79.9749 50.2053 79.5371 50.4491 79.1167 50.3295C78.6964 50.2098 78.4525 49.7721 78.5722 49.3517C78.9945 47.8673 80.5061 46.8945 82.1569 46.8945C83.8077 46.8945 85.3192 47.8673 85.7416 49.3517C85.8612 49.7721 85.6174 50.2098 85.197 50.3295C84.7766 50.4491 84.3389 50.2053 84.2192 49.7849C84.027 49.1092 83.2434 48.4773 82.1569 48.4773Z"
90
91
  fill="#292A33"
91
92
  />
92
93
  <path
93
- fill-rule="evenodd"
94
- clip-rule="evenodd"
94
+ fillRule="evenodd"
95
+ clipRule="evenodd"
95
96
  d="M83.098 59.4443C83.5351 59.4443 83.8894 59.7987 83.8894 60.2357C83.8894 61.1848 84.6588 61.9541 85.6078 61.9541H95.0196C95.9687 61.9541 96.738 61.1848 96.738 60.2357C96.738 59.7987 97.0923 59.4443 97.5294 59.4443C97.9665 59.4443 98.3208 59.7987 98.3208 60.2357C98.3208 62.0589 96.8428 63.5369 95.0196 63.5369H85.6078C83.7846 63.5369 82.3066 62.0589 82.3066 60.2357C82.3066 59.7987 82.661 59.4443 83.098 59.4443Z"
96
97
  fill="#292A33"
97
98
  />
@@ -105,8 +106,8 @@ const PointOfSaleImage = () => {
105
106
  fill="white"
106
107
  />
107
108
  <path
108
- fill-rule="evenodd"
109
- clip-rule="evenodd"
109
+ fillRule="evenodd"
110
+ clipRule="evenodd"
110
111
  d="M25.9323 37.6658C25.5914 37.5877 25.5079 37.5381 25.5079 37.4245V37.4175C25.5079 37.3252 25.5878 37.2577 25.7514 37.2577C25.9455 37.2577 26.1621 37.3239 26.3658 37.4561C26.4039 37.4808 26.4541 37.4725 26.4801 37.4349L26.724 37.0836C26.7499 37.0462 26.7429 36.9935 26.7064 36.9669C26.5557 36.8569 26.3858 36.779 26.1926 36.7335V36.4748C26.1926 36.4294 26.1565 36.3926 26.112 36.3926H25.6219C25.5774 36.3926 25.5413 36.4294 25.5413 36.4748V36.7055C25.0931 36.7813 24.8261 37.0836 24.8261 37.4813V37.4884C24.8261 37.9957 25.2261 38.1448 25.7444 38.2654C26.0783 38.347 26.1584 38.4003 26.1584 38.5066V38.5138C26.1584 38.6202 26.061 38.6839 25.8766 38.6839C25.6183 38.6839 25.3747 38.5976 25.1483 38.4329C25.1127 38.407 25.0633 38.4148 25.0353 38.449L24.7648 38.7786C24.7353 38.8145 24.7391 38.869 24.7752 38.8981C24.9925 39.0729 25.2567 39.1835 25.5413 39.2299V39.4543C25.5413 39.496 25.5745 39.5298 25.6154 39.5298H26.1186C26.1595 39.5298 26.1926 39.496 26.1926 39.4543V39.2163C26.5893 39.1204 26.8366 38.8483 26.8366 38.4463V38.4393C26.8366 37.9744 26.4888 37.7899 25.9323 37.6658Z"
111
112
  fill="#959CA8"
112
113
  />
@@ -125,8 +126,8 @@ const PointOfSaleImage = () => {
125
126
  fill="white"
126
127
  />
127
128
  <path
128
- fill-rule="evenodd"
129
- clip-rule="evenodd"
129
+ fillRule="evenodd"
130
+ clipRule="evenodd"
130
131
  d="M9.61856 44.5671C9.27768 44.4891 9.19416 44.4395 9.19416 44.3259V44.3189C9.19416 44.2266 9.27411 44.1591 9.43766 44.1591C9.63178 44.1591 9.84835 44.2252 10.0521 44.3575C10.0902 44.3822 10.1403 44.3738 10.1664 44.3362L10.4103 43.9849C10.4362 43.9476 10.4292 43.8949 10.3926 43.8683C10.242 43.7583 10.0721 43.6804 9.87892 43.6349V43.3761C9.87892 43.3308 9.84282 43.2939 9.79826 43.2939H9.30818C9.26369 43.2939 9.22759 43.3308 9.22759 43.3761V43.6069C8.77941 43.6827 8.5124 43.9849 8.5124 44.3826V44.3898C8.5124 44.8971 8.91239 45.0461 9.43066 45.1667C9.76462 45.2483 9.84464 45.3016 9.84464 45.4079V45.4152C9.84464 45.5215 9.74727 45.5853 9.56287 45.5853C9.30461 45.5853 9.06097 45.499 8.8346 45.3342C8.799 45.3083 8.74961 45.3162 8.72163 45.3504L8.45105 45.6799C8.4216 45.7159 8.42538 45.7704 8.46148 45.7994C8.67882 45.9743 8.94296 46.0849 9.22759 46.1313V46.3556C9.22759 46.3974 9.26075 46.4312 9.30167 46.4312H9.80484C9.84576 46.4312 9.87892 46.3974 9.87892 46.3556V46.1176C10.2755 46.0218 10.5229 45.7496 10.5229 45.3477V45.3407C10.5229 44.8758 10.1751 44.6913 9.61856 44.5671Z"
131
132
  fill="#959CA8"
132
133
  />
@@ -167,8 +168,8 @@ const PointOfSaleImage = () => {
167
168
  fill="white"
168
169
  />
169
170
  <path
170
- fill-rule="evenodd"
171
- clip-rule="evenodd"
171
+ fillRule="evenodd"
172
+ clipRule="evenodd"
172
173
  d="M126.952 38.2927C126.611 38.2147 126.527 38.1651 126.527 38.0515V38.0445C126.527 37.9522 126.607 37.8847 126.771 37.8847C126.965 37.8847 127.182 37.9508 127.385 38.0831C127.423 38.1078 127.474 38.0994 127.5 38.0618L127.744 37.7105C127.769 37.6731 127.762 37.6205 127.726 37.5939C127.575 37.4839 127.405 37.4059 127.212 37.3605V37.1017C127.212 37.0563 127.176 37.0195 127.132 37.0195H126.641C126.597 37.0195 126.561 37.0563 126.561 37.1017V37.3325C126.113 37.4083 125.846 37.7105 125.846 38.1082V38.1153C125.846 38.6227 126.246 38.7717 126.764 38.8923C127.098 38.9739 127.178 39.0272 127.178 39.1335V39.1407C127.178 39.2471 127.081 39.3109 126.896 39.3109C126.638 39.3109 126.394 39.2246 126.168 39.0598C126.132 39.0339 126.083 39.0418 126.055 39.076L125.784 39.4055C125.755 39.4415 125.759 39.496 125.795 39.525C126.012 39.6999 126.276 39.8105 126.561 39.8568V40.0812C126.561 40.123 126.594 40.1568 126.635 40.1568H127.138C127.179 40.1568 127.212 40.123 127.212 40.0812V39.8432C127.609 39.7474 127.856 39.4752 127.856 39.0732V39.0663C127.856 38.6014 127.508 38.4169 126.952 38.2927Z"
173
174
  fill="#959CA8"
174
175
  />
@@ -215,8 +216,8 @@ const PointOfSaleImage = () => {
215
216
  fill="#E5E7EC"
216
217
  />
217
218
  <path
218
- fill-rule="evenodd"
219
- clip-rule="evenodd"
219
+ fillRule="evenodd"
220
+ clipRule="evenodd"
220
221
  d="M159.02 43.9219H145.216C143.483 43.9219 142.078 45.3265 142.078 47.0591V53.3337H162.157V47.0591C162.157 45.3265 160.752 43.9219 159.02 43.9219ZM145.216 42.667C142.79 42.667 140.823 44.6334 140.823 47.0591V53.3337C140.823 54.0267 141.385 54.5886 142.078 54.5886H162.157C162.85 54.5886 163.412 54.0267 163.412 53.3337V47.0591C163.412 44.6334 161.445 42.667 159.02 42.667H145.216Z"
221
222
  fill="#292A33"
222
223
  />
@@ -229,8 +230,8 @@ const PointOfSaleImage = () => {
229
230
  fill="white"
230
231
  />
231
232
  <path
232
- fill-rule="evenodd"
233
- clip-rule="evenodd"
233
+ fillRule="evenodd"
234
+ clipRule="evenodd"
234
235
  d="M158.392 39.5299H161.53C161.876 39.5299 162.157 39.249 162.157 38.9024V36.3926C162.157 35.0065 161.033 33.8828 159.647 33.8828H148.353C146.967 33.8828 145.843 35.0065 145.843 36.3926V47.6867H158.392V39.5299ZM157.137 46.4318V38.275H160.902V36.3926C160.902 35.6996 160.34 35.1377 159.647 35.1377H148.353C147.66 35.1377 147.098 35.6996 147.098 36.3926V46.4318H157.137Z"
235
236
  fill="#292A33"
236
237
  />
@@ -239,8 +240,8 @@ const PointOfSaleImage = () => {
239
240
  fill="white"
240
241
  />
241
242
  <path
242
- fill-rule="evenodd"
243
- clip-rule="evenodd"
243
+ fillRule="evenodd"
244
+ clipRule="evenodd"
244
245
  d="M160.902 38.275V36.3926C160.902 35.6996 160.34 35.1377 159.647 35.1377C158.954 35.1377 158.392 35.6996 158.392 36.3926V38.275H160.902ZM159.647 33.8828C158.261 33.8828 157.137 35.0065 157.137 36.3926V39.5299H161.529C161.876 39.5299 162.157 39.249 162.157 38.9024V36.3926C162.157 35.0065 161.033 33.8828 159.647 33.8828Z"
245
246
  fill="#292A33"
246
247
  />
@@ -260,14 +261,14 @@ const PointOfSaleImage = () => {
260
261
  <defs>
261
262
  <filter
262
263
  id="filter0_d_4979_37133"
263
- x="17.2354"
264
- y="28.8828"
265
- width="35.7256"
266
- height="18.1572"
264
+ x={17.2354}
265
+ y={28.8828}
266
+ width={35.7256}
267
+ height={18.1572}
267
268
  filterUnits="userSpaceOnUse"
268
- color-interpolation-filters="sRGB"
269
+ colorInterpolationFilters="sRGB"
269
270
  >
270
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
271
+ <feFlood floodOpacity={0} result="BackgroundImageFix" />
271
272
  <feColorMatrix
272
273
  in="SourceAlpha"
273
274
  type="matrix"
@@ -275,7 +276,7 @@ const PointOfSaleImage = () => {
275
276
  result="hardAlpha"
276
277
  />
277
278
  <feOffset />
278
- <feGaussianBlur stdDeviation="2.5" />
279
+ <feGaussianBlur stdDeviation={2.5} />
279
280
  <feComposite in2="hardAlpha" operator="out" />
280
281
  <feColorMatrix
281
282
  type="matrix"
@@ -295,14 +296,14 @@ const PointOfSaleImage = () => {
295
296
  </filter>
296
297
  <filter
297
298
  id="filter1_d_4979_37133"
298
- x="0.921631"
299
- y="35.7842"
300
- width="60.8235"
301
- height="18.1572"
299
+ x={0.921631}
300
+ y={35.7842}
301
+ width={60.8235}
302
+ height={18.1572}
302
303
  filterUnits="userSpaceOnUse"
303
- color-interpolation-filters="sRGB"
304
+ colorInterpolationFilters="sRGB"
304
305
  >
305
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
306
+ <feFlood floodOpacity={0} result="BackgroundImageFix" />
306
307
  <feColorMatrix
307
308
  in="SourceAlpha"
308
309
  type="matrix"
@@ -310,7 +311,7 @@ const PointOfSaleImage = () => {
310
311
  result="hardAlpha"
311
312
  />
312
313
  <feOffset />
313
- <feGaussianBlur stdDeviation="2.5" />
314
+ <feGaussianBlur stdDeviation={2.5} />
314
315
  <feComposite in2="hardAlpha" operator="out" />
315
316
  <feColorMatrix
316
317
  type="matrix"
@@ -330,14 +331,14 @@ const PointOfSaleImage = () => {
330
331
  </filter>
331
332
  <filter
332
333
  id="filter2_d_4979_37133"
333
- x="127.667"
334
- y="22.6074"
335
- width="46.3921"
336
- height="18.1572"
334
+ x={127.667}
335
+ y={22.6074}
336
+ width={46.3921}
337
+ height={18.1572}
337
338
  filterUnits="userSpaceOnUse"
338
- color-interpolation-filters="sRGB"
339
+ colorInterpolationFilters="sRGB"
339
340
  >
340
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
341
+ <feFlood floodOpacity={0} result="BackgroundImageFix" />
341
342
  <feColorMatrix
342
343
  in="SourceAlpha"
343
344
  type="matrix"
@@ -345,7 +346,7 @@ const PointOfSaleImage = () => {
345
346
  result="hardAlpha"
346
347
  />
347
348
  <feOffset />
348
- <feGaussianBlur stdDeviation="2.5" />
349
+ <feGaussianBlur stdDeviation={2.5} />
349
350
  <feComposite in2="hardAlpha" operator="out" />
350
351
  <feColorMatrix
351
352
  type="matrix"
@@ -365,14 +366,14 @@ const PointOfSaleImage = () => {
365
366
  </filter>
366
367
  <filter
367
368
  id="filter3_d_4979_37133"
368
- x="118.255"
369
- y="29.5098"
370
- width="60.8235"
371
- height="18.1572"
369
+ x={118.255}
370
+ y={29.5098}
371
+ width={60.8235}
372
+ height={18.1572}
372
373
  filterUnits="userSpaceOnUse"
373
- color-interpolation-filters="sRGB"
374
+ colorInterpolationFilters="sRGB"
374
375
  >
375
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
376
+ <feFlood floodOpacity={0} result="BackgroundImageFix" />
376
377
  <feColorMatrix
377
378
  in="SourceAlpha"
378
379
  type="matrix"
@@ -380,7 +381,7 @@ const PointOfSaleImage = () => {
380
381
  result="hardAlpha"
381
382
  />
382
383
  <feOffset />
383
- <feGaussianBlur stdDeviation="2.5" />
384
+ <feGaussianBlur stdDeviation={2.5} />
384
385
  <feComposite in2="hardAlpha" operator="out" />
385
386
  <feColorMatrix
386
387
  type="matrix"
@@ -400,14 +401,14 @@ const PointOfSaleImage = () => {
400
401
  </filter>
401
402
  <filter
402
403
  id="filter4_d_4979_37133"
403
- x="132.823"
404
- y="25.8828"
405
- width="38.5881"
406
- height="36.7061"
404
+ x={132.823}
405
+ y={25.8828}
406
+ width={38.5881}
407
+ height={36.7061}
407
408
  filterUnits="userSpaceOnUse"
408
- color-interpolation-filters="sRGB"
409
+ colorInterpolationFilters="sRGB"
409
410
  >
410
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
411
+ <feFlood floodOpacity={0} result="BackgroundImageFix" />
411
412
  <feColorMatrix
412
413
  in="SourceAlpha"
413
414
  type="matrix"
@@ -415,7 +416,7 @@ const PointOfSaleImage = () => {
415
416
  result="hardAlpha"
416
417
  />
417
418
  <feOffset />
418
- <feGaussianBlur stdDeviation="4" />
419
+ <feGaussianBlur stdDeviation={4} />
419
420
  <feComposite in2="hardAlpha" operator="out" />
420
421
  <feColorMatrix
421
422
  type="matrix"