@thecb/components 4.1.14-beta.0 → 4.1.16-beta.0

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 (9) hide show
  1. package/dist/index.cjs.js +97 -211
  2. package/package.json +1 -1
  3. package/src/components/atoms/checkbox/Checkbox.js +1 -0
  4. package/src/components/atoms/form-select/FormSelect.js +6 -4
  5. package/src/components/atoms/form-select/FormSelect.styled.js +0 -17
  6. package/src/components/atoms/icons/ProfileIcon.js +48 -0
  7. package/src/components/atoms/icons/WalletIcon.js +38 -172
  8. package/src/components/atoms/icons/index.js +3 -1
  9. package/src/components/molecules/terms-and-conditions/TermsAndConditions.js +15 -17
package/dist/index.cjs.js CHANGED
@@ -14182,181 +14182,43 @@ var WalletIcon = function WalletIcon(_ref) {
14182
14182
  return /*#__PURE__*/React__default.createElement("svg", {
14183
14183
  xmlns: "http://www.w3.org/2000/svg",
14184
14184
  width: "299",
14185
- height: "150",
14186
- viewBox: "0 0 299 150"
14185
+ height: "151",
14186
+ viewBox: "0 0 299 151"
14187
14187
  }, /*#__PURE__*/React__default.createElement("g", {
14188
14188
  fill: "none",
14189
14189
  fillRule: "evenodd",
14190
14190
  stroke: "none",
14191
14191
  strokeWidth: "1"
14192
- }, /*#__PURE__*/React__default.createElement("g", {
14193
- transform: "translate(-154 -340)"
14194
- }, /*#__PURE__*/React__default.createElement("g", {
14195
- transform: "translate(132 261)"
14196
- }, /*#__PURE__*/React__default.createElement("g", {
14197
- transform: "translate(22 79)"
14198
- }, /*#__PURE__*/React__default.createElement("g", {
14199
- stroke: "#3B414D",
14200
- strokeLinecap: "round",
14201
- strokeWidth: "4.08",
14202
- transform: "translate(52.686 118.445)"
14203
- }, /*#__PURE__*/React__default.createElement("path", {
14204
- d: "M208.2 0.375L175.611 0.776"
14205
- }), /*#__PURE__*/React__default.createElement("path", {
14206
- d: "M233.568 0.375L218.318 0.776"
14207
- }), /*#__PURE__*/React__default.createElement("path", {
14208
- d: "M44.527 0.375L17.757 0.776"
14209
- }), /*#__PURE__*/React__default.createElement("path", {
14210
- d: "M7.759 0.375L0 0.776"
14211
- })), /*#__PURE__*/React__default.createElement("path", {
14212
- fill: "#B8E4F4",
14213
- d: "M192.663 142.912c0 3.646-13.311 6.602-29.731 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602s29.73 2.956 29.73 6.602"
14214
- }), /*#__PURE__*/React__default.createElement("g", {
14215
- stroke: "#45B770",
14216
- strokeLinecap: "round",
14217
- strokeLinejoin: "round",
14218
- strokeWidth: "4.08",
14219
- transform: "translate(150.58 129.154)"
14220
- }, /*#__PURE__*/React__default.createElement("path", {
14221
- d: "M8.08496185 -1.08959555e-14L8.08496185 12.6741246 1.81599258e-15 12.6741246"
14222
- }), /*#__PURE__*/React__default.createElement("path", {
14223
- d: "M16.0044112 -1.18039517e-14L16.0044112 13.0723155 24.0893731 13.0723155"
14224
- })), /*#__PURE__*/React__default.createElement("path", {
14225
- stroke: "#45B770",
14226
- strokeLinecap: "round",
14227
- strokeLinejoin: "round",
14228
- strokeWidth: "4.08",
14229
- d: "M97.135 97.043L85.756 106.925"
14230
- }), /*#__PURE__*/React__default.createElement("path", {
14231
- stroke: "#45B770",
14232
- strokeLinecap: "round",
14233
- strokeLinejoin: "round",
14234
- strokeWidth: "4.08",
14235
- d: "M267.332301 89.6743933L241.12027 107.066692 228.276465 97.0878034"
14236
- }), /*#__PURE__*/React__default.createElement("path", {
14237
- stroke: "#45B770",
14238
- strokeLinecap: "round",
14239
- strokeWidth: "4.08",
14240
- d: "M257.527 89.028L274.395 89.028"
14241
- }), /*#__PURE__*/React__default.createElement("g", {
14242
- transform: "translate(255.032 47.73)"
14243
- }, /*#__PURE__*/React__default.createElement("rect", {
14244
- width: "40.703",
14245
- height: "25.03",
14246
- x: "1.02",
14247
- y: "1.02",
14248
- fill: "#E8FFEF",
14249
- stroke: "#45B770",
14250
- strokeWidth: "2.04",
14251
- rx: "2.72"
14252
- }), /*#__PURE__*/React__default.createElement("path", {
14253
- fill: "#45B770",
14254
- d: "M0 6.411H42.743V12.11H0z"
14255
- })), /*#__PURE__*/React__default.createElement("g", {
14256
- transform: "translate(249.333 54.141)"
14257
- }, /*#__PURE__*/React__default.createElement("rect", {
14258
- width: "40.703",
14259
- height: "25.03",
14260
- x: "1.02",
14261
- y: "1.02",
14262
- fill: "#CACED8",
14263
- stroke: "#3B414D",
14264
- strokeWidth: "2.04",
14265
- rx: "2.72"
14266
- }), /*#__PURE__*/React__default.createElement("path", {
14267
- fill: "#3B414D",
14268
- d: "M0 6.411H42.743V12.11H0z"
14192
+ }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
14193
+ fill: themeValues.subIconColor,
14194
+ d: "M154.932 144.31c16.42 0 29.73 2.956 29.73 6.602 0 3.646-13.31 6.602-29.73 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602zM38.894 88.746c5.595 0 10.19 4.277 10.697 9.74a6.45 6.45 0 013.768-1.214 6.484 6.484 0 010 12.966H24.014a7.588 7.588 0 010-15.175c1.704 0 3.27.569 4.537 1.516 1.27-4.519 5.418-7.833 10.343-7.833zM287.055 55.73a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72V58.45a2.72 2.72 0 012.72-2.72h37.303zM61.817 54.048c2.554 0 4.73 1.6 5.594 3.85a2.545 2.545 0 012.705.883 3.778 3.778 0 011.557-.336 3.8 3.8 0 010 7.603h-16.4a3.8 3.8 0 11.75-7.528 5.995 5.995 0 015.794-4.472zM191.964 28c6.009 0 10.88 4.871 10.88 10.88v1.48L91 42.324V35.48A7.48 7.48 0 0198.48 28h93.484zM38.38 22.048a6.9 6.9 0 016.44 4.43 2.93 2.93 0 013.114 1.017 4.35 4.35 0 011.792-.387 4.374 4.374 0 110 8.748h-18.88a4.374 4.374 0 11.864-8.662c.779-2.96 3.466-5.146 6.67-5.146zM242.193 8a6.9 6.9 0 016.44 4.431 2.928 2.928 0 013.113 1.016 4.353 4.353 0 011.792-.387 4.374 4.374 0 110 8.748h-18.88a4.374 4.374 0 11.866-8.661c.778-2.96 3.464-5.147 6.67-5.147z",
14195
+ opacity: "0.302"
14269
14196
  }), /*#__PURE__*/React__default.createElement("rect", {
14270
- width: "9.973",
14271
- height: "2.85",
14272
- x: "27.163",
14273
- y: "18.367",
14274
- fill: "#3B414D",
14275
- rx: "1.36"
14276
- })), /*#__PURE__*/React__default.createElement("g", {
14277
- transform: "translate(237.223 59.128)"
14278
- }, /*#__PURE__*/React__default.createElement("circle", {
14279
- cx: "8.905",
14280
- cy: "8.905",
14281
- r: "8.905",
14282
- fill: themeValues.subIconColor
14283
- }), /*#__PURE__*/React__default.createElement("g", {
14197
+ width: "132",
14198
+ height: "97",
14199
+ x: "91",
14200
+ y: "40.398",
14284
14201
  fill: "#FFF",
14285
- transform: "translate(4.274 4.274)"
14286
- }, /*#__PURE__*/React__default.createElement("path", {
14287
- d: "M3.562 0H5.699V9.261H3.562z"
14288
- }), /*#__PURE__*/React__default.createElement("path", {
14289
- d: "M0 3.562H9.261V5.699H0z"
14290
- }))), /*#__PURE__*/React__default.createElement("path", {
14291
- fill: "#B8E4F4",
14292
- stroke: "#3B414D",
14293
- strokeWidth: "4.08",
14294
- d: "M196.423 22.699c2.441 0 4.651.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0V78.88c0 2.441-.99 4.651-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-90.084a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V28.139c0-1.502.609-2.862 1.593-3.847a5.423 5.423 0 013.847-1.593h0z"
14202
+ rx: "10.88"
14295
14203
  }), /*#__PURE__*/React__default.createElement("rect", {
14296
- width: "32.964",
14297
- height: "11.592",
14298
- x: "97.499",
14299
- y: "22.699",
14300
- stroke: "#3B414D",
14301
- strokeWidth: "4.08",
14302
- rx: "5.796"
14204
+ width: "42.743",
14205
+ height: "27.07",
14206
+ x: "241.333",
14207
+ y: "62.141",
14208
+ fill: "#CACED8",
14209
+ rx: "2.72"
14303
14210
  }), /*#__PURE__*/React__default.createElement("path", {
14304
- fill: "#B8E4F4",
14305
- d: "M121.817 24.933H141.051V32.057H121.817z"
14306
- }), /*#__PURE__*/React__default.createElement("rect", {
14307
- width: "133.928",
14308
- height: "98.309",
14309
- x: "95.459",
14310
- y: "32.057",
14311
- fill: "#FFF",
14312
- rx: "10.88"
14211
+ fill: "#3B414D",
14212
+ fillRule: "nonzero",
14213
+ d: "M278.2 125.181a2.04 2.04 0 012.093 1.986c.028 1.075-.78 1.577-1.834 1.683l-.152.01-15.25.4a2.04 2.04 0 01-.26-4.069l.153-.01h15.25zm-192.675 0a2.04 2.04 0 01.103 4.076l-.153.004H62.418a2.04 2.04 0 01-.103-4.076l.153-.004h23.057zm-31.043 1.935a2.04 2.04 0 01-1.78 2.129l-.152.013H44.79a2.04 2.04 0 01-.362-4.061l.152-.014h7.759a2.04 2.04 0 012.142 1.933zm167.441-1.758l31.106.006c1.075-.012 1.958.793 1.971 1.799.012.96-.771 1.756-1.778 1.837l-.145.007L221.97 129c-1.075.012-1.958-.793-1.971-1.799-.012-.96.771-1.756 1.778-1.837l.145-.006zm62.153-56.806v5.7h-42.743v-5.7h42.743zM145.815 71c2.575 0 4.828 1.668 5.702 4.106a1.896 1.896 0 01-3.51 1.423l-.059-.144c-.345-.964-1.196-1.594-2.133-1.594-.883 0-1.689.558-2.069 1.427l-.066.167a1.896 1.896 0 01-3.568-1.28c.874-2.437 3.126-4.105 5.703-4.105zm23.513 0c2.576 0 4.828 1.668 5.702 4.106a1.896 1.896 0 01-3.51 1.423l-.059-.144c-.345-.964-1.196-1.594-2.133-1.594-.883 0-1.689.558-2.068 1.427l-.066.167a1.895 1.895 0 11-3.57-1.28c.875-2.437 3.128-4.105 5.704-4.105zm23.636-45.04c7.032 0 12.752 5.618 12.916 12.61l.004.31-.001 1.12h7.165c6.008 0 10.88 4.871 10.88 10.88v76.549c0 6.008-4.872 10.88-10.88 10.88H100.88c-6.009 0-10.88-4.872-10.88-10.88V45.325h-.04V35.48a9.52 9.52 0 019.249-9.516l.271-.004h93.484zm20.084 18.12l-118.968.001v83.348a6.8 6.8 0 006.561 6.795l.239.005h112.168a6.8 6.8 0 006.796-6.562l.004-.238V50.88a6.8 6.8 0 00-6.562-6.796l-.238-.004zm-45.4 49.455c1.047 0 1.895.849 1.895 1.896a5.415 5.415 0 01-5.197 5.41l-.218.005h-13.505a5.415 5.415 0 01-5.414-5.415 1.896 1.896 0 013.785-.148l.006.148c0 .847.648 1.543 1.476 1.617l.147.007h13.505c.847 0 1.543-.649 1.618-1.476l.006-.148c0-1.047.85-1.896 1.896-1.896zm113.708-31.394a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303zm0 2.04h-37.303a.68.68 0 00-.672.58l-.008.1v21.63a.68.68 0 00.58.673l.1.007h37.303a.68.68 0 00.673-.58l.007-.1v-21.63a.68.68 0 00-.58-.673l-.1-.007zm-4.246 16.327c.751 0 1.36.609 1.36 1.36v.13a1.36 1.36 0 01-1.36 1.36h-7.253a1.36 1.36 0 01-1.36-1.36v-.13c0-.751.609-1.36 1.36-1.36h7.253zM192.964 30.04H99.48a5.44 5.44 0 00-5.436 5.221l-.004.219V40h107.763v-1.12a8.84 8.84 0 00-8.579-8.836l-.26-.004z"
14313
14214
  }), /*#__PURE__*/React__default.createElement("path", {
14314
- stroke: "#3B414D",
14315
- strokeWidth: "4.08",
14316
- d: "M218.507 34.097c2.44 0 4.65.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0v76.549c0 2.44-.99 4.65-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-112.168a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V34.097z"
14215
+ fill: themeValues.subIconColor,
14216
+ fillRule: "nonzero",
14217
+ d: "M160.625 137.938v10.248h6.045a2.04 2.04 0 012.034 1.888l.006.152a2.04 2.04 0 01-1.888 2.034l-.152.006h-8.085a2.04 2.04 0 01-2.034-1.888l-.006-.152v-12.288h4.08zm-7.92 0v11.89a2.04 2.04 0 01-1.887 2.034l-.152.006h-8.085a2.04 2.04 0 01-.153-4.075l.153-.005 6.044-.001v-9.849h4.08zm-62.7-34.592c-.008.004-.01.642-.012 1.477v2.665l-.002.408c-.001.507-.004.846-.01.851l-6.626 5.754 15.406 5.409a5.925 5.925 0 015.126-2.95 2.04 2.04 0 01.153 4.074l-.153.006a1.847 1.847 0 00-.144 3.69l.144.005h3.396a2.04 2.04 0 01.153 4.075l-.153.005h-3.396a5.93 5.93 0 01-5.825-4.828l-18.716-6.567a2.037 2.037 0 01-1.286-1.363 2.04 2.04 0 01.237-2.558l.122-.115 11.378-9.88c.042-.037.14-.109.191-.145l.016-.013zm176.39-8.358a2.04 2.04 0 01.152 4.074l-.152.006h-5.572a2.036 2.036 0 01-.233.213l-.13.093-26.212 17.393a2.04 2.04 0 01-2.238.011l-.141-.1-7.84-6.091c-.01-.007-.015-.415-.018-1.224v-.344V107.728v-.789l.004-1.53 9.198 7.147 20.328-13.488h-4.014a2.04 2.04 0 01-.152-4.074l.152-.006h16.868zm-28.267-27.86a8.905 8.905 0 110 17.81 8.905 8.905 0 010-17.81zm48.927-12.398a3.72 3.72 0 013.715 3.522l.005.198v21.63a3.72 3.72 0 01-3.522 3.715l-.198.005-3.306-.005v-2l3.306.005c.9 0 1.639-.691 1.714-1.572l.006-.148V68.84h-5v-5.699h5V58.45c0-.9-.69-1.639-1.571-1.714l-.149-.006h-37.303c-.9 0-1.638.69-1.713 1.571l-.007.149v3.691h-2V58.45a3.72 3.72 0 013.523-3.715l.197-.005h37.303z"
14317
14218
  }), /*#__PURE__*/React__default.createElement("path", {
14318
14219
  fill: "#FFF",
14319
- d: "M99.733 35.148c.745.789 2.175 1.183 4.289 1.183s2.114.304 0 .911l-4.289-.022v-2.072z"
14320
- }), /*#__PURE__*/React__default.createElement("path", {
14321
- stroke: "#45B770",
14322
- strokeLinecap: "round",
14323
- strokeLinejoin: "round",
14324
- strokeWidth: "4.08",
14325
- d: "M85.756 106.925L111.684 112.988"
14326
- }), /*#__PURE__*/React__default.createElement("g", {
14327
- stroke: "#45B770",
14328
- strokeLinecap: "round",
14329
- strokeLinejoin: "round",
14330
- strokeWidth: "4.08",
14331
- transform: "translate(112.486 110.241)"
14332
- }, /*#__PURE__*/React__default.createElement("path", {
14333
- d: "M3.887.053a3.887 3.887 0 000 7.775h3.396"
14334
- })), /*#__PURE__*/React__default.createElement("g", {
14335
- stroke: "#3B414D",
14336
- strokeLinecap: "round",
14337
- strokeLinejoin: "round",
14338
- strokeWidth: "3.791",
14339
- transform: "translate(147.003 64.237)"
14340
- }, /*#__PURE__*/React__default.createElement("path", {
14341
- d: "M.415 3.316C1.012 1.651 2.54.466 4.333.466c1.792 0 3.321 1.185 3.918 2.85"
14342
- }), /*#__PURE__*/React__default.createElement("path", {
14343
- d: "M23.928 3.316c.597-1.665 2.126-2.85 3.918-2.85 1.792 0 3.321 1.185 3.918 2.85"
14344
- })), /*#__PURE__*/React__default.createElement("path", {
14345
- stroke: "#3B414D",
14346
- strokeLinecap: "round",
14347
- strokeWidth: "3.791",
14348
- d: "M173.17 87.239h0a3.52 3.52 0 01-3.52 3.52h-13.505a3.52 3.52 0 01-3.52-3.52"
14349
- }), /*#__PURE__*/React__default.createElement("g", {
14350
- fill: "#B8E4F4"
14351
- }, /*#__PURE__*/React__default.createElement("path", {
14352
- d: "M245.538 5.06c-.639 0-1.244.141-1.792.387a2.94 2.94 0 00-3.113-1.016A6.9 6.9 0 00234.193 0c-3.205 0-5.891 2.186-6.67 5.147a4.374 4.374 0 10-.865 8.662h18.88a4.374 4.374 0 100-8.749"
14353
- }), /*#__PURE__*/React__default.createElement("path", {
14354
- d: "M37.36 89.272a6.45 6.45 0 00-3.769 1.214c-.507-5.463-5.102-9.74-10.697-9.74-4.925 0-9.073 3.314-10.343 7.833a7.545 7.545 0 00-4.537-1.516 7.587 7.587 0 000 15.175h29.345a6.483 6.483 0 000-12.966"
14355
- }), /*#__PURE__*/React__default.createElement("path", {
14356
- d: "M108.726 75.108a4.35 4.35 0 00-1.792.387 2.943 2.943 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.431c-3.204 0-5.891 2.186-6.67 5.146a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"
14357
- }), /*#__PURE__*/React__default.createElement("path", {
14358
- d: "M71.695 41.493c-.639 0-1.245.14-1.792.387a2.941 2.941 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.432c-3.204 0-5.89 2.187-6.67 5.147a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"
14359
- })))))));
14220
+ d: "M239.196 71.402v3.56l3.562.002V77.1h-3.562v3.562h-2.137V77.1h-3.562v-2.137l3.561-.001.001-3.561h2.137z"
14221
+ }))));
14360
14222
  };
