@primestyleai/tryon 5.10.191 → 5.10.192
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.
- package/dist/react/index.js +2889 -2680
- package/dist/react/index.js.map +1 -1
- package/dist/react/styles.d.ts +1 -1
- package/dist/storefront/primestyle-tryon.js +211 -1
- package/package.json +1 -1
|
@@ -22844,6 +22844,201 @@ const STYLES = `
|
|
|
22844
22844
|
padding: 6px !important;
|
|
22845
22845
|
}
|
|
22846
22846
|
}
|
|
22847
|
+
|
|
22848
|
+
/* Final mobile ergonomics patch: keep body-detail inputs readable, keep
|
|
22849
|
+
commerce CTAs from crowding, and give feedback a real mobile sheet. */
|
|
22850
|
+
@media (max-width: 768px) {
|
|
22851
|
+
.ps-bp-scan-details-title {
|
|
22852
|
+
margin: 4px 0 0 !important;
|
|
22853
|
+
}
|
|
22854
|
+
.ps-bp-scan-details-sub {
|
|
22855
|
+
margin: 4px 0 0 !important;
|
|
22856
|
+
}
|
|
22857
|
+
.ps-bp-scan-details-center:not(.ps-shoe-scan-details) .ps-bp-system-toggle,
|
|
22858
|
+
.ps-bp-photo-details-head .ps-bp-system-toggle,
|
|
22859
|
+
.ps-bp-system-toggle.ps-bp-system-toggle-compact {
|
|
22860
|
+
margin: 6px auto 8px !important;
|
|
22861
|
+
gap: 14px !important;
|
|
22862
|
+
}
|
|
22863
|
+
.ps-bp-photo-details-head {
|
|
22864
|
+
align-items: flex-start !important;
|
|
22865
|
+
gap: 8px !important;
|
|
22866
|
+
padding-bottom: 8px !important;
|
|
22867
|
+
}
|
|
22868
|
+
.ps-bp-photo-details-head h3 {
|
|
22869
|
+
font-size: 16px !important;
|
|
22870
|
+
line-height: 1.2 !important;
|
|
22871
|
+
padding-top: 3px !important;
|
|
22872
|
+
}
|
|
22873
|
+
.ps-bp-inline-fields {
|
|
22874
|
+
padding-top: 4px !important;
|
|
22875
|
+
padding-bottom: 14px !important;
|
|
22876
|
+
}
|
|
22877
|
+
.ps-bp-inline-row {
|
|
22878
|
+
display: grid !important;
|
|
22879
|
+
grid-template-columns: minmax(72px, 0.34fr) minmax(0, 1fr) !important;
|
|
22880
|
+
align-items: center !important;
|
|
22881
|
+
gap: 14px !important;
|
|
22882
|
+
padding: 16px 0 !important;
|
|
22883
|
+
min-height: 66px !important;
|
|
22884
|
+
}
|
|
22885
|
+
.ps-bp-inline-label {
|
|
22886
|
+
flex-basis: auto !important;
|
|
22887
|
+
min-width: 0 !important;
|
|
22888
|
+
font-size: 11px !important;
|
|
22889
|
+
letter-spacing: 0.13em !important;
|
|
22890
|
+
}
|
|
22891
|
+
.ps-bp-inline-input-group {
|
|
22892
|
+
display: grid !important;
|
|
22893
|
+
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto !important;
|
|
22894
|
+
align-items: end !important;
|
|
22895
|
+
gap: 8px !important;
|
|
22896
|
+
min-width: 0 !important;
|
|
22897
|
+
width: 100% !important;
|
|
22898
|
+
}
|
|
22899
|
+
.ps-bp-inline-row:not(:first-child) .ps-bp-inline-input-group,
|
|
22900
|
+
.ps-bp-inline-row .ps-bp-inline-input-group:has(input:only-child) {
|
|
22901
|
+
grid-template-columns: minmax(0, 1fr) auto !important;
|
|
22902
|
+
}
|
|
22903
|
+
.ps-bp-inline-input {
|
|
22904
|
+
min-height: 34px !important;
|
|
22905
|
+
font-size: 20px !important;
|
|
22906
|
+
line-height: 1.2 !important;
|
|
22907
|
+
padding-bottom: 7px !important;
|
|
22908
|
+
text-align: left !important;
|
|
22909
|
+
}
|
|
22910
|
+
.ps-bp-inline-unit {
|
|
22911
|
+
align-self: center !important;
|
|
22912
|
+
font-size: 12px !important;
|
|
22913
|
+
line-height: 1 !important;
|
|
22914
|
+
padding-bottom: 8px !important;
|
|
22915
|
+
}
|
|
22916
|
+
|
|
22917
|
+
.ps-msr-bottom,
|
|
22918
|
+
.ps-msd-actions {
|
|
22919
|
+
padding-top: 9px !important;
|
|
22920
|
+
padding-bottom: calc(9px + env(safe-area-inset-bottom)) !important;
|
|
22921
|
+
}
|
|
22922
|
+
.ps-msr-bottom-row,
|
|
22923
|
+
.ps-tryon-v2-action-group,
|
|
22924
|
+
.ps-msd-result-action-group {
|
|
22925
|
+
display: grid !important;
|
|
22926
|
+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
|
|
22927
|
+
gap: 9px !important;
|
|
22928
|
+
align-items: stretch !important;
|
|
22929
|
+
}
|
|
22930
|
+
.ps-tryon-v2-action-group-history {
|
|
22931
|
+
display: flex !important;
|
|
22932
|
+
justify-content: flex-end !important;
|
|
22933
|
+
}
|
|
22934
|
+
.ps-tryon-v2-action-group > .ps-tryon-v2-cta,
|
|
22935
|
+
.ps-msr-commerce-row .ps-tryon-v2-cta,
|
|
22936
|
+
.ps-msd-result-action-group .ps-tryon-v2-cta {
|
|
22937
|
+
min-height: 40px !important;
|
|
22938
|
+
padding: 0 10px !important;
|
|
22939
|
+
border-radius: 9px !important;
|
|
22940
|
+
font-size: 11px !important;
|
|
22941
|
+
letter-spacing: 0.07em !important;
|
|
22942
|
+
gap: 5px !important;
|
|
22943
|
+
overflow: hidden !important;
|
|
22944
|
+
text-overflow: ellipsis !important;
|
|
22945
|
+
}
|
|
22946
|
+
.ps-tryon-v2-add-bag-cta svg,
|
|
22947
|
+
.ps-tryon-v2-history-product-cta svg {
|
|
22948
|
+
width: 18px !important;
|
|
22949
|
+
height: 18px !important;
|
|
22950
|
+
}
|
|
22951
|
+
@media (max-width: 374px) {
|
|
22952
|
+
.ps-msr-bottom-row,
|
|
22953
|
+
.ps-tryon-v2-action-group,
|
|
22954
|
+
.ps-msd-result-action-group {
|
|
22955
|
+
grid-template-columns: 1fr !important;
|
|
22956
|
+
}
|
|
22957
|
+
.ps-tryon-v2-action-group > .ps-tryon-v2-cta,
|
|
22958
|
+
.ps-msr-commerce-row .ps-tryon-v2-cta,
|
|
22959
|
+
.ps-msd-result-action-group .ps-tryon-v2-cta {
|
|
22960
|
+
min-height: 38px !important;
|
|
22961
|
+
}
|
|
22962
|
+
}
|
|
22963
|
+
|
|
22964
|
+
.ps-tryon-feedback-toggle.ps-mobile {
|
|
22965
|
+
min-height: 36px !important;
|
|
22966
|
+
padding: 0 13px !important;
|
|
22967
|
+
border-radius: 10px !important;
|
|
22968
|
+
font-size: 12px !important;
|
|
22969
|
+
gap: 7px !important;
|
|
22970
|
+
}
|
|
22971
|
+
.ps-tryon-feedback-toggle.ps-mobile svg {
|
|
22972
|
+
width: 16px !important;
|
|
22973
|
+
height: 16px !important;
|
|
22974
|
+
}
|
|
22975
|
+
.ps-tryon-feedback-backdrop.ps-mobile {
|
|
22976
|
+
position: fixed !important;
|
|
22977
|
+
inset: 0 !important;
|
|
22978
|
+
z-index: 2147483000 !important;
|
|
22979
|
+
border: 0 !important;
|
|
22980
|
+
padding: 0 !important;
|
|
22981
|
+
margin: 0 !important;
|
|
22982
|
+
background: rgba(15, 23, 42, 0.24) !important;
|
|
22983
|
+
backdrop-filter: blur(3px) !important;
|
|
22984
|
+
-webkit-backdrop-filter: blur(3px) !important;
|
|
22985
|
+
cursor: pointer !important;
|
|
22986
|
+
}
|
|
22987
|
+
.ps-tryon-feedback.ps-mobile {
|
|
22988
|
+
position: fixed !important;
|
|
22989
|
+
left: 12px !important;
|
|
22990
|
+
right: 12px !important;
|
|
22991
|
+
bottom: calc(12px + env(safe-area-inset-bottom)) !important;
|
|
22992
|
+
width: auto !important;
|
|
22993
|
+
max-width: 520px !important;
|
|
22994
|
+
margin: 0 auto !important;
|
|
22995
|
+
z-index: 2147483001 !important;
|
|
22996
|
+
padding: 16px !important;
|
|
22997
|
+
border-radius: 18px !important;
|
|
22998
|
+
gap: 13px !important;
|
|
22999
|
+
background: #FFFFFF !important;
|
|
23000
|
+
box-shadow: 0 22px 60px rgba(15, 23, 42, 0.28) !important;
|
|
23001
|
+
backdrop-filter: none !important;
|
|
23002
|
+
-webkit-backdrop-filter: none !important;
|
|
23003
|
+
}
|
|
23004
|
+
.ps-tryon-feedback.ps-mobile .ps-tryon-feedback-top {
|
|
23005
|
+
gap: 10px !important;
|
|
23006
|
+
}
|
|
23007
|
+
.ps-tryon-feedback.ps-mobile .ps-tryon-feedback-title {
|
|
23008
|
+
font-size: 16px !important;
|
|
23009
|
+
line-height: 1.2 !important;
|
|
23010
|
+
}
|
|
23011
|
+
.ps-tryon-feedback.ps-mobile .ps-tryon-feedback-close {
|
|
23012
|
+
width: 34px !important;
|
|
23013
|
+
height: 34px !important;
|
|
23014
|
+
}
|
|
23015
|
+
.ps-tryon-feedback.ps-mobile .ps-tryon-feedback-stars {
|
|
23016
|
+
gap: 7px !important;
|
|
23017
|
+
padding-top: 2px !important;
|
|
23018
|
+
}
|
|
23019
|
+
.ps-tryon-feedback.ps-mobile .ps-tryon-feedback-star {
|
|
23020
|
+
width: 32px !important;
|
|
23021
|
+
height: 32px !important;
|
|
23022
|
+
}
|
|
23023
|
+
.ps-tryon-feedback.ps-mobile .ps-tryon-feedback-form {
|
|
23024
|
+
grid-template-columns: 1fr auto !important;
|
|
23025
|
+
gap: 9px !important;
|
|
23026
|
+
align-items: end !important;
|
|
23027
|
+
}
|
|
23028
|
+
.ps-tryon-feedback.ps-mobile .ps-tryon-feedback-note {
|
|
23029
|
+
min-height: 48px !important;
|
|
23030
|
+
max-height: 120px !important;
|
|
23031
|
+
border-radius: 12px !important;
|
|
23032
|
+
font-size: 14px !important;
|
|
23033
|
+
padding: 12px !important;
|
|
23034
|
+
}
|
|
23035
|
+
.ps-tryon-feedback.ps-mobile .ps-tryon-feedback-submit {
|
|
23036
|
+
min-height: 48px !important;
|
|
23037
|
+
padding: 0 16px !important;
|
|
23038
|
+
border-radius: 12px !important;
|
|
23039
|
+
font-size: 13px !important;
|
|
23040
|
+
}
|
|
23041
|
+
}
|
|
22847
23042
|
`;
|
|
22848
23043
|
function CameraIcon$1({ size = 18 }) {
|
|
22849
23044
|
return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
@@ -24205,7 +24400,7 @@ function TryOnExperienceFeedback({
|
|
|
24205
24400
|
}
|
|
24206
24401
|
);
|
|
24207
24402
|
}
|
|
24208
|
-
|
|
24403
|
+
const feedbackPanel = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-feedback${isMobile ? " ps-mobile" : ""}`, "aria-label": t2("Rate your try-on"), children: [
|
|
24209
24404
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-feedback-top", children: [
|
|
24210
24405
|
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-feedback-title", children: t2("Rate your try-on") }),
|
|
24211
24406
|
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
@@ -24270,6 +24465,21 @@ function TryOnExperienceFeedback({
|
|
|
24270
24465
|
] }),
|
|
24271
24466
|
status === "error" && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-feedback-status", children: t2("Couldn't send. Try again.") })
|
|
24272
24467
|
] });
|
|
24468
|
+
if (isMobile) {
|
|
24469
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
24470
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
24471
|
+
"button",
|
|
24472
|
+
{
|
|
24473
|
+
type: "button",
|
|
24474
|
+
className: "ps-tryon-feedback-backdrop ps-mobile",
|
|
24475
|
+
onClick: () => setExpanded(false),
|
|
24476
|
+
"aria-label": t2("Close")
|
|
24477
|
+
}
|
|
24478
|
+
),
|
|
24479
|
+
feedbackPanel
|
|
24480
|
+
] });
|
|
24481
|
+
}
|
|
24482
|
+
return feedbackPanel;
|
|
24273
24483
|
}
|
|
24274
24484
|
function ResultImageActionBar({
|
|
24275
24485
|
showLines,
|