@thefittingroom/shop-ui 5.0.20 → 5.0.21

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 (2) hide show
  1. package/dist/index.js +358 -126
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -19437,7 +19437,11 @@ const Button = reactExports.forwardRef(({
19437
19437
  fontFamily: theme.font_family,
19438
19438
  fontSize: "16px",
19439
19439
  fontWeight: "bold",
19440
- textAlign: "center"
19440
+ textAlign: "center",
19441
+ "&:disabled": {
19442
+ opacity: 0.4,
19443
+ cursor: "not-allowed"
19444
+ }
19441
19445
  },
19442
19446
  brand: {
19443
19447
  display: "block",
@@ -19453,7 +19457,11 @@ const Button = reactExports.forwardRef(({
19453
19457
  fontWeight: "500",
19454
19458
  textAlign: "center",
19455
19459
  textTransform: "uppercase",
19456
- letterSpacing: "0.75px"
19460
+ letterSpacing: "0.75px",
19461
+ "&:disabled": {
19462
+ opacity: 0.4,
19463
+ cursor: "not-allowed"
19464
+ }
19457
19465
  }
19458
19466
  }));
19459
19467
  return /* @__PURE__ */ jsx$1("button", { ref, css: [variantCss, css2, "", ""], ...props, children });
@@ -19515,10 +19523,12 @@ const SvgCloseIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg"
19515
19523
  const SvgDragHandle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 32, height: 4, viewBox: "0 0 32 4", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("rect", { width: 32, height: 4, rx: 2, fill: "black" }));
19516
19524
  const SvgFittingRoomIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 24, height: 24, viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M6.16963 1.44419C6.16963 1.16593 6.0591 0.89907 5.86234 0.702313C5.66558 0.505556 5.39872 0.39502 5.12047 0.39502C4.84221 0.39502 4.57535 0.505556 4.37859 0.702313C4.18184 0.89907 4.0713 1.16593 4.0713 1.44419C4.0713 2.31867 4.42277 3.01794 5.12047 3.54252H5.11627M5.11627 3.54252L9.29772 5.86537C9.46136 5.95625 9.59771 6.08925 9.69263 6.25058C9.78754 6.41191 9.83757 6.59569 9.83752 6.78287V7.2146C9.83752 7.49286 9.72698 7.75972 9.53023 7.95648C9.33347 8.15323 9.06661 8.26377 8.78835 8.26377H1.44419C1.16593 8.26377 0.89907 8.15323 0.702313 7.95648C0.505556 7.75972 0.39502 7.49286 0.39502 7.2146V6.78287C0.39497 6.59569 0.444998 6.41191 0.539913 6.25058C0.634829 6.08925 0.771177 5.95625 0.934816 5.86537L5.11627 3.54252Z", stroke: "currentColor", strokeWidth: 0.79, strokeLinecap: "round", strokeLinejoin: "round" }));
19517
19525
  const SvgInfoIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M6.75 9.15V6.75M6.75 4.35H6.756M12.75 6.75C12.75 10.0637 10.0637 12.75 6.75 12.75C3.43629 12.75 0.75 10.0637 0.75 6.75C0.75 3.43629 3.43629 0.75 6.75 0.75C10.0637 0.75 12.75 3.43629 12.75 6.75Z", stroke: "#757575", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
19526
+ const SvgIconLeftArrow = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 14, height: 15, viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { opacity: 0.75, d: "M7.55273 1.28613L2.98535 6.07129L2.17871 6.91699H13.5V7.75H2.17871L2.98535 8.5957L7.55273 13.3799L7.00293 13.9453L0.69043 7.33301L7.00293 0.720703L7.55273 1.28613Z", fill: "black", stroke: "black" }));
19518
19527
  const SvgLoadingCircle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 108, height: 108, viewBox: "0 0 108 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M27.1325 75.9593C25.3424 77.0549 23.0032 76.4919 21.9077 74.7018L20.2636 72.0155L18.786 69.0476L17.5726 65.9622L16.6328 62.7828L15.9737 59.5336L15.6002 56.2393L15.5153 52.925L15.7196 49.6159L16.2115 46.3373L16.9485 43.2752C17.4396 41.2348 19.4918 39.9788 21.5322 40.4699C23.5726 40.961 24.8286 43.0132 24.3375 45.0536L23.6782 47.793L23.2847 50.4154L23.1213 53.0621L23.1893 55.713L23.4879 58.3479L24.0151 60.9467L24.7668 63.4897L25.7373 65.9574L26.9191 68.3312L28.39 70.7345C29.4855 72.5246 28.9225 74.8638 27.1325 75.9593Z", fill: "black" }), /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32.542 81.0995C33.5444 79.2557 35.8518 78.5736 37.6955 79.5761L40.171 80.922L42.6022 81.9807L45.1164 82.8236L47.6945 83.4441L50.3169 83.8375L52.9636 84.0009L55.6145 83.933L58.2494 83.6343L60.8482 83.1071L63.3912 82.3554L65.8589 81.385L68.2327 80.2031L70.4945 78.8189L72.627 77.2428L74.6141 75.4868L76.4405 73.5643L78.0924 71.49L79.5573 69.2796L80.8239 66.9499L81.8827 64.5187L82.7255 62.0044L83.346 59.4264L83.7395 56.8039L83.9029 54.1572L83.8349 51.5064L83.5363 48.8715L83.0091 46.2727L82.2574 43.7297L81.2869 41.2619L80.1051 38.8882L78.7208 36.6263L77.1447 34.4938L75.3888 32.5068L73.4662 30.6803L71.392 29.0284L69.1815 27.5636L66.8518 26.297L64.4206 25.2382L61.9064 24.3954L59.3283 23.7749L56.7059 23.3814L54.0592 23.218L51.4083 23.2859L48.7734 23.5846L46.1747 24.1118L43.6316 24.8635L41.1639 25.834L38.7901 27.0158L36.5283 28.4001L34.3958 29.9762L32.4088 31.7321L30.4681 33.7749C29.0225 35.2964 26.6173 35.358 25.0958 33.9125C23.5743 32.467 23.5127 30.0618 24.9582 28.5403L27.1274 26.2569L29.6118 24.0615L32.278 22.0909L35.1058 20.3603L38.0737 18.8826L41.1591 17.6693L44.3385 16.7295L47.5877 16.0704L50.882 15.6969L54.1963 15.612L57.5054 15.8163L60.7841 16.3082L64.0074 17.084L67.1509 18.1378L70.1905 19.4615L73.1032 21.0451L75.8669 22.8766L78.4603 24.942L80.8639 27.2255L83.0594 29.7098L85.0299 32.376L86.7606 35.2039L88.2382 38.1718L89.4516 41.2571L90.3914 44.4365L91.0505 47.6857L91.424 50.98L91.5089 54.2943L91.3046 57.6034L90.8127 60.8821L90.0369 64.1055L88.9831 67.2489L87.6594 70.2886L86.0757 73.2013L84.2443 75.9649L82.1789 78.5584L79.8954 80.962L77.4111 83.1574L74.7448 85.128L71.917 86.8587L68.9491 88.3363L65.8637 89.5496L62.6843 90.4894L59.4351 91.1486L56.1408 91.522L52.8265 91.6069L49.5175 91.4026L46.2388 90.9107L43.0154 90.1349L39.872 89.0811L36.8323 87.7574L34.0653 86.253C32.2216 85.2506 31.5395 82.9432 32.542 81.0995Z", fill: "black", fillOpacity: 0.45 }));
19519
19528
  const SvgIconSelectedItems = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 25, height: 25, viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M1.00024 18.125L12.4169 23.8333L23.8336 18.125M1.00024 12.4167L12.4169 18.125L23.8336 12.4167M12.4169 1L1.00024 6.70833L12.4169 12.4167L23.8336 6.70833L12.4169 1Z", stroke: "#1E1E1E", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }));
19520
19529
  const SvgTfrIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 12, height: 24, viewBox: "0 0 12 24", fill: "#21201F", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M11.9082 4.0752V19.8516L0.161133 22.8545V1.05859L11.9082 4.0752ZM9.31836 10.8525C8.96951 10.8525 8.68661 11.206 8.68652 11.6416C8.68652 12.0773 8.96946 12.4307 9.31836 12.4307C9.6671 12.4304 9.9502 12.0771 9.9502 11.6416C9.95011 11.2062 9.66705 10.8528 9.31836 10.8525Z" }));
