@blerp/design 1.0.33 → 1.0.37

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 (4) hide show
  1. package/dist/index.cjs.js +55 -37
  2. package/dist/index.esm.js +55 -37
  3. package/dist/index.umd.js +55 -37
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -393,6 +393,7 @@ var LineClamp$2 = styled__default['default'].div(_templateObject$d || (_template
393
393
 
394
394
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
395
395
  var bite = _ref.bite,
396
+ title = _ref.title,
396
397
  isLinkTitle = _ref.isLinkTitle,
397
398
  handleClickTitle = _ref.handleClickTitle,
398
399
  isPremium = _ref.isPremium,
@@ -426,7 +427,7 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
426
427
  }
427
428
  },
428
429
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
429
- }, bite.title)));
430
+ }, title || bite.title)));
430
431
  }
431
432
 
432
433
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -459,7 +460,7 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
459
460
  }
460
461
  },
461
462
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
462
- }, bite.title))) : /*#__PURE__*/React__default['default'].createElement(LineClamp$2, {
463
+ }, title || bite.title))) : /*#__PURE__*/React__default['default'].createElement(LineClamp$2, {
463
464
  onClick: function onClick(e) {
464
465
  if (handleClickTitle) {
465
466
  e.stopPropagation();
@@ -476,7 +477,7 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
476
477
  }
477
478
  },
478
479
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
479
- }, bite.title)));
480
+ }, title || bite.title)));
480
481
  };
481
482
 
482
483
  var PlayOutlineIcon = function PlayOutlineIcon(_ref) {
@@ -1108,6 +1109,7 @@ var Blerp$1 = function Blerp(_ref) {
1108
1109
  var _bite$image, _bite$image$original;
1109
1110
 
1110
1111
  var bite = _ref.bite,
1112
+ title = _ref.title,
1111
1113
  variantSize = _ref.variantSize,
1112
1114
  isSelected = _ref.isSelected,
1113
1115
  playingState = _ref.playingState,
@@ -1251,10 +1253,9 @@ var Blerp$1 = function Blerp(_ref) {
1251
1253
  bottom: "0",
1252
1254
  left: "0",
1253
1255
  right: "0",
1254
- background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0], ", ").concat(theme.colors.grey5Override, ")") : "",
1255
- backgroundColor: !profileColors && "grey5.override",
1256
- transition: "opacity .15s ease-in-out",
1257
- opacity: isPremium ? isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8" : "0"
1256
+ transition: "background .15s ease-in-out",
1257
+ background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
1258
+ backgroundColor: isPremium && !profileColors && "grey5.override"
1258
1259
  }
1259
1260
  }), /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
1260
1261
  src: bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url,
@@ -1289,6 +1290,7 @@ var Blerp$1 = function Blerp(_ref) {
1289
1290
  handleClickLock: handleClickLock
1290
1291
  }), /*#__PURE__*/React__default['default'].createElement(BlerpTitleRow, {
1291
1292
  bite: bite,
1293
+ title: title,
1292
1294
  isLinkTitle: isLinkTitle,
1293
1295
  handleClickTitle: handleClickTitle,
1294
1296
  isPremium: isPremium,
@@ -3708,7 +3710,8 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
3708
3710
  }, "Premium:"), /*#__PURE__*/React__default['default'].createElement(Toggle, {
3709
3711
  checked: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium,
3710
3712
  onClick: function onClick() {
3711
- return handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium));
3713
+ setVisibility("PUBLIC");
3714
+ handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium));
3712
3715
  }