14361
14223
 
14362
14224
  var WalletIcon$1 = themeComponent(WalletIcon, "Icons", fallbackValues$2, "info");
@@ -14763,6 +14625,44 @@ var CarrotIcon = function CarrotIcon(_ref) {
14763
14625
 
14764
14626
  var CarrotIcon$1 = themeComponent(CarrotIcon, "Icons", fallbackValues$2, "darkMode");
14765
14627
 
14628
+ var ProfileIcon = function ProfileIcon(_ref) {
14629
+ var themeValues = _ref.themeValues;
14630
+ return /*#__PURE__*/React__default.createElement("svg", {
14631
+ xmlns: "http://www.w3.org/2000/svg",
14632
+ width: "299",
14633
+ height: "151",
14634
+ viewBox: "0 0 299 151"
14635
+ }, /*#__PURE__*/React__default.createElement("g", {
14636
+ fill: "none",
14637
+ fillRule: "evenodd",
14638
+ stroke: "none",
14639
+ strokeWidth: "1"
14640
+ }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
14641
+ fill: themeValues.subIconColor,
14642
+ d: "M162.932 144.31c16.42 0 29.73 2.956 29.73 6.602 0 3.646-13.31 6.602-29.73 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602zM123.899 25.659a4 4 0 013.988 3.688l.539 6.892h85.445c3.396 0 6.293 2.78 6.47 6.207l4.31 83.776c.177 3.427-2.434 6.205-5.83 6.205H100.945c-3.397 0-6.293-2.778-6.47-6.205l-4.31-83.776c-.177-3.428 2.434-6.206 5.83-6.206h2.05l-.16-3.103a4.117 4.117 0 01.077-1.039l-.165-2.127a4 4 0 013.987-4.312H123.9zm-80.672 76.579c2.836 0 5.164 2.189 5.42 4.985a3.247 3.247 0 011.91-.621c1.814 0 3.285 1.485 3.285 3.318 0 1.832-1.47 3.318-3.285 3.318h-14.87c-2.123 0-3.845-1.739-3.845-3.883 0-2.145 1.722-3.884 3.845-3.884.863 0 1.657.291 2.3.776.643-2.313 2.744-4.009 5.24-4.009zm30.478-53.79c.369 0 .668.398.668.89v39.11h-28v-39.11c0-.492.3-.89.668-.89zm221.35 7.282a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72V58.45a2.72 2.72 0 012.72-2.72h37.303zM31.403 20.856c3.193 0 5.912 2 6.993 4.814a3.181 3.181 0 013.381 1.103 4.723 4.723 0 011.946-.42 4.75 4.75 0 014.75 4.751 4.75 4.75 0 01-4.75 4.752h-20.5a4.75 4.75 0 01-4.75-4.752 4.75 4.75 0 015.687-4.657c.846-3.216 3.764-5.591 7.243-5.591zM237.078 10c3.406 0 6.306 2.133 7.46 5.135a3.39 3.39 0 013.605 1.177 5.04 5.04 0 012.076-.448 5.067 5.067 0 015.066 5.068c0 2.799-2.268 5.068-5.066 5.068h-21.868a5.067 5.067 0 01-5.066-5.068 5.067 5.067 0 016.068-4.968c.901-3.43 4.013-5.964 7.725-5.964z",
14643
+ opacity: "0.302"
14644
+ }), /*#__PURE__*/React__default.createElement("path", {
14645
+ fill: "#FFF",
14646
+ d: "M143.096 33.659a4 4 0 013.985 4.347l-.094 1.098c.057.288.083.588.072.896l-.104 3h79.1c3.397 0 6.057 2.686 5.941 6l-2.817 81c-.115 3.314-2.962 6-6.358 6H104.945c-3.397 0-6.057-2.686-5.941-6l2.817-81c.115-3.314 2.962-6 6.358-6l4.468-.001.494-5.686a4 4 0 013.985-3.654h25.97z"
14647
+ }), /*#__PURE__*/React__default.createElement("path", {
14648
+ fill: "#CACED8",
14649
+ d: "M80.846 54.267c.369 0 .668.233.668.52v36.48h-28v-36.48c0-.287.3-.52.669-.52zm208.51 7.874a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303z"
14650
+ }), /*#__PURE__*/React__default.createElement("path", {
14651
+ fill: "#3B414D",
14652
+ fillRule: "nonzero",
14653
+ d: "M123.298 25c3.333 0 6.138 2.69 6.312 6.075l.017.584h14.276a5.993 5.993 0 014.931 2.58h65.037c4.01 0 7.46 2.918 8.288 6.761h3.896c4.434 0 7.962 3.48 7.945 7.823l-.005.247-2.653 76.287 29.687.007c1.075-.012 1.958.793 1.971 1.799.012.96-.771 1.756-1.778 1.837l-.145.007-29.862-.008-.037 1.07c-.15 4.318-3.754 7.798-8.106 7.927l-.251.004H104.945c-3.077 0-5.719-1.677-7.04-4.155a8.665 8.665 0 01-4.734-4.585H70.418a2.04 2.04 0 01-.103-4.075l.153-.004 21.95-.001-4.25-82.632c-.232-4.482 3.154-8.172 7.58-8.304l.234-.005-.094-3c-.172-3.346 2.354-6.114 5.658-6.235l.227-.004h21.525zm20.605 10.659h-25.932a2 2 0 00-1.983 1.741l-.99 7.599-6.819.001c-2.329 0-4.282 1.843-4.36 4.07l-2.817 81c-.075 2.17 1.667 3.93 3.943 3.93h117.876c2.329 0 4.282-1.843 4.36-4.07l2.817-81c.075-2.17-1.667-3.93-3.943-3.93l-81.093-.001.925-7.081a2 2 0 00-1.984-2.259zM286.2 125.181a2.04 2.04 0 012.093 1.986c.028 1.075-.78 1.577-1.834 1.683l-.152.01-15.25.4a2.04 2.04 0 01-.26-4.069l.153-.01h15.25zm-223.718 1.935a2.04 2.04 0 01-1.78 2.129l-.152.013H52.79a2.04 2.04 0 01-.362-4.061l.152-.014h7.759a2.04 2.04 0 012.142 1.933zM123.298 29h-21.525c-1.066 0-1.876.812-1.891 1.922l.002.153.225 7.165h-4.114c-2.178 0-3.847 1.706-3.839 3.896l.006.207 4.31 83.776c.038.717.25 1.398.595 1.998l2.755-79.187c.153-4.4 3.893-7.93 8.357-7.93l3.305-.001.538-4.116a6 6 0 015.712-5.22l.237-.004h7.655l-.013-.42c-.06-1.172-1.03-2.15-2.16-2.233l-.155-.006zm53.072 64.344l.148.003a1.895 1.895 0 011.77 2.014c-.185 2.865-2.567 5.172-5.413 5.289l-.226.004h-13.504c-3.04 0-5.38-2.502-5.184-5.537a1.896 1.896 0 013.787.096l-.004.148c-.052.805.487 1.43 1.262 1.496l.139.006h13.504c.894 0 1.705-.717 1.84-1.598l.015-.148a1.896 1.896 0 011.866-1.773zM81.514 53.018v.374c.573.225 1 .734 1 1.396v36.479a1 1 0 01-1 1h-28a1 1 0 01-1-1v-36.48c0-.661.427-1.17 1-1.395v-.374h28zm-1 4.807h-26v32.441h26V57.825zm211.562 28.666a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303a2.72 2.72 0 012.72 2.72v21.63zM67.158 83.647c.57 0 1.032.462 1.032 1.032v2.177c0 .57-.462 1.032-1.032 1.032h-7.886c-.57 0-1.033-.462-1.033-1.032v-2.177c0-.57.463-1.032 1.033-1.032zm222.878-9.396h-38.663v12.24a.68.68 0 00.58.673l.1.007h37.303a.68.68 0 00.673-.58l.007-.1v-12.24zM66.124 85.711h-5.82v.111h5.82v-.111zm218.986-5.203c.751 0 1.36.609 1.36 1.36v.13a1.36 1.36 0 01-1.36 1.36h-7.253a1.36 1.36 0 01-1.36-1.36v-.13c0-.751.609-1.36 1.36-1.36h7.253zM77 74.25a1 1 0 011 1v5a1 1 0 01-1 1H58a1 1 0 01-1-1v-5a1 1 0 011-1zm-1 2H59v3h17v-3zm80.015-5.442c2.612 0 4.82 1.717 5.553 4.21a1.895 1.895 0 01-3.59 1.21l-.047-.14c-.267-.907-1.015-1.489-1.916-1.489-.915 0-1.813.597-2.275 1.517l-.081.176a1.896 1.896 0 11-3.492-1.477c1.008-2.383 3.306-4.007 5.848-4.007zm23.513 0c2.613 0 4.82 1.717 5.553 4.21a1.896 1.896 0 01-3.59 1.21l-.047-.14c-.267-.907-1.015-1.489-1.916-1.489-.915 0-1.813.597-2.275 1.517l-.081.176a1.896 1.896 0 01-3.492-1.477c1.008-2.383 3.306-4.007 5.848-4.007zM77 65.25a1 1 0 011 1v5a1 1 0 01-1 1H58a1 1 0 01-1-1v-5a1 1 0 011-1zm-1 2H59v3h17v-3zm213.356-3.069h-37.303a.68.68 0 00-.672.58l-.008.1v3.691h38.663v-3.691a.68.68 0 00-.58-.673l-.1-.007zM67.12 60.839a1.033 1.033 0 01.113 2.059l-.113.006h-9.038a1.033 1.033 0 01-.113-2.06l.113-.005h9.038zm146.75-22.6h-63.996l-.021.196-.335 2.564 68.458.001c-.674-1.547-2.188-2.669-3.895-2.755l-.21-.005z"
14654
+ }), /*#__PURE__*/React__default.createElement("path", {
14655
+ fill: themeValues.subIconColor,
14656
+ fillRule: "nonzero",
14657
+ d: "M168.625 137.938v10.248h6.045a2.04 2.04 0 012.034 1.888l.006.152a2.04 2.04 0 01-1.888 2.034l-.152.006h-8.085a2.04 2.04 0 01-2.034-1.888l-.006-.152v-12.288h4.08zm-7.92 0v11.89a2.04 2.04 0 01-1.887 2.034l-.152.006h-8.085a2.04 2.04 0 01-.153-4.075l.153-.005 6.044-.001v-9.849h4.08zm113.69-42.95a2.04 2.04 0 01.152 4.074l-.152.006h-5.572a2.036 2.036 0 01-.233.213l-.13.093-26.212 17.393a2.04 2.04 0 01-2.238.011l-.141-.1-7.84-6.091c-.01-.008-.017-.531-.018-1.568v-1.543c0-.602.002-1.29.004-2.067l9.198 7.147 20.328-13.488h-4.014a2.04 2.04 0 01-.152-4.074l.152-.006h16.868zM80.5 96.46a2.04 2.04 0 01.152 4.074l-.152.006h-4.092l11.455 11.59 9.934-8.627c.042-.036.14-.108.191-.144l.016-.012-.001.014c-.006.096-.008.588-.01 1.24v2.431l-.001.667a25.458 25.458 0 01-.01 1.048l-8.888 7.718-.017.014-.017.015-.06.048.094-.077a2.066 2.066 0 01-.811.43c-.037.01-.074.02-.111.027l-.03.006a1.966 1.966 0 01-.577.028 2 2 0 01-.686-.189 2.032 2.032 0 01-.304-.179l-.037-.027a1.865 1.865 0 01-.095-.075l-.008-.007-.042-.036a2.05 2.05 0 01-.077-.073l-.01-.011-14.257-14.425a2.033 2.033 0 01-.589-1.394H62.5a2.04 2.04 0 01-.152-4.074l.152-.006h18zm-6.795-49.011c.944 0 1.6.81 1.663 1.741l.005.148v3.68s-.5.017-1 .026v.07H53.098v1.907h-5.725v17.54a8.885 8.885 0 012.492-.43l.263-.003a8.905 8.905 0 11-2.914 17.322l-.84-.001a1 1 0 01-.994-.882 8.898 8.898 0 01-4.157-7.535 8.898 8.898 0 014.15-7.53V49.338c0-.942.609-1.8 1.522-1.883l.146-.006h26.664zm172.423 19.679a8.905 8.905 0 110 17.81 8.905 8.905 0 010-17.81zm48.927-12.398a3.72 3.72 0 013.715 3.522l.005.198v21.63a3.72 3.72 0 01-3.522 3.715l-.198.005h-3.818v-2h3.818c.9 0 1.639-.691 1.714-1.572l.006-.148V68.84h-5v-5.699h5V58.45c0-.9-.69-1.639-1.571-1.714l-.149-.006h-37.303c-.9 0-1.638.69-1.713 1.571l-.007.149v4.728h-2V58.45a3.72 3.72 0 013.523-3.715l.197-.005h37.303zm-241.54 9.649v1l-3.351-.001v2.834h3.35v1h-4.35V64.38h4.35zm-.519-6.025v1h-2.832v2.834h2.832v1h-3.832v-4.834h3.832z"
14658
+ }), /*#__PURE__*/React__default.createElement("path", {
14659
+ fill: "#FFF",
14660
+ d: "M51.196 76.402v3.56l3.562.002V82.1h-3.562v3.562H49.06V82.1h-3.562v-2.137l3.561-.001.001-3.561h2.137zm196-5v3.56l3.562.002V77.1h-3.562v3.562h-2.137V77.1h-3.562v-2.137l3.561-.001.001-3.561h2.137z"
14661
+ }))));
14662
+ };
14663
+
14664
+ var ProfileIcon$1 = themeComponent(ProfileIcon, "Icons", fallbackValues$2, "info");
14665
+
14766
14666
  var color$2 = "#15749D";
