@admin-layout/tailwind-ui 10.1.1-alpha.8 → 11.2.1-alpha.1

package/lib/components/ErrorHandlers/ErrorBoundary.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {ErrorBoundaryCommon}from'@admin-layout/client';import*as React from'react';import {useNavigate}from'@remix-run/react';import {logger}from'@cdm-logger/client';import {icons}from'../../icons/index.js';const Fallback = props => {
+import {ErrorBoundaryCommon}from'@admin-layout/client';import*as React from'react';import {useNavigate}from'@remix-run/react';import {logger}from'@cdm-logger/client';import {icons}from'../../icons/index.js';const Fallback = props => {
   const {
     error
   } = props;
@@ -9,40 +9,33 @@ import {jsx,jsxs}from'react/jsx-runtime';import {ErrorBoundaryCommon}from'@admin
   React.useEffect(() => {
     logger.trace(error);
   }, [error]);
-  return jsxs("div", {
-    className: "flex items-start p-4 rounded-md bg-red-50 border border-red-200",
-    children: [jsx("div", {
-      className: "flex-shrink-0 mr-3 text-red-400",
-      children: jsx(ExclamationCircleIcon, {
-        className: "h-5 w-5"
-      })
-    }), jsxs("div", {
-      className: "flex-1",
-      children: [jsx("h3", {
-        className: "text-lg font-medium text-red-800",
-        children: "Error!"
-      }), jsx("div", {
-        className: "mt-2 text-sm text-red-700",
-        children: error?.message
-      })]
-    }), jsx("button", {
-      className: "ml-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors",
-      onClick: () => {
-        navigate('/');
-        /**
-         * Have to reload the window because the above dispatch will only change the router
-         * but won't refresh due to which we have to call the reload on location
-         * Reference: https://stackoverflow.com/questions/63060387/how-do-i-redirect-within-an-errorboundary
-         */
-        window.location.reload();
-      },
-      children: "Home"
-    })]
-  });
+  return React.createElement("div", {
+    className: "flex items-start p-4 rounded-md bg-red-50 border border-red-200"
+  }, React.createElement("div", {
+    className: "flex-shrink-0 mr-3 text-red-400"
+  }, React.createElement(ExclamationCircleIcon, {
+    className: "h-5 w-5"
+  })), React.createElement("div", {
+    className: "flex-1"
+  }, React.createElement("h3", {
+    className: "text-lg font-medium text-red-800"
+  }, "Error!"), React.createElement("div", {
+    className: "mt-2 text-sm text-red-700"
+  }, error?.message)), React.createElement("button", {
+    className: "ml-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors",
+    onClick: () => {
+      navigate('/');
+      /**
+       * Have to reload the window because the above dispatch will only change the router
+       * but won't refresh due to which we have to call the reload on location
+       * Reference: https://stackoverflow.com/questions/63060387/how-do-i-redirect-within-an-errorboundary
+       */
+      window.location.reload();
+    }
+  }, "Home"));
 };
 const ErrorBoundary = props => {
-  return jsx(ErrorBoundaryCommon, {
-    fallbackComponent: Fallback,
-    children: props?.children
-  });
+  return React.createElement(ErrorBoundaryCommon, {
+    fallbackComponent: Fallback
+  }, props?.children);
 };export{ErrorBoundary};//# sourceMappingURL=ErrorBoundary.js.map

package/lib/components/ErrorHandlers/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ErrorBoundary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ErrorHandlers/LayoutErrorBoundary.d.ts

@@ -1,2 +1,3 @@
-export declare const LayoutErrorBoundary: (props: any) => import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const LayoutErrorBoundary: (props: any) => React.JSX.Element;
 //# sourceMappingURL=LayoutErrorBoundary.d.ts.map

package/lib/components/ErrorHandlers/LayoutErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/LayoutErrorBoundary.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,mBAAmB,GAAI,UAAK,4CAOxC,CAAC"}
+{"version":3,"file":"LayoutErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorHandlers/LayoutErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,eAAO,MAAM,mBAAmB,GAAI,UAAK,sBAOxC,CAAC"}

package/lib/components/ErrorHandlers/LayoutErrorBoundary.js

@@ -1,34 +1,29 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {ErrorBoundaryCommon}from'@admin-layout/client';import {icons}from'../../icons/index.js';const Fallback = props => {
+import React__default from'react';import {ErrorBoundaryCommon}from'@admin-layout/client';import {icons}from'../../icons/index.js';const Fallback = props => {
   const {
     error
   } = props;
   const {
     TimesIcon
   } = icons;
-  return jsxs("div", {
-    className: "flex flex-col items-center justify-center p-8 text-center",
-    children: [jsx("div", {
-      className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100",
-      children: jsx(TimesIcon, {
-        className: "h-8 w-8 text-red-500"
-      })
-    }), jsx("h2", {
-      className: "mb-2 text-2xl font-bold text-gray-800",
-      children: "Something Went Wrong!"
-    }), jsx("p", {
-      className: "text-gray-600",
-      children: error?.message || 'Unable to identify the cause of this error. Please try again later!'
-    })]
-  });
+  return React__default.createElement("div", {
+    className: "flex flex-col items-center justify-center p-8 text-center"
+  }, React__default.createElement("div", {
+    className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100"
+  }, React__default.createElement(TimesIcon, {
+    className: "h-8 w-8 text-red-500"
+  })), React__default.createElement("h2", {
+    className: "mb-2 text-2xl font-bold text-gray-800"
+  }, "Something Went Wrong!"), React__default.createElement("p", {
+    className: "text-gray-600"
+  }, error?.message || 'Unable to identify the cause of this error. Please try again later!'));
 };
 const LayoutErrorBoundary = props => {
   const {
     children,
     pathname
   } = props;
-  return jsx(ErrorBoundaryCommon, {
+  return React__default.createElement(ErrorBoundaryCommon, {
     fallbackComponent: Fallback,
-    pathname: pathname,
-    children: children
-  });
+    pathname: pathname
+  }, children);
 };export{LayoutErrorBoundary};//# sourceMappingURL=LayoutErrorBoundary.js.map

package/lib/components/ErrorHandlers/LayoutErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutErrorBoundary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LayoutErrorBoundary.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ErrorPages/403.d.ts

@@ -1,2 +1,3 @@
-export declare const Error403: () => import("react/jsx-runtime").JSX.Element;
+import * as React from 'react';
+export declare const Error403: () => React.JSX.Element;
 //# sourceMappingURL=403.d.ts.map

package/lib/components/ErrorPages/403.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"403.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorPages/403.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,+CAuBpB,CAAC"}
+{"version":3,"file":"403.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorPages/403.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,QAAQ,yBAuBpB,CAAC"}

package/lib/components/ErrorPages/403.js

@@ -1,29 +1,21 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {useNavigate}from'@remix-run/react';import assets from'@admin-layout/assets';const Error403 = () => {
+import*as React from'react';import {useNavigate}from'@remix-run/react';import assets from'@admin-layout/assets';const Error403 = () => {
   const navigate = useNavigate();
   const goBack = () => navigate(-1);
-  return jsx("div", {
-    className: "flex justify-center items-center",
-    children: jsxs("div", {
-      children: [jsx("div", {
-        className: "text-center",
-        children: jsx("h5", {
-          className: "text-2xl font-bold",
-          children: "Error: 403 Forbidden"
-        })
-      }), jsx("div", {
-        className: "mt-10",
-        children: jsx("img", {
-          src: assets['error-403-540x432.png'],
-          alt: "403 Error"
-        })
-      }), jsx("div", {
-        className: "flex justify-center",
-        children: jsx("button", {
-          className: "mt-8 mb-8 w-64 h-20 bg-yellow-400 rounded-full text-white hover:bg-yellow-500 transition-colors",
-          onClick: goBack,
-          children: "Go Home"
-        })
-      })]
-    })
-  });
+  return React.createElement("div", {
+    className: "flex justify-center items-center"
+  }, React.createElement("div", null, React.createElement("div", {
+    className: "text-center"
+  }, React.createElement("h5", {
+    className: "text-2xl font-bold"
+  }, "Error: 403 Forbidden")), React.createElement("div", {
+    className: "mt-10"
+  }, React.createElement("img", {
+    src: assets['error-403-540x432.png'],
+    alt: "403 Error"
+  })), React.createElement("div", {
+    className: "flex justify-center"
+  }, React.createElement("button", {
+    className: "mt-8 mb-8 w-64 h-20 bg-yellow-400 rounded-full text-white hover:bg-yellow-500 transition-colors",
+    onClick: goBack
+  }, "Go Home"))));
 };export{Error403};//# sourceMappingURL=403.js.map

package/lib/components/ErrorPages/403.js.map

@@ -1 +1 @@
-{"version":3,"file":"403.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"403.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ErrorPages/404.d.ts

@@ -1,2 +1,3 @@
-export declare const Error404: () => import("react/jsx-runtime").JSX.Element;
+import * as React from 'react';
+export declare const Error404: () => React.JSX.Element;
 //# sourceMappingURL=404.d.ts.map

package/lib/components/ErrorPages/404.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"404.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorPages/404.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,+CAuBpB,CAAC"}
+{"version":3,"file":"404.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorPages/404.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,QAAQ,yBAuBpB,CAAC"}

package/lib/components/ErrorPages/404.js

@@ -1,29 +1,21 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {useNavigate}from'@remix-run/react';import assets from'@admin-layout/assets';const Error404 = () => {
+import*as React from'react';import {useNavigate}from'@remix-run/react';import assets from'@admin-layout/assets';const Error404 = () => {
   const navigate = useNavigate();
   const goBack = () => navigate(-1);
-  return jsx("div", {
-    className: "flex justify-center items-center",
-    children: jsxs("div", {
-      children: [jsx("div", {
-        className: "text-center",
-        children: jsx("h5", {
-          className: "text-2xl font-bold",
-          children: "Error: 404 Page Not Found"
-        })
-      }), jsx("div", {
-        className: "mt-10",
-        children: jsx("img", {
-          src: assets['error-404-540x432.png'],
-          alt: "404 Error"
-        })
-      }), jsx("div", {
-        className: "flex justify-center",
-        children: jsx("button", {
-          className: "mt-8 mb-8 w-64 h-20 bg-yellow-400 rounded-full text-white hover:bg-yellow-500 transition-colors",
-          onClick: goBack,
-          children: "Go Home"
-        })
-      })]
-    })
-  });
+  return React.createElement("div", {
+    className: "flex justify-center items-center"
+  }, React.createElement("div", null, React.createElement("div", {
+    className: "text-center"
+  }, React.createElement("h5", {
+    className: "text-2xl font-bold"
+  }, "Error: 404 Page Not Found")), React.createElement("div", {
+    className: "mt-10"
+  }, React.createElement("img", {
+    src: assets['error-404-540x432.png'],
+    alt: "404 Error"
+  })), React.createElement("div", {
+    className: "flex justify-center"
+  }, React.createElement("button", {
+    className: "mt-8 mb-8 w-64 h-20 bg-yellow-400 rounded-full text-white hover:bg-yellow-500 transition-colors",
+    onClick: goBack
+  }, "Go Home"))));
 };export{Error404};//# sourceMappingURL=404.js.map

package/lib/components/ErrorPages/404.js.map

@@ -1 +1 @@
-{"version":3,"file":"404.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"404.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/lib/components/ErrorPages/500.d.ts

@@ -1,2 +1,3 @@
-export declare const Error500: () => import("react/jsx-runtime").JSX.Element;
+import * as React from 'react';
+export declare const Error500: () => React.JSX.Element;
 //# sourceMappingURL=500.d.ts.map

package/lib/components/ErrorPages/500.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"500.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorPages/500.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,+CAuBpB,CAAC"}
+{"version":3,"file":"500.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorPages/500.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,QAAQ,yBAuBpB,CAAC"}

package/lib/components/ErrorPages/500.js

@@ -1,29 +1,21 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {useNavigate}from'@remix-run/react';import assets from'@admin-layout/assets';const Error500 = () => {
+import*as React from'react';import {useNavigate}from'@remix-run/react';import assets from'@admin-layout/assets';const Error500 = () => {
   const navigate = useNavigate();
   const goBack = () => navigate(-1);
-  return jsx("div", {
-    className: "flex justify-center items-center",
-    children: jsxs("div", {
-      children: [jsx("div", {
-        className: "text-center",
-        children: jsx("h5", {
-          className: "text-2xl font-bold",
-          children: "Error: 500 Unexpected Error"
-        })
-      }), jsx("div", {
-        className: "mt-10",
-        children: jsx("img", {
-          src: assets['error-500-252x475.png'],
-          alt: "500 Error"
-        })
-      }), jsx("div", {
-        className: "flex justify-center",
-        children: jsx("button", {
-          className: "mt-8 mb-8 w-64 h-20 bg-yellow-400 rounded-full text-white hover:bg-yellow-500 transition-colors",
-          onClick: goBack,
-          children: "Go Home"
-        })
-      })]
-    })
-  });
+  return React.createElement("div", {
+    className: "flex justify-center items-center"
+  }, React.createElement("div", null, React.createElement("div", {
+    className: "text-center"
+  }, React.createElement("h5", {
+    className: "text-2xl font-bold"
+  }, "Error: 500 Unexpected Error")), React.createElement("div", {
+    className: "mt-10"
+  }, React.createElement("img", {
+    src: assets['error-500-252x475.png'],
+    alt: "500 Error"
+  })), React.createElement("div", {
+    className: "flex justify-center"
+  }, React.createElement("button", {
+    className: "mt-8 mb-8 w-64 h-20 bg-yellow-400 rounded-full text-white hover:bg-yellow-500 transition-colors",
+    onClick: goBack
+  }, "Go Home"))));
 };export{Error500};//# sourceMappingURL=500.js.map

package/lib/components/ErrorPages/500.js.map

@@ -1 +1 @@
-{"version":3,"file":"500.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"500.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/lib/components/LanguageMenuDropdown/LanguageMenuDropdown.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const LanguageMenuDropdown: ({ className, i18nConfig }: {
+    className?: string;
+    i18nConfig?: any;
+}) => React.JSX.Element;
+//# sourceMappingURL=LanguageMenuDropdown.d.ts.map

package/lib/components/LanguageMenuDropdown/LanguageMenuDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageMenuDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageMenuDropdown/LanguageMenuDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,eAAO,MAAM,oBAAoB,GAAI,2BAA2B;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAA;CAAE,sBAmDvG,CAAC"}

package/lib/components/LanguageMenuDropdown/LanguageMenuDropdown.js

@@ -0,0 +1,56 @@
+import React__default,{useState,useEffect}from'react';import {useTranslation}from'react-i18next';import {useMediaQuery}from'../../hooks/useMediaQuery.js';import {languages,useLayoutSettings}from'@admin-layout/client';import'../../utils/isBrowser/index.js';import {cn}from'../../utils/util.js';import'fast-deep-equal/react.js';const LanguageMenuDropdown = ({
+  className,
+  i18nConfig
+}) => {
+  const {
+    i18n
+  } = useTranslation();
+  const {
+    i18n: i18nextInstance
+  } = i18nConfig;
+  const filteredLanguages = languages.filter(language => i18nextInstance.supportedLngs.includes(language.key));
+  const {
+    isMobile
+  } = useMediaQuery();
+  const {
+    settings,
+    setSettings
+  } = useLayoutSettings();
+  const [currentLang, setCurrentLang] = useState(filteredLanguages.find(language => language.key === settings.language) || {
+    key: 'en',
+    label: 'English',
+    flag: '🇬🇧',
+    global: true
+  });
+  useEffect(() => {
+    i18n.changeLanguage(settings.language);
+  }, []);
+  const handleLanguageChange = value => {
+    const language = filteredLanguages.find(lang => lang.key === value);
+    if (language) {
+      setCurrentLang(language);
+      i18n.changeLanguage(language.key);
+      setSettings(settings, {
+        language: language.key
+      });
+    }
+  };
+  return React__default.createElement("div", {
+    className: "relative"
+  }, React__default.createElement("div", {
+    className: "custom-select-container w-[180px]"
+  }, React__default.createElement("select", {
+    className: cn('w-full h-10 rounded-md outline-none border border-input bg-background px-3 py-2 pl-10 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 appearance-none cursor-pointer', className),
+    value: currentLang.key,
+    onChange: e => handleLanguageChange(e.target.value),
+    "aria-label": "Select language"
+  }, filteredLanguages.map(language => React__default.createElement("option", {
+    key: language.key,
+    value: language.key,
+    className: "p-2"
+  }, React__default.createElement("div", {
+    className: "p-2"
+  }, React__default.createElement("span", {
+    className: "text-sm"
+  }, isMobile ? language.key : language.label)))))));
+};export{LanguageMenuDropdown};//# sourceMappingURL=LanguageMenuDropdown.js.map

package/lib/components/LanguageMenuDropdown/LanguageMenuDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageMenuDropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,2 @@
+export * from './LanguageMenuDropdown';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/LanguageMenuDropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageMenuDropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/lib/components/OTP/OTPInput.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';import {useOTPInput}from'./hooks.js';import {SingleInput}from'./SingleInput.js';import {getPlaceholderValue,isInputNumeric}from'./utils.js';const OTPInput = ({
+import React__default from'react';import {useOTPInput}from'./hooks.js';import {SingleInput}from'./SingleInput.js';import {getPlaceholderValue,isInputNumeric}from'./utils.js';const OTPInput = ({
   value = '',
   numInputs = 4,
   onChange,
@@ -23,7 +23,7 @@ import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';impor
     handlePaste
   }, inputRefs] = useOTPInput(value, numInputs, onChange, inputType, shouldAutoFocus);
   // Create default input renderer if not provided
-  const defaultRenderInput = (props, index) => jsx(SingleInput, {
+  const defaultRenderInput = (props, index) => React__default.createElement(SingleInput, {
     ...props,
     focused: activeInput === index
   });
@@ -47,36 +47,34 @@ import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';impor
     // Let the hook handle the paste logic
     handlePaste(e);
   };
-  return jsx("div", {
+  return React__default.createElement("div", {
     className: `flex items-center justify-center space-x-2 md:space-x-4 ${containerClassName || ''}`,
     onPaste: handleComponentPaste,
-    "data-testid": "otp-input-container",
-    children: Array.from({
-      length: numInputs
-    }, (_, index) => jsxs(React__default.Fragment, {
-      children: [inputRenderer({
-        value: otp[index] || '',
-        placeholder: placeholderValue?.[index],
-        ref: element => {
-          if (inputRefs.current) {
-            inputRefs.current[index] = element;
-          }
-        },
-        onChange: handleChange,
-        onFocus: event => handleFocus(event)(index),
-        onBlur: handleBlur,
-        onKeyDown: handleKeyDown,
-        onPaste: handlePaste,
-        autoComplete: 'off',
-        'aria-label': `Please enter OTP character ${index + 1}`,
-        className: skipDefaultStyles ? inputClassName || '' : `${inputClassName || ''}`,
-        type: inputType,
-        inputMode: isInputNum ? 'numeric' : 'text',
-        onInput: handleInputChange
-      }, index), index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator || jsx("span", {
-        className: "text-gray-400",
-        children: "-"
-      }))]
-    }, index))
-  });
+    "data-testid": "otp-input-container"
+  }, Array.from({
+    length: numInputs
+  }, (_, index) => React__default.createElement(React__default.Fragment, {
+    key: index
+  }, inputRenderer({
+    value: otp[index] || '',
+    placeholder: placeholderValue?.[index],
+    ref: element => {
+      if (inputRefs.current) {
+        inputRefs.current[index] = element;
+      }
+    },
+    onChange: handleChange,
+    onFocus: event => handleFocus(event)(index),
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onPaste: handlePaste,
+    autoComplete: 'off',
+    'aria-label': `Please enter OTP character ${index + 1}`,
+    className: skipDefaultStyles ? inputClassName || '' : `${inputClassName || ''}`,
+    type: inputType,
+    inputMode: isInputNum ? 'numeric' : 'text',
+    onInput: handleInputChange
+  }, index), index < numInputs - 1 && (typeof renderSeparator === 'function' ? renderSeparator(index) : renderSeparator || React__default.createElement("span", {
+    className: "text-gray-400"
+  }, "-")))));
 };export{OTPInput};//# sourceMappingURL=OTPInput.js.map

package/lib/components/OTP/OTPInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"OTPInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}