3713
3716
  })), collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? /*#__PURE__*/React__default['default'].createElement(Stack, {
3714
3717
  sx: {
@@ -8559,7 +8562,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
8559
8562
 
8560
8563
  return /*#__PURE__*/React__default['default'].createElement("form", {
8561
8564
  id: "quaderno-payment-form",
8562
- "data-publishable-key": "pk_xxxxxxxx"
8565
+ "data-publishable-key": "pk_test_4fzQyULryL8zeGyn77Cx"
8563
8566
  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
8564
8567
  direction: "row",
8565
8568
  justifyContent: "space-between",
@@ -8568,7 +8571,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
8568
8571
  margin: "0 10px 20px 10px"
8569
8572
  }, /*#__PURE__*/React__default['default'].createElement(Dropdown, {
8570
8573
  id: "country",
8571
- buttonTitle: country,
8574
+ buttonTitle: country.name,
8572
8575
  buttonLabel: "Country",
8573
8576
  buttonStyle: {
8574
8577
  backgroundColor: "white.override",
@@ -9340,7 +9343,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
9340
9343
  country: option.value,
9341
9344
  postalCode: postalCode
9342
9345
  });
9343
- setCountry(option.name);
9346
+ setCountry(option);
9344
9347
  }
9345
9348
  }), /*#__PURE__*/React__default['default'].createElement(Input, {
9346
9349
  id: "postal-code",
@@ -9349,7 +9352,10 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
9349
9352
  required: true,
9350
9353
  sx: {
9351
9354
  backgroundColor: "white.override",
9352
- width: "150px"
9355
+ width: "150px",
9356
+ "& label": {
9357
+ position: "absolute"
9358
+ }
9353
9359
  },
9354
9360
  onChange: function onChange(e) {
9355
9361
  reloadTaxes({
@@ -9378,7 +9384,10 @@ var BraintreeUI = function BraintreeUI(_ref) {
9378
9384
  setTotal = _ref.setTotal;
9379
9385
  React.useContext(styled.ThemeContext);
9380
9386
 
9381
- var _useState = React.useState("United States"),
9387
+ var _useState = React.useState({
9388
+ name: "United States",
9389
+ value: "US"
9390
+ }),
9382
9391
  _useState2 = _slicedToArray__default['default'](_useState, 2),
9383
9392
  country = _useState2[0],
9384
9393
  setCountry = _useState2[1];
@@ -9404,17 +9413,7 @@ var BraintreeUI = function BraintreeUI(_ref) {
9404
9413
  justifyContent: "center",
9405
9414
  borderRadius: "20px"
9406
9415
  }
9407
- }, /*#__PURE__*/React__default['default'].createElement("div", {
9408
- id: "dropin-container"
9409
- }), /*#__PURE__*/React__default['default'].createElement("input", {
9410
- type: "hidden",
9411
- id: "nonce",
9412
- name: "payment_method_nonce"
9413
- }), /*#__PURE__*/React__default['default'].createElement("input", {
9414
- type: "hidden",
9415
- id: "deviceData",
9416
- name: "payment_method_deviceData"
9417
- }), dropinInstanceReady ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : /*#__PURE__*/React__default['default'].createElement("div", null, "Loading..."), dropinInstanceReady && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Text, {
9416
+ }, dropinInstanceReady && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Text, {
9418
9417
  alignSelf: "start",
9419
9418
  fontSize: "20px",
9420
9419
  margin: "10px 0 0 0"
@@ -9426,7 +9425,17 @@ var BraintreeUI = function BraintreeUI(_ref) {
9426
9425
  setPostalCode: setPostalCode,
9427
9426
  country: country,
9428
9427
  setCountry: setCountry
9429
- })), dropinInstanceReady && /*#__PURE__*/React__default['default'].createElement(Button, {
9428
+ })), /*#__PURE__*/React__default['default'].createElement("div", {
9429
+ id: "dropin-container"
9430
+ }), /*#__PURE__*/React__default['default'].createElement("input", {
9431
+ type: "hidden",
9432
+ id: "nonce",
9433
+ name: "payment_method_nonce"
9434
+ }), /*#__PURE__*/React__default['default'].createElement("input", {
9435
+ type: "hidden",
9436
+ id: "deviceData",
9437
+ name: "payment_method_deviceData"
9438
+ }), dropinInstanceReady ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : /*#__PURE__*/React__default['default'].createElement("div", null, "Loading..."), dropinInstanceReady && /*#__PURE__*/React__default['default'].createElement(Button, {
9430
9439
  type: "submit",
9431
9440
  variant: "contained",
9432
9441
  disabled: postalCode === "" ? true : false,
@@ -9470,7 +9479,9 @@ var BraintreeUI = function BraintreeUI(_ref) {
9470
9479
  promoCode: discountCodeInput || null,
9471
9480
  analytics: null,
9472
9481
  nonce: nonce,
9473
- deviceData: deviceData
9482
+ deviceData: deviceData,
9483
+ country: country.value,
9484
+ postalCode: postalCode
9474
9485
  });
9475
9486
  _context.next = 19;
9476
9487
  break;
@@ -9538,13 +9549,20 @@ var CheckoutModal = function CheckoutModal(_ref) {
9538
9549
  React.useEffect(function () {
9539
9550
  var createBraintreeDropIn = /*#__PURE__*/function () {
9540
9551
  var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
9552
+ var dropin;
9541
9553
  return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
9542
9554
  while (1) {
9543
9555
  switch (_context.prev = _context.next) {
9544
9556
  case 0:
9545
9557
  _context.prev = 0;
9558
+ dropin = document.getElementById("dropin-container");
9559
+
9560
+ if (dropin) {
9561
+ dropin.innerHTML = "";
9562
+ }
9563
+
9546
9564
  document.getElementById("payment-form");
9547
- _context.next = 4;
9565
+ _context.next = 6;
9548
9566
  return BrainTreeDropIn$3.create({
9549
9567
  authorization: clientToken,
9550
9568
  selector: "#dropin-container",
@@ -9601,6 +9619,8 @@ var CheckoutModal = function CheckoutModal(_ref) {
9601
9619
  // }, // The `venmo` object requires no properties to instantiate.
9602
9620
 
9603
9621
  }, function (err, dropinInstance) {
9622
+ console.log(err);
9623
+
9604
9624
  if (err !== null && err !== void 0 && err.message) ;
9605
9625
 
9606
9626
  console.log(dropinInstance);
@@ -9608,24 +9628,22 @@ var CheckoutModal = function CheckoutModal(_ref) {
9608
9628
  setDropInstanceReady(true);
9609
9629
  });
9610
9630
 
9611
- case 4:
9612
- _context.next = 11;
9631
+ case 6:
9632
+ _context.next = 13;
9613
9633
  break;
9614
9634
 
9615
- case 7:
9616
- _context.prev = 7;
9635
+ case 9:
9636
+ _context.prev = 9;
9617
9637
  _context.t0 = _context["catch"](0);
9618
- console.log(_context.t0); // useToast(`${err}`, "error");
9619
- // setBeetScreenState("HOME");
9620
-
9638
+ console.log(_context.t0);
9621
9639
  return _context.abrupt("return");
9622
9640
 
9623
- case 11:
9641
+ case 13:
9624
9642
  case "end":
9625
9643
  return _context.stop();
9626
9644
  }
9627
9645
  }
9628
- }, _callee, null, [[0, 7]]);
9646
+ }, _callee, null, [[0, 9]]);
9629
9647
  }));
9630
9648
 
9631
9649
  return function createBraintreeDropIn() {
@@ -9636,7 +9654,7 @@ var CheckoutModal = function CheckoutModal(_ref) {
9636
9654
  if (show) {
9637
9655
  createBraintreeDropIn();
9638
9656
  }
9639
- }, [show, clientToken, total]);
9657
+ }, [show, clientToken, type, total]);
9640
9658
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
9641
9659
  sx: {
9642
9660
  backgroundColor: "white.main",
package/dist/index.esm.js CHANGED
@@ -346,6 +346,7 @@ var LineClamp$2 = styled.div(_templateObject$d || (_templateObject$d = _taggedTe
346
346
 
347
347
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
348
348
  var bite = _ref.bite,
349
+ title = _ref.title,
349
350
  isLinkTitle = _ref.isLinkTitle,
350
351
  handleClickTitle = _ref.handleClickTitle,
351
352
  isPremium = _ref.isPremium,
@@ -379,7 +380,7 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
379
380
  }
380
381
  },
381
382
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
382
- }, bite.title)));
383
+ }, title || bite.title)));
383
384
  }
