@digitalc/dxp-ui 0.0.6-0 → 0.0.6-alpha.2

package/lib/components/Input/index.js

@@ -84,16 +84,13 @@ var Input = (props) => {
   const designTokens = (0, import_designTokens.useDesignTokens)();
   const styleToken = (0, import_designTokens.useStyleToken)();
   const { controlHeight } = designTokens;
-  const prefix = `${import_constants.cssClasses.PREFIX}-inputOutside`;
+  const prefix = `${import_constants.cssClasses.PREFIX}`;
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
       token: {},
       path: [`${prefix}`]
     }, () => `
-      .${prefix}-input {
-        height: ${controlHeight}px;
-      }
       .${prefix}-input-affix-wrapper {
         height: ${controlHeight}px !important;
         padding-block: 0 !important;

package/lib/components/Input/style/index.less

@@ -1,4 +1 @@
 @import './variables.less';
-
-// 基础按钮样式
-@components: inputOutside;

package/lib/components/Input/style/variables.less

@@ -1,5 +1 @@
-
 @import '../../../style/variables.less';
-
-// Primary Button
-@btn-primary-bg-default: var(--base-color-primary);

package/lib/components/Modal/index.js

@@ -138,7 +138,8 @@ var Modal = (props) => {
       token: {},
       path: [`${prefix}`]
     }, () => `
-      .${prefix}-sticky-headers .${prefix}-header {
+      .${prefix}-sticky-headers .${prefix}-title {
+        padding-right: 1rem;
       }
       .${prefix}-sticky-header.${prefix}-sticky-footer .${prefix}-body {
         overflow-y: auto;

package/lib/components/Navigation/index.js

@@ -177,7 +177,7 @@ var Navigation = (_a) => {
         className
       )
     }, restProps),
