@nok-integration/storefront-react 0.19.36 → 0.19.38

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/index.mjs CHANGED
@@ -6551,23 +6551,27 @@ function renderValue(key, pricing, format, t) {
6551
6551
  }
6552
6552
  return key === "discount" ? null : format(pricing[key]);
6553
6553
  }
6554
- const lines$1 = "_lines_dpw0l_19";
6555
- const line$2 = "_line_dpw0l_19";
6556
- const thumb$2 = "_thumb_dpw0l_34";
6557
- const image$9 = "_image_dpw0l_44";
6558
- const placeholder$8 = "_placeholder_dpw0l_51";
6559
- const lineBody = "_lineBody_dpw0l_56";
6560
- const lineText = "_lineText_dpw0l_65";
6561
- const lineTitle = "_lineTitle_dpw0l_75";
6562
- const lineMeta = "_lineMeta_dpw0l_107";
6563
- const detail$1 = "_detail_dpw0l_104";
6564
- const linePrice = "_linePrice_dpw0l_128";
6565
- const paid$3 = "_paid_dpw0l_140";
6566
- const was$4 = "_was_dpw0l_153";
6567
- const card$4 = "_card_dpw0l_176";
6568
- const cardTitle = "_cardTitle_dpw0l_184";
6569
- const cardBody = "_cardBody_dpw0l_196";
6570
- const summaryCard = "_summaryCard_dpw0l_168";
6554
+ const lines$1 = "_lines_10z1i_19";
6555
+ const line$2 = "_line_10z1i_19";
6556
+ const thumb$2 = "_thumb_10z1i_34";
6557
+ const image$9 = "_image_10z1i_44";
6558
+ const placeholder$8 = "_placeholder_10z1i_51";
6559
+ const lineBody = "_lineBody_10z1i_56";
6560
+ const lineText = "_lineText_10z1i_65";
6561
+ const lineTitle = "_lineTitle_10z1i_75";
6562
+ const lineMeta = "_lineMeta_10z1i_107";
6563
+ const detail$1 = "_detail_10z1i_104";
6564
+ const linePrice = "_linePrice_10z1i_128";
6565
+ const paid$3 = "_paid_10z1i_140";
6566
+ const was$4 = "_was_10z1i_153";
6567
+ const card$4 = "_card_10z1i_176";
6568
+ const cardTitle = "_cardTitle_10z1i_184";
6569
+ const cardBody = "_cardBody_10z1i_196";
6570
+ const summaryCard = "_summaryCard_10z1i_168";
6571
+ const itemsHeader = "_itemsHeader_10z1i_14";
6572
+ const itemsTitle = "_itemsTitle_10z1i_239";
6573
+ const itemsCount = "_itemsCount_10z1i_250";
6574
+ const cardLines = "_cardLines_10z1i_269";
6571
6575
  const styles$F = {
6572
6576
  lines: lines$1,
6573
6577
  line: line$2,
@@ -6585,7 +6589,11 @@ const styles$F = {
6585
6589
  card: card$4,
6586
6590
  cardTitle,
6587
6591
  cardBody,
6588
- summaryCard
6592
+ summaryCard,
6593
+ itemsHeader,
6594
+ itemsTitle,
6595
+ itemsCount,
6596
+ cardLines
6589
6597
  };
6590
6598
  const SUMMARY_ROWS = [{
6591
6599
  label: "Subtotal",
@@ -6665,6 +6673,29 @@ function OrderLines({ order }) {
6665
6673
  }, item2.line_ref))
6666
6674
  });
6667
6675
  }
6676
+ function OrderItemsCard({ order }) {
6677
+ const t = useT();
6678
+ const itemCount = order.items.reduce((n, i) => n + i.qty, 0);
6679
+ return jsxs("section", {
6680
+ className: styles$F.card,
6681
+ "aria-label": t("Items"),
6682
+ children: [jsxs("div", {
6683
+ className: styles$F.itemsHeader,
6684
+ children: [jsx("h2", {
6685
+ className: styles$F.itemsTitle,
6686
+ children: "Items"
6687
+ }), jsx("span", {
6688
+ className: styles$F.itemsCount,
6689
+ children: itemCount
6690
+ })]
6691
+ }), jsx("ul", {
6692
+ className: [styles$F.lines, styles$F.cardLines].join(" "),
6693
+ children: order.items.map((item2) => jsx(OrderLine, {
6694
+ item: item2
6695
+ }, item2.line_ref))
6696
+ })]
6697
+ });
6698
+ }
6668
6699
  function ShippingAddressCard({ order }) {
6669
6700
  const t = useT();
6670
6701
  return jsxs("section", {
@@ -6978,17 +7009,17 @@ function ReturnItemRow({ item: item2, className }) {
6978
7009
  })]
6979
7010
  });
6980
7011
  }
