@idds/react 1.1.94 → 1.1.96

package/dist/index.es.js

@@ -810,112 +810,120 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$v = [["path", { "d": "M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z", "key": "svg-0" }], ["path", { "d": "M10 16h6", "key": "svg-1" }], ["path", { "d": "M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-2" }], ["path", { "d": "M4 8h3", "key": "svg-3" }], ["path", { "d": "M4 12h3", "key": "svg-4" }], ["path", { "d": "M4 16h3", "key": "svg-5" }]];
-const IconAddressBook = createReactComponent("outline", "address-book", "AddressBook", __iconNode$v);
+const __iconNode$w = [["path", { "d": "M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z", "key": "svg-0" }], ["path", { "d": "M10 16h6", "key": "svg-1" }], ["path", { "d": "M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-2" }], ["path", { "d": "M4 8h3", "key": "svg-3" }], ["path", { "d": "M4 12h3", "key": "svg-4" }], ["path", { "d": "M4 16h3", "key": "svg-5" }]];
+const IconAddressBook = createReactComponent("outline", "address-book", "AddressBook", __iconNode$w);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$u = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 8v4", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
-const IconAlertCircle = createReactComponent("outline", "alert-circle", "AlertCircle", __iconNode$u);
+const __iconNode$v = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 8v4", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
+const IconAlertCircle = createReactComponent("outline", "alert-circle", "AlertCircle", __iconNode$v);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$t = [["path", { "d": "M12 9v4", "key": "svg-0" }], ["path", { "d": "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
-const IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$t);
+const __iconNode$u = [["path", { "d": "M12 9v4", "key": "svg-0" }], ["path", { "d": "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", "key": "svg-1" }], ["path", { "d": "M12 16h.01", "key": "svg-2" }]];
+const IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$u);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$s = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M16 15l-4 4", "key": "svg-1" }], ["path", { "d": "M8 15l4 4", "key": "svg-2" }]];
-const IconArrowNarrowDown = createReactComponent("outline", "arrow-narrow-down", "ArrowNarrowDown", __iconNode$s);
+const __iconNode$t = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M16 15l-4 4", "key": "svg-1" }], ["path", { "d": "M8 15l4 4", "key": "svg-2" }]];
+const IconArrowNarrowDown = createReactComponent("outline", "arrow-narrow-down", "ArrowNarrowDown", __iconNode$t);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$r = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M16 9l-4 -4", "key": "svg-1" }], ["path", { "d": "M8 9l4 -4", "key": "svg-2" }]];
-const IconArrowNarrowUp = createReactComponent("outline", "arrow-narrow-up", "ArrowNarrowUp", __iconNode$r);
+const __iconNode$s = [["path", { "d": "M12 5l0 14", "key": "svg-0" }], ["path", { "d": "M16 9l-4 -4", "key": "svg-1" }], ["path", { "d": "M8 9l4 -4", "key": "svg-2" }]];
+const IconArrowNarrowUp = createReactComponent("outline", "arrow-narrow-up", "ArrowNarrowUp", __iconNode$s);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$q = [["path", { "d": "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z", "key": "svg-0" }], ["path", { "d": "M16 3v4", "key": "svg-1" }], ["path", { "d": "M8 3v4", "key": "svg-2" }], ["path", { "d": "M4 11h16", "key": "svg-3" }], ["path", { "d": "M11 15h1", "key": "svg-4" }], ["path", { "d": "M12 15v3", "key": "svg-5" }]];
-const IconCalendar = createReactComponent("outline", "calendar", "Calendar", __iconNode$q);
+const __iconNode$r = [["path", { "d": "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z", "key": "svg-0" }], ["path", { "d": "M16 3v4", "key": "svg-1" }], ["path", { "d": "M8 3v4", "key": "svg-2" }], ["path", { "d": "M4 11h16", "key": "svg-3" }], ["path", { "d": "M11 15h1", "key": "svg-4" }], ["path", { "d": "M12 15v3", "key": "svg-5" }]];
+const IconCalendar = createReactComponent("outline", "calendar", "Calendar", __iconNode$r);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$p = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
-const IconCheck = createReactComponent("outline", "check", "Check", __iconNode$p);
+const __iconNode$q = [["path", { "d": "M5 12l5 5l10 -10", "key": "svg-0" }]];
+const IconCheck = createReactComponent("outline", "check", "Check", __iconNode$q);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [["path", { "d": "M6 9l6 6l6 -6", "key": "svg-0" }]];
-const IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$o);
+const __iconNode$p = [["path", { "d": "M6 9l6 6l6 -6", "key": "svg-0" }]];
+const IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$p);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$n = [["path", { "d": "M15 6l-6 6l6 6", "key": "svg-0" }]];
-const IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$n);
+const __iconNode$o = [["path", { "d": "M15 6l-6 6l6 6", "key": "svg-0" }]];
+const IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$o);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$m = [["path", { "d": "M9 6l6 6l-6 6", "key": "svg-0" }]];
-const IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$m);
+const __iconNode$n = [["path", { "d": "M9 6l6 6l-6 6", "key": "svg-0" }]];
+const IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$n);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [["path", { "d": "M6 15l6 -6l6 6", "key": "svg-0" }]];
-const IconChevronUp = createReactComponent("outline", "chevron-up", "ChevronUp", __iconNode$l);
+const __iconNode$m = [["path", { "d": "M6 15l6 -6l6 6", "key": "svg-0" }]];
+const IconChevronUp = createReactComponent("outline", "chevron-up", "ChevronUp", __iconNode$m);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [["path", { "d": "M11 7l-5 5l5 5", "key": "svg-0" }], ["path", { "d": "M17 7l-5 5l5 5", "key": "svg-1" }]];
-const IconChevronsLeft = createReactComponent("outline", "chevrons-left", "ChevronsLeft", __iconNode$k);
+const __iconNode$l = [["path", { "d": "M11 7l-5 5l5 5", "key": "svg-0" }], ["path", { "d": "M17 7l-5 5l5 5", "key": "svg-1" }]];
+const IconChevronsLeft = createReactComponent("outline", "chevrons-left", "ChevronsLeft", __iconNode$l);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [["path", { "d": "M7 7l5 5l-5 5", "key": "svg-0" }], ["path", { "d": "M13 7l5 5l-5 5", "key": "svg-1" }]];
-const IconChevronsRight = createReactComponent("outline", "chevrons-right", "ChevronsRight", __iconNode$j);
+const __iconNode$k = [["path", { "d": "M7 7l5 5l-5 5", "key": "svg-0" }], ["path", { "d": "M13 7l5 5l-5 5", "key": "svg-1" }]];
+const IconChevronsRight = createReactComponent("outline", "chevrons-right", "ChevronsRight", __iconNode$k);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M9 12l2 2l4 -4", "key": "svg-1" }]];
-const IconCircleCheck = createReactComponent("outline", "circle-check", "CircleCheck", __iconNode$i);
+const __iconNode$j = [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M9 12l2 2l4 -4", "key": "svg-1" }]];
+const IconCircleCheck = createReactComponent("outline", "circle-check", "CircleCheck", __iconNode$j);
+/**
+ * @license @tabler/icons-react v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$i = [["path", { "d": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "key": "svg-0" }], ["path", { "d": "M10 10l4 4m0 -4l-4 4", "key": "svg-1" }]];
+const IconCircleX = createReactComponent("outline", "circle-x", "CircleX", __iconNode$i);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
@@ -2835,9 +2843,9 @@ function FileUpload({
                     className: "ina-file-upload__file-icon--spinning"
                   }
                 ) }),
-                uploadedFile.status === "success" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCheck, { size: 16 }) }),
-                uploadedFile.status === "error" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--error", children: /* @__PURE__ */ jsx(IconX, { size: 16 }) }),
-                uploadedFile.status === "idle" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCheck, { size: 16 }) })
+                uploadedFile.status === "success" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCircleCheck, { size: 16, stroke: "2" }) }),
+                uploadedFile.status === "error" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--error", children: /* @__PURE__ */ jsx(IconCircleX, { size: 16, stroke: "2" }) }),
+                uploadedFile.status === "idle" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCircleCheck, { size: 16, stroke: "2" }) })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "ina-file-upload__file-info", children: [
                 /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-name", children: sanitizeFileName(uploadedFile.file.name) }),
@@ -3602,8 +3610,18 @@ function Pagination({
   if (totalPages <= 0) return null;
   function renderPageNumbers() {
     const pages = [];
-    const start = Math.max(1, currentPage - 1);
-    const end = Math.min(totalPages, currentPage + 1);
+    let start;
+    let end;
+    if (currentPage === 1) {
+      start = 1;
+      end = Math.min(3, totalPages);
+    } else if (currentPage === totalPages) {
+      start = Math.max(1, totalPages - 2);
+      end = totalPages;
+    } else {
+      start = currentPage - 1;
+      end = currentPage + 1;
+    }
     for (let i2 = start; i2 <= end; i2++) {
       pages.push(renderPageButton(i2));
     }
@@ -5187,6 +5205,163 @@ function TextArea({
     ] })
   ] });
 }