384
385
 
385
386
  return /*#__PURE__*/React.createElement(Stack, {
@@ -412,7 +413,7 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
412
413
  }
413
414
  },
414
415
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
415
- }, bite.title))) : /*#__PURE__*/React.createElement(LineClamp$2, {
416
+ }, title || bite.title))) : /*#__PURE__*/React.createElement(LineClamp$2, {
416
417
  onClick: function onClick(e) {
417
418
  if (handleClickTitle) {
418
419
  e.stopPropagation();
@@ -429,7 +430,7 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
429
430
  }
430
431
  },
431
432
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
432
- }, bite.title)));
433
+ }, title || bite.title)));
433
434
  };
434
435
 
435
436
  var PlayOutlineIcon = function PlayOutlineIcon(_ref) {
@@ -1061,6 +1062,7 @@ var Blerp$1 = function Blerp(_ref) {
1061
1062
  var _bite$image, _bite$image$original;
1062
1063
 
1063
1064
  var bite = _ref.bite,
1065
+ title = _ref.title,
1064
1066
  variantSize = _ref.variantSize,
1065
1067
  isSelected = _ref.isSelected,
1066
1068
  playingState = _ref.playingState,
@@ -1204,10 +1206,9 @@ var Blerp$1 = function Blerp(_ref) {
1204
1206
  bottom: "0",
1205
1207
  left: "0",
1206
1208
  right: "0",
1207
- background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0], ", ").concat(theme.colors.grey5Override, ")") : "",
1208
- backgroundColor: !profileColors && "grey5.override",
1209
- transition: "opacity .15s ease-in-out",
1210
- opacity: isPremium ? isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8" : "0"
1209
+ transition: "background .15s ease-in-out",
1210
+ background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
1211
+ backgroundColor: isPremium && !profileColors && "grey5.override"
1211
1212
  }