14767
14667
  var hoverColor$1 = "#116285";
14768
14668
  var activeColor$1 = "#0E506D";
@@ -18474,7 +18374,7 @@ function _templateObject8() {
18474
18374
  }
18475
18375
 
18476
18376
  function _templateObject7() {
18477
- var data = _taggedTemplateLiteral(["\n display: inline-block;\n width: 24px;\n height: 24px;\n border-radius: 2px;\n transition: all 150ms;\n\n ", " {\n visibility: ", ";\n }\n\n ", ";\n"]);
18377
+ var data = _taggedTemplateLiteral(["\n display: inline-block;\n margin-right: 16px;\n width: 24px;\n height: 24px;\n border-radius: 2px;\n transition: all 150ms;\n\n ", " {\n visibility: ", ";\n }\n\n ", ";\n"]);
18478
18378
 
18479
18379
  _templateObject7 = function _templateObject7() {
18480
18380
  return data;
@@ -19194,18 +19094,8 @@ var Dropdown = function Dropdown(_ref9) {
19194
19094
 
19195
19095
  var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);
19196
19096
 
19197
- function _templateObject4$3() {
19198
- var data = _taggedTemplateLiteral([""]);
19199
-
19200
- _templateObject4$3 = function _templateObject4() {
19201
- return data;
19202
- };
19203
-
19204
- return data;
19205
- }
19206
-
19207
19097
  function _templateObject3$6() {
19208
- var data = _taggedTemplateLiteral(["\n border: 1px solid\n ", ";\n border-radius: 2px;\n height: 48px;\n width: 100%;\n padding: 0.75rem 1rem;\n min-width: 100px;\n margin: 0;\n box-sizing: border-box;\n position: relative;\n font-size: 1.1rem;\n font-family: Public Sans;\n line-height: 2rem;\n font-weight: ", ";\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n\n &:focus {\n border: 1px solid ", ";\n }\n"]);
19098
+ var data = _taggedTemplateLiteral([""]);
19209
19099
 
19210
19100
  _templateObject3$6 = function _templateObject3() {
19211
19101
  return data;
@@ -19215,7 +19105,7 @@ function _templateObject3$6() {
19215
19105
  }
19216
19106
 
19217
19107
  function _templateObject2$c() {
19218
- var data = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n line-height: 18px;\n font-weight: ", ";\n margin-bottom: 4px;\n font-family: Public Sans;\n\n &::first-letter {\n text-transform: uppercase;\n }\n"]);
19108
+ var data = _taggedTemplateLiteral(["\n border: 1px solid\n ", ";\n border-radius: 2px;\n height: 48px;\n width: 100%;\n padding: 0.75rem 1rem;\n min-width: 100px;\n margin: 0;\n box-sizing: border-box;\n position: relative;\n font-size: 1.1rem;\n font-family: Public Sans;\n line-height: 2rem;\n font-weight: ", ";\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n\n &:focus {\n border: 1px solid ", ";\n }\n"]);
19219
19109
 
19220
19110
  _templateObject2$c = function _templateObject2() {
19221
19111
  return data;
@@ -19234,23 +19124,18 @@ function _templateObject$o() {
19234
19124
  return data;
19235
19125
  }
19236
19126
  var SelectContainer = styled__default.div(_templateObject$o());
19237
- var SelectLabel = styled__default.label(_templateObject2$c(), function (_ref) {
19127
+ var SelectField = styled__default.select(_templateObject2$c(), function (_ref) {
19238
19128
  var field = _ref.field,
19239
19129
  showErrors = _ref.showErrors;
19240
- return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : STORM_GREY;
19241
- }, FONT_WEIGHT_REGULAR);
19242
- var SelectField = styled__default.select(_templateObject3$6(), function (_ref2) {
19243
- var field = _ref2.field,
19244
- showErrors = _ref2.showErrors;
19245
19130
  return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : GHOST_GREY;
19246
- }, FONT_WEIGHT_REGULAR, function (_ref3) {
19247
- var themeValues = _ref3.themeValues;
19131
+ }, FONT_WEIGHT_REGULAR, function (_ref2) {
19132
+ var themeValues = _ref2.themeValues;
19248
19133
  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
19249
- }, function (_ref4) {
19250
- var themeValues = _ref4.themeValues;
19134
+ }, function (_ref3) {
19135
+ var themeValues = _ref3.themeValues;
19251
19136
  return themeValues.color && themeValues.color;
19252
19137
  }, MATISSE_BLUE);
19253
- var SelectOption = styled__default.option(_templateObject4$3());
19138
+ var SelectOption = styled__default.option(_templateObject3$6());
19254
19139
 
19255
19140
  var linkColor$1 = {
19256
19141
  "default": "".concat(MATISSE_BLUE),
@@ -19356,8 +19241,10 @@ var FormSelect = function FormSelect(_ref) {
19356
19241
  variant: "pS",
19357
19242
  color: themeValues.labelColor,
19358
19243
  weight: themeValues.fontWeight,
19359
- extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }"
19244
+ extraStyles: "word-break: break-word;\n font-family: Public Sans;\n &::first-letter {\n text-transform: uppercase;\n }",
19245
+ id: labelTextWhenNoError.replace(/\s+/g, "-")
19360
19246
  }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
19247
+ "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
19361
19248
  maxHeight: dropdownMaxHeight,
19362
19249
  placeholder: options[0] ? options[0].text : "",
19363
19250
  options: options,
@@ -19373,9 +19260,9 @@ var FormSelect = function FormSelect(_ref) {
19373
19260
  onClick: function onClick() {
19374
19261
  return setOpen(!open);
19375
19262
  }
19376
- }), /*#__PURE__*/React__default.createElement(SelectLabel, {
19377
- field: field,
19378
- showErrors: showErrors
19263
+ }), /*#__PURE__*/React__default.createElement(Stack, {
19264
+ direction: "row",
19265
+ justify: "space-between"
19379
19266
  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
19380
19267
  color: ERROR_COLOR,
19381
19268
  variant: "pXS",
@@ -20579,10 +20466,10 @@ var fallbackValues$h = {
20579
20466
  hoverFocusStyles: hoverFocusStyles$1
20580
20467
  };
20581
20468
 
20582
- function _templateObject4$4() {
20469
+ function _templateObject4$3() {
20583
20470
  var data = _taggedTemplateLiteral(["\n ", "\n "]);
20584
20471
 
20585
- _templateObject4$4 = function _templateObject4() {
20472
+ _templateObject4$3 = function _templateObject4() {
20586
20473
  return data;
20587
20474
  };
20588
20475
 
@@ -20663,7 +20550,7 @@ var FormattedInputField = styled__default(function (_ref7) {
20663
20550
  return themeValues.color && themeValues.color;
20664
20551
  }, MATISSE_BLUE, function (_ref12) {
20665
20552
  var extraStyles = _ref12.extraStyles;
20666
- return styled.css(_templateObject4$4(), extraStyles);
20553
+ return styled.css(_templateObject4$3(), extraStyles);
20667
20554
  });
20668
20555
 
20669
20556
  var FormInput = function FormInput(_ref13) {
@@ -21418,10 +21305,10 @@ function _templateObject5$2() {
21418
21305
  return data;
21419
21306
  }
21420
21307
 
21421
- function _templateObject4$5() {
21308
+ function _templateObject4$4() {
21422
21309
  var data = _taggedTemplateLiteral(["", " is not a valid length"]);
21423
21310
 
21424
- _templateObject4$5 = function _templateObject4() {
21311
+ _templateObject4$4 = function _templateObject4() {
21425
21312
  return data;
21426
21313
  };
21427
21314
 
@@ -21497,7 +21384,7 @@ with interpolation.
21497
21384
  */
21498
21385
 
21499
21386
 
21500
- var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
21387
+ var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
21501
21388
  // Neutral - has not been validated
21502
21389
  // Invalid - has been validated and has an error
21503
21390
  // Valid - has been validated and has no error
@@ -32460,10 +32347,10 @@ var fallbackValues$r = {
32460
32347
  leftLabelStyles: leftLabelStyles
32461
32348
  };
32462
32349
 
32463
- function _templateObject4$6() {
32350
+ function _templateObject4$5() {
32464
32351
  var data = _taggedTemplateLiteral(["\n position: absolute;\n width: 14px;\n height: 14px;\n top: 3px;\n left: 3px;\n right: 3px;\n bottom: 3px;\n border-radius: 50%;\n box-sizing: border-box;\n"]);
32465
32352
 
32466
- _templateObject4$6 = function _templateObject4() {
32353
+ _templateObject4$5 = function _templateObject4() {
32467
32354
  return data;
32468
32355
  };
32469
32356
 
@@ -32517,7 +32404,7 @@ var VisibleSwitchComponent = styled__default.label(_templateObject2$i(), functio
32517
32404
  return isMobile ? "transform: scale(0.75)" : "";
32518
32405
  });
32519
32406
  var ToggleSwitchMiddleRingComponent = styled__default.div(_templateObject3$a());
32520
- var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$6());
32407
+ var ToggleSwitchInnerRingComponent = styled__default.div(_templateObject4$5());
32521
32408
 
32522
32409
  var ToggleSwitch = function ToggleSwitch(_ref6) {
32523
32410
  var _ref6$isOn = _ref6.isOn,
@@ -34890,10 +34777,10 @@ function _templateObject5$3() {
34890
34777
  return data;
34891
34778
  }
34892
34779
 
34893
- function _templateObject4$7() {
34780
+ function _templateObject4$6() {
34894
34781
  var data = _taggedTemplateLiteral(["\n color: ", ";\n align-items: center;\n font-size: 1rem;\n padding-right: 1rem;\n cursor: pointer;\n display: ", ";\n"]);
34895
34782
 
34896
- _templateObject4$7 = function _templateObject4() {
34783
+ _templateObject4$6 = function _templateObject4() {
34897
34784
  return data;
34898
34785
  };
34899
34786
 
@@ -34947,7 +34834,7 @@ var EditableTableListItem = styled__default.div(_templateObject2$k(), function (
34947
34834
  return isMobile ? "padding: 1rem 0.5rem" : "padding: 0 0.5rem";
34948
34835
  });
34949
34836
  var EditableListItemControls$1 = styled__default.div(_templateObject3$b());
34950
- var EditableListAction = styled__default.div(_templateObject4$7(), MATISSE_BLUE, function (_ref6) {
34837
+ var EditableListAction = styled__default.div(_templateObject4$6(), MATISSE_BLUE, function (_ref6) {
34951
34838
  var hide = _ref6.hide;
34952
34839
  return hide ? "none" : "flex";
34953
34840
  });
@@ -40168,24 +40055,22 @@ var TermsAndConditions = function TermsAndConditions(_ref) {
40168
40055
  showTerms = _useState2[0],
40169
40056
  toggleShowTerms = _useState2[1];
40170
40057
 
40171
- return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, {
40172
- direction: "row"
40173
- }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
40058
+ return /*#__PURE__*/React__default.createElement(DisplayBox$1, null, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Checkbox$1, {
40174
40059
  name: "terms",
40060
+ title: "Terms and Conditions",
40175
40061
  error: error,
40176
40062
  checked: isChecked,
40177
40063
  onChange: onCheck
40178
- }), /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Text$1, {
40179
- variant: "p",
40180
- fontWeight: FONT_WEIGHT_BOLD
40181
- }, "Terms and Conditions"), /*#__PURE__*/React__default.createElement(Box, {
40064
+ }), /*#__PURE__*/React__default.createElement(Box, {
40065
+ padding: "0 0 0 58px"
40066
+ }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(Box, {
40182
40067
  padding: "0"
40183
40068
  }, html), terms && /*#__PURE__*/React__default.createElement(TermsAndConditionsModal$1, {
40184
40069
  link: "Learn More",
40185
40070
  terms: terms,
40186
40071
  isOpen: showTerms,
40187
40072
  toggleOpen: toggleShowTerms
40188
- }))));
40073
+ })))));
40189
40074
  };
40190
40075
 
40191
40076
  var Timeout = function Timeout(_ref) {
@@ -40698,6 +40583,7 @@ exports.PendingIcon = PendingIcon;
40698
40583
  exports.PhoneForm = PhoneForm;
40699
40584
  exports.Placeholder = Placeholder$1;
40700
40585
  exports.ProcessingFee = ProcessingFee$1;
40586
+ exports.ProfileIcon = ProfileIcon$1;
40701
40587
  exports.ProfileIconSmall = ProfileIconSmall$1;
40702
40588
  exports.PropertiesAddIcon = PropertiesAddIcon$1;
40703
40589
  exports.PropertiesIconSmall = PropertiesIconSmall$1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "4.1.14-beta.0",
3
+ "version": "4.1.16-beta.0",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
package/src/components/atoms/checkbox/Checkbox.js CHANGED
@@ -44,6 +44,7 @@ const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
44
44
 
45
45
  const StyledCheckbox = styled.div`
46
46
  display: inline-block;
47
+ margin-right: 16px;
47
48
  width: 24px;
48
49
  height: 24px;
49
50
  border-radius: 2px;
package/src/components/atoms/form-select/FormSelect.js CHANGED
@@ -2,10 +2,10 @@ import React, { useState, useRef, useEffect } from "react";
2
2
  import Dropdown from "../dropdown";
3
3
  import Text from "../text";
4
4
  import { ERROR_COLOR } from "../../../constants/colors";
5
- import { SelectContainer, SelectLabel } from "./FormSelect.styled";
5
+ import { SelectContainer } from "./FormSelect.styled";
6
6
  import { fallbackValues } from "./FormSelect.theme";
7
7
  import { themeComponent } from "../../../util/themeUtils";
8
- import { Box, Cluster } from "../layouts";
8
+ import { Box, Cluster, Stack } from "../layouts";
9
9
 
10
10
  const FormSelect = ({
11
11
  fieldActions,
@@ -49,12 +49,14 @@ const FormSelect = ({
49
49
  &::first-letter {
50
50
  text-transform: uppercase;
51
51
  }`}
52
+ id={labelTextWhenNoError.replace(/\s+/g, "-")}
52
53
  >
53
54
  {labelTextWhenNoError}
54
55
  </Text>
55
56
  </Cluster>
56
57
  </Box>
57
58
  <Dropdown
59
+ aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
58
60
  maxHeight={dropdownMaxHeight}
59
61
  placeholder={options[0] ? options[0].text : ""}
60
62
  options={options}
@@ -69,7 +71,7 @@ const FormSelect = ({
69
71
  }
70
72
  onClick={() => setOpen(!open)}
71
73
  />
72
- <SelectLabel field={field} showErrors={showErrors}>
74
+ <Stack direction="row" justify="space-between">
73
75
  {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
74
76
  <Text
75
77
  color={ERROR_COLOR}
@@ -86,7 +88,7 @@ const FormSelect = ({
86
88
  ) : (
87
89
  <Text extraStyles={`height: ${themeValues.lineHeight};`} />
88
90
  )}
89
- </SelectLabel>
91
+ </Stack>
90
92
  </SelectContainer>
91
93
  );
92
94
  };
package/src/components/atoms/form-select/FormSelect.styled.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import styled from "styled-components";
2
2
  import {
3
- STORM_GREY,
4
3
  GHOST_GREY,
5
4
  ERROR_COLOR,
6
5
  MATISSE_BLUE
@@ -18,22 +17,6 @@ export const SelectContainer = styled.div`
18
17
  }
19
18
  `;
20
19
 
21
- export const SelectLabel = styled.label`
22
- color: ${({ field, showErrors }) =>
23
- (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
24
- ? ERROR_COLOR
25
- : STORM_GREY};
26
- font-size: 14px;
27
- line-height: 18px;
28
- font-weight: ${FONT_WEIGHT_REGULAR};
29
- margin-bottom: 4px;
30
- font-family: Public Sans;
31
-
32
- &::first-letter {
33
- text-transform: uppercase;
34
- }
35
- `;
36
-
37
20
  export const SelectField = styled.select`
38
21
  border: 1px solid
39
22
  ${({ field, showErrors }) =>
package/src/components/atoms/icons/ProfileIcon.js ADDED
@@ -0,0 +1,48 @@
1
+ import React from "react";
2
+ import { fallbackValues } from "./Icons.theme";
3
+ import { themeComponent } from "../../../util/themeUtils";
4
+
5
+ const ProfileIcon = ({ themeValues }) => {
6
+ return (
7
+ <svg
8
+ xmlns="http://www.w3.org/2000/svg"
9
+ width="299"
10
+ height="151"
11
+ viewBox="0 0 299 151"
12
+ >
13
+ <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
14
+ <g>
15
+ <path
16
+ fill={themeValues.subIconColor}
17
+ d="M162.932 144.31c16.42 0 29.73 2.956 29.73 6.602 0 3.646-13.31 6.602-29.73 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602zM123.899 25.659a4 4 0 013.988 3.688l.539 6.892h85.445c3.396 0 6.293 2.78 6.47 6.207l4.31 83.776c.177 3.427-2.434 6.205-5.83 6.205H100.945c-3.397 0-6.293-2.778-6.47-6.205l-4.31-83.776c-.177-3.428 2.434-6.206 5.83-6.206h2.05l-.16-3.103a4.117 4.117 0 01.077-1.039l-.165-2.127a4 4 0 013.987-4.312H123.9zm-80.672 76.579c2.836 0 5.164 2.189 5.42 4.985a3.247 3.247 0 011.91-.621c1.814 0 3.285 1.485 3.285 3.318 0 1.832-1.47 3.318-3.285 3.318h-14.87c-2.123 0-3.845-1.739-3.845-3.883 0-2.145 1.722-3.884 3.845-3.884.863 0 1.657.291 2.3.776.643-2.313 2.744-4.009 5.24-4.009zm30.478-53.79c.369 0 .668.398.668.89v39.11h-28v-39.11c0-.492.3-.89.668-.89zm221.35 7.282a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72V58.45a2.72 2.72 0 012.72-2.72h37.303zM31.403 20.856c3.193 0 5.912 2 6.993 4.814a3.181 3.181 0 013.381 1.103 4.723 4.723 0 011.946-.42 4.75 4.75 0 014.75 4.751 4.75 4.75 0 01-4.75 4.752h-20.5a4.75 4.75 0 01-4.75-4.752 4.75 4.75 0 015.687-4.657c.846-3.216 3.764-5.591 7.243-5.591zM237.078 10c3.406 0 6.306 2.133 7.46 5.135a3.39 3.39 0 013.605 1.177 5.04 5.04 0 012.076-.448 5.067 5.067 0 015.066 5.068c0 2.799-2.268 5.068-5.066 5.068h-21.868a5.067 5.067 0 01-5.066-5.068 5.067 5.067 0 016.068-4.968c.901-3.43 4.013-5.964 7.725-5.964z"
18
+ opacity="0.302"
19
+ ></path>
20
+ <path
21
+ fill="#FFF"
22
+ d="M143.096 33.659a4 4 0 013.985 4.347l-.094 1.098c.057.288.083.588.072.896l-.104 3h79.1c3.397 0 6.057 2.686 5.941 6l-2.817 81c-.115 3.314-2.962 6-6.358 6H104.945c-3.397 0-6.057-2.686-5.941-6l2.817-81c.115-3.314 2.962-6 6.358-6l4.468-.001.494-5.686a4 4 0 013.985-3.654h25.97z"
23
+ ></path>
24
+ <path
25
+ fill="#CACED8"
26
+ d="M80.846 54.267c.369 0 .668.233.668.52v36.48h-28v-36.48c0-.287.3-.52.669-.52zm208.51 7.874a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303z"
27
+ ></path>
28
+ <path
29
+ fill="#3B414D"
30
+ fillRule="nonzero"
31
+ d="M123.298 25c3.333 0 6.138 2.69 6.312 6.075l.017.584h14.276a5.993 5.993 0 014.931 2.58h65.037c4.01 0 7.46 2.918 8.288 6.761h3.896c4.434 0 7.962 3.48 7.945 7.823l-.005.247-2.653 76.287 29.687.007c1.075-.012 1.958.793 1.971 1.799.012.96-.771 1.756-1.778 1.837l-.145.007-29.862-.008-.037 1.07c-.15 4.318-3.754 7.798-8.106 7.927l-.251.004H104.945c-3.077 0-5.719-1.677-7.04-4.155a8.665 8.665 0 01-4.734-4.585H70.418a2.04 2.04 0 01-.103-4.075l.153-.004 21.95-.001-4.25-82.632c-.232-4.482 3.154-8.172 7.58-8.304l.234-.005-.094-3c-.172-3.346 2.354-6.114 5.658-6.235l.227-.004h21.525zm20.605 10.659h-25.932a2 2 0 00-1.983 1.741l-.99 7.599-6.819.001c-2.329 0-4.282 1.843-4.36 4.07l-2.817 81c-.075 2.17 1.667 3.93 3.943 3.93h117.876c2.329 0 4.282-1.843 4.36-4.07l2.817-81c.075-2.17-1.667-3.93-3.943-3.93l-81.093-.001.925-7.081a2 2 0 00-1.984-2.259zM286.2 125.181a2.04 2.04 0 012.093 1.986c.028 1.075-.78 1.577-1.834 1.683l-.152.01-15.25.4a2.04 2.04 0 01-.26-4.069l.153-.01h15.25zm-223.718 1.935a2.04 2.04 0 01-1.78 2.129l-.152.013H52.79a2.04 2.04 0 01-.362-4.061l.152-.014h7.759a2.04 2.04 0 012.142 1.933zM123.298 29h-21.525c-1.066 0-1.876.812-1.891 1.922l.002.153.225 7.165h-4.114c-2.178 0-3.847 1.706-3.839 3.896l.006.207 4.31 83.776c.038.717.25 1.398.595 1.998l2.755-79.187c.153-4.4 3.893-7.93 8.357-7.93l3.305-.001.538-4.116a6 6 0 015.712-5.22l.237-.004h7.655l-.013-.42c-.06-1.172-1.03-2.15-2.16-2.233l-.155-.006zm53.072 64.344l.148.003a1.895 1.895 0 011.77 2.014c-.185 2.865-2.567 5.172-5.413 5.289l-.226.004h-13.504c-3.04 0-5.38-2.502-5.184-5.537a1.896 1.896 0 013.787.096l-.004.148c-.052.805.487 1.43 1.262 1.496l.139.006h13.504c.894 0 1.705-.717 1.84-1.598l.015-.148a1.896 1.896 0 011.866-1.773zM81.514 53.018v.374c.573.225 1 .734 1 1.396v36.479a1 1 0 01-1 1h-28a1 1 0 01-1-1v-36.48c0-.661.427-1.17 1-1.395v-.374h28zm-1 4.807h-26v32.441h26V57.825zm211.562 28.666a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303a2.72 2.72 0 012.72 2.72v21.63zM67.158 83.647c.57 0 1.032.462 1.032 1.032v2.177c0 .57-.462 1.032-1.032 1.032h-7.886c-.57 0-1.033-.462-1.033-1.032v-2.177c0-.57.463-1.032 1.033-1.032zm222.878-9.396h-38.663v12.24a.68.68 0 00.58.673l.1.007h37.303a.68.68 0 00.673-.58l.007-.1v-12.24zM66.124 85.711h-5.82v.111h5.82v-.111zm218.986-5.203c.751 0 1.36.609 1.36 1.36v.13a1.36 1.36 0 01-1.36 1.36h-7.253a1.36 1.36 0 01-1.36-1.36v-.13c0-.751.609-1.36 1.36-1.36h7.253zM77 74.25a1 1 0 011 1v5a1 1 0 01-1 1H58a1 1 0 01-1-1v-5a1 1 0 011-1zm-1 2H59v3h17v-3zm80.015-5.442c2.612 0 4.82 1.717 5.553 4.21a1.895 1.895 0 01-3.59 1.21l-.047-.14c-.267-.907-1.015-1.489-1.916-1.489-.915 0-1.813.597-2.275 1.517l-.081.176a1.896 1.896 0 11-3.492-1.477c1.008-2.383 3.306-4.007 5.848-4.007zm23.513 0c2.613 0 4.82 1.717 5.553 4.21a1.896 1.896 0 01-3.59 1.21l-.047-.14c-.267-.907-1.015-1.489-1.916-1.489-.915 0-1.813.597-2.275 1.517l-.081.176a1.896 1.896 0 01-3.492-1.477c1.008-2.383 3.306-4.007 5.848-4.007zM77 65.25a1 1 0 011 1v5a1 1 0 01-1 1H58a1 1 0 01-1-1v-5a1 1 0 011-1zm-1 2H59v3h17v-3zm213.356-3.069h-37.303a.68.68 0 00-.672.58l-.008.1v3.691h38.663v-3.691a.68.68 0 00-.58-.673l-.1-.007zM67.12 60.839a1.033 1.033 0 01.113 2.059l-.113.006h-9.038a1.033 1.033 0 01-.113-2.06l.113-.005h9.038zm146.75-22.6h-63.996l-.021.196-.335 2.564 68.458.001c-.674-1.547-2.188-2.669-3.895-2.755l-.21-.005z"
32
+ ></path>
33
+ <path
34
+ fill={themeValues.subIconColor}
35
+ fillRule="nonzero"
36
+ d="M168.625 137.938v10.248h6.045a2.04 2.04 0 012.034 1.888l.006.152a2.04 2.04 0 01-1.888 2.034l-.152.006h-8.085a2.04 2.04 0 01-2.034-1.888l-.006-.152v-12.288h4.08zm-7.92 0v11.89a2.04 2.04 0 01-1.887 2.034l-.152.006h-8.085a2.04 2.04 0 01-.153-4.075l.153-.005 6.044-.001v-9.849h4.08zm113.69-42.95a2.04 2.04 0 01.152 4.074l-.152.006h-5.572a2.036 2.036 0 01-.233.213l-.13.093-26.212 17.393a2.04 2.04 0 01-2.238.011l-.141-.1-7.84-6.091c-.01-.008-.017-.531-.018-1.568v-1.543c0-.602.002-1.29.004-2.067l9.198 7.147 20.328-13.488h-4.014a2.04 2.04 0 01-.152-4.074l.152-.006h16.868zM80.5 96.46a2.04 2.04 0 01.152 4.074l-.152.006h-4.092l11.455 11.59 9.934-8.627c.042-.036.14-.108.191-.144l.016-.012-.001.014c-.006.096-.008.588-.01 1.24v2.431l-.001.667a25.458 25.458 0 01-.01 1.048l-8.888 7.718-.017.014-.017.015-.06.048.094-.077a2.066 2.066 0 01-.811.43c-.037.01-.074.02-.111.027l-.03.006a1.966 1.966 0 01-.577.028 2 2 0 01-.686-.189 2.032 2.032 0 01-.304-.179l-.037-.027a1.865 1.865 0 01-.095-.075l-.008-.007-.042-.036a2.05 2.05 0 01-.077-.073l-.01-.011-14.257-14.425a2.033 2.033 0 01-.589-1.394H62.5a2.04 2.04 0 01-.152-4.074l.152-.006h18zm-6.795-49.011c.944 0 1.6.81 1.663 1.741l.005.148v3.68s-.5.017-1 .026v.07H53.098v1.907h-5.725v17.54a8.885 8.885 0 012.492-.43l.263-.003a8.905 8.905 0 11-2.914 17.322l-.84-.001a1 1 0 01-.994-.882 8.898 8.898 0 01-4.157-7.535 8.898 8.898 0 014.15-7.53V49.338c0-.942.609-1.8 1.522-1.883l.146-.006h26.664zm172.423 19.679a8.905 8.905 0 110 17.81 8.905 8.905 0 010-17.81zm48.927-12.398a3.72 3.72 0 013.715 3.522l.005.198v21.63a3.72 3.72 0 01-3.522 3.715l-.198.005h-3.818v-2h3.818c.9 0 1.639-.691 1.714-1.572l.006-.148V68.84h-5v-5.699h5V58.45c0-.9-.69-1.639-1.571-1.714l-.149-.006h-37.303c-.9 0-1.638.69-1.713 1.571l-.007.149v4.728h-2V58.45a3.72 3.72 0 013.523-3.715l.197-.005h37.303zm-241.54 9.649v1l-3.351-.001v2.834h3.35v1h-4.35V64.38h4.35zm-.519-6.025v1h-2.832v2.834h2.832v1h-3.832v-4.834h3.832z"
37
+ ></path>
38
+ <path
39
+ fill="#FFF"
40
+ d="M51.196 76.402v3.56l3.562.002V82.1h-3.562v3.562H49.06V82.1h-3.562v-2.137l3.561-.001.001-3.561h2.137zm196-5v3.56l3.562.002V77.1h-3.562v3.562h-2.137V77.1h-3.562v-2.137l3.561-.001.001-3.561h2.137z"
41
+ ></path>
42
+ </g>
43
+ </g>
44
+ </svg>
45
+ );
46
+ };
47
+
48
+ export default themeComponent(ProfileIcon, "Icons", fallbackValues, "info");
package/src/components/atoms/icons/WalletIcon.js CHANGED
@@ -7,180 +7,46 @@ const WalletIcon = ({ themeValues }) => {
7
7
  <svg
8
8
  xmlns="http://www.w3.org/2000/svg"
9
9
  width="299"
10
- height="150"
11
- viewBox="0 0 299 150"
10
+ height="151"
11
+ viewBox="0 0 299 151"
12
12
  >
13
13
  <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
14
- <g transform="translate(-154 -340)">
15
- <g transform="translate(132 261)">
16
- <g transform="translate(22 79)">
17
- <g
18
- stroke="#3B414D"
19
- strokeLinecap="round"
20
- strokeWidth="4.08"
21
- transform="translate(52.686 118.445)"
22
- >
23
- <path d="M208.2 0.375L175.611 0.776"></path>
24
- <path d="M233.568 0.375L218.318 0.776"></path>
25
- <path d="M44.527 0.375L17.757 0.776"></path>
26
- <path d="M7.759 0.375L0 0.776"></path>
27
- </g>
28
- <path
29
- fill="#B8E4F4"
30
- d="M192.663 142.912c0 3.646-13.311 6.602-29.731 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602s29.73 2.956 29.73 6.602"
31
- ></path>
32
- <g
33
- stroke="#45B770"
34
- strokeLinecap="round"
35
- strokeLinejoin="round"
36
- strokeWidth="4.08"
37
- transform="translate(150.58 129.154)"
38
- >
39
- <path d="M8.08496185 -1.08959555e-14L8.08496185 12.6741246 1.81599258e-15 12.6741246"></path>
40
- <path d="M16.0044112 -1.18039517e-14L16.0044112 13.0723155 24.0893731 13.0723155"></path>
41
- </g>
42
- <path
43
- stroke="#45B770"
44
- strokeLinecap="round"
45
- strokeLinejoin="round"
46
- strokeWidth="4.08"
47
- d="M97.135 97.043L85.756 106.925"
48
- ></path>
49
- <path
50
- stroke="#45B770"
51
- strokeLinecap="round"
52
- strokeLinejoin="round"
53
- strokeWidth="4.08"
54
- d="M267.332301 89.6743933L241.12027 107.066692 228.276465 97.0878034"
55
- ></path>
56
- <path
57
- stroke="#45B770"
58
- strokeLinecap="round"
59
- strokeWidth="4.08"
60
- d="M257.527 89.028L274.395 89.028"
61
- ></path>
62
- <g transform="translate(255.032 47.73)">
63
- <rect
64
- width="40.703"
65
- height="25.03"
66
- x="1.02"
67
- y="1.02"
68
- fill="#E8FFEF"
69
- stroke="#45B770"
70
- strokeWidth="2.04"
71
- rx="2.72"
72
- ></rect>
73
- <path fill="#45B770" d="M0 6.411H42.743V12.11H0z"></path>
74
- </g>
75
- <g transform="translate(249.333 54.141)">
76
- <rect
77
- width="40.703"
78
- height="25.03"
79
- x="1.02"
80
- y="1.02"
81
- fill="#CACED8"
82
- stroke="#3B414D"
83
- strokeWidth="2.04"
84
- rx="2.72"
85
- ></rect>
86
- <path fill="#3B414D" d="M0 6.411H42.743V12.11H0z"></path>
87
- <rect
88
- width="9.973"
89
- height="2.85"
90
- x="27.163"
91
- y="18.367"
92
- fill="#3B414D"
93
- rx="1.36"
94
- ></rect>
95
- </g>
96
- <g transform="translate(237.223 59.128)">
97
- <circle
98
- cx="8.905"
99
- cy="8.905"
100
- r="8.905"
101
- fill={themeValues.subIconColor}
102
- ></circle>
103
- <g fill="#FFF" transform="translate(4.274 4.274)">
104
- <path d="M3.562 0H5.699V9.261H3.562z"></path>
105
- <path d="M0 3.562H9.261V5.699H0z"></path>
106
- </g>
107
- </g>
108
- <path
109
- fill="#B8E4F4"
110
- stroke="#3B414D"
111
- strokeWidth="4.08"
112
- d="M196.423 22.699c2.441 0 4.651.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0V78.88c0 2.441-.99 4.651-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-90.084a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V28.139c0-1.502.609-2.862 1.593-3.847a5.423 5.423 0 013.847-1.593h0z"
113
- ></path>
114
- <rect
115
- width="32.964"
116
- height="11.592"
117
- x="97.499"
118
- y="22.699"
119
- stroke="#3B414D"
120
- strokeWidth="4.08"
121
- rx="5.796"
122
- ></rect>
123
- <path
124
- fill="#B8E4F4"
125
- d="M121.817 24.933H141.051V32.057H121.817z"
126
- ></path>
127
- <rect
128
- width="133.928"
129
- height="98.309"
130
- x="95.459"
131
- y="32.057"
132
- fill="#FFF"
133
- rx="10.88"
134
- ></rect>
135
- <path
136
- stroke="#3B414D"
137
- strokeWidth="4.08"
138
- d="M218.507 34.097c2.44 0 4.65.99 6.25 2.59 1.6 1.599 2.59 3.809 2.59 6.25h0v76.549c0 2.44-.99 4.65-2.59 6.25a8.812 8.812 0 01-6.25 2.59h0-112.168a8.812 8.812 0 01-6.25-2.59 8.812 8.812 0 01-2.59-6.25h0V34.097z"
139
- ></path>
140
- <path
141
- fill="#FFF"
142
- d="M99.733 35.148c.745.789 2.175 1.183 4.289 1.183s2.114.304 0 .911l-4.289-.022v-2.072z"
143
- ></path>
144
- <path
145
- stroke="#45B770"
146
- strokeLinecap="round"
147
- strokeLinejoin="round"
148
- strokeWidth="4.08"
149
- d="M85.756 106.925L111.684 112.988"
150
- ></path>
151
- <g
152
- stroke="#45B770"
153
- strokeLinecap="round"
154
- strokeLinejoin="round"
155
- strokeWidth="4.08"
156
- transform="translate(112.486 110.241)"
157
- >
158
- <path d="M3.887.053a3.887 3.887 0 000 7.775h3.396"></path>
159
- </g>
160
- <g
161
- stroke="#3B414D"
162
- strokeLinecap="round"
163
- strokeLinejoin="round"
164
- strokeWidth="3.791"
165
- transform="translate(147.003 64.237)"
166
- >
167
- <path d="M.415 3.316C1.012 1.651 2.54.466 4.333.466c1.792 0 3.321 1.185 3.918 2.85"></path>
168
- <path d="M23.928 3.316c.597-1.665 2.126-2.85 3.918-2.85 1.792 0 3.321 1.185 3.918 2.85"></path>
169
- </g>
170
- <path
171
- stroke="#3B414D"
172
- strokeLinecap="round"
173
- strokeWidth="3.791"
174
- d="M173.17 87.239h0a3.52 3.52 0 01-3.52 3.52h-13.505a3.52 3.52 0 01-3.52-3.52"
175
- ></path>
176
- <g fill="#B8E4F4">
177
- <path d="M245.538 5.06c-.639 0-1.244.141-1.792.387a2.94 2.94 0 00-3.113-1.016A6.9 6.9 0 00234.193 0c-3.205 0-5.891 2.186-6.67 5.147a4.374 4.374 0 10-.865 8.662h18.88a4.374 4.374 0 100-8.749"></path>
178
- <path d="M37.36 89.272a6.45 6.45 0 00-3.769 1.214c-.507-5.463-5.102-9.74-10.697-9.74-4.925 0-9.073 3.314-10.343 7.833a7.545 7.545 0 00-4.537-1.516 7.587 7.587 0 000 15.175h29.345a6.483 6.483 0 000-12.966"></path>
179
- <path d="M108.726 75.108a4.35 4.35 0 00-1.792.387 2.943 2.943 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.431c-3.204 0-5.891 2.186-6.67 5.146a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"></path>
180
- <path d="M71.695 41.493c-.639 0-1.245.14-1.792.387a2.941 2.941 0 00-3.114-1.016 6.9 6.9 0 00-6.44-4.432c-3.204 0-5.89 2.187-6.67 5.147a4.374 4.374 0 10-.864 8.662h18.88a4.374 4.374 0 100-8.748"></path>
181
- </g>
182
- </g>
183
- </g>
14
+ <g>
15
+ <path
16
+ fill={themeValues.subIconColor}
17
+ d="M154.932 144.31c16.42 0 29.73 2.956 29.73 6.602 0 3.646-13.31 6.602-29.73 6.602s-29.73-2.956-29.73-6.602c0-3.646 13.31-6.602 29.73-6.602zM38.894 88.746c5.595 0 10.19 4.277 10.697 9.74a6.45 6.45 0 013.768-1.214 6.484 6.484 0 010 12.966H24.014a7.588 7.588 0 010-15.175c1.704 0 3.27.569 4.537 1.516 1.27-4.519 5.418-7.833 10.343-7.833zM287.055 55.73a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72V58.45a2.72 2.72 0 012.72-2.72h37.303zM61.817 54.048c2.554 0 4.73 1.6 5.594 3.85a2.545 2.545 0 012.705.883 3.778 3.778 0 011.557-.336 3.8 3.8 0 010 7.603h-16.4a3.8 3.8 0 11.75-7.528 5.995 5.995 0 015.794-4.472zM191.964 28c6.009 0 10.88 4.871 10.88 10.88v1.48L91 42.324V35.48A7.48 7.48 0 0198.48 28h93.484zM38.38 22.048a6.9 6.9 0 016.44 4.43 2.93 2.93 0 013.114 1.017 4.35 4.35 0 011.792-.387 4.374 4.374 0 110 8.748h-18.88a4.374 4.374 0 11.864-8.662c.779-2.96 3.466-5.146 6.67-5.146zM242.193 8a6.9 6.9 0 016.44 4.431 2.928 2.928 0 013.113 1.016 4.353 4.353 0 011.792-.387 4.374 4.374 0 110 8.748h-18.88a4.374 4.374 0 11.866-8.661c.778-2.96 3.464-5.147 6.67-5.147z"
18
+ opacity="0.302"
19
+ ></path>
20
+ <rect
21
+ width="132"
22
+ height="97"
23
+ x="91"
24
+ y="40.398"
25
+ fill="#FFF"
26
+ rx="10.88"
27
+ ></rect>
28
+ <rect
29
+ width="42.743"
30
+ height="27.07"
31
+ x="241.333"
32
+ y="62.141"
33
+ fill="#CACED8"
34
+ rx="2.72"
35
+ ></rect>
36
+ <path
37
+ fill="#3B414D"
38
+ fillRule="nonzero"
39
+ d="M278.2 125.181a2.04 2.04 0 012.093 1.986c.028 1.075-.78 1.577-1.834 1.683l-.152.01-15.25.4a2.04 2.04 0 01-.26-4.069l.153-.01h15.25zm-192.675 0a2.04 2.04 0 01.103 4.076l-.153.004H62.418a2.04 2.04 0 01-.103-4.076l.153-.004h23.057zm-31.043 1.935a2.04 2.04 0 01-1.78 2.129l-.152.013H44.79a2.04 2.04 0 01-.362-4.061l.152-.014h7.759a2.04 2.04 0 012.142 1.933zm167.441-1.758l31.106.006c1.075-.012 1.958.793 1.971 1.799.012.96-.771 1.756-1.778 1.837l-.145.007L221.97 129c-1.075.012-1.958-.793-1.971-1.799-.012-.96.771-1.756 1.778-1.837l.145-.006zm62.153-56.806v5.7h-42.743v-5.7h42.743zM145.815 71c2.575 0 4.828 1.668 5.702 4.106a1.896 1.896 0 01-3.51 1.423l-.059-.144c-.345-.964-1.196-1.594-2.133-1.594-.883 0-1.689.558-2.069 1.427l-.066.167a1.896 1.896 0 01-3.568-1.28c.874-2.437 3.126-4.105 5.703-4.105zm23.513 0c2.576 0 4.828 1.668 5.702 4.106a1.896 1.896 0 01-3.51 1.423l-.059-.144c-.345-.964-1.196-1.594-2.133-1.594-.883 0-1.689.558-2.068 1.427l-.066.167a1.895 1.895 0 11-3.57-1.28c.875-2.437 3.128-4.105 5.704-4.105zm23.636-45.04c7.032 0 12.752 5.618 12.916 12.61l.004.31-.001 1.12h7.165c6.008 0 10.88 4.871 10.88 10.88v76.549c0 6.008-4.872 10.88-10.88 10.88H100.88c-6.009 0-10.88-4.872-10.88-10.88V45.325h-.04V35.48a9.52 9.52 0 019.249-9.516l.271-.004h93.484zm20.084 18.12l-118.968.001v83.348a6.8 6.8 0 006.561 6.795l.239.005h112.168a6.8 6.8 0 006.796-6.562l.004-.238V50.88a6.8 6.8 0 00-6.562-6.796l-.238-.004zm-45.4 49.455c1.047 0 1.895.849 1.895 1.896a5.415 5.415 0 01-5.197 5.41l-.218.005h-13.505a5.415 5.415 0 01-5.414-5.415 1.896 1.896 0 013.785-.148l.006.148c0 .847.648 1.543 1.476 1.617l.147.007h13.505c.847 0 1.543-.649 1.618-1.476l.006-.148c0-1.047.85-1.896 1.896-1.896zm113.708-31.394a2.72 2.72 0 012.72 2.72v21.63a2.72 2.72 0 01-2.72 2.72h-37.303a2.72 2.72 0 01-2.72-2.72v-21.63a2.72 2.72 0 012.72-2.72h37.303zm0 2.04h-37.303a.68.68 0 00-.672.58l-.008.1v21.63a.68.68 0 00.58.673l.1.007h37.303a.68.68 0 00.673-.58l.007-.1v-21.63a.68.68 0 00-.58-.673l-.1-.007zm-4.246 16.327c.751 0 1.36.609 1.36 1.36v.13a1.36 1.36 0 01-1.36 1.36h-7.253a1.36 1.36 0 01-1.36-1.36v-.13c0-.751.609-1.36 1.36-1.36h7.253zM192.964 30.04H99.48a5.44 5.44 0 00-5.436 5.221l-.004.219V40h107.763v-1.12a8.84 8.84 0 00-8.579-8.836l-.26-.004z"
40
+ ></path>
41
+ <path
42
+ fill={themeValues.subIconColor}
43
+ fillRule="nonzero"
44
+ d="M160.625 137.938v10.248h6.045a2.04 2.04 0 012.034 1.888l.006.152a2.04 2.04 0 01-1.888 2.034l-.152.006h-8.085a2.04 2.04 0 01-2.034-1.888l-.006-.152v-12.288h4.08zm-7.92 0v11.89a2.04 2.04 0 01-1.887 2.034l-.152.006h-8.085a2.04 2.04 0 01-.153-4.075l.153-.005 6.044-.001v-9.849h4.08zm-62.7-34.592c-.008.004-.01.642-.012 1.477v2.665l-.002.408c-.001.507-.004.846-.01.851l-6.626 5.754 15.406 5.409a5.925 5.925 0 015.126-2.95 2.04 2.04 0 01.153 4.074l-.153.006a1.847 1.847 0 00-.144 3.69l.144.005h3.396a2.04 2.04 0 01.153 4.075l-.153.005h-3.396a5.93 5.93 0 01-5.825-4.828l-18.716-6.567a2.037 2.037 0 01-1.286-1.363 2.04 2.04 0 01.237-2.558l.122-.115 11.378-9.88c.042-.037.14-.109.191-.145l.016-.013zm176.39-8.358a2.04 2.04 0 01.152 4.074l-.152.006h-5.572a2.036 2.036 0 01-.233.213l-.13.093-26.212 17.393a2.04 2.04 0 01-2.238.011l-.141-.1-7.84-6.091c-.01-.007-.015-.415-.018-1.224v-.344V107.728v-.789l.004-1.53 9.198 7.147 20.328-13.488h-4.014a2.04 2.04 0 01-.152-4.074l.152-.006h16.868zm-28.267-27.86a8.905 8.905 0 110 17.81 8.905 8.905 0 010-17.81zm48.927-12.398a3.72 3.72 0 013.715 3.522l.005.198v21.63a3.72 3.72 0 01-3.522 3.715l-.198.005-3.306-.005v-2l3.306.005c.9 0 1.639-.691 1.714-1.572l.006-.148V68.84h-5v-5.699h5V58.45c0-.9-.69-1.639-1.571-1.714l-.149-.006h-37.303c-.9 0-1.638.69-1.713 1.571l-.007.149v3.691h-2V58.45a3.72 3.72 0 013.523-3.715l.197-.005h37.303z"
45
+ ></path>
46
+ <path
47
+ fill="#FFF"
48
+ d="M239.196 71.402v3.56l3.562.002V77.1h-3.562v3.562h-2.137V77.1h-3.562v-2.137l3.561-.001.001-3.561h2.137z"
49
+ ></path>
184
50
  </g>
185
51
  </g>
186
52
  </svg>
package/src/components/atoms/icons/index.js CHANGED
@@ -40,6 +40,7 @@ import SuccessfulIcon from "./SuccessfulIcon";
40
40
  import VoidedIcon from "./VoidedIcon";
41
41
  import StatusUnknownIcon from "./StatusUnknownIcon";
42
42
  import CarrotIcon from "./CarrotIcon";
43
+ import ProfileIcon from "./ProfileIcon";
43
44
 
44
45
  export {
45
46
  AccountsIcon,
@@ -83,5 +84,6 @@ export {
83
84
  SuccessfulIcon,
84
85
  VoidedIcon,
85
86
  StatusUnknownIcon,
86
- CarrotIcon
87
+ CarrotIcon,
88
+ ProfileIcon
87
89
  };
package/src/components/molecules/terms-and-conditions/TermsAndConditions.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import React, { useState } from "react";
2
2
  import Checkbox from "../../atoms/checkbox";
3
- import Text from "../../atoms/text";
4
3
  import { Box, Stack } from "../../atoms/layouts";
5
4
  import DisplayBox from "../../atoms/display-box";
6
- import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
7
5
  import TermsAndConditionsModal from "../../molecules/terms-and-conditions-modal";
8
6
 
9
7
  const TermsAndConditions = ({
@@ -16,27 +14,27 @@ const TermsAndConditions = ({
16
14
  const [showTerms, toggleShowTerms] = useState(false);
17
15
  return (
18
16
  <DisplayBox>
19
- <Stack direction="row">
17
+ <Stack>
20
18
  <Checkbox
21
19
  name="terms"
20
+ title="Terms and Conditions"
22
21
  error={error}
23
22
  checked={isChecked}
24
23
  onChange={onCheck}
25
24
  />
26
- <Stack>
27
- <Text variant="p" fontWeight={FONT_WEIGHT_BOLD}>
28
- Terms and Conditions
29
- </Text>
30
- <Box padding="0">{html}</Box>
31
- {terms && (
32
- <TermsAndConditionsModal
33
- link="Learn More"
34
- terms={terms}
35
- isOpen={showTerms}
36
- toggleOpen={toggleShowTerms}
37
- />
38
- )}
39
- </Stack>
25
+ <Box padding="0 0 0 58px">
26
+ <Stack>
27
+ <Box padding="0">{html}</Box>
28
+ {terms && (
29
+ <TermsAndConditionsModal
30
+ link="Learn More"
31
+ terms={terms}
32
+ isOpen={showTerms}
33
+ toggleOpen={toggleShowTerms}
34
+ />
35
+ )}
36
+ </Stack>
37
+ </Box>
40
38
  </Stack>
41
39
  </DisplayBox>
42
40
  );