19521
19530
  const SvgTfrName = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 1584, height: 245, viewBox: "0 0 1584 245", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M131.362 34.4131V210.725L0 244.291V0.708984L131.362 34.4131ZM110.354 110.164C106.453 110.164 103.29 114.111 103.29 118.979C103.29 123.848 106.453 127.795 110.354 127.795C114.256 127.795 117.419 123.848 117.419 118.979C117.419 114.111 114.256 110.164 110.354 110.164Z", fill: "#265A64" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M175.848 76.9219V60.8636H271.533V76.9219H232.957V184.5H214.363V76.9219H175.848ZM309.279 129.443V184.5H291.229V60.8636H309.038V106.865H310.185C312.358 101.875 315.678 97.9103 320.146 94.9723C324.613 92.0343 330.449 90.5653 337.653 90.5653C344.012 90.5653 349.566 91.8733 354.315 94.4893C359.104 97.1053 362.807 101.009 365.423 106.201C368.079 111.353 369.407 117.792 369.407 125.519V184.5H351.356V127.692C351.356 120.891 349.606 115.619 346.104 111.876C342.603 108.093 337.733 106.201 331.495 106.201C327.229 106.201 323.406 107.107 320.025 108.918C316.684 110.729 314.048 113.385 312.116 116.886C310.225 120.348 309.279 124.533 309.279 129.443ZM433.459 186.371C424.323 186.371 416.455 184.42 409.854 180.516C403.294 176.571 398.223 171.038 394.641 163.914C391.1 156.75 389.329 148.359 389.329 138.74C389.329 129.242 391.1 120.871 394.641 113.626C398.223 106.382 403.214 100.728 409.613 96.6626C416.052 92.5978 423.578 90.5653 432.191 90.5653C437.423 90.5653 442.494 91.4306 447.404 93.1612C452.314 94.8918 456.721 97.6084 460.625 101.311C464.529 105.014 467.608 109.823 469.861 115.739C472.115 121.615 473.242 128.759 473.242 137.17V143.57H399.531V130.047H455.554C455.554 125.298 454.588 121.092 452.656 117.43C450.724 113.727 448.008 110.809 444.506 108.676C441.045 106.543 436.98 105.477 432.312 105.477C427.241 105.477 422.814 106.724 419.031 109.219C415.288 111.674 412.39 114.894 410.337 118.879C408.325 122.823 407.319 127.109 407.319 131.737V142.302C407.319 148.5 408.406 153.772 410.579 158.119C412.792 162.465 415.871 165.786 419.815 168.08C423.759 170.333 428.368 171.46 433.64 171.46C437.061 171.46 440.18 170.977 442.997 170.011C445.814 169.005 448.249 167.516 450.302 165.544C452.354 163.572 453.924 161.137 455.011 158.239L472.095 161.318C470.727 166.349 468.272 170.756 464.73 174.539C461.229 178.282 456.822 181.2 451.509 183.293C446.237 185.345 440.22 186.371 433.459 186.371ZM539.709 184.5V60.8636H616.378V76.9219H558.363V114.592H610.884V130.59H558.363V184.5H539.709ZM637.869 184.5V91.7727H655.92V184.5H637.869ZM646.985 77.4652C643.846 77.4652 641.149 76.4188 638.896 74.326C636.682 72.1929 635.575 69.6574 635.575 66.7195C635.575 63.7412 636.682 61.2057 638.896 59.1129C641.149 56.9799 643.846 55.9133 646.985 55.9133C650.124 55.9133 652.801 56.9799 655.014 59.1129C657.268 61.2057 658.395 63.7412 658.395 66.7195C658.395 69.6574 657.268 72.1929 655.014 74.326C652.801 76.4188 650.124 77.4652 646.985 77.4652ZM723.488 91.7727V106.261H672.838V91.7727H723.488ZM686.421 69.5568H704.472V157.273C704.472 160.775 704.995 163.411 706.041 165.182C707.088 166.912 708.436 168.1 710.086 168.744C711.776 169.347 713.608 169.649 715.58 169.649C717.029 169.649 718.296 169.549 719.383 169.347C720.47 169.146 721.315 168.985 721.918 168.864L725.178 183.776C724.132 184.178 722.643 184.58 720.711 184.983C718.779 185.426 716.364 185.667 713.467 185.707C708.718 185.788 704.291 184.943 700.186 183.172C696.08 181.401 692.76 178.664 690.225 174.962C687.689 171.259 686.421 166.611 686.421 161.016V69.5568ZM786.74 91.7727V106.261H736.09V91.7727H786.74ZM749.673 69.5568H767.724V157.273C767.724 160.775 768.247 163.411 769.293 165.182C770.34 166.912 771.688 168.1 773.338 168.744C775.028 169.347 776.86 169.649 778.832 169.649C780.281 169.649 781.548 169.549 782.635 169.347C783.722 169.146 784.567 168.985 785.17 168.864L788.43 183.776C787.384 184.178 785.895 184.58 783.963 184.983C782.031 185.426 779.616 185.667 776.719 185.707C771.97 185.788 767.543 184.943 763.437 183.172C759.332 181.401 756.012 178.664 753.477 174.962C750.941 171.259 749.673 166.611 749.673 161.016V69.5568ZM806.707 184.5V91.7727H824.758V184.5H806.707ZM815.823 77.4652C812.684 77.4652 809.987 76.4188 807.733 74.326C805.52 72.1929 804.413 69.6574 804.413 66.7195C804.413 63.7412 805.52 61.2057 807.733 59.1129C809.987 56.9799 812.684 55.9133 815.823 55.9133C818.962 55.9133 821.639 56.9799 823.852 59.1129C826.106 61.2057 827.233 63.7412 827.233 66.7195C827.233 69.6574 826.106 72.1929 823.852 74.326C821.639 76.4188 818.962 77.4652 815.823 77.4652ZM867.092 129.443V184.5H849.041V91.7727H866.367V106.865H867.514C869.647 101.955 872.988 98.0109 877.535 95.0327C882.124 92.0544 887.899 90.5653 894.861 90.5653C901.18 90.5653 906.714 91.8935 911.463 94.5497C916.212 97.1657 919.895 101.07 922.511 106.261C925.127 111.453 926.435 117.872 926.435 125.519V184.5H908.384V127.692C908.384 120.971 906.633 115.719 903.132 111.936C899.631 108.113 894.821 106.201 888.704 106.201C884.518 106.201 880.795 107.107 877.535 108.918C874.316 110.729 871.76 113.385 869.869 116.886C868.017 120.348 867.092 124.533 867.092 129.443ZM989.521 221.205C982.156 221.205 975.817 220.239 970.504 218.307C965.232 216.375 960.926 213.819 957.585 210.64C954.245 207.46 951.749 203.979 950.099 200.196L965.614 193.797C966.701 195.568 968.15 197.439 969.961 199.411C971.812 201.424 974.307 203.134 977.447 204.543C980.626 205.951 984.711 206.656 989.702 206.656C996.544 206.656 1002.2 204.985 1006.67 201.645C1011.13 198.345 1013.37 193.072 1013.37 185.828V167.597H1012.22C1011.13 169.569 1009.56 171.762 1007.51 174.177C1005.5 176.592 1002.72 178.684 999.18 180.455C995.638 182.226 991.03 183.112 985.355 183.112C978.03 183.112 971.43 181.401 965.554 177.98C959.718 174.519 955.09 169.428 951.669 162.707C948.288 155.945 946.598 147.634 946.598 137.774C946.598 127.914 948.268 119.462 951.609 112.419C954.989 105.376 959.618 99.983 965.494 96.2401C971.37 92.4569 978.03 90.5653 985.476 90.5653C991.231 90.5653 995.879 91.5312 999.421 93.4631C1002.96 95.3546 1005.72 97.5682 1007.69 100.104C1009.7 102.639 1011.25 104.873 1012.34 106.805H1013.67V91.7727H1031.36V186.553C1031.36 194.521 1029.51 201.061 1025.8 206.173C1022.1 211.284 1017.09 215.067 1010.77 217.522C1004.49 219.977 997.409 221.205 989.521 221.205ZM989.339 168.14C994.531 168.14 998.918 166.933 1002.5 164.518C1006.12 162.063 1008.86 158.561 1010.71 154.013C1012.6 149.425 1013.55 143.932 1013.55 137.533C1013.55 131.295 1012.62 125.801 1010.77 121.052C1008.92 116.303 1006.2 112.6 1002.62 109.944C999.039 107.247 994.612 105.899 989.339 105.899C983.906 105.899 979.379 107.308 975.756 110.125C972.134 112.902 969.397 116.685 967.546 121.474C965.735 126.264 964.83 131.616 964.83 137.533C964.83 143.61 965.755 148.942 967.606 153.531C969.458 158.119 972.195 161.701 975.817 164.276C979.479 166.852 983.987 168.14 989.339 168.14ZM1102 184.5V60.8636H1146.07C1155.65 60.8636 1163.6 62.5137 1169.92 65.8139C1176.28 69.1141 1181.03 73.6821 1184.17 79.5178C1187.31 85.3132 1188.88 92.0142 1188.88 99.6207C1188.88 107.187 1187.29 113.848 1184.11 119.603C1180.97 125.318 1176.22 129.765 1169.86 132.945C1163.54 136.124 1155.59 137.714 1146.01 137.714H1112.63V121.656H1144.32C1150.36 121.656 1155.27 120.79 1159.05 119.06C1162.88 117.329 1165.67 114.814 1167.44 111.513C1169.21 108.213 1170.1 104.249 1170.1 99.6207C1170.1 94.9522 1169.19 90.9074 1167.38 87.4865C1165.61 84.0656 1162.82 81.4496 1158.99 79.6385C1155.21 77.7872 1150.24 76.8615 1144.08 76.8615H1120.66V184.5H1102ZM1163.04 128.719L1193.58 184.5H1172.33L1142.39 128.719H1163.04ZM1248.02 186.371C1239.33 186.371 1231.74 184.379 1225.26 180.395C1218.78 176.411 1213.75 170.836 1210.17 163.673C1206.59 156.509 1204.8 148.138 1204.8 138.559C1204.8 128.94 1206.59 120.529 1210.17 113.325C1213.75 106.12 1218.78 100.526 1225.26 96.5419C1231.74 92.5575 1239.33 90.5653 1248.02 90.5653C1256.72 90.5653 1264.3 92.5575 1270.78 96.5419C1277.26 100.526 1282.29 106.12 1285.87 113.325C1289.46 120.529 1291.25 128.94 1291.25 138.559C1291.25 148.138 1289.46 156.509 1285.87 163.673C1282.29 170.836 1277.26 176.411 1270.78 180.395C1264.3 184.379 1256.72 186.371 1248.02 186.371ZM1248.08 171.219C1253.72 171.219 1258.39 169.73 1262.09 166.751C1265.79 163.773 1268.53 159.809 1270.3 154.859C1272.11 149.908 1273.01 144.455 1273.01 138.499C1273.01 132.582 1272.11 127.149 1270.3 122.199C1268.53 117.208 1265.79 113.204 1262.09 110.185C1258.39 107.167 1253.72 105.658 1248.08 105.658C1242.41 105.658 1237.7 107.167 1233.96 110.185C1230.25 113.204 1227.5 117.208 1225.69 122.199C1223.91 127.149 1223.03 132.582 1223.03 138.499C1223.03 144.455 1223.91 149.908 1225.69 154.859C1227.5 159.809 1230.25 163.773 1233.96 166.751C1237.7 169.73 1242.41 171.219 1248.08 171.219ZM1350.45 186.371C1341.76 186.371 1334.17 184.379 1327.69 180.395C1321.21 176.411 1316.18 170.836 1312.6 163.673C1309.02 156.509 1307.23 148.138 1307.23 138.559C1307.23 128.94 1309.02 120.529 1312.6 113.325C1316.18 106.12 1321.21 100.526 1327.69 96.5419C1334.17 92.5575 1341.76 90.5653 1350.45 90.5653C1359.15 90.5653 1366.73 92.5575 1373.21 96.5419C1379.69 100.526 1384.72 106.12 1388.31 113.325C1391.89 120.529 1393.68 128.94 1393.68 138.559C1393.68 148.138 1391.89 156.509 1388.31 163.673C1384.72 170.836 1379.69 176.411 1373.21 180.395C1366.73 184.379 1359.15 186.371 1350.45 186.371ZM1350.51 171.219C1356.15 171.219 1360.82 169.73 1364.52 166.751C1368.22 163.773 1370.96 159.809 1372.73 154.859C1374.54 149.908 1375.45 144.455 1375.45 138.499C1375.45 132.582 1374.54 127.149 1372.73 122.199C1370.96 117.208 1368.22 113.204 1364.52 110.185C1360.82 107.167 1356.15 105.658 1350.51 105.658C1344.84 105.658 1340.13 107.167 1336.39 110.185C1332.68 113.204 1329.93 117.208 1328.12 122.199C1326.35 127.149 1325.46 132.582 1325.46 138.499C1325.46 144.455 1326.35 149.908 1328.12 154.859C1329.93 159.809 1332.68 163.773 1336.39 166.751C1340.13 169.73 1344.84 171.219 1350.51 171.219ZM1413.83 184.5V91.7727H1431.15V106.865H1432.3C1434.23 101.754 1437.39 97.7694 1441.78 94.9119C1446.16 92.0142 1451.42 90.5653 1457.53 90.5653C1463.73 90.5653 1468.92 92.0142 1473.11 94.9119C1477.33 97.8097 1480.45 101.794 1482.47 106.865H1483.43C1485.65 101.915 1489.17 97.9706 1494 95.0327C1498.83 92.0544 1504.58 90.5653 1511.26 90.5653C1519.67 90.5653 1526.54 93.2015 1531.85 98.4737C1537.2 103.746 1539.88 111.695 1539.88 122.32V184.5H1521.83V124.01C1521.83 117.732 1520.12 113.184 1516.7 110.366C1513.27 107.549 1509.19 106.141 1504.44 106.141C1498.56 106.141 1494 107.952 1490.74 111.574C1487.48 115.156 1485.85 119.764 1485.85 125.398V184.5H1467.86V122.863C1467.86 117.832 1466.29 113.787 1463.15 110.729C1460.01 107.67 1455.92 106.141 1450.89 106.141C1447.47 106.141 1444.31 107.046 1441.42 108.857C1438.56 110.628 1436.24 113.103 1434.47 116.283C1432.74 119.462 1431.88 123.145 1431.88 127.33V184.5H1413.83Z", fill: "#265A64" }));
