@pisell/materials 6.3.4 → 6.4.2

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

@@ -44,10 +44,10 @@ var Sales = ({ item, isShowNote }) => {
     return {
       ...p,
       title: p == null ? void 0 : p.product_title,
-      price: p == null ? void 0 : p.payment_price,
+      price: p == null ? void 0 : p.selling_price,
       symbol: item.symbol,
       num: p == null ? void 0 : p.product_quantity,
-      total: p == null ? void 0 : p.payment_price
+      total: p == null ? void 0 : p.selling_price
     };
   });
   return (other_products == null ? void 0 : other_products.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}product-sales-wrap` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}product-sales-title` }, import_utils2.locales.getText("pisell2.product.card.sales")), /* @__PURE__ */ import_react.default.createElement(

package/lib/components/productCard/components/Time/components/SelectHolderModal/index.js

@@ -154,7 +154,7 @@ var SelectHolderModal = (props) => {
       import_utils.locales.getText(
         "pisell2.product.card.add.holder.modal.cancel"
       )
-    )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "select-holder-modal-footer-right" }, /* @__PURE__ */ import_react.default.createElement(
       import_antd.Button,
       {
         size: "large",

package/lib/components/productCard/components/Time/components/SelectHolderModal/index.less

@@ -35,5 +35,8 @@
     .select-holder-modal-clear-button {
       width: 132px;
     }
+    .select-holder-modal-footer-right {
+      display: flex;
+    }
   }
 }

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { ProductCardTypes } from './types';
 import './index.less';
-declare const ProductCard: React.FC<ProductCardTypes>;
+declare const ProductCard: React.FC<ProductCardTypes> & {
+    V2: any;
+};
 export default ProductCard;

package/lib/components/productCard/index.js

@@ -51,6 +51,7 @@ var import_status = require("./status");
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
 var import_Warning = __toESM(require("./components/Warning"));
 var import_index = require("./index.less");
+var import_cartSkuCard = __toESM(require("./cartSkuCard"));
 var ProductCard = (props) => {
   var _a, _b;
   const context = (0, import_useEngineContext.default)();
@@ -63,6 +64,7 @@ var ProductCard = (props) => {
     isShowDelete = import_status.defaultValue.isShowDelete,
     isShowPackageNote = import_status.defaultValue.isShowPackageNote,
     isShowEditProduct = import_status.defaultValue.isShowEditProduct,
+    scenario,
     onEditProduct,
     onAction,
     onDelete,
@@ -106,8 +108,9 @@ var ProductCard = (props) => {
       import_cardPro.default,
       {
         className: (0, import_classnames.default)("pisell-lowcode-product-card", {
-          ["pisell-lowcode-product-card-image"]: !showImage,
-          ["pisell-lowcode-normal-product-card"]: !showImage && isNormalProduct
+          ["pisell-lowcode-product-card-image"]: !showImage && scenario !== "booking2",
+          ["pisell-lowcode-normal-product-card"]: !showImage && isNormalProduct && scenario !== "booking2",
+          ["pisell-lowcode-product-card-image-booking2"]: scenario === "booking2"
         }),
         key: _id
       },
@@ -197,4 +200,5 @@ var ProductCard = (props) => {
     )
   );
 };
+ProductCard.V2 = import_cartSkuCard.default;
 var productCard_default = ProductCard;

package/lib/components/productCard/index.less

@@ -47,6 +47,12 @@
   }
 }
 
+.pisell-lowcode-product-card-image-booking2 {
+  .pisell-cardPro-content {
+    padding: 4px;
+  }
+}
+
 .pisell-lowcode-product-card-wrap {
   position: relative;
 }

package/lib/components/productCard/locales.js