1212
1213
  }), /*#__PURE__*/React.createElement(ColorExtractor, {
1213
1214
  src: bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url,
@@ -1242,6 +1243,7 @@ var Blerp$1 = function Blerp(_ref) {
1242
1243
  handleClickLock: handleClickLock
1243
1244
  }), /*#__PURE__*/React.createElement(BlerpTitleRow, {
1244
1245
  bite: bite,
1246
+ title: title,
1245
1247
  isLinkTitle: isLinkTitle,
1246
1248
  handleClickTitle: handleClickTitle,
1247
1249
  isPremium: isPremium,
@@ -3661,7 +3663,8 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
3661
3663
  }, "Premium:"), /*#__PURE__*/React.createElement(Toggle, {
3662
3664
  checked: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium,
3663
3665
  onClick: function onClick() {
3664
- return handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium));
3666
+ setVisibility("PUBLIC");
3667
+ handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium));
3665
3668
  }
3666
3669
  })), collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? /*#__PURE__*/React.createElement(Stack, {
3667
3670
  sx: {
@@ -8512,7 +8515,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
8512
8515
 
8513
8516
  return /*#__PURE__*/React.createElement("form", {
8514
8517
  id: "quaderno-payment-form",
8515
- "data-publishable-key": "pk_xxxxxxxx"
8518
+ "data-publishable-key": "pk_test_4fzQyULryL8zeGyn77Cx"
8516
8519
  }, /*#__PURE__*/React.createElement(Stack, {
8517
8520
  direction: "row",
8518
8521
  justifyContent: "space-between",
@@ -8521,7 +8524,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
8521
8524
  margin: "0 10px 20px 10px"
8522
8525
  }, /*#__PURE__*/React.createElement(Dropdown, {
8523
8526
  id: "country",
8524
- buttonTitle: country,
8527
+ buttonTitle: country.name,
8525
8528
  buttonLabel: "Country",
8526
8529
  buttonStyle: {
8527
8530
  backgroundColor: "white.override",
@@ -9293,7 +9296,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
9293
9296
  country: option.value,
9294
9297
  postalCode: postalCode
9295
9298
  });
9296
- setCountry(option.name);
9299
+ setCountry(option);
9297
9300
  }
9298
9301
  }), /*#__PURE__*/React.createElement(Input, {
9299
9302
  id: "postal-code",
@@ -9302,7 +9305,10 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
9302
9305
  required: true,
9303
9306
  sx: {
9304
9307
  backgroundColor: "white.override",
9305
- width: "150px"
9308
+ width: "150px",
9309
+ "& label": {
9310
+ position: "absolute"
9311
+ }
9306
9312
  },
9307
9313
  onChange: function onChange(e) {
9308
9314
  reloadTaxes({
@@ -9331,7 +9337,10 @@ var BraintreeUI = function BraintreeUI(_ref) {
9331
9337
  setTotal = _ref.setTotal;
9332
9338
  useContext(ThemeContext);
9333
9339
 
9334
- var _useState = useState("United States"),
9340
+ var _useState = useState({
9341
+ name: "United States",
9342
+ value: "US"
9343
+ }),
9335
9344
  _useState2 = _slicedToArray(_useState, 2),
9336
9345
  country = _useState2[0],
9337
9346
  setCountry = _useState2[1];
@@ -9357,17 +9366,7 @@ var BraintreeUI = function BraintreeUI(_ref) {
9357
9366
  justifyContent: "center",
9358
9367
  borderRadius: "20px"
9359
9368
  }
9360
- }, /*#__PURE__*/React.createElement("div", {
9361
- id: "dropin-container"
9362
- }), /*#__PURE__*/React.createElement("input", {
9363
- type: "hidden",
9364
- id: "nonce",
9365
- name: "payment_method_nonce"
9366
- }), /*#__PURE__*/React.createElement("input", {
9367
- type: "hidden",
9368
- id: "deviceData",
9369
- name: "payment_method_deviceData"
9370
- }), dropinInstanceReady ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement("div", null, "Loading..."), dropinInstanceReady && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
9369
+ }, dropinInstanceReady && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
9371
9370
  alignSelf: "start",
9372
9371
  fontSize: "20px",
9373
9372
  margin: "10px 0 0 0"
@@ -9379,7 +9378,17 @@ var BraintreeUI = function BraintreeUI(_ref) {
9379
9378
  setPostalCode: setPostalCode,
9380
9379
  country: country,
9381
9380
  setCountry: setCountry
9382
- })), dropinInstanceReady && /*#__PURE__*/React.createElement(Button, {
9381
+ })), /*#__PURE__*/React.createElement("div", {
9382
+ id: "dropin-container"
9383
+ }), /*#__PURE__*/React.createElement("input", {
9384
+ type: "hidden",
9385
+ id: "nonce",
9386
+ name: "payment_method_nonce"
9387
+ }), /*#__PURE__*/React.createElement("input", {
9388
+ type: "hidden",
9389
+ id: "deviceData",
9390
+ name: "payment_method_deviceData"
9391
+ }), dropinInstanceReady ? /*#__PURE__*/React.createElement(React.Fragment, null) : /*#__PURE__*/React.createElement("div", null, "Loading..."), dropinInstanceReady && /*#__PURE__*/React.createElement(Button, {
9383
9392
  type: "submit",
9384
9393
  variant: "contained",
9385
9394
  disabled: postalCode === "" ? true : false,
@@ -9423,7 +9432,9 @@ var BraintreeUI = function BraintreeUI(_ref) {
9423
9432
  promoCode: discountCodeInput || null,
9424
9433
  analytics: null,
9425
9434
  nonce: nonce,
9426
- deviceData: deviceData
9435
+ deviceData: deviceData,
9436
+ country: country.value,
9437
+ postalCode: postalCode
9427
9438
  });
9428
9439
  _context.next = 19;
9429
9440
  break;
@@ -9491,13 +9502,20 @@ var CheckoutModal = function CheckoutModal(_ref) {
9491
9502
  useEffect(function () {
9492
9503
  var createBraintreeDropIn = /*#__PURE__*/function () {
9493
9504
  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
9505
+ var dropin;
9494
9506
  return _regeneratorRuntime.wrap(function _callee$(_context) {
9495
9507
  while (1) {
9496
9508
  switch (_context.prev = _context.next) {
9497
9509
  case 0:
9498
9510
  _context.prev = 0;
9511
+ dropin = document.getElementById("dropin-container");
9512
+
9513
+ if (dropin) {
9514
+ dropin.innerHTML = "";
9515
+ }
9516
+
9499
9517
  document.getElementById("payment-form");
9500
- _context.next = 4;
9518
+ _context.next = 6;
9501
9519
  return BrainTreeDropIn$3.create({
9502
9520
  authorization: clientToken,
9503
9521
  selector: "#dropin-container",
@@ -9554,6 +9572,8 @@ var CheckoutModal = function CheckoutModal(_ref) {
9554
9572
  // }, // The `venmo` object requires no properties to instantiate.
9555
9573
 
9556
9574
  }, function (err, dropinInstance) {
9575
+ console.log(err);
9576
+
9557
9577
  if (err !== null && err !== void 0 && err.message) ;
9558
9578
 
9559
9579
  console.log(dropinInstance);
@@ -9561,24 +9581,22 @@ var CheckoutModal = function CheckoutModal(_ref) {
9561
9581
  setDropInstanceReady(true);
9562
9582
  });
9563
9583
 
9564
- case 4:
9565
- _context.next = 11;
9584
+ case 6:
9585
+ _context.next = 13;
9566
9586
  break;
9567
9587
 
9568
- case 7:
9569
- _context.prev = 7;
9588
+ case 9:
9589
+ _context.prev = 9;
9570
9590
  _context.t0 = _context["catch"](0);
9571
- console.log(_context.t0); // useToast(`${err}`, "error");
9572
- // setBeetScreenState("HOME");
9573
-
9591
+ console.log(_context.t0);
9574
9592
  return _context.abrupt("return");
9575
9593
 
9576
- case 11:
9594
+ case 13:
9577
9595
  case "end":
9578
9596
  return _context.stop();
9579
9597
  }
9580
9598
  }
9581
- }, _callee, null, [[0, 7]]);
9599
+ }, _callee, null, [[0, 9]]);
9582
9600
  }));
9583
9601
 
9584
9602
  return function createBraintreeDropIn() {
@@ -9589,7 +9607,7 @@ var CheckoutModal = function CheckoutModal(_ref) {
9589
9607
  if (show) {
9590
9608
  createBraintreeDropIn();
9591
9609
  }
9592
- }, [show, clientToken, total]);
9610
+ }, [show, clientToken, type, total]);
9593
9611
  return /*#__PURE__*/React.createElement(Stack, {
9594
9612
  sx: {
9595
9613
  backgroundColor: "white.main",
package/dist/index.umd.js CHANGED
@@ -347,6 +347,7 @@
347
347
 
348
348
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
349
349
  var bite = _ref.bite,
350
+ title = _ref.title,
350
351
  isLinkTitle = _ref.isLinkTitle,
351
352
  handleClickTitle = _ref.handleClickTitle,
352
353
  isPremium = _ref.isPremium,
@@ -380,7 +381,7 @@
380
381
  }
381
382
  },
382
383
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
383
- }, bite.title)));
384
+ }, title || bite.title)));
384
385
  }