19531
+ const SvgIconTuck = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 18, height: 23, viewBox: "0 0 18 23", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M4.5 12.65V4.39875L1.60313 7.36L0 5.75L5.625 0L11.25 5.75L9.64687 7.36L6.75 4.39875V12.65H4.5ZM12.375 23L6.75 17.25L8.35313 15.64L11.25 18.6013V10.35H13.5V18.6013L16.3969 15.64L18 17.25L12.375 23Z", fill: "#21201F" }));
19522
19532
  const SvgIconZoom = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M19 19L14.65 14.65M9 6V12M6 9H12M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z", stroke: "#1E1E1E", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }));
19523
19533
  let baseUrl$1;
19524
19534
  function _init$5() {
@@ -41200,7 +41210,8 @@ async function _init$4() {
41200
41210
  }
41201
41211
  {
41202
41212
  const auth = getAuth(firebaseApp);
41203
- auth.setPersistence(browserLocalPersistence);
41213
+ await auth.setPersistence(browserLocalPersistence);
41214
+ await auth.authStateReady();
41204
41215
  authManager = new AuthManager(auth, brandId);
41205
41216
  }
41206
41217
  }
@@ -41798,9 +41809,10 @@ function buildAlternateOutfits(primary, lastAddedResolved) {
41798
41809
  }
