@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.d.mts CHANGED
@@ -12,6 +12,7 @@ interface ButtonProps {
12
12
  declare const CysButton: React.FC<ButtonProps>;
13
13
  declare const SiwysButton: React.FC<ButtonProps>;
14
14
 
15
+ type ThemeProp = "light" | "dark";
15
16
  interface SignInProps {
16
17
  challengeUrl: string;
17
18
  onSiwysPress: () => void;
@@ -19,6 +20,7 @@ interface SignInProps {
19
20
  createChallengeUrl?: string;
20
21
  pollForAuthUrl?: string;
21
22
  successComponent?: React.ReactNode;
23
+ theme?: ThemeProp;
22
24
  }
23
25
  declare const SignInWithYourSelf: React.FC<SignInProps>;
24
26
 
package/dist/index.d.ts CHANGED
@@ -12,6 +12,7 @@ interface ButtonProps {
12
12
  declare const CysButton: React.FC<ButtonProps>;
13
13
  declare const SiwysButton: React.FC<ButtonProps>;
14
14
 
15
+ type ThemeProp = "light" | "dark";
15
16
  interface SignInProps {
16
17
  challengeUrl: string;
17
18
  onSiwysPress: () => void;
@@ -19,6 +20,7 @@ interface SignInProps {
19
20
  createChallengeUrl?: string;
20
21
  pollForAuthUrl?: string;
21
22
  successComponent?: React.ReactNode;
23
+ theme?: ThemeProp;
22
24
  }
23
25
  declare const SignInWithYourSelf: React.FC<SignInProps>;
24
26
 
package/dist/index.js CHANGED
@@ -358,7 +358,10 @@ function _templateObject7() {
358
358
  }
359
359
  function _templateObject8() {
360
360
  var data = _tagged_template_literal([
361
- "\n margin-bottom: 70px;\n"
361
+ "\n margin-bottom: 70px;\n ",
362
+ ";\n ",
363
+ ";\n ",
364
+ ";\n"
362
365
  ]);
363
366
  _templateObject8 = function _templateObject() {
364
367
  return data;
@@ -367,7 +370,8 @@ function _templateObject8() {
367
370
  }
368
371
  function _templateObject9() {
369
372
  var data = _tagged_template_literal([
370
- '\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'
373
+ '\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: ',
374
+ ";\n @media (min-width: 1024px) {\n font-size: 28px;\n }\n"
371
375
  ]);
372
376
  _templateObject9 = function _templateObject() {
373
377
  return data;
@@ -385,7 +389,8 @@ function _templateObject10() {
385
389
  }
386
390
  function _templateObject11() {
387
391
  var data = _tagged_template_literal([
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: #ffffff;\n'
392
+ '\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: ',
393
+ ";\n"
389
394
  ]);
390
395
  _templateObject11 = function _templateObject() {
391
396
  return data;
@@ -394,7 +399,8 @@ function _templateObject11() {
394
399
  }
395
400
  function _templateObject12() {
396
401
  var data = _tagged_template_literal([
397
- '\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'
402
+ '\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: ',
403
+ ";\n"
398
404
  ]);
399
405
  _templateObject12 = function _templateObject() {
400
406
  return data;
@@ -403,7 +409,8 @@ function _templateObject12() {
403
409
  }
404
410
  function _templateObject13() {
405
411
  var data = _tagged_template_literal([
406
- '\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'
412
+ '\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: ',
413
+ ";\n"
407
414
  ]);
408
415
  _templateObject13 = function _templateObject() {
409
416
  return data;
@@ -457,7 +464,7 @@ function _templateObject18() {
457
464
  }
458
465
  function _templateObject19() {
459
466
  var data = _tagged_template_literal([
460
- '\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'
467
+ '\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'
461
468
  ]);
462
469
  _templateObject19 = function _templateObject() {
463
470
  return data;
@@ -1024,12 +1031,26 @@ var QrCode_default = QRCode;
1024
1031
  var Wrapper = import_styled_components4.default.div(_templateObject5());
1025
1032
  var SignInContainer = import_styled_components4.default.div(_templateObject6());
1026
1033
  var TitleContainer = import_styled_components4.default.div(_templateObject7());
1027
- var QRContainer = import_styled_components4.default.div(_templateObject8());
1028
- var Title = import_styled_components4.default.h4(_templateObject9());
1034
+ var QRContainer = import_styled_components4.default.div(_templateObject8(), function(props) {
1035
+ return props.colorTheme === "dark" ? "border: 10px black solid" : "";
1036
+ }, function(props) {
1037
+ return props.colorTheme === "dark" ? "border-radius: 26px" : "";
1038
+ }, function(props) {
1039
+ return props.colorTheme === "dark" ? "line-height: 0" : "";
1040
+ });
1041
+ var Title = import_styled_components4.default.h4(_templateObject9(), function(props) {
1042
+ return props.colorTheme === "dark" ? "#0F0F10" : "#ffffff";
1043
+ });
1029
1044
  var InstructionsContainer = import_styled_components4.default.div(_templateObject10());
1030
- var InstructionsTitle = import_styled_components4.default.h4(_templateObject11());
1031
- var InstructionsSubtitle = import_styled_components4.default.p(_templateObject12());
1032
- var InstructionsDescription = import_styled_components4.default.ul(_templateObject13());
1045
+ var InstructionsTitle = import_styled_components4.default.h4(_templateObject11(), function(props) {
1046
+ return props.colorTheme === "dark" ? "#0F0F10" : "#ffffff";
1047
+ });
1048
+ var InstructionsSubtitle = import_styled_components4.default.p(_templateObject12(), function(props) {
1049
+ return props.colorTheme === "dark" ? "#0F0F10" : "#ffffff";
1050
+ });
1051
+ var InstructionsDescription = import_styled_components4.default.ul(_templateObject13(), function(props) {
1052
+ return props.colorTheme === "dark" ? "#292D36" : "#c4ccd4";
1053
+ });
1033
1054
  var InstructionsDescriptionItem = import_styled_components4.default.li(_templateObject14());
1034
1055
  var DownloadTitleContainer = import_styled_components4.default.div(_templateObject15());
1035
1056
  var ParentDownloadContainer = import_styled_components4.default.div(_templateObject16());
@@ -1038,7 +1059,7 @@ var DownloadContainerFlex = import_styled_components4.default.div(_templateObjec
1038
1059
  var DownloadAppTitle = import_styled_components4.default.p(_templateObject19());
1039
1060
  var AppIconsContainer = import_styled_components4.default.div(_templateObject20());
1040
1061
  var SignInWithYourSelf = function(param) {
1041
- 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;
1062
+ 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;
1042
1063
  var _ref = _sliced_to_array((0, import_react4.useState)(challengeUrlParam), 2), challengeUrl = _ref[0], setChallengeUrl = _ref[1];
1043
1064
  var _ref1 = _sliced_to_array((0, import_react4.useState)(""), 2), challengeDid = _ref1[0], setChallengeDid = _ref1[1];
1044
1065
  var _ref2 = _sliced_to_array((0, import_react4.useState)(false), 2), isAuthenticated = _ref2[0], setIsAuthenticated = _ref2[1];
@@ -1096,13 +1117,23 @@ var SignInWithYourSelf = function(param) {
1096
1117
  if (isAuthenticated) {
1097
1118
  return /* @__PURE__ */ import_react4.default.createElement(Wrapper, null, successComponent);
1098
1119
  }
1099
- return /* @__PURE__ */ import_react4.default.createElement(Wrapper, null, /* @__PURE__ */ import_react4.default.createElement(SignInContainer, null, /* @__PURE__ */ import_react4.default.createElement(CircleLogoWhite_default, {
1120
+ return /* @__PURE__ */ import_react4.default.createElement(Wrapper, null, /* @__PURE__ */ import_react4.default.createElement(SignInContainer, null, theme === "dark" ? /* @__PURE__ */ import_react4.default.createElement(CircleLogoBlack_default, {
1100
1121
  width: "48",
1101
1122
  height: "48"
1102
- }), /* @__PURE__ */ import_react4.default.createElement(TitleContainer, null, /* @__PURE__ */ import_react4.default.createElement(Title, null, isCYS ? "Connect your" : "Sign in with your"), /* @__PURE__ */ import_react4.default.createElement(SelfTextLogoWhite_default, {
1123
+ }) : /* @__PURE__ */ import_react4.default.createElement(CircleLogoWhite_default, {
1124
+ width: "48",
1125
+ height: "48"
1126
+ }), /* @__PURE__ */ import_react4.default.createElement(TitleContainer, null, /* @__PURE__ */ import_react4.default.createElement(Title, {
1127
+ colorTheme: theme
1128
+ }, isCYS ? "Connect your" : "Sign in with your"), theme === "dark" ? /* @__PURE__ */ import_react4.default.createElement(SelfTextLogoBlack_default, {
1129
+ width: "102",
1130
+ height: "22"
1131
+ }) : /* @__PURE__ */ import_react4.default.createElement(SelfTextLogoWhite_default, {
1103
1132
  width: "102",
1104
1133
  height: "22"
1105
- })), /* @__PURE__ */ import_react4.default.createElement(QRContainer, null, /* @__PURE__ */ import_react4.default.createElement(QrCode_default, {
1134
+ })), /* @__PURE__ */ import_react4.default.createElement(QRContainer, {
1135
+ colorTheme: theme
1136
+ }, /* @__PURE__ */ import_react4.default.createElement(QrCode_default, {
1106
1137
  challengeUrl: challengeUrl,
1107
1138
  size: 200,
1108
1139
  level: "H"
@@ -1114,10 +1145,27 @@ var SignInWithYourSelf = function(param) {
1114
1145
  colorTheme: "light",
1115
1146
  onClick: onSiwysPress,
1116
1147
  glow: true
1117
- })), /* @__PURE__ */ import_react4.default.createElement(InstructionsContainer, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsTitle, null, isCYS ? "Connect your SELF\u2122 Guide:" : "Sign in with your SELF\u2122 Guide:"), /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(InstructionsDescription, null, /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(InstructionsDescription, null, /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Use the scanning feature in the SELF\xAE app to scan the QR code."), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ import_react4.default.createElement(ParentDownloadContainer, null, /* @__PURE__ */ import_react4.default.createElement(DownloadTitleContainer, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsTitle, null, "Don\u2019t have the"), /* @__PURE__ */ import_react4.default.createElement(SelfTextLogoWhite_default, {
1148
+ })), /* @__PURE__ */ import_react4.default.createElement(InstructionsContainer, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsTitle, {
1149
+ colorTheme: theme
1150
+ }, isCYS ? "Connect your SELF\u2122 Guide:" : "Sign in with your SELF\u2122 Guide:"), /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement(InstructionsSubtitle, {
1151
+ colorTheme: theme
1152
+ }, 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__ */ import_react4.default.createElement(InstructionsDescription, {
1153
+ colorTheme: theme
1154
+ }, /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement(InstructionsSubtitle, {
1155
+ colorTheme: theme
1156
+ }, 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__ */ import_react4.default.createElement(InstructionsDescription, {
1157
+ colorTheme: theme
1158
+ }, /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Use the scanning feature in the SELF\xAE app to scan the QR code."), /* @__PURE__ */ import_react4.default.createElement(InstructionsDescriptionItem, null, "Approve the connection request within the SELF\xAE app."))), /* @__PURE__ */ import_react4.default.createElement(ParentDownloadContainer, null, /* @__PURE__ */ import_react4.default.createElement(DownloadTitleContainer, null, /* @__PURE__ */ import_react4.default.createElement(InstructionsTitle, {
1159
+ colorTheme: theme
1160
+ }, "Don\u2019t have the"), theme === "dark" ? /* @__PURE__ */ import_react4.default.createElement(SelfTextLogoBlack_default, {
1161
+ width: "58",
1162
+ height: "12"
1163
+ }) : /* @__PURE__ */ import_react4.default.createElement(SelfTextLogoWhite_default, {
1118
1164
  width: "58",
1119
1165
  height: "12"
1120
- }), /* @__PURE__ */ import_react4.default.createElement(InstructionsTitle, null, " app?")), /* @__PURE__ */ import_react4.default.createElement(DownloadContainer, null, /* @__PURE__ */ import_react4.default.createElement(DownloadContainerFlex, null, /* @__PURE__ */ import_react4.default.createElement(DownloadAppTitle, null, "Available to download now:"), /* @__PURE__ */ import_react4.default.createElement(AppIconsContainer, null, /* @__PURE__ */ import_react4.default.createElement(IconDark_default, {
1166
+ }), /* @__PURE__ */ import_react4.default.createElement(InstructionsTitle, {
1167
+ colorTheme: theme
1168
+ }, " app?")), /* @__PURE__ */ import_react4.default.createElement(DownloadContainer, null, /* @__PURE__ */ import_react4.default.createElement(DownloadContainerFlex, null, /* @__PURE__ */ import_react4.default.createElement(DownloadAppTitle, null, "Available to download now:"), /* @__PURE__ */ import_react4.default.createElement(AppIconsContainer, null, /* @__PURE__ */ import_react4.default.createElement(IconDark_default, {
1121
1169
  width: "56",
1122
1170
  height: "56"
1123
1171
  }), /* @__PURE__ */ import_react4.default.createElement(IconLight_default, {