385
386
 
386
387
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -413,7 +414,7 @@
413
414
  }
414
415
  },
415
416
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
416
- }, bite.title))) : /*#__PURE__*/React__default['default'].createElement(LineClamp$2, {
417
+ }, title || bite.title))) : /*#__PURE__*/React__default['default'].createElement(LineClamp$2, {
417
418
  onClick: function onClick(e) {
418
419
  if (handleClickTitle) {
419
420
  e.stopPropagation();
@@ -430,7 +431,7 @@
430
431
  }
431
432
  },
432
433
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
433
- }, bite.title)));
434
+ }, title || bite.title)));
434
435
  };
435
436
 
436
437
  var PlayOutlineIcon = function PlayOutlineIcon(_ref) {
@@ -1062,6 +1063,7 @@
1062
1063
  var _bite$image, _bite$image$original;
1063
1064
 
1064
1065
  var bite = _ref.bite,
1066
+ title = _ref.title,
1065
1067
  variantSize = _ref.variantSize,
1066
1068
  isSelected = _ref.isSelected,
1067
1069
  playingState = _ref.playingState,
@@ -1205,10 +1207,9 @@
1205
1207
  bottom: "0",
1206
1208
  left: "0",
1207
1209
  right: "0",
1208
- background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0], ", ").concat(theme.colors.grey5Override, ")") : "",
1209
- backgroundColor: !profileColors && "grey5.override",
1210
- transition: "opacity .15s ease-in-out",
1211
- opacity: isPremium ? isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8" : "0"
1210
+ transition: "background .15s ease-in-out",
1211
+ background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
1212
+ backgroundColor: isPremium && !profileColors && "grey5.override"
1212
1213
  }
