@pisell/materials 1.10.21 → 1.10.23

package/lib/components/pisellFloorMapLayout/hooks/useFloorMapTransformMetrics.js

@@ -536,8 +536,11 @@ function useFloorMapTransformMetrics(params) {
 	persistKeyRef.current = viewportPersistKey;
 	const persistTimerRef = (0, react.useRef)(null);
 	const flushPersistRef = (0, react.useRef)(null);
-	const schedulePersistViewport = (0, react.useCallback)((snapshot) => {
-		const key = persistKeyRef.current;
+	/** Dock 按钮触发的是程序化动画，快速切画布时 onZoomStop 可能来不及触发。 */
+	const viewportControlPersistKeyRef = (0, react.useRef)();
+	const viewportControlTimerRef = (0, react.useRef)(null);
+	const schedulePersistViewport = (0, react.useCallback)((snapshot, explicitKey) => {
+		const key = explicitKey !== null && explicitKey !== void 0 ? explicitKey : persistKeyRef.current;
 		if (!key) return;
 		if (persistTimerRef.current != null) {
 			clearTimeout(persistTimerRef.current);
@@ -552,6 +555,14 @@ function useFloorMapTransformMetrics(params) {
 		flushPersistRef.current = doWrite;
 		persistTimerRef.current = setTimeout(doWrite, 300);
 	}, []);
+	const markViewportControlInteraction = (0, react.useCallback)(() => {
+		viewportControlPersistKeyRef.current = persistKeyRef.current;
+		if (viewportControlTimerRef.current != null) clearTimeout(viewportControlTimerRef.current);
+		viewportControlTimerRef.current = setTimeout(() => {
+			viewportControlTimerRef.current = null;
+			viewportControlPersistKeyRef.current = void 0;
+		}, FIT_BOUNDS_PROGRAMMATIC_TWEEN_GUARD_MS);
+	}, []);
 	/**
 	* 由 onTransformed 回调统一上报当前 transform：
 	*   - 写 lastTransformRef（替代父组件直接赋值）
@@ -570,6 +581,12 @@ function useFloorMapTransformMetrics(params) {
 			y,
 			scale: nextScale
 		};
+		const controlKey = viewportControlPersistKeyRef.current;
+		if (controlKey) schedulePersistViewport({
+			x,
+			y,
+			scale: nextScale
+		}, controlKey);
 		const snap = lastFitSnapshotRef.current;
 		if (snap) {
 			const same = Math.abs(snap.x - x) < .5 && Math.abs(snap.y - y) < .5 && Math.abs(snap.scale - nextScale) < .005;
@@ -583,7 +600,7 @@ function useFloorMapTransformMetrics(params) {
 			}
 			setIsAtFitBounds((prev) => prev === same ? prev : same);
 		} else setIsAtFitBounds((prev) => prev ? false : prev);
-	}, [clearFitBoundsTweenHold]);
+	}, [clearFitBoundsTweenHold, schedulePersistViewport]);
 	/**
 	* 用户交互结束时（pan / zoom / pinch / wheel stop）调用：
 	* 以 lastTransformRef 当前值为快照写 localStorage（debounce 兜底高频 stop）。
@@ -718,6 +735,11 @@ function useFloorMapTransformMetrics(params) {
 	(0, react.useEffect)(() => {
 		return () => {
 			var _flushPersistRef$curr;
+			if (viewportControlTimerRef.current != null) {
+				clearTimeout(viewportControlTimerRef.current);
+				viewportControlTimerRef.current = null;
+			}
+			viewportControlPersistKeyRef.current = void 0;
 			if (persistTimerRef.current != null) {
 				clearTimeout(persistTimerRef.current);
 				persistTimerRef.current = null;
@@ -751,6 +773,7 @@ function useFloorMapTransformMetrics(params) {
 		isAtFitBounds,
 		notifyTransformed,
 		persistCurrentViewport,
+		markViewportControlInteraction,
 		attachTransformContext,
 		lastTransformRef,
 		isInteractingWithElement,

package/lib/components/pisellGridPro/GridView/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GridViewProps } from "./type.js";
 //#region src/components/pisellGridPro/GridView/index.d.ts
 declare const GridView: (props: GridViewProps) => JSX.Element;

package/lib/components/pisellGridPro/ToolBar/type.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 //#region src/components/pisellGridPro/ToolBar/type.d.ts
 interface ToolBarProps {
   className?: string;

package/lib/components/pisellInput/components/BankCard/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PisellContextType } from "../../../pisell-config-provider/context.js";
 import { InputProps } from "antd";
 //#region src/components/pisellInput/components/BankCard/index.d.ts

package/lib/components/pisellInput/components/Copy/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PisellContextType } from "../../../pisell-config-provider/context.js";
 import { ButtonProps, InputProps } from "antd";
 

package/lib/components/pisellInput/components/SecurityCode/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PisellContextType } from "../../../pisell-config-provider/context.js";
 import { InputProps } from "antd";
 //#region src/components/pisellInput/components/SecurityCode/index.d.ts

package/lib/components/pisellInput/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PisellContextType } from "../pisell-config-provider/context.js";
 import { BankCardProps } from "./components/BankCard/index.js";
 import { SecurityCodeProps } from "./components/SecurityCode/index.js";

package/lib/components/pisellLoading/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SpinProps } from "antd";
 //#region src/components/pisellLoading/index.d.ts
 type MaskType = {

package/lib/components/pisellMenu/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MenuProps } from "antd";
 
 //#region src/components/pisellMenu/types.d.ts

package/lib/components/pisellQuickFilter/type.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FilterItemProps } from "../filter/types.js";
 import { FormInstance } from "antd";
 

package/lib/components/pisellRecordBoard/shellFrame/Calendar/PisellRecordBoardCalendarView.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { RecordBoardCalendarProps } from "../../types.js";
 
 //#region src/components/pisellRecordBoard/shellFrame/Calendar/PisellRecordBoardCalendarView.d.ts

package/lib/components/pisellReservationSchedule/PisellReservationSchedule.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PisellReservationScheduleProps } from "./types.js";
 //#region src/components/pisellReservationSchedule/PisellReservationSchedule.d.ts
 /**

package/lib/components/pisellReservationScheduleBand/PisellReservationScheduleBand.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PisellReservationScheduleBandProps } from "./types.js";
 //#region src/components/pisellReservationScheduleBand/PisellReservationScheduleBand.d.ts
 /**

package/lib/components/pisellSort/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PisellSortProps } from "./type.js";
 
 //#region src/components/pisellSort/index.d.ts

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PisellTimeNavigatorProps } from "./types.js";
 //#region src/components/pisellTimeNavigator/PisellTimeNavigator.d.ts
 /**

package/lib/components/pisellTooltip/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PisellContextType } from "../pisell-config-provider/context.js";
 import { TooltipPropsWithTitle } from "antd/es/tooltip";
 //#region src/components/pisellTooltip/index.d.ts

package/lib/components/pisellUpload/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { UploadProps } from "antd";
 //#region src/components/pisellUpload/index.d.ts
 interface PisellUploadProps extends UploadProps {

package/lib/components/pisellWalletPassCard/index.d.ts

@@ -20,6 +20,8 @@ interface PisellWalletPassCardProps {
   storeName: string;
   /** 余额 */
   balance?: number;
+  /** 已格式化的余额展示内容 */
+  formattedBalance?: React.ReactNode;
   /** 识别码编号 */
   code: string;
   /** 有效期 */

package/lib/components/pisellWalletPassCard/index.js

@@ -43,7 +43,7 @@ const PisellWalletPassCard = (props) => {
 			if (pressTimer) clearTimeout(pressTimer);
 		};
 	}, [pressTimer]);
-	const { id, type, code, qrCode, balance, disabledReason, name, storeName, redeem, validDate, disabled, active = false, cover, balanceTitle, redeemTitle, showCover = true, showDetail = true, showBalance = true, showRedeem = true, showName = true, showCode = true, showStoreName = true, showValidDate = true, showQrCode = true, showBalanceSymbol = true, showDisabledReason = true, showDiscount = false, discount, showActions, actions, beforeEdit, onBeforeEditAmount, onConfirmEdit, onConfirmEditAmount, onDetail, useExternalDetail = false, originData, style = {}, mode = "multiple", showActiveIcon, enableEditAmount, showStatus, cardStatus, nameTitleStyle, formatBalance, formatBalanceTitle, formatRedeem, formatRedeemTitle, maxRedeem, showHolderName = true, holder, onSetHolder, validDateBySchedule, scheduleList } = props;
+	const { id, type, code, qrCode, balance, formattedBalance, disabledReason, name, storeName, redeem, validDate, disabled, active = false, cover, balanceTitle, redeemTitle, showCover = true, showDetail = true, showBalance = true, showRedeem = true, showName = true, showCode = true, showStoreName = true, showValidDate = true, showQrCode = true, showBalanceSymbol = true, showDisabledReason = true, showDiscount = false, discount, showActions, actions, beforeEdit, onBeforeEditAmount, onConfirmEdit, onConfirmEditAmount, onDetail, useExternalDetail = false, originData, style = {}, mode = "multiple", showActiveIcon, enableEditAmount, showStatus, cardStatus, nameTitleStyle, formatBalance, formatBalanceTitle, formatRedeem, formatRedeemTitle, maxRedeem, showHolderName = true, holder, onSetHolder, validDateBySchedule, scheduleList } = props;
 	(0, react.useEffect)(() => {
 		document.body.id = "body";
 	}, []);
@@ -271,7 +271,7 @@ const PisellWalletPassCard = (props) => {
 		active,
 		data: props
 	}) : balanceTitle || require_index.getText("pisell-wallet-pass-card-balance"), disabled || isMini ? ": " : "");
-	const createOriginalBalanceDom = () => /* @__PURE__ */ react.default.createElement(require_index$4.default, {
+	const createOriginalBalanceDom = () => formattedBalance !== void 0 ? /* @__PURE__ */ react.default.createElement("span", { className: "pisell-card-amount-item-value" }, formattedBalance) : /* @__PURE__ */ react.default.createElement(require_index$4.default, {
 		className: "pisell-card-amount-item-value",
 		useThousandsSeparator: true,
 		value: balance,

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

@@ -20,6 +20,7 @@ const require_index$12 = require("./components/Promotion/index.js");
 const require_index$13 = require("./components/Gift/index.js");
 const require_index$14 = require("./components/BookingItem/index.js");
 const require_index$15 = require("./components/inlineActions/index.js");
+const require_index$16 = require("./variants/A12/index.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _pisell_utils = require("@pisell/utils");
@@ -59,12 +60,14 @@ const _excluded = [
 	"rightActionsDisplay",
 	"escapeDom",
 	"maxSpecsCount",
-	"isShowRelatedProduct"
+	"isShowRelatedProduct",
+	"a12Slots",
+	"a12Presentation"
 ];
 const PREFIX = "pisell-cart-sku-card";
 const CartSkuCard = (props) => {
 	var _context$appHelper$ut;
-	const { dataSource = require_status.defaultValue.dataSource, isShowImage = require_status.defaultValue.isShowImage, isShowQuantityBadge = true, isShowOriginalPrice = require_status.defaultValue.isShowOriginalPrice, isShowHolder = require_status.defaultValue.isShowHolder, isShowNote = require_status.defaultValue.isShowNote, isShowDelete = require_status.defaultValue.isShowDelete, isShowInlineDelete = isShowDelete, isShowAmountFooter = require_status.defaultValue.isShowAmountFooter, isShowPackageNote = require_status.defaultValue.isShowPackageNote, isShowEditProduct = require_status.defaultValue.isShowEditProduct, disabledClick = require_status.defaultValue.disabledClick, disabledEditClick = require_status.defaultValue.disabledEditClick, disabledNoteEdit, externalNoteEditor = false, onEditProduct, onAction, onDelete, onNote, onLike, onCard, onChangeResource, onPromotion, onGift, onChangeHolder, itemType = "product", type, rightActions = [], rightActionsDisplay = "swipe", escapeDom, maxSpecsCount = 1, isShowRelatedProduct = true } = props, other = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
+	const { dataSource = require_status.defaultValue.dataSource, isShowImage = require_status.defaultValue.isShowImage, isShowQuantityBadge = true, isShowOriginalPrice = require_status.defaultValue.isShowOriginalPrice, isShowHolder = require_status.defaultValue.isShowHolder, isShowNote = require_status.defaultValue.isShowNote, isShowDelete = require_status.defaultValue.isShowDelete, isShowInlineDelete = isShowDelete, isShowAmountFooter = require_status.defaultValue.isShowAmountFooter, isShowPackageNote = require_status.defaultValue.isShowPackageNote, isShowEditProduct = require_status.defaultValue.isShowEditProduct, disabledClick = require_status.defaultValue.disabledClick, disabledEditClick = require_status.defaultValue.disabledEditClick, disabledNoteEdit, externalNoteEditor = false, onEditProduct, onAction, onDelete, onNote, onLike, onCard, onChangeResource, onPromotion, onGift, onChangeHolder, itemType = "product", type, rightActions = [], rightActionsDisplay = "swipe", escapeDom, maxSpecsCount = 1, isShowRelatedProduct = true, a12Slots, a12Presentation } = props, other = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
 	const useOpenNoteRef = (0, react.useRef)();
 	const context = require_useEngineContext.default();
 	_pisell_utils.locales.init(require_locales.default, ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut = _context$appHelper$ut.storage) === null || _context$appHelper$ut === void 0 ? void 0 : _context$appHelper$ut.get("umi_locale")) || "en");
@@ -222,13 +225,37 @@ const CartSkuCard = (props) => {
 			openNote: openNoteEditor
 		})) : null);
 	};
+	const renderA12 = () => {
+		var _a12Slots$contentFoot;
+		const note = isShowNote ? /* @__PURE__ */ react.default.createElement(require_index$9.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, other), {}, {
+			item: dataSource,
+			disabledEdit: disabledNoteEdit !== null && disabledNoteEdit !== void 0 ? disabledNoteEdit : other.disabledEdit,
+			openNote: openNoteEditor
+		})) : null;
+		const slots = note ? require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, a12Slots), {}, { contentFooter: (_a12Slots$contentFoot = a12Slots === null || a12Slots === void 0 ? void 0 : a12Slots.contentFooter) !== null && _a12Slots$contentFoot !== void 0 ? _a12Slots$contentFoot : (() => note) }) : a12Slots;
+		return /* @__PURE__ */ react.default.createElement(require_index$16.default, {
+			dataSource,
+			isShowImage,
+			isShowDelete,
+			isShowOriginalPrice,
+			isShowEditProduct,
+			disabled: Boolean(disabledClick),
+			disabledEditClick,
+			slots,
+			presentation: a12Presentation,
+			onDelete,
+			onEditProduct
+		});
+	};
 	const renderContent = () => {
+		if (type === "a12") return renderA12();
 		if (type === "a9") return renderA9();
 		if (type === "a5") return renderA5();
 		return renderA2();
 	};
 	if (dataSource === null || dataSource === void 0 ? void 0 : dataSource.isGift) return null;
 	const content = renderContent();