@@ -42,7 +42,10 @@ var locales_default = {
     "pisell2.product.card.add.holder.placeholder": (val) => `Please select ${val || ""}`,
     "pisell2.product.card.add.holder.placeholder.multiple": (num, val) => `Please Select ${num} ${val || ""}`,
     "pisell2.product.card.add.holder.modal.title.1": `Please Select`,
-    "pisell2.product.card.hour.minute": (hour, minute) => `${hour > 0 ? `${hour}h` : ""}${hour > 0 && minute > 0 ? " " : ""}${minute > 0 ? `${minute}min` : ""}`,
+    "pisell2.product.card.hour.minute": (hour, minute) => {
+      if (hour <= 0 && minute <= 0) return `${0}min`;
+      return `${hour > 0 ? `${hour}h` : ""}${hour > 0 && minute > 0 ? " " : ""}${minute > 0 ? `${minute}min` : ""}`;
+    },
     "pisell2.product.card.sales": "Sales",
     "pisell2.product.card.add.holder.modal.cancel": "Cancel",
     "pisell2.product.card.add.holder.modal.clear": "Clear",
@@ -69,7 +72,10 @@ var locales_default = {
     "pisell2.product.card.add.holder.placeholder": (val) => `请选择${val || ""}`,
     "pisell2.product.card.add.holder.placeholder.multiple": (num, val) => `请选择${num}${val || ""}`,
     "pisell2.product.card.add.holder.modal.title.1": `请选择`,
-    "pisell2.product.card.hour.minute": (hour, minute) => `${hour > 0 ? `${hour}小时` : ""}${minute > 0 ? `${minute}分钟` : ""}`,
+    "pisell2.product.card.hour.minute": (hour, minute) => {
+      if (hour <= 0 && minute <= 0) return `${0}分钟`;
+      return `${hour > 0 ? `${hour}小时` : ""}${minute > 0 ? `${minute}分钟` : ""}`;
+    },
     "pisell2.product.card.sales": "销售",
     "pisell2.product.card.add.holder.modal.cancel": "取消",
     "pisell2.product.card.add.holder.modal.clear": "清除",
@@ -96,7 +102,10 @@ var locales_default = {
     "pisell2.product.card.add.holder.placeholder": (val) => `請選擇${val || ""}`,
     "pisell2.product.card.add.holder.placeholder.multiple": (num, val) => `請選擇${num}${val || ""}`,
     "pisell2.product.card.add.holder.modal.title.1": `請選擇`,
-    "pisell2.product.card.hour.minute": (hour, minute) => `${hour > 0 ? `${hour}小時` : ""}${minute > 0 ? `${minute}分鐘` : ""}`,
+    "pisell2.product.card.hour.minute": (hour, minute) => {
+      if (hour <= 0 && minute <= 0) return `${0}分鐘`;
+      return `${hour > 0 ? `${hour}小時` : ""}${minute > 0 ? `${minute}分鐘` : ""}`;
+    },
     "pisell2.product.card.sales": "銷售",
     "pisell2.product.card.add.holder.modal.cancel": "取消",
     "pisell2.product.card.add.holder.modal.clear": "清除",

package/lib/components/table/Gallery/components/VirtualGrid/useGapSize.d.ts

@@ -1,5 +1,5 @@
 declare const useGapSize: (gap: number | number[]) => {
-    horizontal: any;
-    vertical: any;
+    horizontal: number;
+    vertical: number;
 };
 export default useGapSize;

package/lib/components/table/Table/AddFieldModal/index.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
+import "./index.less";
 declare const AddFieldModal: React.FC;
 export default AddFieldModal;

package/lib/components/table/Table/AddFieldModal/index.js

@@ -36,7 +36,7 @@ var import_iconfont = __toESM(require("../../../iconfont"));
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var import_SelectField = __toESM(require("../SelectField"));
-var import_index = __toESM(require("./index.less"));
+var import_index = require("./index.less");
 var import_hooks = require("../../../../hooks");
 var import_model = require("../../model");
 var AddFieldModal = () => {
@@ -85,7 +85,7 @@ var AddFieldModal = () => {
         },
         onFinish: addField
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: import_index.default["add-field-modal"] }, /* @__PURE__ */ import_react.default.createElement(
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-add-field-modal" }, /* @__PURE__ */ import_react.default.createElement(
         import_antd.Form.Item,
         {
           label: "Field Name",
@@ -101,13 +101,13 @@ var AddFieldModal = () => {
           import_antd.Input,
           {
             placeholder: "Field name (optional)",
-            className: import_index.default["header-search"]
+            className: "pisell-lowcode-header-search"
           }
         )
-      ), /* @__PURE__ */ import_react.default.createElement(import_SelectField.default, null), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index.default["modal-footer"] }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index.default["add-describe"] }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pi-Plus", className: import_index.default["icon"] }), /* @__PURE__ */ import_react.default.createElement("span", { className: import_index.default["label"] }, "Add description")), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index.default["btns"] }, /* @__PURE__ */ import_react.default.createElement(
+      ), /* @__PURE__ */ import_react.default.createElement(import_SelectField.default, null), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-modal-footer" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-add-describe" }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pi-Plus", className: "pisell-lowcode-icon" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-lowcode-label" }, "Add description")), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-btns" }, /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: import_index.default["cancel"],
+          className: "pisell-lowcode-cancel",
           onClick: () => {
             onCloseModal();
           }
