@lime-bundles/react 7.1.0 → 7.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +149 -95
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +152 -99
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +111 -1
  6. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -1004,7 +1004,9 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
1004
1004
  src: thumbImage.url,
1005
1005
  alt: thumbImage.altText ?? product.title,
1006
1006
  className: "lb-bundle__product-image",
1007
- loading: "lazy"
1007
+ loading: "lazy",
1008
+ width: thumbImage.width ?? void 0,
1009
+ height: thumbImage.height ?? void 0
1008
1010
  }
1009
1011
  ),
1010
1012
  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lb-bundle__product-info", children: [
@@ -1610,7 +1612,9 @@ function MixMatchPickerRow({
1610
1612
  {
1611
1613
  src: thumbImage.url,
1612
1614
  alt: thumbImage.altText ?? product.title,
1613
- loading: "lazy"
1615
+ loading: "lazy",
1616
+ width: thumbImage.width ?? void 0,
1617
+ height: thumbImage.height ?? void 0
1614
1618
  }
1615
1619
  ),
1616
1620
  variantInBundle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
@@ -2520,7 +2524,9 @@ function VolumeBundle(props) {
2520
2524
  src: thumbImage.url,
2521
2525
  alt: thumbImage.altText ?? product.title,
2522
2526
  className: "lb-bundle__product-image",
2523
- loading: "lazy"
2527
+ loading: "lazy",
2528
+ width: thumbImage.width ?? void 0,
2529
+ height: thumbImage.height ?? void 0
2524
2530
  }
2525
2531
  ),
2526
2532
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lb-bundle__product-info", children: [
@@ -2964,7 +2970,9 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
2964
2970
  src: thumbImage.url,
2965
2971
  alt: thumbImage.altText ?? product.title,
2966
2972
  className: "lb-bundle__product-image",
2967
- loading: "lazy"
2973
+ loading: "lazy",
2974
+ width: thumbImage.width ?? void 0,
2975
+ height: thumbImage.height ?? void 0
2968
2976
  }
2969
2977
  ),
2970
2978
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "lb-bundle__product-info", children: [
@@ -3516,7 +3524,9 @@ function MultiStepPickerRow({
3516
3524
  {
3517
3525
  src: thumbImage.url,
3518
3526
  alt: thumbImage.altText ?? product.title,
3519
- loading: "lazy"
3527
+ loading: "lazy",
3528
+ width: thumbImage.width ?? void 0,
3529
+ height: thumbImage.height ?? void 0
3520
3530
  }
3521
3531
  ),
3522
3532
  variantInStep && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "lb-mix-match__modal-added-badge", children: "Added" })
@@ -3810,6 +3820,9 @@ function MultiStepBundle(props) {
3810
3820
  const allSatisfied = steps.length > 0 && steps.every((_, i) => stepSatisfied(i));
3811
3821
  const valid = !!bundle && allSatisfied;
3812
3822
  const completedSteps = steps.filter((_, i) => stepSatisfied(i)).length;
3823
+ const firstUnsatisfied = steps.findIndex((_, i) => !stepSatisfied(i));
3824
+ const remainingSteps = steps.length - completedSteps;
3825
+ const anyPicks = selections.some((s) => s.length > 0);
3813
3826
  const summary = (0, import_react16.useMemo)(() => {
3814
3827
  let comparePrice = 0;
3815
3828
  let salePrice = 0;
@@ -4052,115 +4065,156 @@ function MultiStepBundle(props) {
4052
4065
  )
4053
4066
  ] })
4054
4067
  ] }),