-    !hidegoback && /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { className: `${import_constants.cssClasses.PREFIX}-header-back`, customeIconSize: leftIconSize, inverse: isInverse, size: "medium", name: leftIconName || "icon-a-Backarrow-copy", onClick: onGoBack }),
+    !hidegoback && /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { className: `${import_constants.cssClasses.PREFIX}-header-back`, customIconSize: leftIconSize, inverse: isInverse, size: "medium", name: leftIconName || "icon-a-Backarrow-copy", onClick: onGoBack }),
     /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${import_constants.cssClasses.PREFIX}-title-warp`, { hasIconBage: !(0, import_lodash.isEmpty)(titleIconBadge) }) }, !(0, import_lodash.isEmpty)(titleIconBadge) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-title-badge` }, /* @__PURE__ */ import_react.default.createElement(import__.Icon, { inverse: isInverse, size: 24, style: { marginRight: "4px" }, type: titleIconBadge.iconName }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, titleIconBadge.title), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-badge` }, +titleIconBadge.badge > 99 ? "99+" : titleIconBadge.badge)) : /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, title)),
     !noRight && /* @__PURE__ */ import_react.default.createElement(import__.IconButtonGroup, { className: `${import_constants.cssClasses.PREFIX}-rightWarp` }, (_a2 = rightIcons == null ? void 0 : rightIcons.slice(0, 3)) == null ? void 0 : _a2.map((i, index) => /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { inverse: isInverse, key: index, name: i.iconName, size: "medium", onClick: i.onIconClick })), !(0, import_lodash.isEmpty)(rightLink) && /* @__PURE__ */ import_react.default.createElement(import__.TextLink, { inverse: isInverse, className: `${import_constants.cssClasses.PREFIX}-right-link`, type: import__.TextLinkEnum.default, text: rightLink.linkText, onClick: rightLink.onLinkClick }))
   );

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { RowProps as AntdRowProps } from 'antd';
+interface RowProps extends AntdRowProps {
+    children?: React.ReactNode;
+}
+declare const Row: React.FC<RowProps>;
+export default Row;

package/lib/components/Row/index.js

@@ -0,0 +1,114 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Row/index.tsx
+var Row_exports = {};
+__export(Row_exports, {
+  default: () => Row_default
+});
+module.exports = __toCommonJS(Row_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("../../utils");
+var import_constants = require("../../constants");
+var Row = (_a) => {
+  var _b = _a, { gutter, children } = _b, props = __objRest(_b, ["gutter", "children"]);
+  const [horizontalGutter, verticalGutter] = (() => {
+    if (!gutter)
+      return [0, 0];
+    if (typeof gutter === "number")
+      return [gutter, 0];
+    if (Array.isArray(gutter))
+      return [gutter[0] || 0, gutter[1] || 0];
+    return [0, 0];
+  })();
+  const wrappedChildren = import_react.default.Children.map(children, (child) => {
+    if (!import_react.default.isValidElement(child))
+      return child;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Col,
+      __spreadProps(__spreadValues({}, child.props), {
+        style: __spreadValues({
+          paddingLeft: horizontalGutter / 2,
+          paddingRight: horizontalGutter / 2,
+          paddingBottom: verticalGutter
+        }, child.props.style)
+      })
+    );
+  });
+  const prefix = `${import_constants.cssClasses.PREFIX}`;
+  console.log("isWebViewBelow90()", (0, import_utils.isWebViewBelow90)());
+  if ((0, import_utils.isWebViewBelow90)()) {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.ConfigProvider,
+      {
+        wave: { disabled: true },
+        prefixCls: prefix
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Row, __spreadValues({ gutter }, props), wrappedChildren)
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.ConfigProvider,
+    {
+      wave: { disabled: true },
+      prefixCls: prefix
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Row, __spreadValues({ gutter }, props), children)
+  );
+};
+var Row_default = Row;

package/lib/components/Selector/ESelector.js

@@ -113,7 +113,9 @@ var ESelector = (props) => {
       path: [`${prefix}-warp`]
     }, () => `
       .${prefix}-warp {
-        gap: ${gap || 16}px;
+        > div + div {
+          margin-top: ${gap || 16}px;
+        }
         .itemSelect {
           .filterOptions {
             background: ${colorSelectorBackground};
@@ -165,7 +167,7 @@ var ESelector = (props) => {
         ),
         onClick: () => !(disabled || item.disabled) && handleChangeSelectValue(item[idKey], item)
       },
-      /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { className: "select-tick", type: "icon-Tick", size: 32, color: "#fff" }),
+      /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { className: "select-tick", type: "icon-Tick", size: 14, color: "#fff" }),
       hasImg ? /* @__PURE__ */ import_react.default.createElement("div", { className: "imgStyle" }, item.image && /* @__PURE__ */ import_react.default.createElement("img", { alt: "", src: item.image }), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 78 } }, item[labelKey])) : item[labelKey]
     )
   )));

package/lib/components/Selector/style/index.less

@@ -44,14 +44,11 @@
     &.active {
       &.showActiveIcon {
         .select-tick {
-          width: 16px;
-          height: 16px;
           display: block;
           position: absolute;
-          right: 8px;
-          bottom: 4px;
-          z-index: 100;
-          transform: scale(0.5, 0.5);
+          right: 2px;
+          bottom: 0;
+          z-index: 2;
         }
 
         &:before {
@@ -61,14 +58,14 @@
         &:after {
           position: absolute;
           content: '';
-          width: 64px;
-          height: 64px;
+          width: 48px;
+          height: 48px;
           overflow: hidden;
           border-radius: 10000px;
-          bottom: -32px;
-          right: -32px;
+          bottom: -24px;
+          right: -24px;
           border-radius: 10000px;
-          z-index: 99;
+          z-index: 1;
         }
       }
     }

package/lib/components/SelectorItem/index.js

@@ -114,7 +114,7 @@ var SelectorItem = (props) => {
         }
       }
     },
-    /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { className: "select-tick", type: "icon-Tick", size: 32, color: "#fff" }),
+    /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { className: "select-tick", type: "icon-Tick", size: 14, color: "#fff" }),
     children
   );
 };

package/lib/components/SelectorItem/style/index.less