@@ -116,7 +116,7 @@ var AddFieldModal = () => {
       ), /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: import_index.default["submit"],
+          className: "pisell-lowcode-submit",
           onClick: () => {
             form.submit();
           }
@@ -136,7 +136,7 @@ var AddFieldModal = () => {
       placement: "bottomRight",
       overlayInnerStyle: { padding: 0 },
       trigger: "click",
-      overlayClassName: import_index.default["popover-wrap"],
+      overlayClassName: "pisell-lowcode-popover-wrap",
       onOpenChange: (e) => {
         if (!e) {
           onCloseModal();
@@ -146,11 +146,11 @@ var AddFieldModal = () => {
       },
       open: openModal
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: import_index.default["add-field-btn"] }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-add-field-btn" }, /* @__PURE__ */ import_react.default.createElement(
       import_iconfont.default,
       {
         type: "pi-a-Property3Add",
-        className: import_index.default["add-field-icon"]
+        className: "pisell-lowcode-add-field-icon"
       }
     ))
   );

package/lib/components/table/Table/AddFieldModal/index.less

@@ -1,4 +1,4 @@
-.add-field-btn {
+.pisell-lowcode-add-field-btn {
   position: absolute;
   right: 0;
   top: 0;
@@ -11,10 +11,10 @@
   box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
   cursor: pointer;
 
-  .add-field-icon {}
+  .pisell-lowcode-add-field-icon {}
 }
 
-.popover-wrap {
+.pisell-lowcode-popover-wrap {
   :global {
     .pisell-lowcode-popover-arrow {
       display: none;
@@ -22,11 +22,11 @@
   }
 }
 
-.add-field-modal {
+.pisell-lowcode-add-field-modal {
   width: 360px;
   padding: 16px 16px 0 16px;
 
-  .modal-footer {
+  .pisell-lowcode-modal-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -35,13 +35,13 @@
     padding: 0 16px;
     border-top: 1px solid #F1F1F1;
 
-    .add-describe {
+    .pisell-lowcode-add-describe {
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
 
-      .icon {
+      .pisell-lowcode-icon {
         width: 24px;
         height: 24px;
         display: flex;
@@ -51,27 +51,27 @@
         color: #1B1B1B;
       }
 
-      .label {
+      .pisell-lowcode-label {
         margin-left: 2px;
         font-size: 14px;
         color: #777777;
       }
     }
 
-    .btns {
+    .pisell-lowcode-btns {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 16px;
 
-      .cancel {
+      .pisell-lowcode-cancel {
         cursor: pointer;
         font-weight: 400;
         font-size: 14px;
         color: #1B1B1B;
       }
 
-      .submit {
+      .pisell-lowcode-submit {
         cursor: pointer;
         font-weight: 400;
         font-size: 14px;

package/lib/components/table/Table/SelectField/index.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const SelectField: () => JSX.Element;
 export default SelectField;

package/lib/components/table/Table/fields/date/filterUtil/index.js

@@ -40,17 +40,14 @@ function filterUtil_default({
   key,
   item
 }) {
-  if (!value)
-    return true;
+  if (!value) return true;
   const valueDayjsObj = (0, import_dayjs.default)(value);
   if (!valueDayjsObj.isValid()) {
     return true;
   }
   const dataValue = (0, import_utils2.getValueByKeys)(item, key);
-  if ((0, import_utils.isUndefined)(dataValue))
-    return false;
+  if ((0, import_utils.isUndefined)(dataValue)) return false;
   const dataDayjsObj = (0, import_dayjs.default)(dataValue);
-  if (!dataDayjsObj.isValid())
-    return false;
+  if (!dataDayjsObj.isValid()) return false;
   return dataDayjsObj.isSame(valueDayjsObj, "day");
 }

package/lib/components/table/Table/fields/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const fieldMaps: {
     text: {
         field: {
@@ -197,12 +198,12 @@ export declare const fieldList: ({
     field_icon: string;
     field_name: string;
     field_type: string;
-    default_value: string;
+    default_value: boolean;
 } | {
     field_icon: string;
     field_name: string;
     field_type: string;
-    default_value: boolean;
+    default_value: string;
 } | {
     field_icon: string;
     field_name: string;

package/lib/components/table/Table/fields/rangePicker/filterUtil/index.js

@@ -43,19 +43,15 @@ function filterUtil_default({
   key,
   item
 }) {
-  if (!value)
-    return true;
-  if ((value == null ? void 0 : value.length) !== 2)
-    return true;
+  if (!value) return true;
+  if ((value == null ? void 0 : value.length) !== 2) return true;
   const valueDayjsObj = value.map((item2) => (0, import_dayjs.default)(item2 || ""));
   if (valueDayjsObj.some((item2) => !item2.isValid())) {
     return true;
   }
   const dataValue = (0, import_utils2.getValueByKeys)(item, key);
-  if ((0, import_utils.isUndefined)(dataValue))
-    return false;
+  if ((0, import_utils.isUndefined)(dataValue)) return false;
   const dataDayjsObj = (0, import_dayjs.default)(dataValue);
-  if (!dataDayjsObj.isValid())
-    return false;
+  if (!dataDayjsObj.isValid()) return false;
   return isDateInRange(dataDayjsObj, valueDayjsObj);
 }

package/lib/components/table/Table/fields/select/filterUtil/index.d.ts

@@ -2,4 +2,4 @@ export default function ({ value, key, item, }: {
     value: string | string[];
     key: string | string[];
     item: Record<string, any>;
-}): any;
+}): boolean;

package/lib/components/table/Table/fields/text/Show/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FieldPropsType } from "../../types";
 import "./index.less";
 declare const Show: (props: FieldPropsType) => JSX.Element;

package/lib/components/table/Table/fields/text/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import filter from "./filterUtil";
 declare const _default: {
     field: {

package/lib/components/table/Table/fields/treeSelect/filterUtil/index.d.ts

@@ -2,4 +2,4 @@ export default function ({ value, key, item, }: {
     value: string | string[] | Record<string, any>[];
     key: string | string[];
     item: Record<string, any>;
-}): any;
+}): boolean;

package/lib/components/table/Table/fields/utils/index.js

@@ -25,8 +25,7 @@ module.exports = __toCommonJS(utils_exports);
 var import_utils = require("@pisell/utils");
 var getValueByKeys = (obj, keys) => {
   var _a;
-  if (!keys)
-    return keys;
+  if (!keys) return keys;
   if ((0, import_utils.isString)(keys)) {
     keys = [keys];
   }

package/lib/components/table/Table/utils.d.ts

@@ -155,7 +155,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
+}) => ("order_by" | "group_by" | "column_setting" | "gallery_setting" | "filter_setting" | "view_mode")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

package/lib/components/virtual-keyboard/Number/index.js

@@ -50,6 +50,7 @@ var Number = (props) => {
     placeholder,
     onEnter,
     selectType = "light",
+    defaultSelect,
     ...others
   } = props;
   const config = (0, import_usePisellConfig.default)();
@@ -98,11 +99,13 @@ var Number = (props) => {
         max,
         min,
         value,
+        defaultValue,
         onChange: setValue,
         placeholder,
         doneText,
         resetText,
         onEnter,
+        defaultSelect,
         rightItemsStyle: {
           buttonBackgroundColor: configColor.buttonBackgroundColor,
           textColor: configColor.textColor,

package/lib/components/virtual-keyboard/Number/types.d.ts

@@ -8,6 +8,7 @@ export interface NumberProps {
     value?: string | number;
     onChange?: (val: string | number) => void;
     onEnter?: (val: string | number) => void;
+    defaultSelect?: boolean;
     selectType?: 'light' | 'dark';
     backgroundColor?: string;
     containerBackgroundColor?: string;

package/lib/components/virtual-keyboard/index.d.ts

@@ -9,6 +9,17 @@ interface VirtualKeyboardProps extends React.HTMLAttributes<HTMLDivElement> {
     style?: React.CSSProperties;
     onChange?: (value?: any) => void;
     value?: string;
+    selectType?: 'light' | 'dark';
+    backgroundColor?: string;
+    containerBackgroundColor?: string;
+    buttonBackgroundColor?: string;
+    textColor?: string;
+    keyboardBackgroundColor?: string;
+    keyboardButtonBackgroundColor?: string;
+    keyboardButtonTextColor?: string;
+    keyboardButtonHoverColor?: string;
+    primaryButtonBackgroundColor?: string;
+    primaryButtonTextColor?: string;
 }
 declare const VirtualKeyboard: (props: VirtualKeyboardProps) => JSX.Element;
 export default VirtualKeyboard;

package/lib/components/virtual-keyboard/index.js

@@ -37,6 +37,8 @@ var import_Keyboard = __toESM(require("./Keyboard"));
 var import_VirtualKeyInput = __toESM(require("./VirtualKeyInput"));
 var import_index = require("./index.less");
 var import_classnames = __toESM(require("classnames"));
+var import_utils = require("@pisell/utils");
+var import_usePisellConfig = __toESM(require("../pisell-config-provider/hooks/usePisellConfig"));
 var items = [
   {
     value: 1,
@@ -105,6 +107,32 @@ var items = [
     type: "primary"
   }
 ];
+var virtualKeyboardThemeConfig = {
+  dark: {
+    backgroundColor: "rgba(0, 0, 0, 0.70)",
+    containerBackgroundColor: "rgba(0, 0, 0, 0.40)",
+    buttonBackgroundColor: "#ffffff",
+    textColor: "#000000",
+    keyboardBackgroundColor: "rgba(0, 0, 0, 0.40)",
+    keyboardButtonBackgroundColor: "#ffffff",
+    keyboardButtonTextColor: "#000000",
+    keyboardButtonHoverColor: "#f5f5f5",
+    primaryButtonBackgroundColor: "#4ca30d",
+    primaryButtonTextColor: "#ffffff"
+  },
+  light: {
+    backgroundColor: "#ffffff",
+    containerBackgroundColor: "#d0d5dd",
+    buttonBackgroundColor: "#ffffff",
+    textColor: "#000000",
+    keyboardBackgroundColor: "#f9f9f9",
+    keyboardButtonBackgroundColor: "#ffffff",
+    keyboardButtonTextColor: "#000000",
+    keyboardButtonHoverColor: "#f5f5f5",
+    primaryButtonBackgroundColor: "#4ca30d",
+    primaryButtonTextColor: "#ffffff"
+  }
+};
 var VirtualKeyboard = (props) => {
   const {
     virtualKeyInputProps,
@@ -113,15 +141,45 @@ var VirtualKeyboard = (props) => {
     keyboardProps,
     onChange,
     value,
-    rightPanel
+    rightPanel,
+    selectType = "light",
+    ...others
   } = props;
+  const config = (0, import_usePisellConfig.default)();
   (0, import_react.useEffect)(() => {
     document.body.id = "body";
   }, []);
+  const configColor = (0, import_react.useMemo)(() => {
+    const currentConfig = virtualKeyboardThemeConfig[selectType];
+    const validProps = Object.entries(props).reduce((acc, [key, value2]) => {
+      if (value2 !== void 0 && key in currentConfig) {
+        acc[key] = value2;
+      }
+      return acc;
+    }, {});
+    return { ...currentConfig, ...validProps };
+  }, [selectType, props]);
+  (0, import_react.useEffect)(() => {
+    (0, import_utils.setTheme)({
+      "--virtual-keyboard-background-color": configColor.backgroundColor,
+      "--virtual-keyboard-container-background-color": configColor.containerBackgroundColor,
+      "--virtual-keyboard-button-background-color": configColor.buttonBackgroundColor,
+      "--virtual-keyboard-text-color": configColor.textColor,
+      "--virtual-keyboard-keyboard-background-color": configColor.keyboardBackgroundColor,
+      "--virtual-keyboard-keyboard-button-background-color": configColor.keyboardButtonBackgroundColor,
+      "--virtual-keyboard-keyboard-button-text-color": configColor.keyboardButtonTextColor,
+      "--virtual-keyboard-keyboard-button-hover-color": configColor.keyboardButtonHoverColor,
+      "--virtual-keyboard-primary-button-background-color": configColor.primaryButtonBackgroundColor,
+      "--virtual-keyboard-primary-button-text-color": configColor.primaryButtonTextColor
+    });
+  }, [configColor]);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: (0, import_classnames.default)("virtual-keyboard-component", className),
+      className: (0, import_classnames.default)("virtual-keyboard-component", className, {
+        "virtual-keyboard-component-dark": selectType === "dark",
+        "virtual-keyboard-component-light": selectType === "light"
+      }),
       style
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("virtual-keyboard-component-left") }, /* @__PURE__ */ import_react.default.createElement(import_VirtualKeyInput.default, { ...virtualKeyInputProps }), /* @__PURE__ */ import_react.default.createElement(import_Keyboard.default, { items, ...keyboardProps })),

package/lib/components/virtual-keyboard/index.less

@@ -2,14 +2,46 @@
   display: flex;
   align-items: center;
   gap: 20px;
+  background-color: var(--virtual-keyboard-background-color, #ffffff);
+  
+  &.virtual-keyboard-component-dark {
+    background-color: var(--virtual-keyboard-background-color, rgba(0, 0, 0, 0.70));
+  }
+  
+  &.virtual-keyboard-component-light {
+    background-color: var(--virtual-keyboard-background-color, #ffffff);
+  }
 }
 
 .virtual-keyboard-component-left {
   padding: 10px;
   width: 380px;
   border-radius: 10px;
-  background: var(--Gray-300, #D0D5DD);
+  background: var(--virtual-keyboard-container-background-color, #D0D5DD);
   backdrop-filter: blur(50px);
+  
+  .pisell-virtual-keyboard-input {
+    background-color: var(--virtual-keyboard-button-background-color, #ffffff);
+    color: var(--virtual-keyboard-text-color, #000000);
+  }
+  
+  .pisell-keyboard {
+    background-color: var(--virtual-keyboard-keyboard-background-color, #f9f9f9);
+    
+    .pisell-keyboard-item {
+      background-color: var(--virtual-keyboard-keyboard-button-background-color, #ffffff);
+      color: var(--virtual-keyboard-keyboard-button-text-color, #000000);
+      
+      &:hover {
+        background-color: var(--virtual-keyboard-keyboard-button-hover-color, #f5f5f5);
+      }
+      
+      &.pisell-keyboard-item-primary {
+        background-color: var(--virtual-keyboard-primary-button-background-color, #4ca30d);
+        color: var(--virtual-keyboard-primary-button-text-color, #ffffff);
+      }
+    }
+  }
 }
 
 .virtual-keyboard-component-right {

package/lib/components/walletCard/Guide/index.js

@@ -51,9 +51,19 @@ var Guide = (props) => {
     return (setting == null ? void 0 : setting.walletGuideConfig) || {};
   }, [setting == null ? void 0 : setting.walletGuideConfig]);
   const handleClick = (e) => {
-    var _a2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
     e.stopPropagation();
     if (!((_a2 = _setting == null ? void 0 : _setting.skipLink) == null ? void 0 : _a2.page)) return;
+    if ((_d2 = (_c2 = (_b2 = utils == null ? void 0 : utils.interaction) == null ? void 0 : _b2.utils) == null ? void 0 : _c2.isAppEnv) == null ? void 0 : _d2.call(_c2)) {
+      (_g2 = (_f2 = (_e2 = utils == null ? void 0 : utils.interaction) == null ? void 0 : _e2.utils) == null ? void 0 : _f2.postMessageToApp) == null ? void 0 : _g2.call(_f2, {
+        module: "global",
+        key: "openNative",
+        data: {
+          link: _setting == null ? void 0 : _setting.skipLink
+        }
+      });
+      return;
+    }
     utils == null ? void 0 : utils.jumpPageByLink(_setting == null ? void 0 : _setting.skipLink);
   };
   return /* @__PURE__ */ import_react.default.createElement(

package/lib/hooks/useResponsive.js

@@ -35,8 +35,7 @@ var responsiveConfig = {
 function handleResize() {
   const oldInfo = info;
   calculate();
-  if (oldInfo === info)
-    return;
+  if (oldInfo === info) return;
   for (const subscriber of subscribers) {
     subscriber();
   }
@@ -58,8 +57,7 @@ function calculate() {
 }
 function configResponsive(config) {
   responsiveConfig = config;
-  if (info)
-    calculate();
+  if (info) calculate();
 }
 function useResponsive() {
   if (import_utils.isBrowser && !listening) {
@@ -70,8 +68,7 @@ function useResponsive() {
   }
   const [state, setState] = (0, import_react.useState)(info);
   (0, import_react.useEffect)(() => {
-    if (!import_utils.isBrowser)
-      return;
+    if (!import_utils.isBrowser) return;
     if (!listening) {
       window.addEventListener("resize", handleResize);
     }