4055
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
4056
- "section",
4057
- {
4058
- className: "lb-multi-step__group",
4059
- "data-step-group": i,
4060
- children: [
4061
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-multi-step__group-heading", children: [
4062
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
4068
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-multi-step__groups", "data-step-groups": true, children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react16.Fragment, { children: [
4069
+ i === firstUnsatisfied && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
4070
+ "button",
4071
+ {
4072
+ type: "button",
4073
+ className: "lb-mix-match__add-product lb-multi-step__door",
4074
+ "data-step-door": firstUnsatisfied,
4075
+ "aria-label": `${anyPicks ? "Continue building" : "Choose your products"}: ${step.name}`,
4076
+ onClick: () => setPickerOpenAt(firstUnsatisfied),
4077
+ children: [
4063
4078
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4064
4079
  "span",
4065
4080
  {
4066
- className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
4067
- "data-step-count": i,
4068
- children: `${Math.min(unitsByStep[i] ?? 0, step.minQuantity)} of ${step.minQuantity} added`
4081
+ className: "lb-mix-match__add-product-icon",
4082
+ "aria-hidden": "true",
4083
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlusIcon2, {})
4069
4084
  }
4070
- )
4071
- ] }),
4072
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4073
- "div",
4074
- {
4075
- className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
4076
- "data-step-slots": i,
4077
- children: (selections[i] ?? []).map((item, index) => (
4078
- /* Whole card reopens the wizard AT this step. The inner
4079
- title button provides the keyboard/AT path (its
4080
- activation bubbles here); × stops propagation. */
4081
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
4082
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
4083
- "div",
4084
- {
4085
- className: "lb-mix-match__slot lb-mix-match__slot--filled",
4086
- onClick: () => setPickerOpenAt(i),
4087
- children: [
4088
- item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4089
- "img",
4090
- {
4091
- src: item.featuredImage,
4092
- alt: item.title,
4093
- loading: "lazy"
4094
- }
4095
- ) }),
4096
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
4097
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4098
- "button",
4099
- {
4100
- type: "button",
4101
- className: "lb-mix-match__filled-title",
4102
- "aria-label": `Edit selection: ${item.title}`,
4103
- children: item.title
4104
- }
4105
- ),
4106
- item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
4107
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
4108
- item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core14.formatMoney)(item.compareAtPrice, currency) }),
4109
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core14.formatMoney)(item.price, currency) }),
4110
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
4111
- ] }),
4112
- item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
4113
- ] }),
4114
- canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4115
- "button",
4116
- {
4117
- type: "button",
4118
- className: "lb-mix-match__slot-remove",
4119
- "aria-label": `Remove ${item.title}`,
4120
- onClick: (e) => {
4121
- e.stopPropagation();
4122
- removeSlot(i, index);
4123
- },
4124
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon4, {})
4125
- }
4126
- ) : (
4127
- /* Required pick at its floor — quiet state chip instead
4128
- of the ×; removal returns once another slot covers
4129
- the product's minimum (variant swap flow). */
4130
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
4131
- )
4132
- ]
4133
- },
4134
- `${item.productId}:${item.variantId}:${index}`
4135
- )
4136
- ))
4137
- }
4138
- ),
4139
- (0, import_core14.stepHeadroom)(step.maxQuantity, unitsByStep[i] ?? 0) !== 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
4085
+ ),
4086
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-multi-step__door-copy", children: [
4087
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__add-product-label", children: anyPicks ? "Continue building" : "Choose your products" }),
4088
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__door-sub", children: anyPicks ? `${remainingSteps} ${remainingSteps === 1 ? "step" : "steps"} to go` : `${steps.length} quick ${steps.length === 1 ? "step" : "steps"}` })
4089
+ ] })
4090
+ ]
4091
+ }
4092
+ ),
4093
+ (selections[i] ?? []).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4094
+ "section",
4095
+ {
4096
+ className: "lb-multi-step__group",
4097
+ "data-step-group": i,
4098
+ "data-step-mode": "row",
4099
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
4140
4100
  "button",
4141
4101
  {
4142
4102
  type: "button",
4143
- className: "lb-mix-match__add-product lb-multi-step__step-trigger",
4144
- "data-step-trigger": i,
4103
+ className: "lb-multi-step__step-row",
4104
+ "data-step-row": i,
4145
4105
  "aria-label": `${step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products"}: ${step.name}`,
4146
4106
  onClick: () => setPickerOpenAt(i),
4147
4107
  children: [
4148
4108
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4149
4109
  "span",
4150
4110
  {
4151
- className: "lb-mix-match__add-product-icon",
4111
+ className: "lb-multi-step__step-ix",
4152
4112
  "aria-hidden": "true",
4153
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlusIcon2, {})
4113
+ children: i + 1
4154
4114
  }
4155
4115
  ),
4156
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__add-product-label", children: step.minQuantity === 1 && step.maxQuantity === 1 ? "Choose a product" : "Choose products" })
4116
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
4117
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4118
+ "span",
4119
+ {
4120
+ className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
4121
+ "data-step-count": i,
4122
+ children: `${Math.min(unitsByStep[i] ?? 0, step.minQuantity)} of ${step.minQuantity} added`
4123
+ }
4124
+ )
4157
4125
  ]
