@yourself_id/siwys-react-js 0.6.0 → 0.7.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 (7) hide show
  1. package/dist/index.d.mts +2 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +65 -17
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +65 -17
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +2 -2
package/dist/index.mjs CHANGED
@@ -354,7 +354,10 @@ function _templateObject7() {
354
354
  }
355
355
  function _templateObject8() {
356
356
  var data = _tagged_template_literal([
357
- "\n margin-bottom: 70px;\n"
357
+ "\n margin-bottom: 70px;\n ",
358
+ ";\n ",
359
+ ";\n ",
360
+ ";\n"
358
361
  ]);
359
362
  _templateObject8 = function _templateObject() {
360
363
  return data;
@@ -363,7 +366,8 @@ function _templateObject8() {
363
366
  }
364
367
  function _templateObject9() {
365
368
  var data = _tagged_template_literal([
366
- '\n font-family: "Inter", sans-serif;\n margin-top: 0px;\n margin-bottom: 0px;\n font-weight: 400;\n font-size: 20px;\n line-height: 95%;\n color: #ffffff;\n @media (min-width: 1024px) {\n font-size: 28px;\n }\n'
369
+ '\n font-family: "Inter", sans-serif;\n margin-top: 0px;\n margin-bottom: 0px;\n font-weight: 400;\n font-size: 20px;\n line-height: 95%;\n color: ',
370
+ ";\n @media (min-width: 1024px) {\n font-size: 28px;\n }\n"
367
371
  ]);
368
372
  _templateObject9 = function _templateObject() {
369
373
  return data;
@@ -381,7 +385,8 @@ function _templateObject10() {
381
385
  }
382
386
  function _templateObject11() {
383
387
  var data = _tagged_template_literal([
384
- '\n font-family: "Inter", sans-serif;\n margin-top: 0px;\n margin-bottom: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 140%;\n letter-spacing: 0.025em;\n color: #ffffff;\n'
388
+ '\n font-family: "Inter", sans-serif;\n margin-top: 0px;\n margin-bottom: 0px;\n font-weight: 600;\n font-size: 16px;\n line-height: 140%;\n letter-spacing: 0.025em;\n color: ',
389
+ ";\n"
385
390
  ]);
386
391
  _templateObject11 = function _templateObject() {
387
392
  return data;
@@ -390,7 +395,8 @@ function _templateObject11() {
390
395
  }
391
396
  function _templateObject12() {
392
397
  var data = _tagged_template_literal([
393
- '\n font-family: "Inter", sans-serif;\n margin-top: 0px;\n margin-bottom: 0px;\n font-weight: 500;\n font-size: 14px;\n letter-spacing: 0.025em;\n margin-bottom: 8px;\n color: #ffffff;\n'
398
+ '\n font-family: "Inter", sans-serif;\n margin-top: 0px;\n margin-bottom: 0px;\n font-weight: 500;\n font-size: 14px;\n letter-spacing: 0.025em;\n margin-bottom: 8px;\n color: ',
399
+ ";\n"
394
400
  ]);
395
401
  _templateObject12 = function _templateObject() {
396
402
  return data;
@@ -399,7 +405,8 @@ function _templateObject12() {
399
405
  }
400
406
  function _templateObject13() {
401
407
  var data = _tagged_template_literal([
402
- '\n font-family: "Inter", sans-serif;\n list-style-type: decimal;\n padding-left: 20px;\n margin-top: 0px;\n margin-bottom: 0px;\n font-weight: 400;\n font-size: 14px;\n letter-spacing: 0.025em;\n color: #c4ccd4;\n'
408
+ '\n font-family: "Inter", sans-serif;\n list-style-type: decimal;\n padding-left: 20px;\n margin-top: 0px;\n margin-bottom: 0px;\n font-weight: 400;\n font-size: 14px;\n letter-spacing: 0.025em;\n color: ',
409
+ ";\n"
403
410
  ]);
404
411
  _templateObject13 = function _templateObject() {
405
412
  return data;
@@ -453,7 +460,7 @@ function _templateObject18() {
453
460
  }
454
461
  function _templateObject19() {
455
462
  var data = _tagged_template_literal([
456
- '\n font-family: "Inter", sans-serif;\n font-weight: 500;\n margin-top: 0px;\n margin-bottom: 0px;\n font-size: 15px;\n line-height: 126%;\n letter-spacing: 0.025em;\n max-width: 128px;\n color: #c4ccd4;\n'
463
+ '\n font-family: "Inter", sans-serif;\n font-weight: 500;\n margin-top: 0px;\n margin-bottom: 0px;\n font-size: 15px;\n line-height: 126%;\n letter-spacing: 0.025em;\n max-width: 128px;\n color: #ffffff;\n'
457
464
  ]);
458
465
  _templateObject19 = function _templateObject() {
459
466
  return data;
@@ -942,12 +949,26 @@ var QrCode_default = QRCode;
942
949
  var Wrapper = styled4.div(_templateObject5());
943
950
  var SignInContainer = styled4.div(_templateObject6());
944
951
  var TitleContainer = styled4.div(_templateObject7());
945
- var QRContainer = styled4.div(_templateObject8());
946
- var Title = styled4.h4(_templateObject9());
952
+ var QRContainer = styled4.div(_templateObject8(), function(props) {
953
+ return props.colorTheme === "dark" ? "border: 10px black solid" : "";
954
+ }, function(props) {
955
+ return props.colorTheme === "dark" ? "border-radius: 26px" : "";
956
+ }, function(props) {
957
+ return props.colorTheme === "dark" ? "line-height: 0" : "";
958
+ });
959
+ var Title = styled4.h4(_templateObject9(), function(props) {
960
+ return props.colorTheme === "dark" ? "#0F0F10" : "#ffffff";
961
+ });
947
962
  var InstructionsContainer = styled4.div(_templateObject10());
948
- var InstructionsTitle = styled4.h4(_templateObject11());
949
- var InstructionsSubtitle = styled4.p(_templateObject12());
950
- var InstructionsDescription = styled4.ul(_templateObject13());
963
+ var InstructionsTitle = styled4.h4(_templateObject11(), function(props) {
964
+ return props.colorTheme === "dark" ? "#0F0F10" : "#ffffff";
965
+ });
966
+ var InstructionsSubtitle = styled4.p(_templateObject12(), function(props) {
967
+ return props.colorTheme === "dark" ? "#0F0F10" : "#ffffff";
968
+ });
969
+ var InstructionsDescription = styled4.ul(_templateObject13(), function(props) {
970
+ return props.colorTheme === "dark" ? "#292D36" : "#c4ccd4";
971
+ });
951
972
  var InstructionsDescriptionItem = styled4.li(_templateObject14());
952
973
  var DownloadTitleContainer = styled4.div(_templateObject15());
953
974
  var ParentDownloadContainer = styled4.div(_templateObject16());
@@ -956,7 +977,7 @@ var DownloadContainerFlex = styled4.div(_templateObject18());
956
977
  var DownloadAppTitle = styled4.p(_templateObject19());
957
978
  var AppIconsContainer = styled4.div(_templateObject20());
958
979
  var SignInWithYourSelf = function(param) {
959
- var challengeUrlParam = param.challengeUrl, onSiwysPress = param.onSiwysPress, _param_isCYS = param.isCYS, isCYS = _param_isCYS === void 0 ? false : _param_isCYS, _param_createChallengeUrl = param.createChallengeUrl, createChallengeUrl = _param_createChallengeUrl === void 0 ? void 0 : _param_createChallengeUrl, _param_pollForAuthUrl = param.pollForAuthUrl, pollForAuthUrl = _param_pollForAuthUrl === void 0 ? void 0 : _param_pollForAuthUrl, successComponent = param.successComponent;
980
+ var challengeUrlParam = param.challengeUrl, onSiwysPress = param.onSiwysPress, _param_isCYS = param.isCYS, isCYS = _param_isCYS === void 0 ? false : _param_isCYS, _param_createChallengeUrl = param.createChallengeUrl, createChallengeUrl = _param_createChallengeUrl === void 0 ? void 0 : _param_createChallengeUrl, _param_pollForAuthUrl = param.pollForAuthUrl, pollForAuthUrl = _param_pollForAuthUrl === void 0 ? void 0 : _param_pollForAuthUrl, successComponent = param.successComponent, _param_theme = param.theme, theme = _param_theme === void 0 ? "light" : _param_theme;
960
981
  var _useState2 = _sliced_to_array(useState2(challengeUrlParam), 2), challengeUrl = _useState2[0], setChallengeUrl = _useState2[1];
961
982
  var _useState21 = _sliced_to_array(useState2(""), 2), challengeDid = _useState21[0], setChallengeDid = _useState21[1];
962
983
  var _useState22 = _sliced_to_array(useState2(false), 2), isAuthenticated = _useState22[0], setIsAuthenticated = _useState22[1];
@@ -1014,13 +1035,23 @@ var SignInWithYourSelf = function(param) {
1014
1035
  if (isAuthenticated) {
1015
1036
  return /* @__PURE__ */ React17.createElement(Wrapper, null, successComponent);
1016
1037
  }
1017
- return /* @__PURE__ */ React17.createElement(Wrapper, null, /* @__PURE__ */ React17.createElement(SignInContainer, null, /* @__PURE__ */ React17.createElement(CircleLogoWhite_default, {
1038
+ return /* @__PURE__ */ React17.createElement(Wrapper, null, /* @__PURE__ */ React17.createElement(SignInContainer, null, theme === "dark" ? /* @__PURE__ */ React17.createElement(CircleLogoBlack_default, {
1018
1039
  width: "48",
1019
1040
  height: "48"
1020
- }), /* @__PURE__ */ React17.createElement(TitleContainer, null, /* @__PURE__ */ React17.createElement(Title, null, isCYS ? "Connect your" : "Sign in with your"), /* @__PURE__ */ React17.createElement(SelfTextLogoWhite_default, {
1041
+ }) : /* @__PURE__ */ React17.createElement(CircleLogoWhite_default, {
1042
+ width: "48",
1043
+ height: "48"
1044
+ }), /* @__PURE__ */ React17.createElement(TitleContainer, null, /* @__PURE__ */ React17.createElement(Title, {
1045
+ colorTheme: theme
1046
+ }, isCYS ? "Connect your" : "Sign in with your"), theme === "dark" ? /* @__PURE__ */ React17.createElement(SelfTextLogoBlack_default, {
1047
+ width: "102",
1048
+ height: "22"
1049
+ }) : /* @__PURE__ */ React17.createElement(SelfTextLogoWhite_default, {
1021
1050
  width: "102",
1022
1051
  height: "22"
1023
- })), /* @__PURE__ */ React17.createElement(QRContainer, null, /* @__PURE__ */ React17.createElement(QrCode_default, {
1052
+ })), /* @__PURE__ */ React17.createElement(QRContainer, {
1053
+ colorTheme: theme
1054
+ }, /* @__PURE__ */ React17.createElement(QrCode_default, {
1024
1055
  challengeUrl: challengeUrl,
1025
1056
  size: 200,
1026
1057
  level: "H"
@@ -1032,10 +1063,27 @@ var SignInWithYourSelf = function(param) {
1032
1063
  colorTheme: "light",
1033
1064
  onClick: onSiwysPress,
1034
1065
  glow: true
1035
- })), /* @__PURE__ */ React17.createElement(InstructionsContainer, null, /* @__PURE__ */ React17.createElement(InstructionsTitle, null, isCYS ? "Connect your SELF\u2122 Guide:" : "Sign in with your SELF\u2122 Guide:"), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement(InstructionsSubtitle, null, isCYS ? "If you have the SELF\xAE\xA0mobile app:" : "If you are signing in on a device that has the SELF\xAE app installed:"), /* @__PURE__ */ React17.createElement(InstructionsDescription, null, /* @__PURE__ */ React17.createElement(InstructionsDescriptionItem, null, isCYS ? "Use scanning feature in the SELF\xAE app to scan the QR code." : 'Tap the "Sign in with your SELF\u2122" button.'), /* @__PURE__ */ React17.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement(InstructionsSubtitle, null, isCYS ? "If you do not have the SELF\xAE mobile app:" : "If you are not signing in on a device that has the SELF\xAE app installed:"), /* @__PURE__ */ React17.createElement(InstructionsDescription, null, /* @__PURE__ */ React17.createElement(InstructionsDescriptionItem, null, isCYS ? "Download and open the SELF\xAE ID app from the App Store." : "Open the SELF\xAE app on the device with the app installed."), /* @__PURE__ */ React17.createElement(InstructionsDescriptionItem, null, "Use the scanning feature in the SELF\xAE app to scan the QR code."), /* @__PURE__ */ React17.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ React17.createElement(ParentDownloadContainer, null, /* @__PURE__ */ React17.createElement(DownloadTitleContainer, null, /* @__PURE__ */ React17.createElement(InstructionsTitle, null, "Don\u2019t have the"), /* @__PURE__ */ React17.createElement(SelfTextLogoWhite_default, {
1066
+ })), /* @__PURE__ */ React17.createElement(InstructionsContainer, null, /* @__PURE__ */ React17.createElement(InstructionsTitle, {
1067
+ colorTheme: theme
1068
+ }, isCYS ? "Connect your SELF\u2122 Guide:" : "Sign in with your SELF\u2122 Guide:"), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement(InstructionsSubtitle, {
1069
+ colorTheme: theme
1070
+ }, isCYS ? "If you have the SELF\xAE\xA0mobile app:" : "If you are signing in on a device that has the SELF\xAE app installed:"), /* @__PURE__ */ React17.createElement(InstructionsDescription, {
1071
+ colorTheme: theme
1072
+ }, /* @__PURE__ */ React17.createElement(InstructionsDescriptionItem, null, isCYS ? "Use scanning feature in the SELF\xAE app to scan the QR code." : 'Tap the "Sign in with your SELF\u2122" button.'), /* @__PURE__ */ React17.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement(InstructionsSubtitle, {
1073
+ colorTheme: theme
1074
+ }, isCYS ? "If you do not have the SELF\xAE mobile app:" : "If you are not signing in on a device that has the SELF\xAE app installed:"), /* @__PURE__ */ React17.createElement(InstructionsDescription, {
1075
+ colorTheme: theme
1076
+ }, /* @__PURE__ */ React17.createElement(InstructionsDescriptionItem, null, isCYS ? "Download and open the SELF\xAE ID app from the App Store." : "Open the SELF\xAE app on the device with the app installed."), /* @__PURE__ */ React17.createElement(InstructionsDescriptionItem, null, "Use the scanning feature in the SELF\xAE app to scan the QR code."), /* @__PURE__ */ React17.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ React17.createElement(ParentDownloadContainer, null, /* @__PURE__ */ React17.createElement(DownloadTitleContainer, null, /* @__PURE__ */ React17.createElement(InstructionsTitle, {
1077
+ colorTheme: theme
1078
+ }, "Don\u2019t have the"), theme === "dark" ? /* @__PURE__ */ React17.createElement(SelfTextLogoBlack_default, {
1079
+ width: "58",
1080
+ height: "12"
1081
+ }) : /* @__PURE__ */ React17.createElement(SelfTextLogoWhite_default, {
1036
1082
  width: "58",
1037
1083
  height: "12"
1038
- }), /* @__PURE__ */ React17.createElement(InstructionsTitle, null, " app?")), /* @__PURE__ */ React17.createElement(DownloadContainer, null, /* @__PURE__ */ React17.createElement(DownloadContainerFlex, null, /* @__PURE__ */ React17.createElement(DownloadAppTitle, null, "Available to download now:"), /* @__PURE__ */ React17.createElement(AppIconsContainer, null, /* @__PURE__ */ React17.createElement(IconDark_default, {
1084
+ }), /* @__PURE__ */ React17.createElement(InstructionsTitle, {
1085
+ colorTheme: theme
1086
+ }, " app?")), /* @__PURE__ */ React17.createElement(DownloadContainer, null, /* @__PURE__ */ React17.createElement(DownloadContainerFlex, null, /* @__PURE__ */ React17.createElement(DownloadAppTitle, null, "Available to download now:"), /* @__PURE__ */ React17.createElement(AppIconsContainer, null, /* @__PURE__ */ React17.createElement(IconDark_default, {
1039
1087
  width: "56",
1040
1088
  height: "56"
1041
1089
  }), /* @__PURE__ */ React17.createElement(IconLight_default, {