@@ -23,14 +23,11 @@
   &.active {
     &.showActiveIcon {
       .select-tick {
-        width: 16px;
-        height: 16px;
         display: block;
         position: absolute;
-        right: 8px;
-        bottom: 4px;
-        z-index: 100;
-        transform: scale(0.5, 0.5);
+        right: 2px;
+        bottom: 0;
+        z-index: 2;
       }
 
       &:before {
@@ -40,14 +37,14 @@
       &:after {
         position: absolute;
         content: '';
-        width: 64px;
-        height: 64px;
+        width: 48px;
+        height: 48px;
         overflow: hidden;
         border-radius: 10000px;
-        bottom: -32px;
-        right: -32px;
+        bottom: -24px;
+        right: -24px;
         border-radius: 10000px;
-        z-index: 99;
+        z-index: 1;
       }
     }
   }

package/lib/components/Stepper/index.js

@@ -125,8 +125,9 @@ var Stepper = (_a) => {
   const { title, nextStep } = (0, import_react.useMemo)(() => {
     var _a2, _b2;
     const hasNextStep = items && current !== void 0 && current < items.length - 1;
+    const curStep = items && current !== void 0;
     return {
-      title: hasNextStep ? ((_a2 = items[current]) == null ? void 0 : _a2.title) || "" : "",
+      title: curStep ? ((_a2 = items[current]) == null ? void 0 : _a2.title) || "" : "",
       nextStep: hasNextStep ? ((_b2 = items[current + 1]) == null ? void 0 : _b2.title) || "" : ""
     };
   }, [items, current]);

package/lib/components/StickyFooter/index.js

@@ -169,7 +169,7 @@ var StickyFooter = (props) => {
       onClick: props.onClick
     }),
     extraContent && extraContent,
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-wrap` }, type === "default" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import__.Button, { icon: btnIcon, type: "primary", block: true, onClick: onBtnClick, disabled: btnDisabled }, buttonText)), type === "priceVariant" && !hideAmount && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-wrap` }, type === "default" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import__.Button, { icon: btnIcon, type: "primary", block: true, onClick: onBtnClick, disabled: btnDisabled }, buttonText)), type === "priceVariant" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, hideAmount ? /* @__PURE__ */ import_react.default.createElement("div", null) : /* @__PURE__ */ import_react.default.createElement(
       import__.Amount,
       {
         titleType,
@@ -186,7 +186,7 @@ var StickyFooter = (props) => {
         iconType
       },
       price
-    ), autoBreakPoint === DESKTOP && !hideBtn && /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: "middle" }, showCancel, showPrevious, showBackPage, /* @__PURE__ */ import_react.default.createElement(import__.Button, { iconPosition, icon: btnIcon, disabled: btnDisabled, loading: btnLoading, type: "primary", onClick: onBtnClick }, buttonText)), autoBreakPoint === MOBILE && /* @__PURE__ */ import_react.default.createElement(import__.Button, { icon: btnIcon, disabled: btnDisabled, loading: btnLoading, type: "primary", onClick: onBtnClick }, buttonText))),
+    ), !hideBtn && /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: "middle" }, showCancel, showPrevious, showBackPage, /* @__PURE__ */ import_react.default.createElement(import__.Button, { iconPosition, icon: btnIcon, disabled: btnDisabled, loading: btnLoading, type: "primary", onClick: onBtnClick }, buttonText)))),
     children
   );
 };

package/lib/components/Tabs/index.js