6981
- const page$6 = "_page_6yt5y_7";
6982
- const titles$2 = "_titles_6yt5y_15";
6983
- const title$k = "_title_6yt5y_15";
6984
- const subtitle$7 = "_subtitle_6yt5y_30";
6985
- const list$2 = "_list_6yt5y_38";
6986
- const card$3 = "_card_6yt5y_48";
6987
- const checkSlot = "_checkSlot_6yt5y_61";
6988
- const check = "_check_6yt5y_61";
6989
- const row$6 = "_row_6yt5y_105";
6990
- const reason = "_reason_6yt5y_119";
6991
- const reasonSet = "_reasonSet_6yt5y_137";
7012
+ const page$6 = "_page_j1rbn_7";
7013
+ const titles$2 = "_titles_j1rbn_15";
7014
+ const title$k = "_title_j1rbn_15";
7015
+ const subtitle$7 = "_subtitle_j1rbn_30";
7016
+ const list$2 = "_list_j1rbn_38";
7017
+ const card$3 = "_card_j1rbn_48";
7018
+ const checkSlot = "_checkSlot_j1rbn_61";
7019
+ const check = "_check_j1rbn_61";
7020
+ const row$6 = "_row_j1rbn_105";
7021
+ const reason = "_reason_j1rbn_130";
7022
+ const reasonSet = "_reasonSet_j1rbn_150";
6992
7023
  const styles$B = {
6993
7024
  page: page$6,
6994
7025
  titles: titles$2,
@@ -7713,7 +7744,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
7713
7744
  loading: reordering,
7714
7745
  onClick: () => void reorder(order),
7715
7746
  children: "Reorder"
7716
- }), jsx(OrderLines, {
7747
+ }), jsx(OrderItemsCard, {
7717
7748
  order
7718
7749
  }), jsx(ShippingAddressCard, {
7719
7750
  order
@@ -11609,4 +11640,4 @@ export {
11609
11640
  useToast,
11610
11641
  variantLabel
11611
11642
  };
11612
-
11643
+ //# sourceMappingURL=index.mjs.map
@@ -6551,23 +6551,27 @@ function renderValue(key, pricing, format, t) {
6551
6551
  }
6552
6552
  return key === "discount" ? null : format(pricing[key]);
6553
6553
  }
6554
- const lines$1 = "_lines_dpw0l_19";
6555
- const line$2 = "_line_dpw0l_19";
6556
- const thumb$2 = "_thumb_dpw0l_34";
6557
- const image$9 = "_image_dpw0l_44";
6558
- const placeholder$8 = "_placeholder_dpw0l_51";
6559
- const lineBody = "_lineBody_dpw0l_56";
6560
- const lineText = "_lineText_dpw0l_65";
6561
- const lineTitle = "_lineTitle_dpw0l_75";
6562
- const lineMeta = "_lineMeta_dpw0l_107";
6563
- const detail$1 = "_detail_dpw0l_104";
6564
- const linePrice = "_linePrice_dpw0l_128";
6565
- const paid$3 = "_paid_dpw0l_140";
6566
- const was$4 = "_was_dpw0l_153";
6567
- const card$4 = "_card_dpw0l_176";
6568
- const cardTitle = "_cardTitle_dpw0l_184";
6569
- const cardBody = "_cardBody_dpw0l_196";
6570
- const summaryCard = "_summaryCard_dpw0l_168";
6554
+ const lines$1 = "_lines_10z1i_19";
6555
+ const line$2 = "_line_10z1i_19";
6556
+ const thumb$2 = "_thumb_10z1i_34";
6557
+ const image$9 = "_image_10z1i_44";
6558
+ const placeholder$8 = "_placeholder_10z1i_51";
6559
+ const lineBody = "_lineBody_10z1i_56";
6560
+ const lineText = "_lineText_10z1i_65";
6561
+ const lineTitle = "_lineTitle_10z1i_75";
6562
+ const lineMeta = "_lineMeta_10z1i_107";
6563
+ const detail$1 = "_detail_10z1i_104";
6564
+ const linePrice = "_linePrice_10z1i_128";
6565
+ const paid$3 = "_paid_10z1i_140";
6566
+ const was$4 = "_was_10z1i_153";
6567
+ const card$4 = "_card_10z1i_176";
6568
+ const cardTitle = "_cardTitle_10z1i_184";
6569
+ const cardBody = "_cardBody_10z1i_196";
6570
+ const summaryCard = "_summaryCard_10z1i_168";
6571
+ const itemsHeader = "_itemsHeader_10z1i_14";
6572
+ const itemsTitle = "_itemsTitle_10z1i_239";
6573
+ const itemsCount = "_itemsCount_10z1i_250";
6574
+ const cardLines = "_cardLines_10z1i_269";
6571
6575
  const styles$F = {
6572
6576
  lines: lines$1,
6573
6577
  line: line$2,
@@ -6585,7 +6589,11 @@ const styles$F = {
6585
6589
  card: card$4,
6586
6590
  cardTitle,
6587
6591
  cardBody,
6588
- summaryCard
6592
+ summaryCard,
6593
+ itemsHeader,
6594
+ itemsTitle,
6595
+ itemsCount,
6596
+ cardLines
6589
6597
  };
6590
6598
  const SUMMARY_ROWS = [{
6591
6599
  label: "Subtotal",
@@ -6665,6 +6673,29 @@ function OrderLines({ order }) {
6665
6673
  }, item2.line_ref))
6666
6674
  });