4158
4126
  }
4159
4127
  )
4160
- ]
4161
- },
4162
- i
4163
- )) }),
4128
+ }
4129
+ ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
4130
+ "section",
4131
+ {
4132
+ className: "lb-multi-step__group",
4133
+ "data-step-group": i,
4134
+ "data-step-mode": "open",
4135
+ children: [
4136
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-multi-step__group-heading", children: [
4137
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-multi-step__group-name", children: step.name }),
4138
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4139
+ "span",
4140
+ {
4141
+ className: `lb-multi-step__group-count${stepSatisfied(i) ? " lb-multi-step__group-count--met" : ""}`,
4142
+ "data-step-count": i,
4143
+ children: `${Math.min(unitsByStep[i] ?? 0, step.minQuantity)} of ${step.minQuantity} added`
4144
+ }
4145
+ )
4146
+ ] }),
4147
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4148
+ "div",
4149
+ {
4150
+ className: "lb-mix-match__slots lb-edge-fade lb-multi-step__group-slots",
4151
+ "data-step-slots": i,
4152
+ children: (selections[i] ?? []).map((item, index) => (
4153
+ /* Whole card reopens the wizard AT this step. The inner
4154
+ title button provides the keyboard/AT path (its
4155
+ activation bubbles here); × stops propagation. */
4156
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard path is the inner "Edit selection" title button whose activation bubbles to this handler
4157
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
4158
+ "div",
4159
+ {
4160
+ className: "lb-mix-match__slot lb-mix-match__slot--filled",
4161
+ onClick: () => setPickerOpenAt(i),
4162
+ children: [
4163
+ item.featuredImage && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-thumbnail", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4164
+ "img",
4165
+ {
4166
+ src: item.featuredImage,
4167
+ alt: item.title,
4168
+ loading: "lazy"
4169
+ }
4170
+ ) }),
4171
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-mix-match__filled-info", children: [
4172
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4173
+ "button",
4174
+ {
4175
+ type: "button",
4176
+ className: "lb-mix-match__filled-title",
4177
+ "aria-label": `Edit selection: ${item.title}`,
4178
+ children: item.title
4179
+ }
4180
+ ),
4181
+ item.variantTitle && item.variantTitle !== "Default Title" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__filled-variant", children: item.variantTitle }),
4182
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "lb-mix-match__filled-price", children: [
4183
+ item.compareAtPrice !== null && item.compareAtPrice > item.price && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("s", { className: "lb-mix-match__filled-compare", children: (0, import_core14.formatMoney)(item.compareAtPrice, currency) }),
4184
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-price", children: (0, import_core14.formatMoney)(item.price, currency) }),
4185
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-qty-inline", children: `\xD7${item.quantity}` })
4186
+ ] }),
4187
+ item.unitPrice && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-bundle-product-unit-price", children: item.unitPrice })
4188
+ ] }),
4189
+ canRemoveItem2(bundle, selections, item) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4190
+ "button",
4191
+ {
4192
+ type: "button",
4193
+ className: "lb-mix-match__slot-remove",
4194
+ "aria-label": `Remove ${item.title}`,
4195
+ onClick: (e) => {
4196
+ e.stopPropagation();
4197
+ removeSlot(i, index);
4198
+ },
4199
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon4, {})
4200
+ }
4201
+ ) : (
4202
+ /* Required pick at its floor — quiet state chip instead
4203
+ of the ×; removal returns once another slot covers
4204
+ the product's minimum (variant swap flow). */
4205
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "lb-mix-match__slot-required", children: "Required" })
4206
+ )
4207
+ ]
4208
+ },
4209
+ `${item.productId}:${item.variantId}:${index}`
4210
+ )
4211
+ ))
4212
+ }
4213
+ )
4214
+ ]
4215
+ }
4216
+ )
4217
+ ] }, i)) }),
4164
4218
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "lb-bundle-divider" }),
4165
4219
  allSatisfied && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-summary", "data-pricing-section": true, children: [
4166
4220
  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "lb-bundle-summary__text", children: [