@@ -75,7 +75,7 @@ var Tabs = (props) => {
     items = [],
     type = "default",
     defaultActiveKey,
-    prefixCls = `${import_constants.BASE_CLASS_PREFIX}-tabs`,
+    prefixCls = `${import_constants.BASE_CLASS_PREFIX}`,
     className = "",
     isEqualTabs = false,
     indicator,
@@ -102,24 +102,25 @@ var Tabs = (props) => {
   const subTitleActiveColor = inverse ? otherDesignToken.colorTabsTextSubtitleInverse : otherDesignToken.colorTabsTextSubtitle;
   const iconColor = inverse ? otherDesignToken.colorTabsIconInactiveInverse : otherDesignToken.colorTabsIconInactive;
   const iconActiveColor = inverse ? otherDesignToken.colorTabsIconActiveInverse : otherDesignToken.colorTabsIconActive;
+  const per = `${import_constants.BASE_CLASS_PREFIX}-tabs`;
   const useCustomButtonStyle = () => {
     const hashId = (0, import_cssinjs.useStyleRegister)({
       theme: import_theme.theme,
       token: {},
       path: [`${prefixCls}`]
     }, () => `
-      .${prefixCls}-card.${prefixCls}-fill>.${prefixCls}-nav .${prefixCls}-tab {
+      .${per}-card.${prefixCls}-fill>.${per}-nav .${per}-tab {
         border-radius: 32px;
         height:40px;
       }
-      .${prefixCls}-card.${prefixCls}-fill .${prefixCls}-nav-list {
+      .${per}-card.${prefixCls}-fill .${per}-nav-list {
         background: ${designFillTokens.colorFillAlter};
         border-radius: 32px;
       }
-      .${prefixCls}-tab-active .${prefixCls}-item-title {
+      .${per}-tab-active .${prefixCls}-item-title {
         font-family:${fontFamilySecondaryBold}-Bold;
       }
-      .${prefixCls}-fill .${prefixCls}-tab-active .${prefixCls}-item-title {
+      .${prefixCls}-fill .${per}-tab-active .${prefixCls}-item-title {
         font-family:${fontFamilySecondaryBold}-Bold;
         font-size: ${fontSizeMobileContentC14};
       }

package/lib/components/Tabs/style/index.less

@@ -2,7 +2,7 @@
 
 @components: tabs;
 
-.@{prefix}-@{components}-equal-tabs {
+.@{prefix}-equal-tabs {
   .@{prefix}-tabs-nav-list {
     display: grid !important;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@@ -21,21 +21,21 @@
   }
 }
 
-.@{prefix}-@{components}-item {
+.@{prefix}-item {
   display: flex;
   align-items: center;
   flex-direction: column;
   box-sizing: border-box;
 }
 
-.@{prefix}-@{components}-tab-btn {
+.@{prefix}-tab-btn {
   text-align: center;
 
-  .@{prefix}-@{components}-tab-icon {
+  .@{prefix}-tab-icon {
     margin: 0 !important;
   }
 }
 
-.@{prefix}-@{components}-fill>.@{prefix}-@{components}-nav .@{prefix}-@{components}-tab-focus {
+.@{prefix}-fill>.@{prefix}-nav .@{prefix}-tab-focus {
   outline: none;
 }

package/lib/components/index.d.ts

@@ -63,4 +63,7 @@ export { AlignTypes } from './ListItem';
 export { default as Selector } from './Selector';
 export { default as Checkbox } from './Checkbox';
 export { default as Radio } from './Radio';
+export { default as AppStyleWrapper } from './AppStyleWrapper';
+export { default as Row } from './Row';
+export { default as Col } from './Col';
 export { default as GlobalTokenProvider } from './GlobalTokenProvider';

package/lib/components/index.js

@@ -35,11 +35,13 @@ __export(components_exports, {
   AlignTypes: () => import_ListItem3.AlignTypes,
   Amount: () => import_Amount.default,
   AmountTitleTypes: () => import_Amount.AmountTitleTypes,
+  AppStyleWrapper: () => import_AppStyleWrapper.default,
   BackImageEnum: () => import_Image2.BackImageEnum,
   Button: () => import_Button.default,
   Card: () => import_Card.default,
   Checkbox: () => import_Checkbox.default,
   Chip: () => import_Chip.default,
+  Col: () => import_Col.default,
   Divider: () => import_Divider.default,
   Drawer: () => import_Drawer.default,
   DrawerTypeEnum: () => import_Drawer2.DrawerTypeEnum,
@@ -56,6 +58,7 @@ __export(components_exports, {
   Navigation: () => import_Navigation.default,
   Notification: () => import_Notification.default,
   Radio: () => import_Radio.default,
+  Row: () => import_Row.default,
   Search: () => import_Search.default,
   Select: () => import_Select.default,
   Selector: () => import_Selector.default,
@@ -115,4 +118,7 @@ var import_ListItem3 = require("./ListItem");
 var import_Selector = __toESM(require("./Selector"));
 var import_Checkbox = __toESM(require("./Checkbox"));
 var import_Radio = __toESM(require("./Radio"));
+var import_AppStyleWrapper = __toESM(require("./AppStyleWrapper"));
+var import_Row = __toESM(require("./Row"));
+var import_Col = __toESM(require("./Col"));
 var import_GlobalTokenProvider = __toESM(require("./GlobalTokenProvider"));

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import './style/themes/index.css';
 export * from './components';
 export { default as tokenManager } from './utils/tokenManager';
-export { useBreakPoint, useIsMobile, checkIsMobile } from './utils/deviceType';
+export { useBreakPoint, useIsMobile, checkIsMobile, isWebViewBelow90 } from './utils/deviceType';
 export * from './utils/themeContext';

package/lib/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   checkIsMobile: () => import_deviceType.checkIsMobile,
+  isWebViewBelow90: () => import_deviceType.isWebViewBelow90,
   tokenManager: () => import_tokenManager.default,
   useBreakPoint: () => import_deviceType.useBreakPoint,
   useIsMobile: () => import_deviceType.useIsMobile

package/lib/utils/deviceType.d.ts

@@ -12,3 +12,18 @@ export declare const checkIsMobile: () => boolean;
  */
 export declare const useIsMobile: () => boolean;
 export declare const useBreakPoint: () => "desktop" | "mobile" | null;
+/**
+ * 获取 WebView 的版本号
+ * @returns {number|null} 返回 WebView 的版本号（整数），如果无法解析则返回 null
+ */
+export declare const getWebViewVersion: () => number | null;
+/**
+ * 检测是否支持某个特性（例如 CSS 属性或 JavaScript API）
+ * @returns {boolean} 如果支持返回 true，否则返回 false
+ */
+export declare const isGapSupported: () => boolean;
+/**
+ * 检测 WebView 版本是否低于 90
+ * @returns {boolean} 如果版本低于 90 或无法检测到版本，则返回 true；否则返回 false
+ */
+export declare const isWebViewBelow90: () => boolean;

package/lib/utils/deviceType.js

@@ -20,6 +20,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var deviceType_exports = {};
 __export(deviceType_exports, {
   checkIsMobile: () => checkIsMobile,
+  getWebViewVersion: () => getWebViewVersion,
+  isGapSupported: () => isGapSupported,
+  isWebViewBelow90: () => isWebViewBelow90,
   useBreakPoint: () => useBreakPoint,
   useIsMobile: () => useIsMobile
 });
@@ -54,3 +57,25 @@ var useBreakPoint = () => {
   }, []);
   return breakpoint;
 };
+var getWebViewVersion = () => {
+  try {
+    const userAgent = (navigator == null ? void 0 : navigator.userAgent) || "";
+    const versionMatch = userAgent.match(/(Chrome|WebView)\/(\d+)/);
+    return versionMatch ? parseInt(versionMatch[2], 10) : null;
+  } catch (error) {
+    console.error("Error while parsing WebView version:", error);
+    return null;
+  }
+};
+var isGapSupported = () => {
+  const testElement = document.createElement("div");
+  testElement.style.gap = "1px";
+  return testElement.style.gap !== "";
+};
+var isWebViewBelow90 = () => {
+  const version = getWebViewVersion();
+  if (version !== null) {
+    return version < 90;
+  }
+  return !isGapSupported();
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalc/dxp-ui",
-  "version": "0.0.6-0",
+  "version": "0.0.6-alpha.2",
   "description": "A UI library of Digitalc Design React Component",
   "type": "module",
   "keywords": [
@@ -132,4 +132,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}