6667
6675
  }
6676
+ function OrderItemsCard({ order }) {
6677
+ const t = useT();
6678
+ const itemCount = order.items.reduce((n, i) => n + i.qty, 0);
6679
+ return jsxs("section", {
6680
+ className: styles$F.card,
6681
+ "aria-label": t("Items"),
6682
+ children: [jsxs("div", {
6683
+ className: styles$F.itemsHeader,
6684
+ children: [jsx("h2", {
6685
+ className: styles$F.itemsTitle,
6686
+ children: "Items"
6687
+ }), jsx("span", {
6688
+ className: styles$F.itemsCount,
6689
+ children: itemCount
6690
+ })]
6691
+ }), jsx("ul", {
6692
+ className: [styles$F.lines, styles$F.cardLines].join(" "),
6693
+ children: order.items.map((item2) => jsx(OrderLine, {
6694
+ item: item2
6695
+ }, item2.line_ref))
6696
+ })]
6697
+ });
6698
+ }
6668
6699
  function ShippingAddressCard({ order }) {
6669
6700
  const t = useT();
6670
6701
  return jsxs("section", {
@@ -6978,17 +7009,17 @@ function ReturnItemRow({ item: item2, className }) {
6978
7009
  })]
6979
7010
  });
6980
7011
  }
