@pisell/materials 6.12.52 → 6.12.53

package/es/components/productCard/cartSkuCard/variants/A12/index.js

@@ -1,126 +0,0 @@
-import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
-import IconFont from "../../../../iconfont/index.js";
-import Weighing from "../../components/weighing/index.js";
-import { PREFIX } from "../../index.js";
-import React, { useMemo } from "react";
-import { formatAmount, image, locales, resolveWeighingSnapshot } from "@pisell/utils";
-import classNames from "classnames";
-import "./index.less";
-//#region src/components/productCard/cartSkuCard/variants/A12/index.tsx
-const TOKEN_VARIABLES = {
-	background: "--pc-a12-bg",
-	borderColor: "--pc-a12-border-color",
-	borderRadius: "--pc-a12-radius",
-	minHeight: "--pc-a12-min-height",
-	mediaWidth: "--pc-a12-media-width",
-	actionRailWidth: "--pc-a12-rail-width",
-	contentPadding: "--pc-a12-content-padding",
-	actionRailPadding: "--pc-a12-rail-padding",
-	accentColor: "--pc-a12-accent",
-	titleColor: "--pc-a12-title-color",
-	titleFontSize: "--pc-a12-title-size",
-	titleFontWeight: "--pc-a12-title-weight",
-	priceColor: "--pc-a12-price-color",
-	priceFontSize: "--pc-a12-price-size",
-	optionBackground: "--pc-a12-option-bg",
-	optionLabelColor: "--pc-a12-option-label-color",
-	optionValueColor: "--pc-a12-option-value-color",
-	optionGap: "--pc-a12-option-gap",
-	shadow: "--pc-a12-shadow"
-};
-/** 复用其它变体使用的 options，只在展示阶段合并同组已选项。 */
-function resolveSpecifications(dataSource) {
-	if (!Array.isArray(dataSource === null || dataSource === void 0 ? void 0 : dataSource.options)) return [];
-	const groups = /* @__PURE__ */ new Map();
-	dataSource.options.forEach((option, index) => {
-		var _ref, _option$name, _ref2, _option$quantity, _ref3, _ref4, _option$option_group_, _ref5, _ref6, _ref7, _option$option_group_2;
-		const name = (_ref = (_option$name = option === null || option === void 0 ? void 0 : option.name) !== null && _option$name !== void 0 ? _option$name : option === null || option === void 0 ? void 0 : option.title) !== null && _ref !== void 0 ? _ref : option === null || option === void 0 ? void 0 : option.variant_item_name;
-		if (name === void 0 || name === null || name === "") return;
-		const quantity = Math.max(1, Number((_ref2 = (_option$quantity = option.quantity) !== null && _option$quantity !== void 0 ? _option$quantity : option.num) !== null && _ref2 !== void 0 ? _ref2 : 1));
-		const value = quantity > 1 ? `${String(name)} × ${quantity}` : name;
-		const groupKey = String((_ref3 = (_ref4 = (_option$option_group_ = option.option_group_id) !== null && _option$option_group_ !== void 0 ? _option$option_group_ : option.group_id) !== null && _ref4 !== void 0 ? _ref4 : option.variant_group_id) !== null && _ref3 !== void 0 ? _ref3 : `option-${index}`);
-		const label = (_ref5 = (_ref6 = (_ref7 = (_option$option_group_2 = option.option_group_name) !== null && _option$option_group_2 !== void 0 ? _option$option_group_2 : option.group_name) !== null && _ref7 !== void 0 ? _ref7 : option.option_group_title) !== null && _ref6 !== void 0 ? _ref6 : option.group_title) !== null && _ref5 !== void 0 ? _ref5 : option.variant_group_name;
-		const current = groups.get(groupKey);
-		if (current) {
-			current.values.push(value);
-			if (!current.label && label) current.label = label;
-			return;
-		}
-		groups.set(groupKey, _objectSpread2(_objectSpread2({ key: groupKey }, label ? { label } : {}), {}, { values: [value] }));
-	});
-	return Array.from(groups.values()).map((group) => ({
-		key: group.key,
-		label: group.label,
-		value: group.values.map(String).join(", ")
-	}));
-}
-function getPresentationStyle(presentation) {
-	const style = _objectSpread2({}, (presentation === null || presentation === void 0 ? void 0 : presentation.style) || {});
-	Object.entries((presentation === null || presentation === void 0 ? void 0 : presentation.tokens) || {}).forEach(([key, value]) => {
-		if (value !== void 0) style[TOKEN_VARIABLES[key]] = value;
-	});
-	style["--pc-a12-option-columns"] = (presentation === null || presentation === void 0 ? void 0 : presentation.optionColumns) || 2;
-	return style;
-}
-const A12 = ({ dataSource, isShowImage = true, isShowDelete = false, isShowOriginalPrice = false, isShowEditProduct = false, disabled = false, disabledEditClick = false, slots, presentation, onDelete, onEditProduct }) => {
-	var _ref8, _dataSource$num, _dataSource$total, _dataSource$origin_to, _slots$contentFooter;
-	const display = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.a12) || {};
-	const specificationsData = useMemo(() => resolveSpecifications(dataSource), [dataSource]);
-	const weighingInfo = useMemo(() => resolveWeighingSnapshot(dataSource), [dataSource]);
-	const quantity = Number((_ref8 = (_dataSource$num = dataSource === null || dataSource === void 0 ? void 0 : dataSource.num) !== null && _dataSource$num !== void 0 ? _dataSource$num : dataSource === null || dataSource === void 0 ? void 0 : dataSource.quantity) !== null && _ref8 !== void 0 ? _ref8 : 1) || 1;
-	const lineTotal = Number((_dataSource$total = dataSource === null || dataSource === void 0 ? void 0 : dataSource.total) !== null && _dataSource$total !== void 0 ? _dataSource$total : 0) * quantity - Number((dataSource === null || dataSource === void 0 ? void 0 : dataSource.totalDifference) || 0);
-	const originalTotal = Number((_dataSource$origin_to = dataSource === null || dataSource === void 0 ? void 0 : dataSource.origin_total) !== null && _dataSource$origin_to !== void 0 ? _dataSource$origin_to : 0) * quantity;
-	const symbol = dataSource === null || dataSource === void 0 ? void 0 : dataSource.symbol;
-	const slotContext = useMemo(() => ({
-		item: dataSource,
-		disabled
-	}), [dataSource, disabled]);
-	const style = useMemo(() => getPresentationStyle(presentation), [presentation]);
-	const defaultSpecifications = specificationsData.length ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__specifications` }, specificationsData.map((specification) => /* @__PURE__ */ React.createElement("div", {
-		className: `${PREFIX}-a12__specification`,
-		key: specification.key
-	}, specification.label ? /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}-a12__specification-label` }, specification.label) : null, /* @__PURE__ */ React.createElement("strong", { className: `${PREFIX}-a12__specification-value` }, specification.value)))) : (dataSource === null || dataSource === void 0 ? void 0 : dataSource.product_option_string) ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__specification-summary` }, dataSource.product_option_string) : null;
-	const specifications = (slots === null || slots === void 0 ? void 0 : slots.specifications) ? slots.specifications(_objectSpread2(_objectSpread2({}, slotContext), {}, { defaultSpecifications })) : defaultSpecifications;
-	const contentFooter = slots === null || slots === void 0 || (_slots$contentFooter = slots.contentFooter) === null || _slots$contentFooter === void 0 ? void 0 : _slots$contentFooter.call(slots, slotContext);
-	const defaultPrice = /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__price` }, /* @__PURE__ */ React.createElement("strong", null, formatAmount(lineTotal, 2, symbol)), isShowOriginalPrice && originalTotal > 0 && originalTotal !== lineTotal ? /* @__PURE__ */ React.createElement("del", null, formatAmount(originalTotal, 2, symbol)) : null);
-	const defaultEdit = Boolean(isShowEditProduct && onEditProduct) ? /* @__PURE__ */ React.createElement("button", {
-		type: "button",
-		className: `${PREFIX}-a12__edit`,
-		disabled: disabled || disabledEditClick,
-		onClick: (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			onEditProduct === null || onEditProduct === void 0 || onEditProduct(dataSource);
-		}
-	}, locales.getText("pisell2.product.card.edit")) : null;
-	const defaultQuantityControl = (slots === null || slots === void 0 ? void 0 : slots.quantityControl) ? slots.quantityControl(slotContext) : /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__quantity-fallback` }, /* @__PURE__ */ React.createElement("span", null, display.quantityText || `× ${quantity}`));
-	const defaultActionRail = /* @__PURE__ */ React.createElement("aside", { className: `${PREFIX}-a12__rail` }, isShowDelete && onDelete ? /* @__PURE__ */ React.createElement("button", {
-		type: "button",
-		className: `${PREFIX}-a12__delete`,
-		"aria-label": locales.getText("pisell2.cart.sku-card.actions.delete"),
-		disabled,
-		onClick: (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			onDelete(dataSource);
-		}
-	}, /* @__PURE__ */ React.createElement(IconFont, { type: "pisell2-trash-01" })) : null, defaultPrice, defaultEdit, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__quantity-control` }, defaultQuantityControl));
-	const actionRail = (slots === null || slots === void 0 ? void 0 : slots.actionRail) ? slots.actionRail(_objectSpread2(_objectSpread2({}, slotContext), {}, {
-		defaultPrice,
-		defaultEdit,
-		defaultQuantityControl
-	})) : defaultActionRail;
-	return /* @__PURE__ */ React.createElement("div", {
-		className: classNames(`${PREFIX}-a12`, `${PREFIX}-a12--${(presentation === null || presentation === void 0 ? void 0 : presentation.density) || "comfortable"}`, `${PREFIX}-a12--align-${(presentation === null || presentation === void 0 ? void 0 : presentation.contentAlign) || "start"}`, !isShowImage && `pisell-cart-sku-card-a12--without-media`, presentation === null || presentation === void 0 ? void 0 : presentation.className),
-		style
-	}, isShowImage ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__media` }, (dataSource === null || dataSource === void 0 ? void 0 : dataSource.image) ? /* @__PURE__ */ React.createElement("img", {
-		alt: "",
-		src: image.ali(dataSource.image, 320),
-		style: { objectFit: (presentation === null || presentation === void 0 ? void 0 : presentation.mediaFit) || "cover" }
-	}) : /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true" }, String((dataSource === null || dataSource === void 0 ? void 0 : dataSource.name) || "").slice(0, 2))) : null, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__content` }, display.eyebrow ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__eyebrow` }, display.eyebrow) : null, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__name` }, dataSource === null || dataSource === void 0 ? void 0 : dataSource.name), weighingInfo ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__weighing` }, /* @__PURE__ */ React.createElement(Weighing, {
-		dataSource: weighingInfo,
-		symbol
-	})) : null, specifications, contentFooter ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}-a12__content-footer` }, contentFooter) : null), actionRail);
-};
-//#endregion
-export { A12 as default };