+	const useIntegratedWrapper = type === "a12" || rightActionsDisplay === "inline";
 	const cardContent = /* @__PURE__ */ react.default.createElement("div", {
 		className: (0, classnames.default)(PREFIX, `${PREFIX}--${type}`),
 		onClick: (e) => {
@@ -242,7 +269,10 @@ const CartSkuCard = (props) => {
 		isShowRelatedProduct,
 		isShowDelete
 	}, content) : content);
-	return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-wrapper-container`, { [`${PREFIX}-wrapper-container--inline`]: rightActionsDisplay === "inline" }) }, rightActionsDisplay === "inline" ? /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-wrapper`, `${PREFIX}-wrapper--inline`) }, cardContent) : /* @__PURE__ */ react.default.createElement(require_index$8.SwipeAction, {
+	return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-wrapper-container`, {
+		[`${PREFIX}-wrapper-container--inline`]: useIntegratedWrapper,
+		[`${PREFIX}-wrapper-container--a12`]: type === "a12"
+	}) }, useIntegratedWrapper ? /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)(`${PREFIX}-wrapper`, `${PREFIX}-wrapper--inline`, type === "a12" && `pisell-cart-sku-card-wrapper--a12`) }, cardContent) : /* @__PURE__ */ react.default.createElement(require_index$8.SwipeAction, {
 		closeOnAction: false,
 		className: (0, classnames.default)(`${PREFIX}-wrapper`),
 		rightActions: _rightActions,

package/lib/components/productCard/cartSkuCard/index.less

@@ -3,6 +3,10 @@
     width: 100%;
     min-width: 0;
   }
+
+  &--a12 {
+    container-type: inline-size;
+  }
 }
 
 .pisell-cart-sku-card-wrapper {
@@ -15,6 +19,14 @@
     width: 100%;
     overflow: hidden;
   }
+
+
+  &--a12 {
+    border: 0;
+    border-radius: 18px;
+    background: transparent;
+    overflow: visible;
+  }
 }
 
 .pisell-cart-sku-card__main-row {
@@ -51,6 +63,12 @@
     cursor: pointer;
   }
 
+  &--a12 {
+    display: block;
+    padding: 0;
+    gap: 0;
+  }
+
   &__delete-btn {
     cursor: pointer;
     position: absolute;

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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,129 @@
+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;