@gobolt/genesis 0.3.9 → 0.3.11

package/dist/node_modules/antd/es/form/style/index.cjs

@@ -105,7 +105,6 @@ const genFormItemStyle = (token) => {
   const {
     formItemCls,
     iconCls,
-    componentCls,
     rootPrefixCls,
     antCls,
     labelRequiredMarkColor,
@@ -153,7 +152,11 @@ const genFormItemStyle = (token) => {
         "&-wrap": {
           overflow: "unset",
           lineHeight: token.lineHeight,
-          whiteSpace: "unset"
+          whiteSpace: "unset",
+          "> label": {
+            verticalAlign: "middle",
+            textWrap: "balance"
+          }
         },
         "> label": {
           position: "relative",
@@ -167,17 +170,20 @@ const genFormItemStyle = (token) => {
             fontSize: token.fontSize,
             verticalAlign: "top"
           },
-          // Required mark
-          [`&${formItemCls}-required:not(${formItemCls}-required-mark-optional)::before`]: {
-            display: "inline-block",
-            marginInlineEnd: token.marginXXS,
-            color: labelRequiredMarkColor,
-            fontSize: token.fontSize,
-            fontFamily: "SimSun, sans-serif",
-            lineHeight: 1,
-            content: '"*"',
-            [`${componentCls}-hide-required-mark &`]: {
-              display: "none"
+          [`&${formItemCls}-required`]: {
+            "&::before": {
+              display: "inline-block",
+              marginInlineEnd: token.marginXXS,
+              color: labelRequiredMarkColor,
+              fontSize: token.fontSize,
+              fontFamily: "SimSun, sans-serif",
+              lineHeight: 1,
+              content: '"*"'
+            },
+            [`&${formItemCls}-required-mark-hidden, &${formItemCls}-required-mark-optional`]: {
+              "&::before": {
+                display: "none"
+              }
             }
           },
           // Optional mark
@@ -185,7 +191,7 @@ const genFormItemStyle = (token) => {
             display: "inline-block",
             marginInlineStart: token.marginXXS,
             color: token.colorTextDescription,
-            [`${componentCls}-hide-required-mark &`]: {
+            [`&${formItemCls}-required-mark-hidden`]: {
               display: "none"
             }
           },
@@ -225,7 +231,13 @@ const genFormItemStyle = (token) => {
           minHeight: token.controlHeight,
           "&-content": {
             flex: "auto",
-            maxWidth: "100%"
+            maxWidth: "100%",
+            // Fix https://github.com/ant-design/ant-design/issues/54042
+            // Remove impact of whitespaces
+            [`&:has(> ${antCls}-switch:only-child, > ${antCls}-rate:only-child)`]: {
+              display: "flex",
+              alignItems: "center"
+            }
           }
         }
       },
@@ -291,12 +303,26 @@ const genFormItemStyle = (token) => {
     })
   };
 };
-const genHorizontalStyle = (token, className) => {
+const makeVerticalLayoutLabel = (token) => ({
+  padding: token.verticalLabelPadding,
+  margin: token.verticalLabelMargin,
+  whiteSpace: "initial",
+  textAlign: "start",
+  "> label": {
+    margin: 0,
+    "&::after": {
+      // https://github.com/ant-design/ant-design/issues/43538
+      visibility: "hidden"
+    }
+  }
+});
+const genHorizontalStyle = (token) => {
   const {
+    antCls,
     formItemCls
   } = token;
   return {
-    [`${className}-horizontal`]: {
+    [`${formItemCls}-horizontal`]: {
       [`${formItemCls}-label`]: {
         flexGrow: 0
       },
@@ -314,7 +340,9 @@ const genHorizontalStyle = (token, className) => {
         [`& + ${formItemCls}-control`]: {
           minWidth: "unset"
         }
-      }
+      },
+      [`${antCls}-col-24${formItemCls}-label,
+        ${antCls}-col-xl-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
     }
   };
 };
@@ -328,7 +356,7 @@ const genInlineStyle = (token) => {
     [`${componentCls}-inline`]: {
       display: "flex",
       flexWrap: "wrap",
-      [formItemCls]: {
+      [`${formItemCls}-inline`]: {
         flex: "none",
         marginInlineEnd: token.margin,
         marginBottom: inlineItemMarginBottom,
@@ -353,19 +381,6 @@ const genInlineStyle = (token) => {
     }
   };
 };
-const makeVerticalLayoutLabel = (token) => ({
-  padding: token.verticalLabelPadding,
-  margin: token.verticalLabelMargin,
-  whiteSpace: "initial",
-  textAlign: "start",
-  "> label": {
-    margin: 0,
-    "&::after": {
-      // https://github.com/ant-design/ant-design/issues/43538
-      visibility: "hidden"
-    }
-  }
-});
 const makeVerticalLayout = (token) => {
   const {
     componentCls,
@@ -398,21 +413,19 @@ const genVerticalStyle = (token) => {
     antCls
   } = token;
   return {
-    [`${componentCls}-vertical`]: {
-      [`${formItemCls}:not(${formItemCls}-horizontal)`]: {
-        [`${formItemCls}-row`]: {
-          flexDirection: "column"
-        },
-        [`${formItemCls}-label > label`]: {
-          height: "auto"
-        },
-        [`${formItemCls}-control`]: {
-          width: "100%"
-        },
-        [`${formItemCls}-label,
+    [`${formItemCls}-vertical`]: {
+      [`${formItemCls}-row`]: {
+        flexDirection: "column"
+      },
+      [`${formItemCls}-label > label`]: {
+        height: "auto"
+      },
+      [`${formItemCls}-control`]: {
+        width: "100%"
+      },
+      [`${formItemCls}-label,
         ${antCls}-col-24${formItemCls}-label,
         ${antCls}-col-xl-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
-      }
     },
     [`@media (max-width: ${index$1.unit(token.screenXSMax)})`]: [makeVerticalLayout(token), {
       [componentCls]: {
@@ -444,48 +457,6 @@ const genVerticalStyle = (token) => {
     }
   };
 };
-const genItemVerticalStyle = (token) => {
-  const {
-    formItemCls,
-    antCls
-  } = token;
-  return {
-    [`${formItemCls}-vertical`]: {
-      [`${formItemCls}-row`]: {
-        flexDirection: "column"
-      },
-      [`${formItemCls}-label > label`]: {
-        height: "auto"
-      },
-      [`${formItemCls}-control`]: {
-        width: "100%"
-      }
-    },
-    [`${formItemCls}-vertical ${formItemCls}-label,
-      ${antCls}-col-24${formItemCls}-label,
-      ${antCls}-col-xl-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
-    [`@media (max-width: ${index$1.unit(token.screenXSMax)})`]: [makeVerticalLayout(token), {
-      [formItemCls]: {
-        [`${antCls}-col-xs-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
-      }
-    }],
-    [`@media (max-width: ${index$1.unit(token.screenSMMax)})`]: {
-      [formItemCls]: {
-        [`${antCls}-col-sm-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
-      }
-    },
-    [`@media (max-width: ${index$1.unit(token.screenMDMax)})`]: {
-      [formItemCls]: {
-        [`${antCls}-col-md-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
-      }
-    },
-    [`@media (max-width: ${index$1.unit(token.screenLGMax)})`]: {
-      [formItemCls]: {
-        [`${antCls}-col-lg-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
-      }
-    }
-  };
-};
 const prepareComponentToken = (token) => ({
   labelRequiredMarkColor: token.colorError,
   labelColor: token.colorTextHeading,
@@ -505,12 +476,11 @@ const prepareToken = (token, rootPrefixCls) => {
   });
   return formToken;
 };
-var useStyle = genStyleUtils.genStyleHooks("Form", (token, _ref) => {
-  let {
-    rootPrefixCls
-  } = _ref;
+var useStyle = genStyleUtils.genStyleHooks("Form", (token, {
+  rootPrefixCls
+}) => {
   const formToken = prepareToken(token, rootPrefixCls);
-  return [genFormStyle(formToken), genFormItemStyle(formToken), explain(formToken), genHorizontalStyle(formToken, formToken.componentCls), genHorizontalStyle(formToken, formToken.formItemCls), genInlineStyle(formToken), genVerticalStyle(formToken), genItemVerticalStyle(formToken), collapse(formToken), zoom.zoomIn];
+  return [genFormStyle(formToken), genFormItemStyle(formToken), explain(formToken), genHorizontalStyle(formToken), genInlineStyle(formToken), genVerticalStyle(formToken), collapse(formToken), zoom.zoomIn];
 }, prepareComponentToken, {
   // Let From style before the Grid
   // ref https://github.com/ant-design/ant-design/issues/44386

package/dist/node_modules/antd/es/form/style/index.js

@@ -103,7 +103,6 @@ const genFormItemStyle = (token) => {
   const {
     formItemCls,
     iconCls,
-    componentCls,
     rootPrefixCls,
     antCls,
     labelRequiredMarkColor,
@@ -151,7 +150,11 @@ const genFormItemStyle = (token) => {
         "&-wrap": {
           overflow: "unset",
           lineHeight: token.lineHeight,
-          whiteSpace: "unset"
+          whiteSpace: "unset",
+          "> label": {
+            verticalAlign: "middle",
+            textWrap: "balance"
+          }
         },
         "> label": {
           position: "relative",
@@ -165,17 +168,20 @@ const genFormItemStyle = (token) => {
             fontSize: token.fontSize,
             verticalAlign: "top"
           },
-          // Required mark
-          [`&${formItemCls}-required:not(${formItemCls}-required-mark-optional)::before`]: {
-            display: "inline-block",
-            marginInlineEnd: token.marginXXS,
-            color: labelRequiredMarkColor,
-            fontSize: token.fontSize,
-            fontFamily: "SimSun, sans-serif",
-            lineHeight: 1,
-            content: '"*"',
-            [`${componentCls}-hide-required-mark &`]: {
-              display: "none"
+          [`&${formItemCls}-required`]: {
+            "&::before": {
+              display: "inline-block",
+              marginInlineEnd: token.marginXXS,
+              color: labelRequiredMarkColor,
+              fontSize: token.fontSize,
+              fontFamily: "SimSun, sans-serif",
+              lineHeight: 1,
+              content: '"*"'
+            },
+            [`&${formItemCls}-required-mark-hidden, &${formItemCls}-required-mark-optional`]: {
+              "&::before": {
+                display: "none"
+              }
             }
           },
           // Optional mark
@@ -183,7 +189,7 @@ const genFormItemStyle = (token) => {
             display: "inline-block",
             marginInlineStart: token.marginXXS,
             color: token.colorTextDescription,
-            [`${componentCls}-hide-required-mark &`]: {
+            [`&${formItemCls}-required-mark-hidden`]: {
               display: "none"
             }
           },
@@ -223,7 +229,13 @@ const genFormItemStyle = (token) => {
           minHeight: token.controlHeight,
           "&-content": {
             flex: "auto",
-            maxWidth: "100%"
+            maxWidth: "100%",
+            // Fix https://github.com/ant-design/ant-design/issues/54042
+            // Remove impact of whitespaces
+            [`&:has(> ${antCls}-switch:only-child, > ${antCls}-rate:only-child)`]: {
+              display: "flex",
+              alignItems: "center"
+            }
           }
         }
       },
@@ -289,12 +301,26 @@ const genFormItemStyle = (token) => {
     })
   };
 };
-const genHorizontalStyle = (token, className) => {
+const makeVerticalLayoutLabel = (token) => ({
+  padding: token.verticalLabelPadding,
+  margin: token.verticalLabelMargin,
+  whiteSpace: "initial",
+  textAlign: "start",
+  "> label": {
+    margin: 0,
+    "&::after": {
+      // https://github.com/ant-design/ant-design/issues/43538
+      visibility: "hidden"
+    }
+  }
+});
+const genHorizontalStyle = (token) => {
   const {
+    antCls,
     formItemCls
   } = token;
   return {
-    [`${className}-horizontal`]: {
+    [`${formItemCls}-horizontal`]: {
       [`${formItemCls}-label`]: {
         flexGrow: 0
       },
@@ -312,7 +338,9 @@ const genHorizontalStyle = (token, className) => {
         [`& + ${formItemCls}-control`]: {
           minWidth: "unset"
         }
-      }
+      },
+      [`${antCls}-col-24${formItemCls}-label,
+        ${antCls}-col-xl-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
     }
   };
 };
@@ -326,7 +354,7 @@ const genInlineStyle = (token) => {
     [`${componentCls}-inline`]: {
       display: "flex",
       flexWrap: "wrap",
-      [formItemCls]: {
+      [`${formItemCls}-inline`]: {
         flex: "none",
         marginInlineEnd: token.margin,
         marginBottom: inlineItemMarginBottom,
@@ -351,19 +379,6 @@ const genInlineStyle = (token) => {
     }
   };
 };
-const makeVerticalLayoutLabel = (token) => ({
-  padding: token.verticalLabelPadding,
-  margin: token.verticalLabelMargin,
-  whiteSpace: "initial",
-  textAlign: "start",
-  "> label": {
-    margin: 0,
-    "&::after": {
-      // https://github.com/ant-design/ant-design/issues/43538
-      visibility: "hidden"
-    }
-  }
-});
 const makeVerticalLayout = (token) => {
   const {
     componentCls,
@@ -396,21 +411,19 @@ const genVerticalStyle = (token) => {
     antCls
   } = token;
   return {
-    [`${componentCls}-vertical`]: {
-      [`${formItemCls}:not(${formItemCls}-horizontal)`]: {
-        [`${formItemCls}-row`]: {
-          flexDirection: "column"
-        },
-        [`${formItemCls}-label > label`]: {
-          height: "auto"
-        },
-        [`${formItemCls}-control`]: {
-          width: "100%"
-        },
-        [`${formItemCls}-label,
+    [`${formItemCls}-vertical`]: {
+      [`${formItemCls}-row`]: {
+        flexDirection: "column"
+      },
+      [`${formItemCls}-label > label`]: {
+        height: "auto"
+      },
+      [`${formItemCls}-control`]: {
+        width: "100%"
+      },
+      [`${formItemCls}-label,
         ${antCls}-col-24${formItemCls}-label,
         ${antCls}-col-xl-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
-      }
     },
     [`@media (max-width: ${unit(token.screenXSMax)})`]: [makeVerticalLayout(token), {
       [componentCls]: {
@@ -442,48 +455,6 @@ const genVerticalStyle = (token) => {
     }
   };
 };
-const genItemVerticalStyle = (token) => {
-  const {
-    formItemCls,
-    antCls
-  } = token;
-  return {
-    [`${formItemCls}-vertical`]: {
-      [`${formItemCls}-row`]: {
-        flexDirection: "column"
-      },
-      [`${formItemCls}-label > label`]: {
-        height: "auto"
-      },
-      [`${formItemCls}-control`]: {
-        width: "100%"
-      }
-    },
-    [`${formItemCls}-vertical ${formItemCls}-label,
-      ${antCls}-col-24${formItemCls}-label,
-      ${antCls}-col-xl-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
-    [`@media (max-width: ${unit(token.screenXSMax)})`]: [makeVerticalLayout(token), {
-      [formItemCls]: {
-        [`${antCls}-col-xs-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
-      }
-    }],
-    [`@media (max-width: ${unit(token.screenSMMax)})`]: {
-      [formItemCls]: {
-        [`${antCls}-col-sm-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
-      }
-    },
-    [`@media (max-width: ${unit(token.screenMDMax)})`]: {
-      [formItemCls]: {
-        [`${antCls}-col-md-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
-      }
-    },
-    [`@media (max-width: ${unit(token.screenLGMax)})`]: {
-      [formItemCls]: {
-        [`${antCls}-col-lg-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
-      }
-    }
-  };
-};
 const prepareComponentToken = (token) => ({
   labelRequiredMarkColor: token.colorError,
   labelColor: token.colorTextHeading,
@@ -503,12 +474,11 @@ const prepareToken = (token, rootPrefixCls) => {
   });
   return formToken;
 };
-var useStyle = genStyleHooks("Form", (token, _ref) => {
-  let {
-    rootPrefixCls
-  } = _ref;
+var useStyle = genStyleHooks("Form", (token, {
+  rootPrefixCls
+}) => {
   const formToken = prepareToken(token, rootPrefixCls);
-  return [genFormStyle(formToken), genFormItemStyle(formToken), genFormValidateMotionStyle(formToken), genHorizontalStyle(formToken, formToken.componentCls), genHorizontalStyle(formToken, formToken.formItemCls), genInlineStyle(formToken), genVerticalStyle(formToken), genItemVerticalStyle(formToken), genCollapseMotion(formToken), zoomIn];
+  return [genFormStyle(formToken), genFormItemStyle(formToken), genFormValidateMotionStyle(formToken), genHorizontalStyle(formToken), genInlineStyle(formToken), genVerticalStyle(formToken), genCollapseMotion(formToken), zoomIn];
 }, prepareComponentToken, {
   // Let From style before the Grid
   // ref https://github.com/ant-design/ant-design/issues/44386

package/dist/node_modules/antd/es/grid/hooks/useBreakpoint.cjs

@@ -3,9 +3,7 @@ var React = require("react");
 var useLayoutEffect = require("../../../../rc-util/es/hooks/useLayoutEffect.cjs");
 var useForceUpdate = require("../../_util/hooks/useForceUpdate.cjs");
 var responsiveObserver = require("../../_util/responsiveObserver.cjs");
-function useBreakpoint() {
-  let refreshOnChange = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
-  let defaultScreens = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+function useBreakpoint(refreshOnChange = true, defaultScreens = {}) {
   const screensRef = React.useRef(defaultScreens);
   const forceUpdate = useForceUpdate();
   const responsiveObserver$1 = responsiveObserver.default();

package/dist/node_modules/antd/es/grid/hooks/useBreakpoint.js

@@ -2,9 +2,7 @@ import { useRef } from "react";
 import useLayoutEffect from "../../../../rc-util/es/hooks/useLayoutEffect.js";
 import useForceUpdate from "../../_util/hooks/useForceUpdate.js";
 import useResponsiveObserver from "../../_util/responsiveObserver.js";
-function useBreakpoint() {
-  let refreshOnChange = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
-  let defaultScreens = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+function useBreakpoint(refreshOnChange = true, defaultScreens = {}) {
   const screensRef = useRef(defaultScreens);
   const forceUpdate = useForceUpdate();
   const responsiveObserver = useResponsiveObserver();

package/dist/node_modules/antd/es/input/Input.cjs

@@ -44,7 +44,7 @@ const Input = /* @__PURE__ */ React.forwardRef((props, ref$1) => {
     styles,
     rootClassName,
     onChange,
-    classNames: classes,
+    classNames,
     variant: customVariant
   } = props, rest = __rest(props, ["prefixCls", "bordered", "status", "size", "disabled", "onBlur", "onFocus", "suffix", "allowClear", "addonAfter", "addonBefore", "className", "style", "styles", "rootClassName", "onChange", "classNames", "variant"]);
   if (process.env.NODE_ENV !== "production") {
@@ -134,12 +134,12 @@ const Input = /* @__PURE__ */ React.forwardRef((props, ref$1) => {
       form: true,
       space: true
     }, addonAfter),
-    classNames: Object.assign(Object.assign(Object.assign({}, classes), contextClassNames), {
+    classNames: Object.assign(Object.assign(Object.assign({}, classNames), contextClassNames), {
       input: index$1({
         [`${prefixCls}-sm`]: mergedSize === "small",
         [`${prefixCls}-lg`]: mergedSize === "large",
         [`${prefixCls}-rtl`]: direction === "rtl"
-      }, classes === null || classes === void 0 ? void 0 : classes.input, contextClassNames.input, hashId),
+      }, classNames === null || classNames === void 0 ? void 0 : classNames.input, contextClassNames.input, hashId),
       variant: index$1({
         [`${prefixCls}-${variant}`]: enableVariantCls
       }, statusUtils.getStatusClassNames(prefixCls, mergedStatus)),

package/dist/node_modules/antd/es/input/Input.js

@@ -42,7 +42,7 @@ const Input = /* @__PURE__ */ forwardRef((props, ref) => {
     styles,
     rootClassName,
     onChange,
-    classNames: classes,
+    classNames: classNames$1,
     variant: customVariant
   } = props, rest = __rest(props, ["prefixCls", "bordered", "status", "size", "disabled", "onBlur", "onFocus", "suffix", "allowClear", "addonAfter", "addonBefore", "className", "style", "styles", "rootClassName", "onChange", "classNames", "variant"]);
   if (process.env.NODE_ENV !== "production") {
@@ -132,12 +132,12 @@ const Input = /* @__PURE__ */ forwardRef((props, ref) => {
       form: true,
       space: true
     }, addonAfter),
-    classNames: Object.assign(Object.assign(Object.assign({}, classes), contextClassNames), {
+    classNames: Object.assign(Object.assign(Object.assign({}, classNames$1), contextClassNames), {
       input: classNames({
         [`${prefixCls}-sm`]: mergedSize === "small",
         [`${prefixCls}-lg`]: mergedSize === "large",
         [`${prefixCls}-rtl`]: direction === "rtl"
-      }, classes === null || classes === void 0 ? void 0 : classes.input, contextClassNames.input, hashId),
+      }, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.input, contextClassNames.input, hashId),
       variant: classNames({
         [`${prefixCls}-${variant}`]: enableVariantCls
       }, getStatusClassNames(prefixCls, mergedStatus)),

package/dist/node_modules/antd/es/input/OTP/OTPInput.cjs

@@ -1,7 +1,10 @@
 "use strict";
 var React = require("react");
+var index = require("../../../../../_virtual/index.cjs");
 var raf = require("../../../../rc-util/es/raf.cjs");
+require("../../config-provider/index.cjs");
 var Input = require("../Input.cjs");
+var context = require("../../config-provider/context.cjs");
 function _interopNamespaceDefault(e) {
   var n = /* @__PURE__ */ Object.create(null);
   if (e) {
@@ -31,18 +34,23 @@ var __rest = function(s, e) {
 };
 const OTPInput = /* @__PURE__ */ React__namespace.forwardRef((props, ref) => {
   const {
+    className,
     value,
     onChange,
     onActiveChange,
-    index,
+    index: index$1,
     mask
-  } = props, restProps = __rest(props, ["value", "onChange", "onActiveChange", "index", "mask"]);
-  const internalValue = value && typeof mask === "string" ? mask : value;
-  const onInternalChange = (e) => {
-    onChange(index, e.target.value);
-  };
+  } = props, restProps = __rest(props, ["className", "value", "onChange", "onActiveChange", "index", "mask"]);
+  const {
+    getPrefixCls
+  } = React__namespace.useContext(context.ConfigContext);
+  const prefixCls = getPrefixCls("otp");
+  const maskValue = typeof mask === "string" ? mask : value;
   const inputRef = React__namespace.useRef(null);
   React__namespace.useImperativeHandle(ref, () => inputRef.current);
+  const onInternalChange = (e) => {
+    onChange(index$1, e.target.value);
+  };
   const syncSelection = () => {
     raf(() => {
       var _a;
@@ -59,9 +67,9 @@ const OTPInput = /* @__PURE__ */ React__namespace.forwardRef((props, ref) => {
       metaKey
     } = event;
     if (key === "ArrowLeft") {
-      onActiveChange(index - 1);
+      onActiveChange(index$1 - 1);
     } else if (key === "ArrowRight") {
-      onActiveChange(index + 1);
+      onActiveChange(index$1 + 1);
     } else if (key === "z" && (ctrlKey || metaKey)) {
       event.preventDefault();
     }
@@ -69,21 +77,31 @@ const OTPInput = /* @__PURE__ */ React__namespace.forwardRef((props, ref) => {
   };
   const onInternalKeyUp = (e) => {
     if (e.key === "Backspace" && !value) {
-      onActiveChange(index - 1);
+      onActiveChange(index$1 - 1);
     }
     syncSelection();
   };
-  return /* @__PURE__ */ React__namespace.createElement(Input.default, Object.assign({
+  return /* @__PURE__ */ React__namespace.createElement("span", {
+    className: `${prefixCls}-input-wrapper`,
+    role: "presentation"
+  }, mask && value !== "" && value !== void 0 && /* @__PURE__ */ React__namespace.createElement("span", {
+    className: `${prefixCls}-mask-icon`,
+    "aria-hidden": "true"
+  }, maskValue), /* @__PURE__ */ React__namespace.createElement(Input.default, Object.assign({
+    "aria-label": `OTP Input ${index$1 + 1}`,
     type: mask === true ? "password" : "text"
   }, restProps, {
     ref: inputRef,
-    value: internalValue,
+    value,
     onInput: onInternalChange,
     onFocus: syncSelection,
     onKeyDown: onInternalKeyDown,
     onKeyUp: onInternalKeyUp,
     onMouseDown: syncSelection,
-    onMouseUp: syncSelection
-  }));
+    onMouseUp: syncSelection,
+    className: index(className, {
+      [`${prefixCls}-mask-input`]: mask
+    })
+  })));
 });
 module.exports = OTPInput;