+function OneTimePassword({
+  value = "",
+  onChange,
+  length = 6,
+  title,
+  description,
+  helperText,
+  error = false,
+  disabled = false,
+  readonly = false,
+  className = "",
+  onComplete,
+  autoFocus = false
+}) {
+  const inputRefs = useRef([]);
+  useEffect(() => {
+    inputRefs.current = inputRefs.current.slice(0, length);
+  }, [length]);
+  useEffect(() => {
+    if (autoFocus && inputRefs.current[0] && !disabled && !readonly) {
+      inputRefs.current[0].focus();
+    }
+  }, [autoFocus, disabled, readonly]);
+  useEffect(() => {
+    const currentValue = value || "";
+    if (currentValue.length < length && currentValue.length > 0) {
+      const nextIndex = currentValue.length;
+      if (inputRefs.current[nextIndex] && !disabled && !readonly) {
+        inputRefs.current[nextIndex].focus();
+      }
+    }
+  }, [value, length, disabled, readonly]);
+  useEffect(() => {
+    if (value && value.length === length && onComplete) {
+      onComplete(value);
+    }
+  }, [value, length, onComplete]);
+  const handleChange = (index, e) => {
+    const inputValue = e.target.value;
+    if (inputValue && !/^\d$/.test(inputValue)) {
+      return;
+    }
+    const newValue = value.split("");
+    newValue[index] = inputValue;
+    const updatedValue = newValue.join("").slice(0, length);
+    onChange(updatedValue);
+    if (inputValue && index < length - 1) {
+      const nextIndex = index + 1;
+      if (inputRefs.current[nextIndex]) {
+        inputRefs.current[nextIndex].focus();
+      }
+    }
+  };
+  const handleKeyDown = (index, e) => {
+    var _a, _b;
+    if (e.key === "Backspace") {
+      const currentValue = value || "";
+      if (!currentValue[index] && index > 0) {
+        const prevIndex = index - 1;
+        if (inputRefs.current[prevIndex]) {
+          inputRefs.current[prevIndex].focus();
+          const newValue = value.split("");
+          newValue[prevIndex] = "";
+          onChange(newValue.join(""));
+        }
+      } else {
+        const newValue = value.split("");
+        newValue[index] = "";
+        onChange(newValue.join(""));
+      }
+    }
+    if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault();
+      (_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
+    }
+    if (e.key === "ArrowRight" && index < length - 1) {
+      e.preventDefault();
+      (_b = inputRefs.current[index + 1]) == null ? void 0 : _b.focus();
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "v") {
+      e.preventDefault();
+      navigator.clipboard.readText().then((text) => {
+        const digits = text.replace(/\D/g, "").slice(0, length);
+        if (digits) {
+          onChange(digits);
+          const focusIndex = Math.min(digits.length - 1, length - 1);
+          if (inputRefs.current[focusIndex]) {
+            inputRefs.current[focusIndex].focus();
+          }
+        }
+      });
+    }
+  };
+  const handleFocus = (index) => {
+    if (inputRefs.current[index]) {
+      inputRefs.current[index].select();
+    }
+  };
+  const handleBlur = () => {
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pastedText = e.clipboardData.getData("text");
+    const digits = pastedText.replace(/\D/g, "").slice(0, length);
+    if (digits) {
+      onChange(digits);
+      const focusIndex = Math.min(digits.length - 1, length - 1);
+      setTimeout(() => {
+        if (inputRefs.current[focusIndex]) {
+          inputRefs.current[focusIndex].focus();
+        }
+      }, 0);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx("ina-one-time-password", className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: "ina-one-time-password__title", children: title }),
+    description && /* @__PURE__ */ jsx("div", { className: "ina-one-time-password__description", children: description }),
+    /* @__PURE__ */ jsx("div", { className: "ina-one-time-password__container", children: Array.from({ length }).map((_, index) => {
+      const digitValue = value[index] || "";
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: (el) => {
+            inputRefs.current[index] = el;
+          },
+          type: "text",
+          inputMode: "numeric",
+          maxLength: 1,
+          value: digitValue,
+          onChange: (e) => handleChange(index, e),
+          onKeyDown: (e) => handleKeyDown(index, e),
+          onFocus: () => handleFocus(index),
+          onBlur: handleBlur,
+          onPaste: handlePaste,
+          disabled,
+          readOnly: readonly,
+          className: clsx(
+            "ina-one-time-password__input",
+            error && "ina-one-time-password__input--error"
+          ),
+          "aria-label": `Digit ${index + 1} of ${length}`
+        },
+        index
+      );
+    }) }),
+    helperText && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          "ina-one-time-password__helper-text",
+          error && "ina-one-time-password__helper-text--error"
+        ),
+        children: helperText
+      }
+    )
+  ] });
+}
 const TimePicker = forwardRef(
   ({
     defaultValue = "",
@@ -8779,11 +8954,28 @@ function DatePicker({
           );
         }
         if (endDate) {
-          targetNextMonth = new Date(
+          const endMonth = new Date(
             endDate.getFullYear(),
             endDate.getMonth(),
             1
           );
+          if (targetMonth && targetMonth.getFullYear() === endMonth.getFullYear() && targetMonth.getMonth() === endMonth.getMonth()) {
+            targetNextMonth = new Date(targetMonth);
+            targetNextMonth.setMonth(targetNextMonth.getMonth() + 1);
+          } else {
+            targetNextMonth = endMonth;
+          }
+        }
+      } else if (mode === "range" && parsedDates.length === 1) {
+        const startDate = parsedDates[0];
+        if (startDate) {
+          targetMonth = new Date(
+            startDate.getFullYear(),
+            startDate.getMonth(),
+            1
+          );
+          targetNextMonth = new Date(targetMonth);
+          targetNextMonth.setMonth(targetNextMonth.getMonth() + 1);
         }
       } else if (parsedDates.length > 0) {
         const targetDate = parsedDates[0];
@@ -8810,8 +9002,8 @@ function DatePicker({
               setNextMonth(nextMonthDate);
             } else if (mode === "range") {
               const parsedDates2 = parseSelectedDates();
-              const hasOnlyStartDate = parsedDates2.length === 1;
-              if (!hasOnlyStartDate) {
+              const hasNoDates = parsedDates2.length === 0;
+              if (hasNoDates) {
                 const nextMonthDate = new Date(targetMonth);
                 nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);
                 setNextMonth(nextMonthDate);
@@ -9397,7 +9589,7 @@ function DatePicker({
                   dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: "ina-date-picker__day-header", children: day }, day)),
                   currentDays.map((day) => {
                     const styling = getDateStyling(day);
-                    return /* @__PURE__ */ jsx(
+                    return /* @__PURE__ */ jsxs(
                       "button",
                       {
                         type: "button",
@@ -9406,7 +9598,10 @@ function DatePicker({
                         onMouseLeave: () => setHoveredDate(null),
                         disabled: styling.isDisabled,
                         className: styling.className + (!styling.isSelected && !styling.isInRange && !styling.isHovered && !styling.isHoveredEnd && !styling.isDisabled ? " ina-date-picker__day--hover" : ""),
-                        children: day.date.getDate()
+                        children: [
+                          day.date.getDate(),
+                          day.isToday && /* @__PURE__ */ jsx("span", { className: "ina-date-picker__today-label", children: "Hari ini" })
+                        ]
                       },
                       `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
                     );
@@ -9717,7 +9912,7 @@ function TabHorizontal({
   value,
   defaultValue,
   onChange,
-  size = "md",
+  size = "sm",
   variant = "outline",
   fullWidth = false,
   useBrandColor = false,
@@ -9794,7 +9989,7 @@ function TabVertical({
   value,
   defaultValue,
   onChange,
-  size = "md",
+  size = "sm",
   variant = "outline",
   useBrandColor = false,
   disabled = false,
@@ -9985,6 +10180,7 @@ export {
   Modal,
   MonthPicker,
   MultipleChoiceGrid,
+  OneTimePassword,
   Pagination,
   PasswordInput,
   PhoneInput,