6981
- const page$6 = "_page_6yt5y_7";
6982
- const titles$2 = "_titles_6yt5y_15";
6983
- const title$k = "_title_6yt5y_15";
6984
- const subtitle$7 = "_subtitle_6yt5y_30";
6985
- const list$2 = "_list_6yt5y_38";
6986
- const card$3 = "_card_6yt5y_48";
6987
- const checkSlot = "_checkSlot_6yt5y_61";
6988
- const check = "_check_6yt5y_61";
6989
- const row$6 = "_row_6yt5y_105";
6990
- const reason = "_reason_6yt5y_119";
6991
- const reasonSet = "_reasonSet_6yt5y_137";
7012
+ const page$6 = "_page_j1rbn_7";
7013
+ const titles$2 = "_titles_j1rbn_15";
7014
+ const title$k = "_title_j1rbn_15";
7015
+ const subtitle$7 = "_subtitle_j1rbn_30";
7016
+ const list$2 = "_list_j1rbn_38";
7017
+ const card$3 = "_card_j1rbn_48";
7018
+ const checkSlot = "_checkSlot_j1rbn_61";
7019
+ const check = "_check_j1rbn_61";
7020
+ const row$6 = "_row_j1rbn_105";
7021
+ const reason = "_reason_j1rbn_130";
7022
+ const reasonSet = "_reasonSet_j1rbn_150";
6992
7023
  const styles$B = {
6993
7024
  page: page$6,
6994
7025
  titles: titles$2,
@@ -7713,7 +7744,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
7713
7744
  loading: reordering,
7714
7745
  onClick: () => void reorder(order),
7715
7746
  children: "Reorder"
7716
- }), jsx(OrderLines, {
7747
+ }), jsx(OrderItemsCard, {
7717
7748
  order
7718
7749
  }), jsx(ShippingAddressCard, {
7719
7750
  order
@@ -11609,4 +11640,4 @@ export {
11609
11640
  useToast,
11610
11641
  variantLabel
11611
11642
  };
11612
-
11643
+ //# sourceMappingURL=storefront.mjs.map
@@ -686,7 +686,7 @@
686
686
  ._row_1hsxt_16._discount_1hsxt_69 dd {
687
687
  color: var(--color-state-text-success);
688
688
  }
689
- ._lines_dpw0l_19 {
689
+ ._lines_10z1i_19 {
690
690
  list-style: none;
691
691
  margin: 0;
692
692
  padding: 0;
@@ -694,12 +694,12 @@
694
694
  flex-direction: column;
695
695
  gap: var(--space-16);
696
696
  }
697
- ._line_dpw0l_19 {
697
+ ._line_10z1i_19 {
698
698
  display: flex;
699
699
  align-items: center;
700
700
  gap: var(--space-12);
701
701
  }
702
- ._thumb_dpw0l_34 {
702
+ ._thumb_10z1i_34 {
703
703
  position: relative;
704
704
  flex-shrink: 0;
705
705
  width: 48px;
@@ -708,15 +708,15 @@
708
708
  overflow: hidden;
709
709
  background: var(--color-surface-soft);
710
710
  }
711
- ._image_dpw0l_44 {
711
+ ._image_10z1i_44 {
712
712
  object-fit: cover;
713
713
  object-position: top;
714
714
  }
715
- ._placeholder_dpw0l_51 {
715
+ ._placeholder_10z1i_51 {
716
716
  width: 100%;
717
717
  height: 100%;
718
718
  }
719
- ._lineBody_dpw0l_56 {
719
+ ._lineBody_10z1i_56 {
720
720
  display: flex;
721
721
  align-items: flex-start;
722
722
  justify-content: space-between;
@@ -724,14 +724,14 @@
724
724
  flex: 1 1 0;
725
725
  min-width: 0;
726
726
  }
727
- ._lineText_dpw0l_65 {
727
+ ._lineText_10z1i_65 {
728
728
  display: flex;
729
729
  flex-direction: column;
730
730
  gap: var(--space-12);
731
731
  flex: 1 1 0;
732
732
  min-width: 0;
733
733
  }
734
- ._lineTitle_dpw0l_75 {
734
+ ._lineTitle_10z1i_75 {
735
735
  margin: -6px 0;
736
736
  padding: 6px 0;
737
737
  font-size: var(--type-trimmed-sm-size);
@@ -741,7 +741,7 @@
741
741
  overflow: hidden;
742
742
  text-overflow: ellipsis;
743
743
  }
744
- ._lineMeta_dpw0l_107 {
744
+ ._lineMeta_10z1i_107 {
745
745
  display: flex;
746
746
  align-items: center;
747
747
  flex-wrap: wrap;
@@ -751,10 +751,10 @@
751
751
  line-height: 11px;
752
752
  color: var(--color-text-subtle);
753
753
  }
754
- ._detail_dpw0l_104 {
754
+ ._detail_10z1i_104 {
755
755
  white-space: nowrap;
756
756
  }
757
- ._linePrice_dpw0l_128 {
757
+ ._linePrice_10z1i_128 {
758
758
  display: flex;
759
759
  flex-direction: column;
760
760
  align-items: flex-end;
@@ -763,12 +763,12 @@
763
763
  white-space: nowrap;
764
764
  font-variant-numeric: tabular-nums;
765
765
  }
766
- ._paid_dpw0l_140 {
766
+ ._paid_10z1i_140 {
767
767
  font-size: var(--type-trimmed-md-size);
768
768
  line-height: 11px;
769
769
  font-weight: var(--font-weight-bold);
770
770
  }
771
- ._was_dpw0l_153 {
771
+ ._was_10z1i_153 {
772
772
  display: flex;
773
773
  align-items: center;
774
774
  justify-content: flex-end;
@@ -778,14 +778,14 @@
778
778
  color: var(--color-text-disabled);
779
779
  text-decoration: line-through;
780
780
  }
781
- ._card_dpw0l_176 {
781
+ ._card_10z1i_176 {
782
782
  display: flex;
783
783
  flex-direction: column;
784
784
  box-shadow: inset 0 0 0 1px var(--color-border-default);
785
785
  border-radius: var(--radius-18);
786
786
  overflow: hidden;
787
787
  }
788
- ._cardTitle_dpw0l_184 {
788
+ ._cardTitle_10z1i_184 {
789
789
  display: flex;
790
790
  align-items: center;
791
791
  margin: 0;
@@ -796,18 +796,53 @@
796
796
  line-height: 1.38;
797
797
  font-weight: var(--font-weight-bold);
798
798
  }
799
- ._cardBody_dpw0l_196 {
799
+ ._cardBody_10z1i_196 {
800
800
  margin: 0;
801
801
  padding: var(--space-16);
802
802
  font-size: var(--type-trimmed-sm-size);
803
803
  line-height: 1.5;
804
804
  }
805
- ._summaryCard_dpw0l_168 {
805
+ ._summaryCard_10z1i_168 {
806
806
  background: var(--color-surface-soft);
807
807
  }
808
- ._summaryCard_dpw0l_168 > :last-child {
808
+ ._summaryCard_10z1i_168 > :last-child {
809
809
  padding: 0 var(--space-16);
810
810
  }
811
+ ._itemsHeader_10z1i_14 {
812
+ display: flex;
813
+ align-items: center;
814
+ gap: var(--space-12);
815
+ min-height: 60px;
816
+ padding: 0 var(--space-16);
817
+ border-bottom: 1px solid var(--color-border-default);
818
+ }
819
+ ._itemsTitle_10z1i_239 {
820
+ flex: 1 0 0;
821
+ min-width: 0;
822
+ margin: 0;
823
+ font-size: var(--type-heading-md-size);
824
+ line-height: 1.38;
825
+ font-weight: var(--font-weight-bold);
826
+ }
827
+ ._itemsCount_10z1i_250 {
828
+ display: inline-flex;
829
+ align-items: center;
830
+ justify-content: center;
831
+ flex-shrink: 0;
832
+ min-width: 16px;
833
+ height: 16px;
834
+ padding: 0 var(--space-4);
835
+ border-radius: var(--radius-full);
836
+ background: var(--color-surface-subtle);
837
+ font-size: var(--type-trimmed-xs-size);
838
+ font-weight: var(--font-weight-bold);
839
+ letter-spacing: 0.12px;
840
+ font-variant-numeric: tabular-nums;
841
+ }
842
+ ._cardLines_10z1i_269 {
843
+ gap: var(--space-12);
844
+ padding: var(--space-12) var(--space-16);
845
+ }
811
846
  ._header_1f3nh_7 {
812
847
  display: flex;
813
848
  align-items: flex-start;
@@ -1056,38 +1091,38 @@
1056
1091
  text-decoration: line-through;
1057
1092
  font-variant-numeric: tabular-nums;
1058
1093
  }
1059
- ._page_6yt5y_7 {
1094
+ ._page_j1rbn_7 {
1060
1095
  display: flex;
1061
1096
  flex-direction: column;
1062
1097
  gap: var(--space-24);
1063
1098
  padding: var(--space-20) var(--space-16);
1064
1099
  background: var(--color-surface-default);
1065
1100
  }
1066
- ._titles_6yt5y_15 {
1101
+ ._titles_j1rbn_15 {
1067
1102
  display: flex;
1068
1103
  flex-direction: column;
1069
1104
  gap: var(--space-8);
1070
1105
  }
1071
- ._title_6yt5y_15 {
1106
+ ._title_j1rbn_15 {
1072
1107
  margin: 0;
1073
1108
  font-size: var(--type-heading-md-size);
1074
1109
  line-height: 1.32;
1075
1110
  font-weight: var(--font-weight-bold);
1076
1111
  color: var(--color-text-default);
1077
1112
  }
1078
- ._subtitle_6yt5y_30 {
1113
+ ._subtitle_j1rbn_30 {
1079
1114
  font-size: var(--type-trimmed-sm-size);
1080
1115
  line-height: 10px;
1081
1116
  padding: 5px 0;
1082
1117
  margin: -5px 0;
1083
1118
  color: var(--color-text-subtle);
1084
1119
  }
1085
- ._list_6yt5y_38 {
1120
+ ._list_j1rbn_38 {
1086
1121
  display: flex;
1087
1122
  flex-direction: column;
1088
1123
  gap: var(--space-12);
1089
1124
  }
1090
- ._card_6yt5y_48 {
1125
+ ._card_j1rbn_48 {
1091
1126
  display: flex;
1092
1127
  align-items: flex-start;
1093
1128
  gap: var(--space-12);
@@ -1095,7 +1130,7 @@
1095
1130
  border-radius: var(--radius-18);
1096
1131
  background: var(--color-surface-soft);
1097
1132
  }
1098
- ._checkSlot_6yt5y_61 {
1133
+ ._checkSlot_j1rbn_61 {
1099
1134
  display: inline-flex;
1100
1135
  align-items: flex-start;
1101
1136
  flex-shrink: 0;
@@ -1105,12 +1140,12 @@
1105
1140
  color: var(--color-surface-max);
1106
1141
  cursor: pointer;
1107
1142
  }
1108
- ._checkSlot_6yt5y_61:focus-visible {
1143
+ ._checkSlot_j1rbn_61:focus-visible {
1109
1144
  outline: none;
1110
1145
  box-shadow: var(--focus-ring);
1111
1146
  border-radius: var(--radius-4);
1112
1147
  }
1113
- ._check_6yt5y_61 {
1148
+ ._check_j1rbn_61 {
1114
1149
  position: relative;
1115
1150
  display: inline-flex;
1116
1151
  align-items: center;
@@ -1118,7 +1153,7 @@
1118
1153
  width: 24px;
1119
1154
  height: 24px;
1120
1155
  }
1121
- ._check_6yt5y_61::before {
1156
+ ._check_j1rbn_61::before {
1122
1157
  content: "";
1123
1158
  position: absolute;
1124
1159
  width: 20px;
@@ -1126,25 +1161,26 @@
1126
1161
  border: 1px solid var(--color-border-default);
1127
1162
  border-radius: var(--radius-full);
1128
1163
  }
1129
- ._checkSlot_6yt5y_61[aria-checked=true] ._check_6yt5y_61::before {
1164
+ ._checkSlot_j1rbn_61[aria-checked=true] ._check_j1rbn_61::before {
1130
1165
  border-color: transparent;
1131
1166
  }
1132
- ._check_6yt5y_61 svg {
1167
+ ._check_j1rbn_61 svg {
1133
1168
  position: relative;
1134
1169
  }
1135
- ._row_6yt5y_105 {
1170
+ ._row_j1rbn_105 {
1136
1171
  display: flex;
1137
1172
  flex-direction: column;
1138
1173
  gap: var(--space-12);
1139
1174
  flex: 1 1 0;
1140
1175
  min-width: 0;
1141
1176
  }
1142
- ._reason_6yt5y_119 {
1177
+ ._reason_j1rbn_130 {
1143
1178
  display: inline-flex;
1144
1179
  align-items: center;
1145
1180
  justify-content: space-between;
1181
+ gap: var(--space-4);
1146
1182
  width: 154px;
1147
- height: 32px;
1183
+ min-height: 32px;
1148
1184
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-12);
1149
1185
  border: 1px solid var(--color-border-default);
1150
1186
  border-radius: var(--radius-6);
@@ -1152,14 +1188,15 @@
1152
1188
  color: var(--color-text-disabled);
1153
1189
  font-family: inherit;
1154
1190
  font-size: var(--type-trimmed-sm-size);
1155
- line-height: 10px;
1191
+ line-height: 1.15;
1156
1192
  font-weight: var(--font-weight-bold);
1193
+ text-align: left;
1157
1194
  cursor: pointer;
1158
1195
  }
1159
- ._reasonSet_6yt5y_137 {
1196
+ ._reasonSet_j1rbn_150 {
1160
1197
  color: var(--color-text-default);
1161
1198
  }
1162
- ._reason_6yt5y_119:focus-visible {
1199
+ ._reason_j1rbn_130:focus-visible {
1163
1200
  outline: none;
1164
1201
  box-shadow: var(--focus-ring);
1165
1202
  }
package/dist/styles.css CHANGED
@@ -686,7 +686,7 @@
686
686
  ._row_1hsxt_16._discount_1hsxt_69 dd {
687
687
  color: var(--color-state-text-success);
688
688
  }
689
- ._lines_dpw0l_19 {
689
+ ._lines_10z1i_19 {
690
690
  list-style: none;
691
691
  margin: 0;
692
692
  padding: 0;
@@ -694,12 +694,12 @@
694
694
  flex-direction: column;
695
695
  gap: var(--space-16);
696
696
  }
697
- ._line_dpw0l_19 {
697
+ ._line_10z1i_19 {
698
698
  display: flex;
699
699
  align-items: center;
700
700
  gap: var(--space-12);
701
701
  }
702
- ._thumb_dpw0l_34 {
702
+ ._thumb_10z1i_34 {
703
703
  position: relative;
704
704
  flex-shrink: 0;
705
705
  width: 48px;
@@ -708,15 +708,15 @@
708
708
  overflow: hidden;
709
709
  background: var(--color-surface-soft);
710
710
  }
711
- ._image_dpw0l_44 {
711
+ ._image_10z1i_44 {
712
712
  object-fit: cover;
713
713
  object-position: top;
714
714
  }
715
- ._placeholder_dpw0l_51 {
715
+ ._placeholder_10z1i_51 {
716
716
  width: 100%;
717
717
  height: 100%;
718
718
  }
719
- ._lineBody_dpw0l_56 {
719
+ ._lineBody_10z1i_56 {
720
720
  display: flex;
721
721
  align-items: flex-start;
722
722
  justify-content: space-between;
@@ -724,14 +724,14 @@
724
724
  flex: 1 1 0;
725
725
  min-width: 0;
726
726
  }
727
- ._lineText_dpw0l_65 {
727
+ ._lineText_10z1i_65 {
728
728
  display: flex;
729
729
  flex-direction: column;
730
730
  gap: var(--space-12);
731
731
  flex: 1 1 0;
732
732
  min-width: 0;
733
733
  }
734
- ._lineTitle_dpw0l_75 {
734
+ ._lineTitle_10z1i_75 {
735
735
  margin: -6px 0;
736
736
  padding: 6px 0;
737
737
  font-size: var(--type-trimmed-sm-size);
@@ -741,7 +741,7 @@
741
741
  overflow: hidden;
742
742
  text-overflow: ellipsis;
743
743
  }
744
- ._lineMeta_dpw0l_107 {
744
+ ._lineMeta_10z1i_107 {
745
745
  display: flex;
746
746
  align-items: center;
747
747
  flex-wrap: wrap;
@@ -751,10 +751,10 @@
751
751
  line-height: 11px;
752
752
  color: var(--color-text-subtle);
753
753
  }
754
- ._detail_dpw0l_104 {
754
+ ._detail_10z1i_104 {
755
755
  white-space: nowrap;
756
756
  }
757
- ._linePrice_dpw0l_128 {
757
+ ._linePrice_10z1i_128 {
758
758
  display: flex;
759
759
  flex-direction: column;
760
760
  align-items: flex-end;
@@ -763,12 +763,12 @@
763
763
  white-space: nowrap;
764
764
  font-variant-numeric: tabular-nums;
765
765
  }
766
- ._paid_dpw0l_140 {
766
+ ._paid_10z1i_140 {
767
767
  font-size: var(--type-trimmed-md-size);
768
768
  line-height: 11px;
769
769
  font-weight: var(--font-weight-bold);
770
770
  }
771
- ._was_dpw0l_153 {
771
+ ._was_10z1i_153 {
772
772
  display: flex;
773
773
  align-items: center;
774
774
  justify-content: flex-end;
@@ -778,14 +778,14 @@
778
778
  color: var(--color-text-disabled);
779
779
  text-decoration: line-through;
780
780
  }
781
- ._card_dpw0l_176 {
781
+ ._card_10z1i_176 {
782
782
  display: flex;
783
783
  flex-direction: column;
784
784
  box-shadow: inset 0 0 0 1px var(--color-border-default);
785
785
  border-radius: var(--radius-18);
786
786
  overflow: hidden;
787
787
  }
788
- ._cardTitle_dpw0l_184 {
788
+ ._cardTitle_10z1i_184 {
789
789
  display: flex;
790
790
  align-items: center;
791
791
  margin: 0;
@@ -796,18 +796,53 @@
796
796
  line-height: 1.38;
797
797
  font-weight: var(--font-weight-bold);
798
798
  }
799
- ._cardBody_dpw0l_196 {
799
+ ._cardBody_10z1i_196 {
800
800
  margin: 0;
801
801
  padding: var(--space-16);
802
802
  font-size: var(--type-trimmed-sm-size);
803
803
  line-height: 1.5;
804
804
  }
805
- ._summaryCard_dpw0l_168 {
805
+ ._summaryCard_10z1i_168 {
806
806
  background: var(--color-surface-soft);
807
807
  }
808
- ._summaryCard_dpw0l_168 > :last-child {
808
+ ._summaryCard_10z1i_168 > :last-child {
809
809
  padding: 0 var(--space-16);
810
810
  }
811
+ ._itemsHeader_10z1i_14 {
812
+ display: flex;
813
+ align-items: center;
814
+ gap: var(--space-12);
815
+ min-height: 60px;
816
+ padding: 0 var(--space-16);
817
+ border-bottom: 1px solid var(--color-border-default);
818
+ }
819
+ ._itemsTitle_10z1i_239 {
820
+ flex: 1 0 0;
821
+ min-width: 0;
822
+ margin: 0;
823
+ font-size: var(--type-heading-md-size);
824
+ line-height: 1.38;
825
+ font-weight: var(--font-weight-bold);
826
+ }
827
+ ._itemsCount_10z1i_250 {
828
+ display: inline-flex;
829
+ align-items: center;
830
+ justify-content: center;
831
+ flex-shrink: 0;
832
+ min-width: 16px;
833
+ height: 16px;
834
+ padding: 0 var(--space-4);
835
+ border-radius: var(--radius-full);
836
+ background: var(--color-surface-subtle);
837
+ font-size: var(--type-trimmed-xs-size);
838
+ font-weight: var(--font-weight-bold);
839
+ letter-spacing: 0.12px;
840
+ font-variant-numeric: tabular-nums;
841
+ }
842
+ ._cardLines_10z1i_269 {
843
+ gap: var(--space-12);
844
+ padding: var(--space-12) var(--space-16);
845
+ }
811
846
  ._header_1f3nh_7 {
812
847
  display: flex;
813
848
  align-items: flex-start;
@@ -1056,38 +1091,38 @@
1056
1091
  text-decoration: line-through;
1057
1092
  font-variant-numeric: tabular-nums;
1058
1093
  }
1059
- ._page_6yt5y_7 {
1094
+ ._page_j1rbn_7 {
1060
1095
  display: flex;
1061
1096
  flex-direction: column;
1062
1097
  gap: var(--space-24);
1063
1098
  padding: var(--space-20) var(--space-16);
1064
1099
  background: var(--color-surface-default);
1065
1100
  }
1066
- ._titles_6yt5y_15 {
1101
+ ._titles_j1rbn_15 {
1067
1102
  display: flex;
1068
1103
  flex-direction: column;
1069
1104
  gap: var(--space-8);
1070
1105
  }
1071
- ._title_6yt5y_15 {
1106
+ ._title_j1rbn_15 {
1072
1107
  margin: 0;
1073
1108
  font-size: var(--type-heading-md-size);
1074
1109
  line-height: 1.32;
1075
1110
  font-weight: var(--font-weight-bold);
1076
1111
  color: var(--color-text-default);
1077
1112
  }
1078
- ._subtitle_6yt5y_30 {
1113
+ ._subtitle_j1rbn_30 {
1079
1114
  font-size: var(--type-trimmed-sm-size);
1080
1115
  line-height: 10px;
1081
1116
  padding: 5px 0;
1082
1117
  margin: -5px 0;
1083
1118
  color: var(--color-text-subtle);
1084
1119
  }
1085
- ._list_6yt5y_38 {
1120
+ ._list_j1rbn_38 {
1086
1121
  display: flex;
1087
1122
  flex-direction: column;
1088
1123
  gap: var(--space-12);
1089
1124
  }
1090
- ._card_6yt5y_48 {
1125
+ ._card_j1rbn_48 {
1091
1126
  display: flex;
1092
1127
  align-items: flex-start;
1093
1128
  gap: var(--space-12);
@@ -1095,7 +1130,7 @@
1095
1130
  border-radius: var(--radius-18);
1096
1131
  background: var(--color-surface-soft);
1097
1132
  }
1098
- ._checkSlot_6yt5y_61 {
1133
+ ._checkSlot_j1rbn_61 {
1099
1134
  display: inline-flex;
1100
1135
  align-items: flex-start;
1101
1136
  flex-shrink: 0;
@@ -1105,12 +1140,12 @@
1105
1140
  color: var(--color-surface-max);
1106
1141
  cursor: pointer;
1107
1142
  }
1108
- ._checkSlot_6yt5y_61:focus-visible {
1143
+ ._checkSlot_j1rbn_61:focus-visible {
1109
1144
  outline: none;
1110
1145
  box-shadow: var(--focus-ring);
1111
1146
  border-radius: var(--radius-4);
1112
1147
  }
1113
- ._check_6yt5y_61 {
1148
+ ._check_j1rbn_61 {
1114
1149
  position: relative;
1115
1150
  display: inline-flex;
1116
1151
  align-items: center;
@@ -1118,7 +1153,7 @@
1118
1153
  width: 24px;
1119
1154
  height: 24px;
1120
1155
  }
1121
- ._check_6yt5y_61::before {
1156
+ ._check_j1rbn_61::before {
1122
1157
  content: "";
1123
1158
  position: absolute;
1124
1159
  width: 20px;
@@ -1126,25 +1161,26 @@
1126
1161
  border: 1px solid var(--color-border-default);
1127
1162
  border-radius: var(--radius-full);
1128
1163
  }
1129
- ._checkSlot_6yt5y_61[aria-checked=true] ._check_6yt5y_61::before {
1164
+ ._checkSlot_j1rbn_61[aria-checked=true] ._check_j1rbn_61::before {
1130
1165
  border-color: transparent;
1131
1166
  }
1132
- ._check_6yt5y_61 svg {
1167
+ ._check_j1rbn_61 svg {
1133
1168
  position: relative;
1134
1169
  }
1135
- ._row_6yt5y_105 {
1170
+ ._row_j1rbn_105 {
1136
1171
  display: flex;
1137
1172
  flex-direction: column;
1138
1173
  gap: var(--space-12);
1139
1174
  flex: 1 1 0;
1140
1175
  min-width: 0;
1141
1176
  }
1142
- ._reason_6yt5y_119 {
1177
+ ._reason_j1rbn_130 {
1143
1178
  display: inline-flex;
1144
1179
  align-items: center;
1145
1180
  justify-content: space-between;
1181
+ gap: var(--space-4);
1146
1182
  width: 154px;
1147
- height: 32px;
1183
+ min-height: 32px;
1148
1184
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-12);
1149
1185
  border: 1px solid var(--color-border-default);
1150
1186
  border-radius: var(--radius-6);
@@ -1152,14 +1188,15 @@
1152
1188
  color: var(--color-text-disabled);
1153
1189
  font-family: inherit;
1154
1190
  font-size: var(--type-trimmed-sm-size);
1155
- line-height: 10px;
1191
+ line-height: 1.15;
1156
1192
  font-weight: var(--font-weight-bold);
1193
+ text-align: left;
1157
1194
  cursor: pointer;
1158
1195
  }
1159
- ._reasonSet_6yt5y_137 {
1196
+ ._reasonSet_j1rbn_150 {
1160
1197
  color: var(--color-text-default);
1161
1198
  }
1162
- ._reason_6yt5y_119:focus-visible {
1199
+ ._reason_j1rbn_130:focus-visible {
1163
1200
  outline: none;
1164
1201
  box-shadow: var(--focus-ring);
1165
1202
  }
package/package.json CHANGED
@@ -1,11 +1,14 @@
1
1
  {
2
2
  "name": "@nok-integration/storefront-react",
3
- "version": "0.19.36",
3
+ "version": "0.19.38",
4
4
  "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
5
5
  "license": "UNLICENSED",
6
+ "publishConfig": {
7
+ "access": "public",
8
+ "registry": "https://registry.npmjs.org/"
9
+ },
6
10
  "type": "module",
7
11
  "main": "./dist/index.mjs",
8
- "module": "./dist/index.mjs",
9
12
  "types": "./dist/index.d.ts",
10
13
  "exports": {
11
14
  ".": {
@@ -20,18 +23,34 @@
20
23
  "dist",
21
24
  "!dist/**/*.map"
22
25
  ],
23
- "sideEffects": [
24
- "*.css"
25
- ],
26
+ "scripts": {
27
+ "build": "pnpm build:package && pnpm build:standalone",
28
+ "build:package": "vite build",
29
+ "build:standalone": "BUILD_TARGET=standalone vite build",
30
+ "typecheck": "tsc --noEmit",
31
+ "build:partner": "PARTNER_DROP=1 pnpm build && pnpm pack"
32
+ },
26
33
  "peerDependencies": {
27
34
  "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
28
35
  "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
29
36
  },
37
+ "devDependencies": {
38
+ "@microsoft/api-extractor": "^7.58.12",
39
+ "@raqmix/contracts": "^2.0.0",
40
+ "@types/react": "^19.1.0",
41
+ "@types/react-dom": "^19.1.0",
42
+ "@vitejs/plugin-react": "^4.3.4",
43
+ "esbuild": "^0.28.1",
44
+ "terser": "^5.50.0",
45
+ "typescript": "^5.7.3",
46
+ "vite": "^7.0.0",
47
+ "vite-plugin-dts": "^5.0.3"
48
+ },
49
+ "module": "./dist/index.mjs",
50
+ "sideEffects": [
51
+ "*.css"
52
+ ],
30
53
  "dependencies": {
31
54
  "zod": "^3.24.1"
32
- },
33
- "publishConfig": {
34
- "access": "public",
35
- "registry": "https://registry.npmjs.org/"
36
55
  }
37
56
  }