package/es/components/productCard/cartSkuCard/variants/A12/index.less

@@ -1,279 +0,0 @@
-.pisell-cart-sku-card-a12 {
-  --pc-a12-bg: #fff;
-  --pc-a12-border-color: #e4e7ec;
-  --pc-a12-radius: 18px;
-  --pc-a12-min-height: 164px;
-  --pc-a12-media-width: 228px;
-  --pc-a12-rail-width: 190px;
-  --pc-a12-content-padding: 20px 22px;
-  --pc-a12-rail-padding: 18px 20px;
-  --pc-a12-accent: #b20d12;
-  --pc-a12-title-color: #101828;
-  --pc-a12-title-size: 32px;
-  --pc-a12-title-weight: 800;
-  --pc-a12-price-color: var(--pc-a12-accent);
-  --pc-a12-price-size: 30px;
-  --pc-a12-option-bg: #f5f6f8;
-  --pc-a12-option-label-color: #667085;
-  --pc-a12-option-value-color: #101828;
-  --pc-a12-option-gap: 6px;
-  --pc-a12-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
-
-  display: grid;
-  grid-template-columns:
-    var(--pc-a12-media-width)
-    minmax(0, 1fr)
-    var(--pc-a12-rail-width);
-  min-height: var(--pc-a12-min-height);
-  overflow: hidden;
-  border: 1px solid var(--pc-a12-border-color);
-  border-radius: var(--pc-a12-radius);
-  background: var(--pc-a12-bg);
-  box-shadow: var(--pc-a12-shadow);
-  hyphens: none;
-  overflow-wrap: normal;
-  word-break: normal;
-
-  &--without-media {
-    grid-template-columns: minmax(0, 1fr) var(--pc-a12-rail-width);
-  }
-
-  &__media {
-    position: relative;
-    display: grid;
-    min-height: var(--pc-a12-min-height);
-    place-items: center;
-    overflow: hidden;
-    background: #f2f4f7;
-    color: var(--pc-a12-accent);
-    font-size: 32px;
-    font-weight: 800;
-
-    img {
-      position: absolute;
-      inset: 0;
-      display: block;
-      width: 100%;
-      height: 100%;
-      min-height: 0;
-    }
-  }
-
-  &__content {
-    display: flex;
-    min-width: 0;
-    flex-direction: column;
-    justify-content: flex-start;
-    padding: var(--pc-a12-content-padding);
-  }
-
-  &__content-footer {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-top: auto;
-    padding-top: 12px;
-
-    .ant-divider {
-      margin: 0 !important;
-    }
-  }
-
-  &--align-center &__content {
-    justify-content: center;
-  }
-
-  &__eyebrow {
-    overflow: hidden;
-    margin-bottom: 4px;
-    color: var(--pc-a12-accent);
-    font-size: 14px;
-    font-weight: 800;
-    line-height: 20px;
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-    white-space: nowrap;
-  }
-
-  &__name {
-    min-width: 0;
-    overflow: hidden;
-    color: var(--pc-a12-title-color);
-    font-size: var(--pc-a12-title-size);
-    font-weight: var(--pc-a12-title-weight);
-    line-height: 1.15;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__weighing {
-    min-width: 0;
-    margin-top: 8px;
-  }
-
-  &__specifications {
-    display: grid;
-    grid-template-columns: repeat(
-      var(--pc-a12-option-columns, 2),
-      minmax(0, 1fr)
-    );
-    gap: var(--pc-a12-option-gap);
-    margin-top: 10px;
-  }
-
-  &__specification,
-  &__specification-summary {
-    min-width: 0;
-    padding: 7px 9px;
-    border-radius: 7px;
-    background: var(--pc-a12-option-bg);
-  }
-
-  &__specification {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  &__specification-label {
-    overflow: hidden;
-    color: var(--pc-a12-option-label-color);
-    font-size: 11px;
-    font-weight: 700;
-    line-height: 16px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__specification-value,
-  &__specification-summary {
-    overflow: hidden;
-    color: var(--pc-a12-option-value-color);
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 20px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__rail {
-    position: relative;
-    display: flex;
-    min-width: 0;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: var(--pc-a12-rail-padding);
-    border-left: 1px solid var(--pc-a12-border-color);
-  }
-
-  &__delete {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    display: grid;
-    width: 42px;
-    height: 42px;
-    padding: 0;
-    place-items: center;
-    border: 0;
-    border-radius: 50%;
-    background: transparent;
-    color: var(--pc-a12-accent);
-    font-size: 26px;
-    cursor: pointer;
-
-    .anticon,
-    svg {
-      width: 30px;
-      height: 30px;
-      font-size: 30px;
-    }
-
-    &:active {
-      background: #fef3f2;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-  }
-
-  &__price {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    color: var(--pc-a12-price-color);
-
-    strong {
-      font-size: var(--pc-a12-price-size);
-      font-weight: 800;
-      line-height: 1.15;
-      white-space: nowrap;
-    }
-
-    del {
-      color: #667085;
-      font-size: 13px;
-    }
-  }
-
-  &__edit {
-    min-width: 62px;
-    min-height: 38px;
-    margin-top: 10px;
-    padding: 7px 14px;
-    border: 1px solid #f5b7ba;
-    border-radius: 999px;
-    background: #fff;
-    color: var(--pc-a12-accent);
-    font: inherit;
-    font-size: 14px;
-    font-weight: 700;
-    white-space: nowrap;
-    cursor: pointer;
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-  }
-
-  &__quantity-control {
-    display: flex;
-    width: 100%;
-    min-height: 44px;
-    align-items: center;
-    justify-content: center;
-    margin-top: 10px;
-    padding-top: 10px;
-  }
-
-  &__quantity-fallback {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-    font-weight: 700;
-  }
-
-  &--compact {
-    --pc-a12-min-height: 132px;
-    --pc-a12-media-width: 124px;
-    --pc-a12-rail-width: 156px;
-    --pc-a12-content-padding: 15px 18px;
-    --pc-a12-rail-padding: 14px 16px;
-    --pc-a12-price-size: 25px;
-  }
-}
-
-@container (max-width: 620px) {
-  .pisell-cart-sku-card-a12 {
-    --pc-a12-media-width: 112px;
-    --pc-a12-rail-width: 150px;
-    --pc-a12-content-padding: 14px;
-    --pc-a12-price-size: 24px;
-    --pc-a12-option-columns: 1;
-  }
-}

package/lib/components/productCard/cartSkuCard/types.d.ts

@@ -1,56 +0,0 @@
-import { CSSProperties, ReactNode } from "react";
-
-//#region src/components/productCard/cartSkuCard/types.d.ts
-type CartSkuCardVariant = 'a2' | 'a5' | 'a9' | 'a12';
-interface CartSkuCardA12Display {
-  eyebrow?: ReactNode;
-  quantityText?: ReactNode;
-}
-interface CartSkuCardSlotContext {
-  item: any;
-  disabled: boolean;
-}
-interface CartSkuCardA12Slots {
-  contentFooter?: (context: CartSkuCardSlotContext) => ReactNode;
-  quantityControl?: (context: CartSkuCardSlotContext) => ReactNode;
-  actionRail?: (context: CartSkuCardSlotContext & {
-    defaultPrice: ReactNode;
-    defaultEdit: ReactNode;
-    defaultQuantityControl: ReactNode;
-  }) => ReactNode;
-  specifications?: (context: CartSkuCardSlotContext & {
-    defaultSpecifications: ReactNode;
-  }) => ReactNode;
-}
-interface CartSkuCardA12Tokens {
-  background: string;
-  borderColor: string;
-  borderRadius: string;
-  minHeight: string;
-  mediaWidth: string;
-  actionRailWidth: string;
-  contentPadding: string;
-  actionRailPadding: string;
-  accentColor: string;
-  titleColor: string;
-  titleFontSize: string;
-  titleFontWeight: number;
-  priceColor: string;
-  priceFontSize: string;
-  optionBackground: string;
-  optionLabelColor: string;
-  optionValueColor: string;
-  optionGap: string;
-  shadow: string;
-}
-interface CartSkuCardA12Presentation {
-  density?: 'compact' | 'comfortable';
-  optionColumns?: 1 | 2 | 3;
-  mediaFit?: 'cover' | 'contain';
-  contentAlign?: 'start' | 'center';
-  className?: string;
-  style?: CSSProperties;
-  tokens?: Partial<CartSkuCardA12Tokens>;
-}
-//#endregion
-export { CartSkuCardA12Display, CartSkuCardA12Presentation, CartSkuCardA12Slots, CartSkuCardVariant };

package/lib/components/productCard/cartSkuCard/variants/A12/index.js

@@ -1,129 +0,0 @@
-const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
-const require_objectSpread2 = require("../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
-const require_index = require("../../../../iconfont/index.js");
-const require_index$1 = require("../../components/weighing/index.js");
-const require_index$2 = require("../../index.js");
-let react = require("react");
-react = require_runtime.__toESM(react);
-let _pisell_utils = require("@pisell/utils");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
-require("./index.less");
-//#region src/components/productCard/cartSkuCard/variants/A12/index.tsx
-const TOKEN_VARIABLES = {
-	background: "--pc-a12-bg",
-	borderColor: "--pc-a12-border-color",
-	borderRadius: "--pc-a12-radius",
-	minHeight: "--pc-a12-min-height",
-	mediaWidth: "--pc-a12-media-width",
-	actionRailWidth: "--pc-a12-rail-width",
-	contentPadding: "--pc-a12-content-padding",
-	actionRailPadding: "--pc-a12-rail-padding",
-	accentColor: "--pc-a12-accent",
-	titleColor: "--pc-a12-title-color",
-	titleFontSize: "--pc-a12-title-size",
-	titleFontWeight: "--pc-a12-title-weight",
-	priceColor: "--pc-a12-price-color",
-	priceFontSize: "--pc-a12-price-size",
-	optionBackground: "--pc-a12-option-bg",
-	optionLabelColor: "--pc-a12-option-label-color",
-	optionValueColor: "--pc-a12-option-value-color",
-	optionGap: "--pc-a12-option-gap",
-	shadow: "--pc-a12-shadow"
-};
-/** 复用其它变体使用的 options，只在展示阶段合并同组已选项。 */
-function resolveSpecifications(dataSource) {
-	if (!Array.isArray(dataSource === null || dataSource === void 0 ? void 0 : dataSource.options)) return [];
-	const groups = /* @__PURE__ */ new Map();
-	dataSource.options.forEach((option, index) => {
-		var _ref, _option$name, _ref2, _option$quantity, _ref3, _ref4, _option$option_group_, _ref5, _ref6, _ref7, _option$option_group_2;
-		const name = (_ref = (_option$name = option === null || option === void 0 ? void 0 : option.name) !== null && _option$name !== void 0 ? _option$name : option === null || option === void 0 ? void 0 : option.title) !== null && _ref !== void 0 ? _ref : option === null || option === void 0 ? void 0 : option.variant_item_name;
-		if (name === void 0 || name === null || name === "") return;
-		const quantity = Math.max(1, Number((_ref2 = (_option$quantity = option.quantity) !== null && _option$quantity !== void 0 ? _option$quantity : option.num) !== null && _ref2 !== void 0 ? _ref2 : 1));
-		const value = quantity > 1 ? `${String(name)} × ${quantity}` : name;
-		const groupKey = String((_ref3 = (_ref4 = (_option$option_group_ = option.option_group_id) !== null && _option$option_group_ !== void 0 ? _option$option_group_ : option.group_id) !== null && _ref4 !== void 0 ? _ref4 : option.variant_group_id) !== null && _ref3 !== void 0 ? _ref3 : `option-${index}`);
-		const label = (_ref5 = (_ref6 = (_ref7 = (_option$option_group_2 = option.option_group_name) !== null && _option$option_group_2 !== void 0 ? _option$option_group_2 : option.group_name) !== null && _ref7 !== void 0 ? _ref7 : option.option_group_title) !== null && _ref6 !== void 0 ? _ref6 : option.group_title) !== null && _ref5 !== void 0 ? _ref5 : option.variant_group_name;
-		const current = groups.get(groupKey);
-		if (current) {
-			current.values.push(value);
-			if (!current.label && label) current.label = label;
-			return;
-		}
-		groups.set(groupKey, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ key: groupKey }, label ? { label } : {}), {}, { values: [value] }));
-	});
-	return Array.from(groups.values()).map((group) => ({
-		key: group.key,
-		label: group.label,
-		value: group.values.map(String).join(", ")
-	}));
-}
-function getPresentationStyle(presentation) {
-	const style = require_objectSpread2._objectSpread2({}, (presentation === null || presentation === void 0 ? void 0 : presentation.style) || {});
-	Object.entries((presentation === null || presentation === void 0 ? void 0 : presentation.tokens) || {}).forEach(([key, value]) => {
-		if (value !== void 0) style[TOKEN_VARIABLES[key]] = value;
-	});
-	style["--pc-a12-option-columns"] = (presentation === null || presentation === void 0 ? void 0 : presentation.optionColumns) || 2;
-	return style;
-}
-const A12 = ({ dataSource, isShowImage = true, isShowDelete = false, isShowOriginalPrice = false, isShowEditProduct = false, disabled = false, disabledEditClick = false, slots, presentation, onDelete, onEditProduct }) => {
-	var _ref8, _dataSource$num, _dataSource$total, _dataSource$origin_to, _slots$contentFooter;
-	const display = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.a12) || {};
-	const specificationsData = (0, react.useMemo)(() => resolveSpecifications(dataSource), [dataSource]);
-	const weighingInfo = (0, react.useMemo)(() => (0, _pisell_utils.resolveWeighingSnapshot)(dataSource), [dataSource]);
-	const quantity = Number((_ref8 = (_dataSource$num = dataSource === null || dataSource === void 0 ? void 0 : dataSource.num) !== null && _dataSource$num !== void 0 ? _dataSource$num : dataSource === null || dataSource === void 0 ? void 0 : dataSource.quantity) !== null && _ref8 !== void 0 ? _ref8 : 1) || 1;
-	const lineTotal = Number((_dataSource$total = dataSource === null || dataSource === void 0 ? void 0 : dataSource.total) !== null && _dataSource$total !== void 0 ? _dataSource$total : 0) * quantity - Number((dataSource === null || dataSource === void 0 ? void 0 : dataSource.totalDifference) || 0);
-	const originalTotal = Number((_dataSource$origin_to = dataSource === null || dataSource === void 0 ? void 0 : dataSource.origin_total) !== null && _dataSource$origin_to !== void 0 ? _dataSource$origin_to : 0) * quantity;
-	const symbol = dataSource === null || dataSource === void 0 ? void 0 : dataSource.symbol;
-	const slotContext = (0, react.useMemo)(() => ({
-		item: dataSource,
-		disabled
-	}), [dataSource, disabled]);
-	const style = (0, react.useMemo)(() => getPresentationStyle(presentation), [presentation]);
-	const defaultSpecifications = specificationsData.length ? /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$2.PREFIX}-a12__specifications` }, specificationsData.map((specification) => /* @__PURE__ */ react.default.createElement("div", {
-		className: `${require_index$2.PREFIX}-a12__specification`,
-		key: specification.key
-	}, specification.label ? /* @__PURE__ */ react.default.createElement("span", { className: `${require_index$2.PREFIX}-a12__specification-label` }, specification.label) : null, /* @__PURE__ */ react.default.createElement("strong", { className: `${require_index$2.PREFIX}-a12__specification-value` }, specification.value)))) : (dataSource === null || dataSource === void 0 ? void 0 : dataSource.product_option_string) ? /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$2.PREFIX}-a12__specification-summary` }, dataSource.product_option_string) : null;
-	const specifications = (slots === null || slots === void 0 ? void 0 : slots.specifications) ? slots.specifications(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, slotContext), {}, { defaultSpecifications })) : defaultSpecifications;
-	const contentFooter = slots === null || slots === void 0 || (_slots$contentFooter = slots.contentFooter) === null || _slots$contentFooter === void 0 ? void 0 : _slots$contentFooter.call(slots, slotContext);
-	const defaultPrice = /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$2.PREFIX}-a12__price` }, /* @__PURE__ */ react.default.createElement("strong", null, (0, _pisell_utils.formatAmount)(lineTotal, 2, symbol)), isShowOriginalPrice && originalTotal > 0 && originalTotal !== lineTotal ? /* @__PURE__ */ react.default.createElement("del", null, (0, _pisell_utils.formatAmount)(originalTotal, 2, symbol)) : null);
-	const defaultEdit = Boolean(isShowEditProduct && onEditProduct) ? /* @__PURE__ */ react.default.createElement("button", {
-		type: "button",
-		className: `${require_index$2.PREFIX}-a12__edit`,
-		disabled: disabled || disabledEditClick,
-		onClick: (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			onEditProduct === null || onEditProduct === void 0 || onEditProduct(dataSource);
-		}
-	}, _pisell_utils.locales.getText("pisell2.product.card.edit")) : null;
-	const defaultQuantityControl = (slots === null || slots === void 0 ? void 0 : slots.quantityControl) ? slots.quantityControl(slotContext) : /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$2.PREFIX}-a12__quantity-fallback` }, /* @__PURE__ */ react.default.createElement("span", null, display.quantityText || `× ${quantity}`));
-	const defaultActionRail = /* @__PURE__ */ react.default.createElement("aside", { className: `${require_index$2.PREFIX}-a12__rail` }, isShowDelete && onDelete ? /* @__PURE__ */ react.default.createElement("button", {
-		type: "button",
-		className: `${require_index$2.PREFIX}-a12__delete`,
-		"aria-label": _pisell_utils.locales.getText("pisell2.cart.sku-card.actions.delete"),
-		disabled,
-		onClick: (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			onDelete(dataSource);
-		}
-	}, /* @__PURE__ */ react.default.createElement(require_index.default, { type: "pisell2-trash-01" })) : null, defaultPrice, defaultEdit, /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$2.PREFIX}-a12__quantity-control` }, defaultQuantityControl));
-	const actionRail = (slots === null || slots === void 0 ? void 0 : slots.actionRail) ? slots.actionRail(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, slotContext), {}, {
-		defaultPrice,
-		defaultEdit,
-		defaultQuantityControl
-	})) : defaultActionRail;
-	return /* @__PURE__ */ react.default.createElement("div", {
-		className: (0, classnames.default)(`${require_index$2.PREFIX}-a12`, `${require_index$2.PREFIX}-a12--${(presentation === null || presentation === void 0 ? void 0 : presentation.density) || "comfortable"}`, `${require_index$2.PREFIX}-a12--align-${(presentation === null || presentation === void 0 ? void 0 : presentation.contentAlign) || "start"}`, !isShowImage && `pisell-cart-sku-card-a12--without-media`, presentation === null || presentation === void 0 ? void 0 : presentation.className),
-		style
-	}, isShowImage ? /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$2.PREFIX}-a12__media` }, (dataSource === null || dataSource === void 0 ? void 0 : dataSource.image) ? /* @__PURE__ */ react.default.createElement("img", {
-		alt: "",
-		src: _pisell_utils.image.ali(dataSource.image, 320),
-		style: { objectFit: (presentation === null || presentation === void 0 ? void 0 : presentation.mediaFit) || "cover" }
-	}) : /* @__PURE__ */ react.default.createElement("span", { "aria-hidden": "true" }, String((dataSource === null || dataSource === void 0 ? void 0 : dataSource.name) || "").slice(0, 2))) : null, /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$2.PREFIX}-a12__content` }, display.eyebrow ? /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$2.PREFIX}-a12__eyebrow` }, display.eyebrow) : null, /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$2.PREFIX}-a12__name` }, dataSource === null || dataSource === void 0 ? void 0 : dataSource.name), weighingInfo ? /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$2.PREFIX}-a12__weighing` }, /* @__PURE__ */ react.default.createElement(require_index$1.default, {
-		dataSource: weighingInfo,
-		symbol
-	})) : null, specifications, contentFooter ? /* @__PURE__ */ react.default.createElement("div", { className: `${require_index$2.PREFIX}-a12__content-footer` }, contentFooter) : null), actionRail);
-};
-//#endregion
-exports.default = A12;