41799
41810
  function AvatarControls({
41800
41811
  selectedItems,
41801
- hasTuckable,
41812
+ canTuck,
41802
41813
  forceUntuck,
41803
41814
  zoomed,
41815
+ expanded,
41804
41816
  onToggleUntuck,
41805
41817
  onToggleZoom,
41806
41818
  onRemoveItem
@@ -41847,13 +41859,31 @@ function AvatarControls({
41847
41859
  textTransform: "uppercase",
41848
41860
  cursor: "pointer",
41849
41861
  userSelect: "none",
41850
- WebkitUserSelect: "none"
41862
+ WebkitUserSelect: "none",
41863
+ transition: "padding 500ms cubic-bezier(0.22, 1, 0.36, 1), gap 500ms cubic-bezier(0.22, 1, 0.36, 1)"
41864
+ },
41865
+ pillCollapsed: {
41866
+ padding: "8px",
41867
+ gap: 0
41851
41868
  },
41852
41869
  pillIcon: {
41853
41870
  width: "14px",
41854
41871
  height: "14px",
41855
41872
  flex: "none"
41856
41873
  },
41874
+ pillLabel: {
41875
+ overflow: "hidden",
41876
+ whiteSpace: "nowrap",
41877
+ maxWidth: "200px",
41878
+ // No opacity transition — animating opacity alongside the max-width
41879
+ // clip rendered the text at fractional opacity while it reflowed each
41880
+ // frame, which subpixel-shimmered. The max-width clip alone reveals
41881
+ // the label cleanly at full opacity.
41882
+ transition: "max-width 500ms cubic-bezier(0.22, 1, 0.36, 1)"
41883
+ },
41884
+ pillLabelCollapsed: {
41885
+ maxWidth: 0
41886
+ },
41857
41887
  popover: {
41858
41888
  position: "absolute",
41859
41889
  bottom: "calc(100% + 8px)",
@@ -41897,12 +41927,21 @@ function AvatarControls({
41897
41927
  fontSize: "14px"
41898
41928
  }
41899
41929
  }));
41930
+ const seeExpanded = expanded || popoverOpen;
41931
+ const pillCss = (isExpanded) => isExpanded ? css2.pill : {
41932
+ ...css2.pill,
41933
+ ...css2.pillCollapsed
41934
+ };
41935
+ const labelCss = (isExpanded) => isExpanded ? css2.pillLabel : {
41936
+ ...css2.pillLabel,
41937
+ ...css2.pillLabelCollapsed
41938
+ };
41900
41939
  const seePill = /* @__PURE__ */ jsxs("div", { ref: popoverWrapperRef, style: {
41901
41940
  position: "relative"
41902
41941
  }, children: [
41903
- /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.pill, onClick: handleTogglePopover, children: [
41942
+ /* @__PURE__ */ jsxs(Button, { variant: "base", css: pillCss(seeExpanded), onClick: handleTogglePopover, children: [
41904
41943
  /* @__PURE__ */ jsx$1(SvgIconSelectedItems, { css: css2.pillIcon }),
41905
- /* @__PURE__ */ jsx$1(Text, { variant: "base", children: t("fitting_room.see_selected_items") })
41944
+ /* @__PURE__ */ jsx$1(Text, { variant: "base", css: labelCss(seeExpanded), children: t("fitting_room.see_selected_items") })
41906
41945
  ] }),
41907
41946
  popoverOpen ? /* @__PURE__ */ jsx$1("div", { css: css2.popover, children: selectedItems.length === 0 ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.popoverLabel, children: t("fitting_room.no_selection") }) : selectedItems.map((item) => /* @__PURE__ */ jsxs("div", { css: css2.popoverRow, children: [
41908
41947
  item.merchantProduct?.imageUrl ? /* @__PURE__ */ jsx$1("img", { src: item.merchantProduct.imageUrl, css: css2.popoverThumb, alt: "" }) : /* @__PURE__ */ jsx$1("div", { css: css2.popoverThumb }),
@@ -41912,13 +41951,13 @@ function AvatarControls({
41912
41951
  ] });
41913
41952
  return /* @__PURE__ */ jsxs("div", { css: css2.wrapper, children: [
41914
41953
  seePill,
41915
- hasTuckable ? /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.pill, onClick: onToggleUntuck, children: [
41916
- /* @__PURE__ */ jsx$1(SvgInfoIcon, { css: css2.pillIcon }),
41917
- /* @__PURE__ */ jsx$1(Text, { variant: "base", children: t(forceUntuck ? "fitting_room.tuck_in" : "fitting_room.untuck") })
41954
+ canTuck ? /* @__PURE__ */ jsxs(Button, { variant: "base", css: pillCss(expanded), onClick: onToggleUntuck, children: [
41955
+ /* @__PURE__ */ jsx$1(SvgIconTuck, { css: css2.pillIcon }),
41956
+ /* @__PURE__ */ jsx$1(Text, { variant: "base", css: labelCss(expanded), children: t(forceUntuck ? "fitting_room.tuck_in" : "fitting_room.untuck") })
41918
41957
  ] }) : null,
41919
- /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.pill, onClick: onToggleZoom, children: [
41958
+ /* @__PURE__ */ jsxs(Button, { variant: "base", css: pillCss(expanded), onClick: onToggleZoom, children: [
41920
41959
  /* @__PURE__ */ jsx$1(SvgIconZoom, { css: css2.pillIcon }),
41921
- /* @__PURE__ */ jsx$1(Text, { variant: "base", children: t(zoomed ? "fitting_room.zoom_out" : "fitting_room.zoom_in") })
41960
+ /* @__PURE__ */ jsx$1(Text, { variant: "base", css: labelCss(expanded), children: t(zoomed ? "fitting_room.zoom_out" : "fitting_room.zoom_in") })
41922
41961
  ] })
41923
41962
  ] });
41924
41963
  }
@@ -42032,7 +42071,8 @@ function AvatarFrameViewer({
42032
42071
  function AvatarPane({
42033
42072
  frameUrls,
42034
42073
  hasSelection,
42035
- controls
42074
+ controls,
42075
+ mobileFullscreen
42036
42076
  }) {
42037
42077
  const [selectedFrameIndex, setSelectedFrameIndex] = reactExports.useState(null);
42038
42078
  const css2 = useCss((theme) => ({
@@ -42063,25 +42103,71 @@ function AvatarPane({
42063
42103
  frameImage: {
42064
42104
  width: "100%",
42065
42105
  height: "100%"
42106
+ },
42107
+ // Mobile try-on: column with the avatar pinned to the top at its 2:3
42108
+ // aspect, the bottom-background texture filling whatever's left below.
42109
+ mobileContainer: {
42110
+ width: "100%",
42111
+ height: "100%",
42112
+ display: "flex",
42113
+ flexDirection: "column",
42114
+ alignItems: "stretch",
42115
+ backgroundColor: "#FFFFFF",
42116
+ position: "relative"
42117
+ },
42118
+ mobileFrameSlot: {
42119
+ position: "relative",
42120
+ width: "100%",
42121
+ aspectRatio: "2 / 3",
42122
+ flex: "none"
42123
+ },
42124
+ bottomFiller: {
42125
+ flex: 1,
42126
+ minHeight: 0,
42127
+ backgroundColor: "#FFFFFF",
42128
+ backgroundImage: `url(${AVATAR_BOTTOM_BACKGROUND_URL})`,
42129
+ backgroundSize: "contain",
42130
+ backgroundRepeat: "repeat-y",
42131
+ backgroundPosition: "top center"
42066
42132
  }
42067
42133
  }));
42068
42134
  if (frameUrls && frameUrls.length > 0) {
42135
+ const viewer = /* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: css2.frameContainer, imageStyle: css2.frameImage, loadingT: "vto-single.avatar_loading" });
42136
+ if (mobileFullscreen) {
42137
+ return /* @__PURE__ */ jsxs("div", { css: css2.mobileContainer, children: [
42138
+ /* @__PURE__ */ jsx$1("div", { css: css2.mobileFrameSlot, children: viewer }),
42139
+ /* @__PURE__ */ jsx$1("div", { css: css2.bottomFiller, children: " " }),
42140
+ controls
42141
+ ] });
42142
+ }
42069
42143
  return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
42070
- /* @__PURE__ */ jsx$1("div", { css: css2.frameSlot, children: /* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: css2.frameContainer, imageStyle: css2.frameImage, loadingT: "vto-single.avatar_loading" }) }),
42144
+ /* @__PURE__ */ jsx$1("div", { css: css2.frameSlot, children: viewer }),
42071
42145
  controls
42072
42146
  ] });
42073
42147
  }
42074
42148
  if (hasSelection) {
42075
- return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
42076
- /* @__PURE__ */ jsx$1(Loading, { t: "vto-single.avatar_loading" }),
42077
- controls
42078
- ] });
42149
+ return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: /* @__PURE__ */ jsx$1(Loading, { t: "vto-single.avatar_loading" }) });
42079
42150
  }
42080
42151
  return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
42081
42152
  /* @__PURE__ */ jsx$1("div", { css: css2.placeholder, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "fitting_room.avatar_placeholder_empty" }) }),
42082
42153
  controls
42083
42154
  ] });
42084
42155
  }
42156
+ const ROTATION_DEG = {
42157
+ down: 0,
42158
+ up: 180,
42159
+ left: 90,
42160
+ right: -90
42161
+ };
42162
+ function Chevron({
42163
+ direction,
42164
+ size = 24
42165
+ }) {
42166
+ return /* @__PURE__ */ jsx$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", style: {
42167
+ transition: "transform 200ms ease",
42168
+ transform: `rotate(${ROTATION_DEG[direction]}deg)`
42169
+ }, children: /* @__PURE__ */ jsx$1("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
42170
+ }
42085
42171
  function ProductCard({
42086
42172
  item,
42087
42173
  availability,
@@ -42194,10 +42280,39 @@ function CardRail({
42194
42280
  group,
42195
42281
  availabilityByExternalId,
42196
42282
  onSelectItem,
42197
- onRemoveItem,
42198
- layout
42283
+ onRemoveItem
42199
42284
  }) {
42200
42285
  const [collapsed, setCollapsed] = reactExports.useState(false);
42286
+ const scrollRef = reactExports.useRef(null);
42287
+ const [canScrollLeft, setCanScrollLeft] = reactExports.useState(false);
42288
+ const [canScrollRight, setCanScrollRight] = reactExports.useState(false);
42289
+ const updateScrollState = reactExports.useCallback(() => {
42290
+ const el = scrollRef.current;
42291
+ if (!el) {
42292
+ setCanScrollLeft(false);
42293
+ setCanScrollRight(false);
42294
+ return;
42295
+ }
42296
+ setCanScrollLeft(el.scrollLeft > 1);
42297
+ setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
42298
+ }, []);
42299
+ reactExports.useLayoutEffect(() => {
42300
+ if (collapsed) return;
42301
+ const el = scrollRef.current;
42302
+ if (!el) return;
42303
+ updateScrollState();
42304
+ const observer = new ResizeObserver(updateScrollState);
42305
+ observer.observe(el);
42306
+ return () => observer.disconnect();
42307
+ }, [collapsed, group.items, updateScrollState]);
42308
+ const scrollByPage = reactExports.useCallback((dir) => {
42309
+ const el = scrollRef.current;
42310
+ if (!el) return;
42311
+ el.scrollBy({
42312
+ left: dir * el.clientWidth * 0.8,
42313
+ behavior: "smooth"
42314
+ });
42315
+ }, []);
42201
42316
  const css2 = useCss((theme) => ({
42202
42317
  container: {
42203
42318
  display: "flex",
@@ -42207,39 +42322,79 @@ function CardRail({
42207
42322
  header: {
42208
42323
  display: "flex",
42209
42324
  alignItems: "center",
42210
- justifyContent: "space-between",
42325
+ justifyContent: "flex-start",
42326
+ gap: "6px",
42211
42327
  padding: "8px 0",
42212
- borderBottom: `1px solid ${theme.color_fg_text}`
42328
+ width: "100%"
42213
42329
  },
42214
42330
  headerLabel: {
42215
- fontSize: "12px",
42216
- fontWeight: "600",
42331
+ fontSize: "14px",
42332
+ fontWeight: "400",
42217
42333
  letterSpacing: "0.5px",
42218
42334
  textTransform: "uppercase"
42219
42335
  },
42220
42336
  chevron: {
42221
- fontSize: "12px"
42337
+ display: "inline-flex",
42338
+ alignItems: "center",
42339
+ color: theme.color_fg_text,
42340
+ flex: "none"
42341
+ },
42342
+ scrollWrapper: {
42343
+ position: "relative"
42222
42344
  },
42223
42345
  horizontal: {
42224
42346
  display: "flex",
42225
42347
  flexDirection: "row",
42226
42348
  gap: "8px",
42227
42349
  overflowX: "auto",
42228
- padding: "4px 0"
42350
+ padding: "4px 0",
42351
+ // Native scrollbar hidden — the chevron handles are the affordance.
42352
+ scrollbarWidth: "none",
42353
+ "&::-webkit-scrollbar": {
42354
+ display: "none"
42355
+ }
42229
42356
  },
42230
- grid: {
42231
- display: "grid",
42232
- gridTemplateColumns: "repeat(2, 1fr)",
42233
- gap: "8px",
42234
- padding: "4px 0"
42357
+ scrollHandle: {
42358
+ position: "absolute",
42359
+ top: "4px",
42360
+ bottom: "4px",
42361
+ width: "32px",
42362
+ padding: 0,
42363
+ display: "flex",
42364
+ alignItems: "center",
42365
+ justifyContent: "center",
42366
+ // A grey tint (not pure white) so the handle stays visible even when
42367
+ // it overlaps a product image with a white background.
42368
+ backgroundColor: "rgba(228, 228, 228, 0.62)",
42369
+ border: "none",
42370
+ cursor: "pointer",
42371
+ color: theme.color_fg_text,
42372
+ zIndex: 2
42373
+ },
42374
+ scrollHandleLeft: {
42375
+ left: 0
42376
+ },
42377
+ scrollHandleRight: {
42378
+ right: 0
42235
42379
  }
42236
42380
  }));
42381
+ const cards = group.items.map((item) => /* @__PURE__ */ jsx$1(ProductCard, { item, availability: availabilityByExternalId[item.externalId] ?? "disabled", onClick: () => onSelectItem(item.externalId), onRemove: () => onRemoveItem(item.externalId) }, item.externalId));
42237
42382
  return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
42238
42383
  /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.header, onClick: () => setCollapsed((c) => !c), children: [
42239
42384
  /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.headerLabel, children: group.group.label }),
42240
- /* @__PURE__ */ jsx$1("span", { css: css2.chevron, children: collapsed ? "" : "" })
42385
+ /* @__PURE__ */ jsx$1("span", { css: css2.chevron, children: /* @__PURE__ */ jsx$1(Chevron, { direction: collapsed ? "down" : "up" }) })
42241
42386
  ] }),
42242
- collapsed ? null : /* @__PURE__ */ jsx$1("div", { css: layout === "horizontal" ? css2.horizontal : css2.grid, children: group.items.map((item) => /* @__PURE__ */ jsx$1(ProductCard, { item, availability: availabilityByExternalId[item.externalId] ?? "disabled", onClick: () => onSelectItem(item.externalId), onRemove: () => onRemoveItem(item.externalId) }, item.externalId)) })
42387
+ collapsed ? null : /* @__PURE__ */ jsxs("div", { css: css2.scrollWrapper, children: [
42388
+ canScrollLeft ? /* @__PURE__ */ jsx$1(Button, { variant: "base", css: /* @__PURE__ */ css$1({
42389
+ ...css2.scrollHandle,
42390
+ ...css2.scrollHandleLeft
42391
+ }, "", ""), onClick: () => scrollByPage(-1), children: /* @__PURE__ */ jsx$1(Chevron, { direction: "left", size: 20 }) }) : null,
42392
+ /* @__PURE__ */ jsx$1("div", { ref: scrollRef, css: css2.horizontal, onScroll: updateScrollState, children: cards }),
42393
+ canScrollRight ? /* @__PURE__ */ jsx$1(Button, { variant: "base", css: /* @__PURE__ */ css$1({
42394
+ ...css2.scrollHandle,
42395
+ ...css2.scrollHandleRight
42396
+ }, "", ""), onClick: () => scrollByPage(1), children: /* @__PURE__ */ jsx$1(Chevron, { direction: "right", size: 20 }) }) : null
42397
+ ] })
42243
42398
  ] });
42244
42399
  }
42245
42400
  function AddToCartButton({
@@ -42414,6 +42569,7 @@ function DetailAccordionItem({
42414
42569
  isOpen,
42415
42570
  platform,
42416
42571
  forceUntuck,
42572
+ canTuck,
42417
42573
  detailMode,
42418
42574
  isMobileQuickRow,
42419
42575
  onToggleOpen,
@@ -42446,7 +42602,7 @@ function DetailAccordionItem({
42446
42602
  }, [productData, item.storage.colorwaySizeAssetId]);
42447
42603
  const categoryLabel = item.styleCategory?.label_singular ?? item.styleCategory?.label ?? "";
42448
42604
  const productName = item.merchantProduct?.productName ?? item.externalId;
42449
- const tuckable = !!item.styleCategory?.tuckable;
42605
+ const tuckable = !!item.styleCategory?.tuckable && canTuck;
42450
42606
  if (platform === "desktop") {
42451
42607
  return /* @__PURE__ */ jsx$1(DesktopAccordionItem, { isOpen, categoryLabel, productData, currentPrice, selectedSizeLabel, onToggleOpen, onChangeSize, onAddToCart });
42452
42608
  }
@@ -42462,39 +42618,44 @@ function DesktopAccordionItem({
42462
42618
  onChangeSize,
42463
42619
  onAddToCart
42464
42620
  }) {
42621
+ const ACCORDION_SHADE = "#F4F4F4";
42465
42622
  const css2 = useCss((theme) => ({
42466
42623
  container: {
42467
42624
  display: "flex",
42468
- flexDirection: "column",
42469
- borderBottom: `1px solid ${theme.color_fg_text}`
42625
+ flexDirection: "column"
42470
42626
  },
42471
42627
  header: {
42472
42628
  display: "flex",
42473
42629
  alignItems: "center",
42474
42630
  justifyContent: "space-between",
42475
- padding: "14px 4px",
42631
+ padding: "14px 20px",
42476
42632
  width: "100%",
42477
- gap: "8px"
42633
+ gap: "8px",
42634
+ backgroundColor: ACCORDION_SHADE
42478
42635
  },
42479
42636
  categoryLabel: {
42480
- fontSize: "12px",
42481
- fontWeight: "600",
42482
- letterSpacing: "0.5px",
42483
- textTransform: "uppercase"
42637
+ fontSize: "16px",
42638
+ fontWeight: "400"
42484
42639
  },
42485
42640
  chevron: {
42486
- fontSize: "12px"
42641
+ display: "inline-flex",
42642
+ alignItems: "center",
42643
+ color: theme.color_fg_text,
42644
+ flex: "none"
42487
42645
  },
42488
42646
  body: {
42489
42647
  display: "flex",
42490
42648
  flexDirection: "column",
42491
- alignItems: "center",
42492
- gap: "12px",
42493
- padding: "8px 16px 24px 16px",
42494
- textAlign: "center"
42649
+ alignItems: "stretch",
42650
+ gap: "14px",
42651
+ padding: "20px 24px 24px 24px",
42652
+ textAlign: "left",
42653
+ borderLeft: `1px solid ${ACCORDION_SHADE}`,
42654
+ borderRight: `1px solid ${ACCORDION_SHADE}`,
42655
+ borderBottom: `1px solid ${ACCORDION_SHADE}`
42495
42656
  },
42496
42657
  productName: {
42497
- fontSize: "22px",
42658
+ fontSize: "24px",
42498
42659
  lineHeight: "1.2"
42499
42660
  },
42500
42661
  price: {
@@ -42502,14 +42663,14 @@ function DesktopAccordionItem({
42502
42663
  },
42503
42664
  sizeBox: {
42504
42665
  width: "100%",
42505
- maxWidth: "320px",
42506
42666
  border: `1px solid ${theme.color_fg_text}`,
42507
42667
  padding: "20px 24px",
42508
42668
  display: "flex",
42509
42669
  flexDirection: "column",
42510
42670
  alignItems: "center",
42511
42671
  gap: "12px",
42512
- marginTop: "8px"
42672
+ marginTop: "8px",
42673
+ textAlign: "center"
42513
42674
  },
42514
42675
  recommendedSize: {
42515
42676
  fontSize: "13px",
@@ -42532,11 +42693,10 @@ function DesktopAccordionItem({
42532
42693
  },
42533
42694
  cartContainer: {
42534
42695
  width: "100%",
42535
- maxWidth: "320px",
42536
- marginTop: "16px"
42696
+ marginTop: "8px"
42537
42697
  },
42538
42698
  description: {
42539
- fontSize: "12px",
42699
+ fontSize: "13px",
42540
42700
  lineHeight: "1.5",
42541
42701
  textAlign: "left",
42542
42702
  marginTop: "8px"
@@ -42545,7 +42705,7 @@ function DesktopAccordionItem({
42545
42705
  return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
42546
42706
  /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.header, onClick: onToggleOpen, children: [
42547
42707
  /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.categoryLabel, children: categoryLabel }),
42548
- /* @__PURE__ */ jsx$1("span", { css: css2.chevron, children: isOpen ? "" : "" })
42708
+ /* @__PURE__ */ jsx$1("span", { css: css2.chevron, children: /* @__PURE__ */ jsx$1(Chevron, { direction: isOpen ? "up" : "down" }) })
42549
42709
  ] }),
42550
42710
  !isOpen ? null : /* @__PURE__ */ jsx$1("div", { css: css2.body, children: productData ? /* @__PURE__ */ jsxs(Fragment, { children: [
42551
42711
  /* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.productName, children: productData.productName }),
@@ -42587,54 +42747,74 @@ function MobileAccordionItem({
42587
42747
  const {
42588
42748
  t
42589
42749
  } = useTranslation();
42750
+ const ACCORDION_SHADE = "#EEEEEE";
42590
42751
  const css2 = useCss((theme) => ({
42591
42752
  container: {
42592
42753
  display: "flex",
42593
42754
  flexDirection: "column",
42594
- borderBottom: `1px solid ${theme.color_fg_text}`
42755
+ backgroundColor: ACCORDION_SHADE,
42756
+ borderRadius: "10px",
42757
+ overflow: "hidden"
42595
42758
  },
42596
42759
  header: {
42597
42760
  display: "flex",
42598
42761
  alignItems: "center",
42599
42762
  justifyContent: "space-between",
42600
- padding: "12px 0",
42763
+ padding: "14px 16px",
42601
42764
  width: "100%",
42602
- gap: "8px"
42765
+ gap: "8px",
42766
+ backgroundColor: "transparent"
42603
42767
  },
42604
42768
  headerLabel: {
42605
42769
  display: "flex",
42606
42770
  gap: "8px",
42607
- alignItems: "baseline"
42771
+ alignItems: "baseline",
42772
+ flex: 1,
42773
+ minWidth: 0
42608
42774
  },
42609
42775
  categoryLabel: {
42610
- fontSize: "12px",
42611
- fontWeight: "600",
42612
- letterSpacing: "0.5px",
42613
- textTransform: "uppercase"
42776
+ fontSize: "15px",
42777
+ fontWeight: "400",
42778
+ flex: "none"
42614
42779
  },
42615
42780
  productName: {
42616
- fontSize: "12px",
42617
- color: theme.color_fg_text
42781
+ fontSize: "15px",
42782
+ color: "#8A8A8A",
42783
+ overflow: "hidden",
42784
+ textOverflow: "ellipsis",
42785
+ whiteSpace: "nowrap",
42786
+ minWidth: 0
42618
42787
  },
42619
42788
  chevron: {
42620
- fontSize: "12px"
42789
+ display: "inline-flex",
42790
+ alignItems: "center",
42791
+ color: theme.color_fg_text,
42792
+ flex: "none"
42793
+ },
42794
+ content: {
42795
+ backgroundColor: "#FFFFFF",
42796
+ margin: "0 6px 6px 6px",
42797
+ borderRadius: "6px",
42798
+ padding: "16px"
42621
42799
  },
42622
42800
  body: {
42623
42801
  display: "flex",
42624
42802
  flexDirection: "column",
42625
- gap: "16px",
42626
- padding: "4px 0 16px 0"
42803
+ alignItems: "center",
42804
+ textAlign: "center",
42805
+ gap: "16px"
42627
42806
  },
42628
42807
  quickRow: {
42629
42808
  display: "flex",
42630
42809
  alignItems: "center",
42631
- gap: "12px",
42632
- padding: "8px 0"
42810
+ justifyContent: "center",
42811
+ gap: "12px"
42633
42812
  },
42634
42813
  sizeRow: {
42635
42814
  display: "flex",
42636
42815
  gap: "8px",
42637
- alignItems: "center"
42816
+ alignItems: "center",
42817
+ justifyContent: "center"
42638
42818
  },
42639
42819
  fitDetailsContainer: {
42640
42820
  width: "min(100%, 220px)"
@@ -42653,6 +42833,8 @@ function MobileAccordionItem({
42653
42833
  expandedBlock: {
42654
42834
  display: "flex",
42655
42835
  flexDirection: "column",
42836
+ alignItems: "center",
42837
+ alignSelf: "stretch",
42656
42838
  gap: "8px",
42657
42839
  marginTop: "8px"
42658
42840
  },
@@ -42664,7 +42846,10 @@ function MobileAccordionItem({
42664
42846
  fontSize: "14px"
42665
42847
  },
42666
42848
  expandedDescription: {
42667
- fontSize: "12px"
42849
+ fontSize: "12px",
42850
+ // Description stays left-aligned while every other detail is centered.
42851
+ alignSelf: "stretch",
42852
+ textAlign: "left"
42668
42853
  },
42669
42854
  tuckButton: {
42670
42855
  width: "100%",
@@ -42691,23 +42876,23 @@ function MobileAccordionItem({
42691
42876
  /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.categoryLabel, children: categoryLabel }),
42692
42877
  /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.productName, children: productName })
42693
42878
  ] }),
42694
- /* @__PURE__ */ jsx$1("span", { css: css2.chevron, children: isOpen ? "" : "" })
42879
+ /* @__PURE__ */ jsx$1("span", { css: css2.chevron, children: /* @__PURE__ */ jsx$1(Chevron, { direction: isOpen ? "up" : "down" }) })
42695
42880
  ] }),
42696
- !isOpen ? null : isMobileQuickRow ? /* @__PURE__ */ jsx$1("div", { css: css2.quickRow, children: productData ? /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData: productData, selectedSizeLabel, onChangeSize }) : null }) : /* @__PURE__ */ jsx$1("div", { css: css2.body, children: productData ? /* @__PURE__ */ jsxs(Fragment, { children: [
42881
+ isMobileQuickRow ? /* @__PURE__ */ jsx$1("div", { css: css2.content, children: /* @__PURE__ */ jsx$1("div", { css: css2.quickRow, children: productData ? /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData: productData, selectedSizeLabel, onChangeSize }) : null }) }) : !isOpen ? null : /* @__PURE__ */ jsx$1("div", { css: css2.content, children: /* @__PURE__ */ jsx$1("div", { css: css2.body, children: productData ? /* @__PURE__ */ jsxs(Fragment, { children: [
42697
42882
  /* @__PURE__ */ jsx$1("div", { css: css2.sizeRow, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData: productData, selectedSizeLabel, onChangeSize }) }),
42698
42883
  /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData: productData }),
42699
42884
  /* @__PURE__ */ jsx$1("div", { css: css2.fitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData: productData, selectedSizeLabel }) }),
42700
42885
  /* @__PURE__ */ jsx$1("div", { css: css2.buttonContainer, children: /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }) }),
42886
+ tuckable ? /* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.tuckButton, onClick: onToggleUntuck, children: t(tuckLabelKey) }) : null,
42701
42887
  /* @__PURE__ */ jsx$1(LinkT, { variant: "base", css: css2.detailsLink, t: detailMode === "compact" ? "fitting_room.view_product_details" : "fitting_room.hide_product_details", onClick: handleViewDetailsClick }),
42702
42888
  detailMode === "expanded" ? /* @__PURE__ */ jsxs("div", { css: css2.expandedBlock, children: [
42703
42889
  /* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.expandedTitle, children: productData.productName }),
42704
42890
  currentPrice ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.expandedPrice, children: currentPrice }) : null,
42705
42891
  /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.expandedDescription, children: /* @__PURE__ */ jsx$1("span", { dangerouslySetInnerHTML: {
42706
42892
  __html: productData.productDescriptionHtml
42707
- } }) }),
42708
- tuckable ? /* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.tuckButton, onClick: onToggleUntuck, children: t(tuckLabelKey) }) : null
42893
+ } }) })
42709
42894
  ] }) : null
42710
- ] }) : /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "loading" }) })
42895
+ ] }) : /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "loading" }) }) })
42711
42896
  ] });
42712
42897
  }
42713
42898
  function DetailAccordion({
@@ -42717,6 +42902,7 @@ function DetailAccordion({
42717
42902
  detailMode,
42718
42903
  isMobileQuickRow,
42719
42904
  forceUntuck,
42905
+ canTuck,
42720
42906
  onOpenItem,
42721
42907
  onChangeDetailMode,
42722
42908
  onChangeSize,
@@ -42729,13 +42915,16 @@ function DetailAccordion({
42729
42915
  flexDirection: "column"
42730
42916
  }
42731
42917
  }));
42732
- return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: items.map((item) => {
42918
+ const gap = platform === "mobile" ? "10px" : "2px";
42919
+ return /* @__PURE__ */ jsx$1("div", { css: css2.container, style: {
42920
+ gap
42921
+ }, children: items.map((item) => {
42733
42922
  const isOpen = openItemExternalId === item.externalId;
42734
- return /* @__PURE__ */ jsx$1(DetailAccordionItem, { item, isOpen, platform, detailMode, isMobileQuickRow, forceUntuck, onToggleOpen: () => onOpenItem(isOpen ? null : item.externalId), onChangeDetailMode, onChangeSize: (label) => onChangeSize(item.externalId, label), onAddToCart: () => onAddToCart(item.externalId), onToggleUntuck }, item.externalId);
42923
+ return /* @__PURE__ */ jsx$1(DetailAccordionItem, { item, isOpen, platform, detailMode, isMobileQuickRow, forceUntuck, canTuck, onToggleOpen: () => onOpenItem(isOpen ? null : item.externalId), onChangeDetailMode, onChangeSize: (label) => onChangeSize(item.externalId, label), onAddToCart: () => onAddToCart(item.externalId), onToggleUntuck }, item.externalId);
42735
42924
  }) });
42736
42925
  }
42737
42926
  const AVATAR_ASPECT_RATIO = 2 / 3;
42738
- const CONTAINER_PADDING_PX = 16;
42927
+ const EDGE_INSET_PX = 16;
42739
42928
  const AVATAR_MIN_WIDTH_PX = 240;
42740
42929
  const AVATAR_MAX_WIDTH_PX = 560;
42741
42930
  const DETAILS_MIN_WIDTH_PX = 350;
@@ -42748,6 +42937,7 @@ function DesktopLayout$1({
42748
42937
  openAccordionItemId,
42749
42938
  detailMode,
42750
42939
  forceUntuck,
42940
+ canTuck,
42751
42941
  zoomed,
42752
42942
  frameUrls,
42753
42943
  onSelectItem,
@@ -42761,14 +42951,14 @@ function DesktopLayout$1({
42761
42951
  onSignOut
42762
42952
  }) {
42763
42953
  const hasSelection = selectedItems.length > 0;
42764
- const hasTuckable = selectedItems.some((i) => i.styleCategory?.tuckable);
42954
+ const [avatarHovered, setAvatarHovered] = reactExports.useState(false);
42765
42955
  const containerRef = reactExports.useRef(null);
42766
42956
  const [avatarWidth, setAvatarWidth] = reactExports.useState(AVATAR_MIN_WIDTH_PX);
42767
42957
  reactExports.useLayoutEffect(() => {
42768
42958
  const el = containerRef.current;
42769
42959
  if (!el) return;
42770
42960
  const observer = new ResizeObserver(() => {
42771
- const availableHeightPx = el.clientHeight - CONTAINER_PADDING_PX * 2;
42961
+ const availableHeightPx = el.clientHeight;
42772
42962
  if (availableHeightPx <= 0) return;
42773
42963
  const target = Math.floor(availableHeightPx * AVATAR_ASPECT_RATIO);
42774
42964
  setAvatarWidth(Math.min(AVATAR_MAX_WIDTH_PX, Math.max(AVATAR_MIN_WIDTH_PX, target)));
@@ -42783,7 +42973,10 @@ function DesktopLayout$1({
42783
42973
  gap: "16px",
42784
42974
  width: "100%",
42785
42975
  height: "100%",
42786
- padding: `${CONTAINER_PADDING_PX}px`,
42976
+ // No padding — the avatar column sits flush to the overlay's top,
42977
+ // left and bottom edges. The detail and rails columns carry their own
42978
+ // edge insets instead.
42979
+ padding: 0,
42787
42980
  boxSizing: "border-box",
42788
42981
  overflow: "hidden"
42789
42982
  },
@@ -42791,40 +42984,65 @@ function DesktopLayout$1({
42791
42984
  minWidth: 0,
42792
42985
  minHeight: 0
42793
42986
  },
42987
+ // detail/rails paddingTop values are tuned so the first accordion title
42988
+ // ("Top") and the first card-rail header ("TOPS") sit on the same line:
42989
+ // 20 + 14 (detail header pad) == 26 + 8 (rail header pad) == 34px.
42794
42990
  detailColumn: {
42795
42991
  minWidth: 0,
42796
42992
  minHeight: 0,
42797
42993
  overflowY: "auto",
42798
- padding: "0 8px"
42994
+ padding: `20px 8px ${EDGE_INSET_PX}px`
42799
42995
  },
42800
42996
  railsColumn: {
42997
+ position: "relative",
42801
42998
  minWidth: 0,
42802
42999
  minHeight: 0,
42803
43000
  overflowY: "auto",
42804
43001
  display: "flex",
42805
43002
  flexDirection: "column",
42806
43003
  gap: "24px",
42807
- padding: "0 8px"
43004
+ padding: `26px ${EDGE_INSET_PX}px ${EDGE_INSET_PX}px 8px`
42808
43005
  },
42809
- railsHeader: {
42810
- display: "flex",
42811
- justifyContent: "flex-end",
42812
- paddingBottom: "4px"
43006
+ // Sign-out is overlaid on the top-right corner of the rails column so it
43007
+ // shares a row with the first card-rail header rather than reserving its
43008
+ // own row. It scrolls away with the content, which is fine — it only
43009
+ // needs to overlap that first header.
43010
+ signOutWrapper: {
43011
+ position: "absolute",
43012
+ // Near the overlay top, partially overlapping the first card-rail
43013
+ // header row below it.
43014
+ top: "15px",
43015
+ right: "24px",
43016
+ zIndex: 3,
43017
+ display: "inline-flex",
43018
+ alignItems: "center",
43019
+ gap: "8px",
43020
+ cursor: "pointer",
43021
+ color: _theme.color_tfr_800
43022
+ },
43023
+ signOutIcon: {
43024
+ width: "12px",
43025
+ height: "22px",
43026
+ fill: _theme.color_tfr_800,
43027
+ flex: "none"
42813
43028
  },
42814
43029
  signOut: {
42815
- fontSize: "12px",
42816
- letterSpacing: "0.3px"
43030
+ color: _theme.color_tfr_800,
43031
+ fontSize: "14px"
42817
43032
  }
42818
43033
  }));
42819
- const controls = hasSelection ? /* @__PURE__ */ jsx$1(AvatarControls, { selectedItems, hasTuckable, forceUntuck, zoomed, onToggleUntuck, onToggleZoom, onRemoveItem }) : null;
43034
+ const controls = hasSelection ? /* @__PURE__ */ jsx$1(AvatarControls, { selectedItems, canTuck, forceUntuck, zoomed, expanded: avatarHovered, onToggleUntuck, onToggleZoom, onRemoveItem }) : null;
42820
43035
  return /* @__PURE__ */ jsxs("div", { ref: containerRef, css: css2.container, style: {
42821
43036
  gridTemplateColumns
42822
43037
  }, children: [
42823
- /* @__PURE__ */ jsx$1("div", { css: css2.avatarColumn, children: /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection, frameUrls, controls }) }),
42824
- !zoomed && hasSelection ? /* @__PURE__ */ jsx$1("div", { css: css2.detailColumn, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "desktop", detailMode, isMobileQuickRow: false, forceUntuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck }) }) : null,
43038
+ /* @__PURE__ */ jsx$1("div", { css: css2.avatarColumn, onMouseEnter: () => setAvatarHovered(true), onMouseLeave: () => setAvatarHovered(false), children: /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection, frameUrls, controls }) }),
43039
+ !zoomed && hasSelection ? /* @__PURE__ */ jsx$1("div", { css: css2.detailColumn, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "desktop", detailMode, isMobileQuickRow: false, forceUntuck, canTuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck }) }) : null,
42825
43040
  !zoomed ? /* @__PURE__ */ jsxs("div", { css: css2.railsColumn, children: [
42826
- /* @__PURE__ */ jsx$1("div", { css: css2.railsHeader, children: /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.signOut, t: "fitting_room.sign_out", onClick: onSignOut }) }),
42827
- resolved.groups.map((group) => /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem, layout: "horizontal" }, group.group.name))
43041
+ /* @__PURE__ */ jsxs("span", { css: css2.signOutWrapper, onClick: onSignOut, children: [
43042
+ /* @__PURE__ */ jsx$1(SvgTfrIcon, { css: css2.signOutIcon }),
43043
+ /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.signOut, t: "fitting_room.sign_out" })
43044
+ ] }),
43045
+ resolved.groups.map((group) => /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem }, group.group.name))
42828
43046
  ] }) : null
42829
43047
  ] });
42830
43048
  }
@@ -42836,6 +43054,7 @@ function MobileLayout$1({
42836
43054
  openAccordionItemId,
42837
43055
  detailMode,
42838
43056
  forceUntuck,
43057
+ canTuck,
42839
43058
  frameUrls,
42840
43059
  sheetSnap,
42841
43060
  sheetTouchStart,
@@ -42852,7 +43071,7 @@ function MobileLayout$1({
42852
43071
  if (mode === "browse") {
42853
43072
  return /* @__PURE__ */ jsx$1(BrowseView, { resolved, availabilityByExternalId, selectedCount: selectedItems.length, onSelectItem, onRemoveItem, onTryItOn });
42854
43073
  }
42855
- return /* @__PURE__ */ jsx$1(TryOnView, { selectedItems, openAccordionItemId, detailMode, forceUntuck, frameUrls, sheetSnap, sheetTouchStart, onBackToBrowse, onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck });
43074
+ return /* @__PURE__ */ jsx$1(TryOnView, { selectedItems, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, sheetSnap, sheetTouchStart, onBackToBrowse, onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck });
42856
43075
  }
42857
43076
  function BrowseView({
42858
43077
  resolved,
@@ -42885,8 +43104,8 @@ function BrowseView({
42885
43104
  }
42886
43105
  }));
42887
43106
  return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
42888
- /* @__PURE__ */ jsx$1("div", { css: css2.railsArea, children: resolved.groups.map((group) => /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem, layout: "grid" }, group.group.name)) }),
42889
- /* @__PURE__ */ jsx$1("div", { css: css2.bottomBar, children: /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "fitting_room.try_it_on", onClick: onTryItOn, disabled: selectedCount === 0 }) })
43107
+ /* @__PURE__ */ jsx$1("div", { css: css2.railsArea, children: resolved.groups.map((group) => /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem }, group.group.name)) }),
43108
+ resolved.groups.length > 0 ? /* @__PURE__ */ jsx$1("div", { css: css2.bottomBar, children: /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "fitting_room.try_it_on", onClick: onTryItOn, disabled: selectedCount === 0 }) }) : null
42890
43109
  ] });
42891
43110
  }
42892
43111
  function TryOnView({
@@ -42894,6 +43113,7 @@ function TryOnView({
42894
43113
  openAccordionItemId,
42895
43114
  detailMode,
42896
43115
  forceUntuck,
43116
+ canTuck,
42897
43117
  frameUrls,
42898
43118
  sheetSnap,
42899
43119
  sheetTouchStart,
@@ -42942,25 +43162,29 @@ function TryOnView({
42942
43162
  zIndex: 2
42943
43163
  },
42944
43164
  backArrow: {
42945
- fontSize: "18px",
42946
- lineHeight: "1"
43165
+ width: "14px",
43166
+ height: "15px"
42947
43167
  },
42948
43168
  sheetOuter: {
42949
43169
  position: "absolute",
42950
- left: 0,
42951
- right: 0,
43170
+ // 8px gap to either side, matching vto-single's mobile sheet.
43171
+ left: "8px",
43172
+ right: "8px",
42952
43173
  bottom: 0,
42953
43174
  maxHeight: "85vh",
42954
43175
  backgroundColor: "rgba(255, 255, 255, 0.95)",
42955
43176
  borderTopLeftRadius: "28px",
42956
43177
  borderTopRightRadius: "28px",
42957
43178
  borderTop: "1px solid rgba(0, 0, 0, 0.1)",
43179
+ borderLeft: "1px solid rgba(0, 0, 0, 0.1)",
43180
+ borderRight: "1px solid rgba(0, 0, 0, 0.1)",
42958
43181
  transition: "height 0.4s",
42959
43182
  overflow: "hidden"
42960
43183
  },
42961
43184
  sheetInner: {
42962
43185
  width: "100%",
42963
- padding: "12px 16px 16px 16px",
43186
+ // Narrow L/R padding so the accordion fills more of the sheet width.
43187
+ padding: "12px 8px 16px 8px",
42964
43188
  display: "flex",
42965
43189
  flexDirection: "column",
42966
43190
  alignItems: "stretch",
@@ -42973,7 +43197,7 @@ function TryOnView({
42973
43197
  paddingBottom: "8px"
42974
43198
  },
42975
43199
  sheetTitle: {
42976
- fontSize: "12px",
43200
+ fontSize: "16px",
42977
43201
  fontWeight: "600",
42978
43202
  textTransform: "uppercase",
42979
43203
  letterSpacing: "0.5px",
@@ -42984,14 +43208,14 @@ function TryOnView({
42984
43208
  }
42985
43209
  }));
42986
43210
  return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
42987
- /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection: selectedItems.length > 0, frameUrls }),
42988
- /* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.backButton, onClick: onBackToBrowse, "aria-label": "Back to browse", children: /* @__PURE__ */ jsx$1("span", { css: css2.backArrow, children: "←" }) }),
43211
+ /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection: selectedItems.length > 0, frameUrls, mobileFullscreen: true }),
43212
+ /* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.backButton, onClick: onBackToBrowse, "aria-label": "Back to browse", children: /* @__PURE__ */ jsx$1(SvgIconLeftArrow, { css: css2.backArrow }) }),
42989
43213
  /* @__PURE__ */ jsx$1("div", { css: css2.sheetOuter, style: sheetStyle, children: /* @__PURE__ */ jsxs("div", { ref: innerRef, css: css2.sheetInner, style: sheetStyle, children: [
42990
43214
  /* @__PURE__ */ jsxs("div", { css: css2.sheetHandleRow, onTouchStart: sheetTouchStart, children: [
42991
43215
  /* @__PURE__ */ jsx$1(SvgDragHandle, {}),
42992
43216
  /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.sheetTitle, children: "RECOMMENDED SIZES" })
42993
43217
  ] }),
42994
- sheetSnap === "collapsed" ? null : /* @__PURE__ */ jsx$1("div", { css: css2.sheetContent, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "mobile", detailMode, isMobileQuickRow, forceUntuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck }) })
43218
+ sheetSnap === "collapsed" ? null : /* @__PURE__ */ jsx$1("div", { css: css2.sheetContent, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "mobile", detailMode, isMobileQuickRow, forceUntuck, canTuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck }) })
42995
43219
  ] }) })
42996
43220
  ] });
42997
43221
  }
@@ -43130,7 +43354,24 @@ function FittingRoomOverlay() {
43130
43354
  if (savedScrollY > 0) window.scrollTo(0, savedScrollY);
43131
43355
  };
43132
43356
  }, []);
43133
- const selectedItems = reactExports.useMemo(() => resolved.items.filter((item) => selectedExternalIds.has(item.externalId)), [resolved.items, selectedExternalIds]);
43357
+ const selectedItems = reactExports.useMemo(() => {
43358
+ const indexed = resolved.items.map((item, idx) => ({
43359
+ item,
43360
+ idx
43361
+ })).filter(({
43362
+ item
43363
+ }) => selectedExternalIds.has(item.externalId));
43364
+ indexed.sort((a, b) => {
43365
+ const aOrder = a.item.styleCategoryGroup?.display_order ?? Number.MAX_SAFE_INTEGER;
43366
+ const bOrder = b.item.styleCategoryGroup?.display_order ?? Number.MAX_SAFE_INTEGER;
43367
+ if (aOrder !== bOrder) return aOrder - bOrder;
43368
+ return a.idx - b.idx;
43369
+ });
43370
+ return indexed.map(({
43371
+ item
43372
+ }) => item);
43373
+ }, [resolved.items, selectedExternalIds]);
43374
+ const canTuck = reactExports.useMemo(() => selectedItems.some((top) => !!top.styleCategory?.tuckable && selectedItems.some((other) => !!other.styleCategory && !other.styleCategory.tuckable && other.styleCategory.layer_order > top.styleCategory.layer_order)), [selectedItems]);
43134
43375
  const availabilityByExternalId = reactExports.useMemo(() => {
43135
43376
  const out = {};
43136
43377
  for (const item of resolved.items) {
@@ -43244,20 +43485,10 @@ function FittingRoomOverlay() {
43244
43485
  setMobileMode("browse");
43245
43486
  }, []);
43246
43487
  reactExports.useEffect(() => {
43247
- if (isMobileLayout) return;
43248
- if (openAccordionItemId && selectedExternalIds.has(openAccordionItemId)) return;
43249
- if (selectedItems.length === 0) {
43250
- if (openAccordionItemId !== null) setOpenAccordionItemId(null);
43251
- return;
43252
- }
43253
- let mostRecent = null;
43254
- for (const item of selectedItems) {
43255
- if (!mostRecent || item.storage.addedAt > mostRecent.storage.addedAt) {
43256
- mostRecent = item;
43257
- }
43488
+ if (openAccordionItemId && !selectedExternalIds.has(openAccordionItemId)) {
43489
+ setOpenAccordionItemId(null);
43258
43490
  }
43259
- if (mostRecent) setOpenAccordionItemId(mostRecent.externalId);
43260
- }, [isMobileLayout, openAccordionItemId, selectedExternalIds, selectedItems]);
43491
+ }, [openAccordionItemId, selectedExternalIds]);
43261
43492
  const outfit = reactExports.useMemo(() => buildOutfit(selectedExternalIds, resolved, forceUntuck, lastAddedExternalId), [selectedExternalIds, resolved, forceUntuck, lastAddedExternalId]);
43262
43493
  reactExports.useEffect(() => {
43263
43494
  if (!userIsLoggedIn || !userHasAvatar) return;
@@ -43368,8 +43599,9 @@ function FittingRoomOverlay() {
43368
43599
  cursor: "pointer"
43369
43600
  }
43370
43601
  }));
43602
+ const isMobileTryOn = isMobileLayout && mobileMode === "try-on";
43371
43603
  const overlayStyle = {
43372
- top: `${topOffset}px`,
43604
+ top: isMobileTryOn ? 0 : `${topOffset}px`,
43373
43605
  left: 0,
43374
43606
  right: 0,
43375
43607
  bottom: 0,
@@ -43395,7 +43627,7 @@ function FittingRoomOverlay() {
43395
43627
  /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.emptyTagline, t: "landing.description" }),
43396
43628
  /* @__PURE__ */ jsx$1("div", { css: css2.emptyShopNow, children: /* @__PURE__ */ jsx$1(ButtonT, { variant: "primary", t: "fitting_room.shop_now", onClick: handleShopNow }) }),
43397
43629
  userIsLoggedIn ? /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.emptySignOut, t: "fitting_room.sign_out", onClick: handleSignOut }) : null
43398
- ] }) }) : isMobileLayout ? /* @__PURE__ */ jsx$1(MobileLayout$1, { mode: mobileMode, resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, frameUrls, sheetSnap, sheetTouchStart, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onTryItOn: handleTryItOn, onBackToBrowse: handleBackToBrowse, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck }) : /* @__PURE__ */ jsx$1(DesktopLayout$1, { resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, zoomed, frameUrls, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck, onToggleZoom: handleToggleZoom, onSignOut: handleSignOut }),
43630
+ ] }) }) : isMobileLayout ? /* @__PURE__ */ jsx$1(MobileLayout$1, { mode: mobileMode, resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, sheetSnap, sheetTouchStart, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onTryItOn: handleTryItOn, onBackToBrowse: handleBackToBrowse, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck }) : /* @__PURE__ */ jsx$1(DesktopLayout$1, { resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, canTuck, zoomed, frameUrls, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck, onToggleZoom: handleToggleZoom, onSignOut: handleSignOut }),
43399
43631
  vtoError ? /* @__PURE__ */ jsxs("div", { css: css2.snackbar, children: [
43400
43632
  /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "fitting_room.vto_error" }),
43401
43633
  /* @__PURE__ */ jsx$1("button", { css: css2.snackbarDismiss, onClick: clearVtoError, "aria-label": "Dismiss", children: "×" })
@@ -45745,9 +45977,9 @@ const SHARED_CONFIG = {
45745
45977
  appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
45746
45978
  },
45747
45979
  build: {
45748
- version: `${"5.0.20"}`,
45749
- commitHash: `${"ec50778"}`,
45750
- date: `${"2026-05-16T14:14:47.264Z"}`
45980
+ version: `${"5.0.21"}`,
45981
+ commitHash: `${"569efc2"}`,
45982
+ date: `${"2026-05-16T22:11:51.951Z"}`
45751
45983
  }
45752
45984
  };
45753
45985
  const CONFIGS = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thefittingroom/shop-ui",
3
- "version": "5.0.20",
3
+ "version": "5.0.21",
4
4
  "description": "the fitting room UI library",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",