1213
1214
  }), /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
1214
1215
  src: bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url,
@@ -1243,6 +1244,7 @@
1243
1244
  handleClickLock: handleClickLock
1244
1245
  }), /*#__PURE__*/React__default['default'].createElement(BlerpTitleRow, {
1245
1246
  bite: bite,
1247
+ title: title,
1246
1248
  isLinkTitle: isLinkTitle,
1247
1249
  handleClickTitle: handleClickTitle,
1248
1250
  isPremium: isPremium,
@@ -3662,7 +3664,8 @@
3662
3664
  }, "Premium:"), /*#__PURE__*/React__default['default'].createElement(Toggle, {
3663
3665
  checked: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium,
3664
3666
  onClick: function onClick() {
3665
- return handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium));
3667
+ setVisibility("PUBLIC");
3668
+ handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium));
3666
3669
  }
3667
3670
  })), collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? /*#__PURE__*/React__default['default'].createElement(Stack, {
3668
3671
  sx: {
@@ -8513,7 +8516,7 @@
8513
8516
 
8514
8517
  return /*#__PURE__*/React__default['default'].createElement("form", {
8515
8518
  id: "quaderno-payment-form",
8516
- "data-publishable-key": "pk_xxxxxxxx"
8519
+ "data-publishable-key": "pk_test_4fzQyULryL8zeGyn77Cx"
8517
8520
  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
8518
8521
  direction: "row",
8519
8522
  justifyContent: "space-between",
@@ -8522,7 +8525,7 @@
8522
8525
  margin: "0 10px 20px 10px"
8523
8526
  }, /*#__PURE__*/React__default['default'].createElement(Dropdown, {
8524
8527
  id: "country",
8525
- buttonTitle: country,
8528
+ buttonTitle: country.name,
8526
8529
  buttonLabel: "Country",
8527
8530
  buttonStyle: {
8528
8531
  backgroundColor: "white.override",
@@ -9294,7 +9297,7 @@
9294
9297
  country: option.value,
9295
9298
  postalCode: postalCode
9296
9299
  });
9297
- setCountry(option.name);
9300
+ setCountry(option);
9298
9301
  }
9299
9302
  }), /*#__PURE__*/React__default['default'].createElement(Input, {
9300
9303
  id: "postal-code",
@@ -9303,7 +9306,10 @@
9303
9306
  required: true,
9304
9307
  sx: {
9305
9308
  backgroundColor: "white.override",
9306
- width: "150px"
9309
+ width: "150px",
9310
+ "& label": {
9311
+ position: "absolute"
9312
+ }
9307
9313
  },
9308
9314
  onChange: function onChange(e) {
9309
9315
  reloadTaxes({
@@ -9332,7 +9338,10 @@
9332
9338
  setTotal = _ref.setTotal;
9333
9339
  React.useContext(styled.ThemeContext);
9334
9340
 
9335
- var _useState = React.useState("United States"),
9341
+ var _useState = React.useState({
9342
+ name: "United States",
9343
+ value: "US"
9344
+ }),
9336
9345
  _useState2 = _slicedToArray__default['default'](_useState, 2),
9337
9346
  country = _useState2[0],
9338
9347
  setCountry = _useState2[1];
@@ -9358,17 +9367,7 @@
9358
9367
  justifyContent: "center",
9359
9368
  borderRadius: "20px"
9360
9369
  }
9361
- }, /*#__PURE__*/React__default['default'].createElement("div", {
9362
- id: "dropin-container"
9363
- }), /*#__PURE__*/React__default['default'].createElement("input", {
9364
- type: "hidden",
9365
- id: "nonce",
9366
- name: "payment_method_nonce"
9367
- }), /*#__PURE__*/React__default['default'].createElement("input", {
9368
- type: "hidden",
9369
- id: "deviceData",
9370
- name: "payment_method_deviceData"
9371
- }), dropinInstanceReady ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : /*#__PURE__*/React__default['default'].createElement("div", null, "Loading..."), dropinInstanceReady && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Text, {
9370
+ }, dropinInstanceReady && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Text, {
9372
9371
  alignSelf: "start",
9373
9372
  fontSize: "20px",
9374
9373
  margin: "10px 0 0 0"
@@ -9380,7 +9379,17 @@
9380
9379
  setPostalCode: setPostalCode,
9381
9380
  country: country,
9382
9381
  setCountry: setCountry
9383
- })), dropinInstanceReady && /*#__PURE__*/React__default['default'].createElement(Button, {
9382
+ })), /*#__PURE__*/React__default['default'].createElement("div", {
9383
+ id: "dropin-container"
9384
+ }), /*#__PURE__*/React__default['default'].createElement("input", {
9385
+ type: "hidden",
9386
+ id: "nonce",
9387
+ name: "payment_method_nonce"
9388
+ }), /*#__PURE__*/React__default['default'].createElement("input", {
9389
+ type: "hidden",
9390
+ id: "deviceData",
9391
+ name: "payment_method_deviceData"
9392
+ }), dropinInstanceReady ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : /*#__PURE__*/React__default['default'].createElement("div", null, "Loading..."), dropinInstanceReady && /*#__PURE__*/React__default['default'].createElement(Button, {
9384
9393
  type: "submit",
9385
9394
  variant: "contained",
9386
9395
  disabled: postalCode === "" ? true : false,
@@ -9424,7 +9433,9 @@
9424
9433
  promoCode: discountCodeInput || null,
9425
9434
  analytics: null,
9426
9435
  nonce: nonce,
9427
- deviceData: deviceData
9436
+ deviceData: deviceData,
9437
+ country: country.value,
9438
+ postalCode: postalCode
9428
9439
  });
9429
9440
  _context.next = 19;
9430
9441
  break;
@@ -9492,13 +9503,20 @@
9492
9503
  React.useEffect(function () {
9493
9504
  var createBraintreeDropIn = /*#__PURE__*/function () {
9494
9505
  var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
9506
+ var dropin;
9495
9507
  return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
9496
9508
  while (1) {
9497
9509
  switch (_context.prev = _context.next) {
9498
9510
  case 0:
9499
9511
  _context.prev = 0;
9512
+ dropin = document.getElementById("dropin-container");
9513
+
9514
+ if (dropin) {
9515
+ dropin.innerHTML = "";
9516
+ }
9517
+
9500
9518
  document.getElementById("payment-form");
9501
- _context.next = 4;
9519
+ _context.next = 6;
9502
9520
  return BrainTreeDropIn$3.create({
9503
9521
  authorization: clientToken,
9504
9522
  selector: "#dropin-container",
@@ -9555,6 +9573,8 @@
9555
9573
  // }, // The `venmo` object requires no properties to instantiate.
9556
9574
 
9557
9575
  }, function (err, dropinInstance) {
9576
+ console.log(err);
9577
+
9558
9578
  if (err !== null && err !== void 0 && err.message) ;
9559
9579
 
9560
9580
  console.log(dropinInstance);
@@ -9562,24 +9582,22 @@
9562
9582
  setDropInstanceReady(true);
9563
9583
  });
9564
9584
 
9565
- case 4:
9566
- _context.next = 11;
9585
+ case 6:
9586
+ _context.next = 13;
9567
9587
  break;
9568
9588
 
9569
- case 7:
9570
- _context.prev = 7;
9589
+ case 9:
9590
+ _context.prev = 9;
9571
9591
  _context.t0 = _context["catch"](0);
9572
- console.log(_context.t0); // useToast(`${err}`, "error");
9573
- // setBeetScreenState("HOME");
9574
-
9592
+ console.log(_context.t0);
9575
9593
  return _context.abrupt("return");
9576
9594
 
9577
- case 11:
9595
+ case 13:
9578
9596
  case "end":
9579
9597
  return _context.stop();
9580
9598
  }
9581
9599
  }
9582
- }, _callee, null, [[0, 7]]);
9600
+ }, _callee, null, [[0, 9]]);
9583
9601
  }));
9584
9602
 
9585
9603
  return function createBraintreeDropIn() {
@@ -9590,7 +9608,7 @@
9590
9608
  if (show) {
9591
9609
  createBraintreeDropIn();
9592
9610
  }
9593
- }, [show, clientToken, total]);
9611
+ }, [show, clientToken, type, total]);
9594
9612
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
9595
9613
  sx: {
9596
9614
  backgroundColor: "white.main",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blerp/design",
3
- "version": "1.0.33",
3
+ "version": "1.0.37",
4
4
  "description": "Blerp UI",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {