@geneui/components 3.0.0-next-e1bd79a-05032026 → 3.0.0-next-91e9add-19032026

package/Accordion.js

@@ -7,7 +7,7 @@ import { a as SvgChevronLeft, S as SvgChevronRight } from './ChevronRight-af87e2
 import Button from './Button.js';
 import Scrollbar from './Scrollbar.js';
 import Text from './Text.js';
-import { B as ButtonGroup } from './index-8724e0c0.js';
+import { B as ButtonGroup } from './index-29bde3c5.js';
 import Tooltip from './Tooltip.js';
 import { u as useEllipsisDetection } from './useEllipsisDetection-c5f9b175.js';
 import { a as AccordionContext } from './Accordion-3e20a13f.js';
@@ -18,8 +18,8 @@ import './style-inject.es-746bb8ed.js';
 import 'prop-types';
 import 'react-dom';
 import './useDebounceCallback-999deae7.js';
-import './ButtonGroup-dd6816d7.js';
-import './PopoverBody-f9b55763.js';
+import './ButtonGroup-711d215c.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import './Info-0f0741e0.js';
 import './X-20da3b4a.js';

package/Banner.js

@@ -5,14 +5,14 @@ import { S as SvgInfo } from './Info-0f0741e0.js';
 import { S as SvgX } from './X-20da3b4a.js';
 import Button from './Button.js';
 import Text from './Text.js';
-import { B as ButtonGroup } from './index-8724e0c0.js';
+import { B as ButtonGroup } from './index-29bde3c5.js';
 import { a as GeneUIDesignSystemContext } from './index-f83efe58.js';
 import './Banner-09cf6dea.js';
 import './Loader.js';
 import './style-inject.es-746bb8ed.js';
-import './ButtonGroup-dd6816d7.js';
+import './ButtonGroup-711d215c.js';
 import './tslib.es6-f211516f.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';
 import './index-4159d61d.js';

package/{ButtonGroup-dd6816d7.js → ButtonGroup-711d215c.js}

@@ -2,7 +2,7 @@ import { _ as __rest } from './tslib.es6-f211516f.js';
 import React__default, { createContext, useState, useRef, useContext, useEffect, useCallback, useMemo, Children, cloneElement } from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import Loader from './Loader.js';
-import { P as Popover, a as PopoverBody } from './PopoverBody-f9b55763.js';
+import { P as Popover, a as PopoverBody } from './PopoverBody-69518dcc.js';
 import Scrollbar from './Scrollbar.js';
 import { a as GeneUIDesignSystemContext } from './index-f83efe58.js';
 import { a as useClickOutside } from './index-4159d61d.js';

package/ButtonGroup.js

@@ -1,11 +1,11 @@
-export { B as default } from './index-8724e0c0.js';
-import './ButtonGroup-dd6816d7.js';
+export { B as default } from './index-29bde3c5.js';
+import './ButtonGroup-711d215c.js';
 import './tslib.es6-f211516f.js';
 import 'react';
 import './index-ce02421b.js';
 import './Loader.js';
 import './style-inject.es-746bb8ed.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';
 import './Info-0f0741e0.js';

package/DataCard.js

@@ -6,8 +6,8 @@ import { S as Spreadsheet } from './index-4159d61d.js';
 import TextLink from './TextLink.js';
 import { K as KeyValue } from './KeyValue-2fdb0641.js';
 import { Key, Value } from './KeyValue.js';
-import { M as Menu } from './ButtonGroup-dd6816d7.js';
-import { M as MenuItem } from './index-8724e0c0.js';
+import { M as Menu } from './ButtonGroup-711d215c.js';
+import { M as MenuItem } from './index-29bde3c5.js';
 import './DataCard-3601ca38.js';
 import './Loader.js';
 import './style-inject.es-746bb8ed.js';
@@ -29,7 +29,7 @@ import './TextLink-ef998d00.js';
 import './Info.js';
 import './Info-0f0741e0.js';
 import './tslib.es6-f211516f.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './X-20da3b4a.js';
 import './index-15303b91.js';
 import './ThreeDotsHorizontal-479c2b4b.js';

package/DataCardList.js

@@ -28,11 +28,11 @@ import './KeyValue-2fdb0641.js';
 import './KeyValue.js';
 import './Info.js';
 import './Info-0f0741e0.js';
-import './ButtonGroup-dd6816d7.js';
+import './ButtonGroup-711d215c.js';
 import './tslib.es6-f211516f.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './X-20da3b4a.js';
-import './index-8724e0c0.js';
+import './index-29bde3c5.js';
 import './index-15303b91.js';
 import './ThreeDotsHorizontal-479c2b4b.js';
 import './Text.js';

package/Drawer.js

@@ -5,7 +5,7 @@ import { S as SvgX } from './X-20da3b4a.js';
 import Button from './Button.js';
 import Scrollbar from './Scrollbar.js';
 import Text from './Text.js';
-import { B as ButtonGroup } from './index-8724e0c0.js';
+import { B as ButtonGroup } from './index-29bde3c5.js';
 import Tooltip from './Tooltip.js';
 import { a as GeneUIDesignSystemContext } from './index-f83efe58.js';
 import { u as useEllipsisDetection } from './useEllipsisDetection-c5f9b175.js';
@@ -15,9 +15,9 @@ import './Loader.js';
 import './style-inject.es-746bb8ed.js';
 import 'prop-types';
 import './useDebounceCallback-999deae7.js';
-import './ButtonGroup-dd6816d7.js';
+import './ButtonGroup-711d215c.js';
 import './tslib.es6-f211516f.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import './Info-0f0741e0.js';
 import './index-4159d61d.js';

package/Empty.js

@@ -1,11 +1,11 @@
-export { E as default } from './index-8724e0c0.js';
-import './ButtonGroup-dd6816d7.js';
+export { E as default } from './index-29bde3c5.js';
+import './ButtonGroup-711d215c.js';
 import './tslib.es6-f211516f.js';
 import 'react';
 import './index-ce02421b.js';
 import './Loader.js';
 import './style-inject.es-746bb8ed.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';
 import './Info-0f0741e0.js';

package/GlobalHeader.js

@@ -4,13 +4,13 @@ import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b
 import Button from './Button.js';
 import Divider from './Divider.js';
 import Logo from './Logo.js';
-import { P as Products } from './Products-5d602730.js';
+import { P as Products } from './Products-2d8aa944.js';
 import { ProductsMainSection, Product, ProductsSecondarySection } from './Products.js';
 import Profile from './Profile.js';
 import Text from './Text.js';
 import { S as SvgCaretDownFilled } from './CaretDownFilled-924e7189.js';
 import Loader from './Loader.js';
-import { P as Popover, a as PopoverBody } from './PopoverBody-f9b55763.js';
+import { P as Popover, a as PopoverBody } from './PopoverBody-69518dcc.js';
 import Scrollbar from './Scrollbar.js';
 import { P as PartnerItem } from './GlobalHeader-e3be2af9.js';
 import { a as useClickOutside } from './index-4159d61d.js';
@@ -30,9 +30,9 @@ import './X-20da3b4a.js';
 import 'prop-types';
 import './index-82e2cf4c.js';
 import './Avatar-243146ad.js';
-import './ButtonGroup-dd6816d7.js';
+import './ButtonGroup-711d215c.js';
 import './tslib.es6-f211516f.js';
-import './index-8724e0c0.js';
+import './index-29bde3c5.js';
 import './index-15303b91.js';
 import './ThreeDotsHorizontal-479c2b4b.js';
 import './index-a2688a52.js';

package/Image.js

@@ -4,15 +4,15 @@ import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b
 import Button from './Button.js';
 import Loader from './Loader.js';
 import Text from './Text.js';
-import { B as ButtonGroup } from './index-8724e0c0.js';
+import { B as ButtonGroup } from './index-29bde3c5.js';
 import Checkbox from './Checkbox.js';
 import Tooltip from './Tooltip.js';
 import { u as useEllipsisDetection } from './useEllipsisDetection-c5f9b175.js';
 import './Image-4f135206.js';
 import './style-inject.es-746bb8ed.js';
-import './ButtonGroup-dd6816d7.js';
+import './ButtonGroup-711d215c.js';
 import './tslib.es6-f211516f.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';
 import './Info-0f0741e0.js';

package/Menu.js

@@ -1,11 +1,11 @@
-export { M as Menu } from './ButtonGroup-dd6816d7.js';
-export { M as MenuItem } from './index-8724e0c0.js';
+export { M as Menu } from './ButtonGroup-711d215c.js';
+export { M as MenuItem } from './index-29bde3c5.js';
 import './tslib.es6-f211516f.js';
 import 'react';
 import './index-ce02421b.js';
 import './Loader.js';
 import './style-inject.es-746bb8ed.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';
 import './Info-0f0741e0.js';

package/Modal.js

@@ -8,7 +8,7 @@ import { S as SvgX } from './X-20da3b4a.js';
 import Button from './Button.js';
 import Scrollbar from './Scrollbar.js';
 import Text from './Text.js';
-import { B as ButtonGroup } from './index-8724e0c0.js';
+import { B as ButtonGroup } from './index-29bde3c5.js';
 import Tooltip from './Tooltip.js';
 import { a as GeneUIDesignSystemContext } from './index-f83efe58.js';
 import { u as useEllipsisDetection } from './useEllipsisDetection-c5f9b175.js';
@@ -18,9 +18,9 @@ import './Loader.js';
 import './style-inject.es-746bb8ed.js';
 import 'prop-types';
 import './useDebounceCallback-999deae7.js';
-import './ButtonGroup-dd6816d7.js';
+import './ButtonGroup-711d215c.js';
 import './tslib.es6-f211516f.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import './index-4159d61d.js';
 import './index-15303b91.js';

package/Navigation.js

@@ -5,10 +5,10 @@ import { S as SvgPlus } from './Plus-f0726053.js';
 import { S as SvgThreeDotsHorizontal } from './ThreeDotsHorizontal-479c2b4b.js';
 import { S as SvgX } from './X-20da3b4a.js';
 import Button from './Button.js';
-import { P as Popover, a as PopoverBody } from './PopoverBody-f9b55763.js';
+import { P as Popover, a as PopoverBody } from './PopoverBody-69518dcc.js';
 import Scrollbar from './Scrollbar.js';
-import { M as Menu } from './ButtonGroup-dd6816d7.js';
-import { M as MenuItem } from './index-8724e0c0.js';
+import { M as Menu } from './ButtonGroup-711d215c.js';
+import { M as MenuItem } from './index-29bde3c5.js';
 import { S as SvgChevronRight } from './ChevronRight-af87e2a4.js';
 import Text from './Text.js';
 import Tooltip from './Tooltip.js';
@@ -437,7 +437,7 @@ const Navigation = ({ className, open, onOpenChange, navigationData = [], active
                 React__default.createElement("div", { className: "navigation__listItems", ref: navColRef }, clonedNavigationData === null || clonedNavigationData === void 0 ? void 0 : clonedNavigationData.map((item, index) => (React__default.createElement(Fragment, { key: `${item.title}-${item.path}` },
                     React__default.createElement(NavigationColItem, { isVisible: index < maxVisibleItems, Icon: item.Icon, title: item.title, onClick: onNavigationColItemClick, index: index, path: item.path, opened: forceOpen, currentSelected: currentDataIndex === index, selected: index === (activePathIndex === null || activePathIndex === void 0 ? void 0 : activePathIndex[0]), onMouseEnter: onMouseEnterHandler, disabled: item.disabled, propsForPopover: hoverDataIndex === index ? propsForPopover : {}, hasChildren: item.children && item.children.length > 0, render: render, compact: compact }),
                     hoverDataIndex !== null && item.children && item.children.length > 0 && (React__default.createElement(Popover, { setProps: setPropsForPopover, size: "small", position: "right-top", withArrow: true, trigger: "hover", margin: 20, disableReposition: false, ref: popoverRef },
-                        React__default.createElement(PopoverBody, { withPadding: false, withScrollbar: false },
+                        React__default.createElement(PopoverBody, { withPadding: false, withScrollbar: false, className: "navigation__content" },
                             React__default.createElement(NavigationMenuHeader, { title: clonedNavigationData[hoverDataIndex].title }),
                             React__default.createElement(Scrollbar, null,
                                 React__default.createElement("div", { className: "navigation__items" },

package/Notification.js

@@ -7,14 +7,14 @@ import { S as SvgTriangleAlert } from './TriangleAlert-ba250f4c.js';
 import { S as SvgX } from './X-20da3b4a.js';
 import Button from './Button.js';
 import Text from './Text.js';
-import { B as ButtonGroup } from './index-8724e0c0.js';
+import { B as ButtonGroup } from './index-29bde3c5.js';
 import { a as GeneUIDesignSystemContext } from './index-f83efe58.js';
 import './Notification-c2697ece.js';
 import './Loader.js';
 import './style-inject.es-746bb8ed.js';
-import './ButtonGroup-dd6816d7.js';
+import './ButtonGroup-711d215c.js';
 import './tslib.es6-f211516f.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import './Info-0f0741e0.js';
 import './index-4159d61d.js';
@@ -112,7 +112,7 @@ const Notification = ({ className, open, variant = "toast", onClose, status = "i
                 React__default.createElement("div", { className: "notification__textGroup" },
                     title && (React__default.createElement(Text, { as: "h6", variant: "labelMediumSemibold", className: "notification__title" }, title)),
                     description && (React__default.createElement(Text, { as: "p", variant: "bodyMediumMedium", className: "notification__description" }, description)))),
-            React__default.createElement(Button, { appearance: "secondary", layout: "text", size: "small", className: "notification__button", onClick: onClose, Icon: SvgX })),
+            onClose && (React__default.createElement(Button, { appearance: "secondary", layout: "text", size: "small", className: "notification__button", onClick: onClose, Icon: SvgX }))),
         React__default.createElement(ButtonGroup, { className: "notification__actions", size: actionsButtonsSize },
             !!secondaryActionText && (React__default.createElement(Button, { appearance: "secondary", className: "notification__button", onClick: onSecondaryActionClick, layout: "text" }, secondaryActionText)),
             !!primaryActionText && (React__default.createElement(Button, { appearance: "primary", className: "notification__button", onClick: onPrimaryActionClick }, primaryActionText)))));

package/OTPField-af15abb1.js

@@ -0,0 +1,63 @@
+import React__default, { forwardRef, memo } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+
+const OTP_LENGTH = 6;
+const OTP_INDICES = Array.from({ length: OTP_LENGTH }, (_, i) => i);
+const DIGIT_PATTERN = /^\d$/;
+const helperTextSizeMap = {
+    large: "medium",
+    medium: "medium"
+};
+const createEmptyDigits = () => {
+    return Array.from({ length: OTP_LENGTH }, () => "");
+};
+const normalizeDigitsLength = (digits) => {
+    if (digits.length === OTP_LENGTH)
+        return digits;
+    if (digits.length > OTP_LENGTH) {
+        return digits.slice(0, OTP_LENGTH);
+    }
+    return [...digits, ...createEmptyDigits().slice(0, OTP_LENGTH - digits.length)];
+};
+const stringToDigits = (value) => {
+    const digits = createEmptyDigits();
+    if (value === undefined || value === "")
+        return digits;
+    if (typeof value === "number") {
+        if (!Number.isInteger(value) || value < 0)
+            return digits;
+        const str = String(value);
+        for (let i = 0; i < OTP_LENGTH && i < str.length; i += 1) {
+            digits[i] = str[i];
+        }
+        return digits;
+    }
+    const onlyDigits = value.replace(/\D/g, "");
+    for (let i = 0; i < OTP_LENGTH && i < onlyDigits.length; i += 1) {
+        digits[i] = onlyDigits[i];
+    }
+    return digits;
+};
+const digitsToString = (digits) => {
+    return digits.join("");
+};
+
+var css_248z$1 = ".otpFieldInput{align-items:center;background-color:initial;border:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);color:var(--guit-sem-color-foreground-neutral-2);display:flex;flex-shrink:0;font-family:var(--guit-sem-font-body-medium-default-medium-font-family);font-size:var(--guit-sem-font-body-medium-default-medium-font-size);font-weight:var(--guit-sem-font-body-medium-default-medium-font-weight);justify-content:center;line-height:var(--guit-sem-font-body-medium-default-medium-line-height);overflow:hidden;text-align:center}.otpFieldInput_size_large{border-radius:var(--guit-ref-radius-2xsmall);height:var(--guit-sem-dimension-height-large);width:var(--guit-sem-dimension-width-large)}.otpFieldInput_size_medium{border-radius:var(--guit-ref-radius-3xsmall);height:var(--guit-sem-dimension-height-medium);width:var(--guit-sem-dimension-width-medium)}.otpFieldInput_status_error{border-color:var(--guit-sem-color-border-error)}.otpFieldInput_disabled{border-color:var(--guit-sem-color-border-disabled-1);color:var(--guit-sem-color-foreground-disabled);pointer-events:none;-webkit-user-select:none;user-select:none}";
+styleInject(css_248z$1);
+
+const OTPFieldInputBase = forwardRef(({ className, index, size, status = "rest", disabled, autoComplete, value, onChange, onKeyDown, onFocus, onBlur, onClick, "aria-label": ariaLabel }, ref) => {
+    const inputClassName = classNames("otpFieldInput", `otpFieldInput_size_${size}`, {
+        [`otpFieldInput_status_${status}`]: !disabled,
+        otpFieldInput_disabled: disabled
+    }, className);
+    return (React__default.createElement("input", { ref: ref, "data-index": index, type: "text", inputMode: "numeric", autoComplete: autoComplete, className: inputClassName, disabled: disabled, value: value, onChange: onChange, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, onClick: onClick, "aria-label": ariaLabel }));
+});
+OTPFieldInputBase.displayName = "OTPFieldInputBase";
+const OTPFieldInput = memo(OTPFieldInputBase);
+OTPFieldInput.displayName = "OTPFieldInput";
+
+var css_248z = ".otpField{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-large);width:100%}.otpField_size_large{max-width:28rem}.otpField_size_medium{max-width:23.2rem}.otpField__wrapper{display:flex;flex-direction:column;gap:var(--guit-ref-spacing-3xsmall)}.otpField__content,.otpField__textFieldWrapper{display:flex;gap:var(--guit-ref-spacing-xsmall)}.otpField__helperText{flex:1;min-width:var(--guit-ref-spacing-xsmall)}.otpField__timer{-webkit-margin-start:auto;flex:0 0 auto;margin-inline-start:auto}.otpField__timer_disabled{color:var(--guit-sem-color-foreground-disabled)}";
+styleInject(css_248z);
+
+export { DIGIT_PATTERN as D, OTP_LENGTH as O, OTP_INDICES as a, OTPFieldInput as b, digitsToString as d, helperTextSizeMap as h, normalizeDigitsLength as n, stringToDigits as s };

package/OTPField.js

@@ -0,0 +1,230 @@
+import React__default, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { c as classNames } from './index-ce02421b.js';
+import HelperText from './HelperText.js';
+import Text from './Text.js';
+import Notification from './Notification.js';
+import { s as stringToDigits, n as normalizeDigitsLength, d as digitsToString, O as OTP_LENGTH, D as DIGIT_PATTERN, a as OTP_INDICES, b as OTPFieldInput, h as helperTextSizeMap } from './OTPField-af15abb1.js';
+import './ErrorFilled-f4226310.js';
+import './ActivityRecent-b88e2ba8.js';
+import './TriangleAlert-ba250f4c.js';
+import './style-inject.es-746bb8ed.js';
+import 'react-dom';
+import './X-20da3b4a.js';
+import './Button.js';
+import './Loader.js';
+import './index-29bde3c5.js';
+import './ButtonGroup-711d215c.js';
+import './tslib.es6-f211516f.js';
+import './PopoverBody-69518dcc.js';
+import './floating-ui.react-a6c3b969.js';
+import './Info-0f0741e0.js';
+import './index-4159d61d.js';
+import './Scrollbar.js';
+import 'prop-types';
+import './useDebounceCallback-999deae7.js';
+import './index-f83efe58.js';
+import './useWindowSize-6faa0d0f.js';
+import './useDeviceInfo-8340f573.js';
+import './index-15303b91.js';
+import './ThreeDotsHorizontal-479c2b4b.js';
+import './index-a2688a52.js';
+import './CheckMark-34798545.js';
+import './ChevronRight-af87e2a4.js';
+import './Divider.js';
+import './Divider-047dfad9.js';
+import './Notification-c2697ece.js';
+
+const formatTime = (totalSeconds) => {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+};
+const useCountdown = ({ duration, onExpire }) => {
+    const [remaining, setRemaining] = useState(duration);
+    const onExpireRef = useRef(onExpire);
+    onExpireRef.current = onExpire;
+    useEffect(() => {
+        setRemaining(duration);
+    }, [duration]);
+    /* eslint consistent-return: off */
+    useEffect(() => {
+        var _a;
+        // Do not run countdown logic when duration is zero or negative.
+        if (duration <= 0) {
+            if (remaining !== 0) {
+                setRemaining(0);
+            }
+            return;
+        }
+        if (remaining <= 0) {
+            (_a = onExpireRef.current) === null || _a === void 0 ? void 0 : _a.call(onExpireRef);
+            return;
+        }
+        const intervalId = setInterval(() => {
+            setRemaining((prev) => {
+                if (prev <= 1) {
+                    clearInterval(intervalId);
+                    return 0;
+                }
+                return prev - 1;
+            });
+        }, 1000);
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [remaining, duration]);
+    return {
+        remaining,
+        formatted: formatTime(remaining),
+        isExpired: remaining <= 0
+    };
+};
+
+/**
+ * The OTP Field component is an input field designed for entering a one-time password, often used for multi-factor authentication. The OTP Field component ensures that applications can securely verify user actions and identities, thereby protecting against unauthorized access and enhancing overall security.
+ */
+const OTPField = ({ className, size = "large", value: controlledValue, defaultValue = "", disabled = false, status = "rest", helperText, timerDuration, onTimerExpire, notification, onChange, onComplete, onFocus, onBlur, autoFocus = false }) => {
+    const isControlled = controlledValue !== undefined;
+    const [internalDigits, setInternalDigits] = useState(() => stringToDigits(isControlled ? controlledValue : defaultValue));
+    const inputRefs = useRef([]);
+    const lastEmittedValue = useRef(isControlled ? String(controlledValue !== null && controlledValue !== void 0 ? controlledValue : "") : "");
+    // Refs for handler stability — handlers read the latest values without re-creating.
+    const digitsRef = useRef([]);
+    const onChangeRef = useRef(onChange);
+    const onCompleteRef = useRef(onComplete);
+    const onFocusRef = useRef(onFocus);
+    const onBlurRef = useRef(onBlur);
+    onChangeRef.current = onChange;
+    onCompleteRef.current = onComplete;
+    onFocusRef.current = onFocus;
+    onBlurRef.current = onBlur;
+    useEffect(() => {
+        if (isControlled && String(controlledValue) !== lastEmittedValue.current) {
+            setInternalDigits(stringToDigits(controlledValue));
+        }
+    }, [controlledValue, isControlled]);
+    const digits = useMemo(() => normalizeDigitsLength(internalDigits), [internalDigits]);
+    digitsRef.current = digits;
+    const htSize = helperTextSizeMap[size];
+    const { formatted: timerFormatted } = useCountdown({
+        duration: timerDuration !== null && timerDuration !== void 0 ? timerDuration : 0,
+        onExpire: onTimerExpire
+    });
+    const showTimer = timerDuration !== undefined && timerDuration > 0;
+    const emitValueChange = useCallback((nextDigits) => {
+        var _a, _b;
+        const normalized = normalizeDigitsLength(nextDigits);
+        const nextValue = digitsToString(normalized);
+        lastEmittedValue.current = nextValue;
+        setInternalDigits(normalized);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, nextValue);
+        if (nextValue.length === OTP_LENGTH) {
+            (_b = onCompleteRef.current) === null || _b === void 0 ? void 0 : _b.call(onCompleteRef, nextValue);
+        }
+    }, []);
+    const focusInput = useCallback((index) => {
+        var _a;
+        const clamped = Math.max(0, Math.min(index, OTP_LENGTH - 1));
+        (_a = inputRefs.current[clamped]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    useEffect(() => {
+        if (autoFocus && !disabled) {
+            focusInput(0);
+        }
+    }, [autoFocus, disabled, focusInput]);
+    const handleInputFocus = useCallback((event) => {
+        var _a;
+        if (!disabled) {
+            event.currentTarget.select();
+        }
+        (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef, event);
+    }, [disabled]);
+    const handleInputClick = useCallback((event) => {
+        if (!disabled) {
+            event.currentTarget.select();
+        }
+    }, [disabled]);
+    const handleInputBlur = useCallback((event) => {
+        var _a;
+        (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, event);
+    }, []);
+    const handleChange = useCallback((event) => {
+        if (disabled)
+            return;
+        const index = Number(event.currentTarget.dataset.index);
+        const inputValue = event.target.value;
+        const nextDigits = [...digitsRef.current];
+        if (inputValue === "") {
+            nextDigits[index] = "";
+            emitValueChange(nextDigits);
+            return;
+        }
+        const digit = inputValue.slice(-1);
+        if (!DIGIT_PATTERN.test(digit))
+            return;
+        nextDigits[index] = digit;
+        emitValueChange(nextDigits);
+        if (index < OTP_LENGTH - 1) {
+            focusInput(index + 1);
+        }
+    }, [disabled, emitValueChange, focusInput]);
+    const handleKeyDown = useCallback((event) => {
+        if (disabled)
+            return;
+        const index = Number(event.currentTarget.dataset.index);
+        if (event.key === "Backspace") {
+            event.preventDefault();
+            const nextDigits = [...digitsRef.current];
+            if (nextDigits[index]) {
+                nextDigits[index] = "";
+                emitValueChange(nextDigits);
+            }
+            else if (index > 0) {
+                nextDigits[index - 1] = "";
+                emitValueChange(nextDigits);
+                focusInput(index - 1);
+            }
+        }
+        else if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            focusInput(index - 1);
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            focusInput(index + 1);
+        }
+    }, [disabled, emitValueChange, focusInput]);
+    const handlePaste = useCallback((event) => {
+        event.preventDefault();
+        if (disabled)
+            return;
+        const pasted = event.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
+        const nextDigits = [...digitsRef.current];
+        for (let i = 0; i < OTP_LENGTH && i < pasted.length; i += 1) {
+            nextDigits[i] = pasted[i];
+        }
+        emitValueChange(nextDigits);
+        const lastIndex = Math.min(pasted.length - 1, OTP_LENGTH - 1);
+        if (lastIndex >= 0) {
+            focusInput(lastIndex);
+        }
+    }, [disabled, emitValueChange, focusInput]);
+    const refCallbacks = useMemo(() => Array.from({ length: OTP_LENGTH }, (_, i) => (el) => {
+        inputRefs.current[i] = el;
+    }), []);
+    const showNotification = status === "error" && !!notification;
+    return (React__default.createElement("div", { className: classNames("otpField", `otpField_size_${size}`, className) },
+        React__default.createElement("div", { className: "otpField__wrapper" },
+            React__default.createElement("div", { className: "otpField__textFieldWrapper", role: "group", "aria-label": "One-time password", "aria-invalid": status === "error" || undefined, onPaste: handlePaste }, OTP_INDICES.map((index) => {
+                var _a;
+                return (React__default.createElement(OTPFieldInput, { key: index, ref: refCallbacks[index], index: index, className: "otpField__textField", size: size, value: (_a = digits[index]) !== null && _a !== void 0 ? _a : "", disabled: disabled, status: status, autoComplete: index === 0 ? "one-time-code" : "off", onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, onClick: handleInputClick, "aria-label": `Digit ${index + 1} of ${OTP_LENGTH}` }));
+            })),
+            (helperText || showTimer) && (React__default.createElement("div", { className: "otpField__content" },
+                helperText && (React__default.createElement(HelperText, { className: "otpField__helperText", text: helperText, disabled: disabled, size: htSize })),
+                showTimer && (React__default.createElement(Text, { className: classNames("otpField__timer", {
+                        otpField__timer_disabled: disabled
+                    }), as: "span", variant: "bodyMediumMedium" }, timerFormatted))))),
+        showNotification && (React__default.createElement(Notification, { variant: "sectionMessage", open: true, status: "error", description: notification }))));
+};
+
+export { OTPField as default };

package/Popover.js

@@ -1,4 +1,4 @@
-export { P as Popover, a as PopoverBody } from './PopoverBody-f9b55763.js';
+export { P as Popover, a as PopoverBody } from './PopoverBody-69518dcc.js';
 import React__default from 'react';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';

package/{PopoverBody-f9b55763.js → PopoverBody-69518dcc.js}

@@ -9,7 +9,7 @@ import { a as GeneUIDesignSystemContext } from './index-f83efe58.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';
 import Scrollbar from './Scrollbar.js';
 
-var css_248z = ".popover{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top-left-radius:var(--guit-ref-radius-2xsmall);border-top-right-radius:var(--guit-ref-radius-2xsmall);filter:drop-shadow(var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-color-floating-2-rgba-1)) drop-shadow(var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-color-floating-2-rgba-2))}.popover:not(.popover_size_mobile){border-bottom-left-radius:var(--guit-ref-radius-2xsmall);border-bottom-right-radius:var(--guit-ref-radius-2xsmall)}.popover:not(.popover_size_mobile) .popover__arrow{position:absolute}.popover:not(.popover_size_mobile) .popover__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.popover_position_top .popover__arrow{transform:rotate(180deg)}.popover_position_bottom .popover__arrow{transform:rotate(0deg)}.popover_position_left .popover__arrow{transform:rotate(90deg)}.popover_position_right .popover__arrow{transform:rotate(-90deg)}.popover_size_xLarge .popover__container{max-height:82rem;max-width:82rem;min-width:64rem}.popover_size_large .popover__container{max-height:64rem;max-width:64rem;min-width:52rem}.popover_size_medium .popover__container{max-height:52rem;max-width:52rem;min-width:28rem}.popover_size_small .popover__container{max-height:52rem;max-width:28rem;min-width:16rem}.popover_size_large .popover__footer,.popover_size_xLarge .popover__footer{height:6.4rem}.popover_size_fitContent{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.popover_size_reference{min-width:auto;width:var(--parent-width)}.popover__container{display:grid;grid-template-rows:auto 1fr auto}.popover__container_height_full{display:flex;flex-direction:column;height:100%;justify-content:space-between}.popover__header{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);flex:none;height:4.8rem;justify-content:space-between;padding-inline:var(--guit-ref-spacing-large)}.popover__header,.popover__title{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex;overflow:hidden}.popover__title{color:var(--guit-sem-color-foreground-neutral-2);flex:1}.popover__title_icon{flex:0 0 auto}.popover__title_text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family),sans-serif;font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.popover__close{flex:0 0 auto}.popover__body{flex:1;height:100%;min-height:0;min-width:0}.popover__body_withPadding{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__content{height:100%;width:100%}.popover__footer{border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);flex:none;justify-content:space-between;overflow:hidden;padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer,.popover__footer_buttons{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__footer_buttons{-webkit-margin-start:auto;margin-inline-start:auto}";
+var css_248z = ".popover{background-color:var(--guit-sem-color-background-neutral-1-nudge);border-top-left-radius:var(--guit-ref-radius-2xsmall);border-top-right-radius:var(--guit-ref-radius-2xsmall);filter:drop-shadow(var(--guit-sem-shadow-floating-2-position-x-1) var(--guit-sem-shadow-floating-2-position-y-1) var(--guit-sem-shadow-floating-2-blur-1) var(--guit-sem-color-floating-2-rgba-1)) drop-shadow(var(--guit-sem-shadow-floating-2-position-x-2) var(--guit-sem-shadow-floating-2-position-y-2) var(--guit-sem-shadow-floating-2-blur-2) var(--guit-sem-color-floating-2-rgba-2))}.popover:not(.popover_size_mobile){border-bottom-left-radius:var(--guit-ref-radius-2xsmall);border-bottom-right-radius:var(--guit-ref-radius-2xsmall)}.popover:not(.popover_size_mobile) .popover__arrow{position:absolute}.popover:not(.popover_size_mobile) .popover__arrowPath{fill:var(--guit-sem-color-background-neutral-1-nudge)}.popover_position_top .popover__arrow{transform:rotate(180deg)}.popover_position_bottom .popover__arrow{transform:rotate(0deg)}.popover_position_left .popover__arrow{transform:rotate(90deg)}.popover_position_right .popover__arrow{transform:rotate(-90deg)}.popover_size_xLarge .popover__container{max-height:82rem;max-width:82rem;min-width:64rem}.popover_size_large .popover__container{max-height:64rem;max-width:64rem;min-width:52rem}.popover_size_medium .popover__container{max-height:52rem;max-width:52rem;min-width:28rem}.popover_size_small .popover__container{max-height:52rem;max-width:28rem;min-width:16rem}.popover_size_large .popover__footer,.popover_size_xLarge .popover__footer{height:6.4rem}.popover_size_fitContent{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.popover_size_reference{min-width:auto;width:var(--parent-width)}.popover__container{display:grid;grid-template-rows:auto 1fr auto}.popover__container_height_full{display:flex;flex-direction:column;height:100%;justify-content:space-between}.popover__header{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);flex:none;height:4.8rem;justify-content:space-between;padding-inline:var(--guit-ref-spacing-large)}.popover__header,.popover__title{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex;overflow:hidden}.popover__title{color:var(--guit-sem-color-foreground-neutral-2);flex:1}.popover__title_icon{flex:0 0 auto}.popover__title_text{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family),sans-serif;font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-semibold-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}.popover__close{flex:0 0 auto}.popover__body{flex:1;height:100%;min-height:0;min-width:0}.popover__body_withPadding{padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer{border-top:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);flex:none;justify-content:space-between;overflow:hidden;padding-block:var(--guit-ref-spacing-large);padding-inline:var(--guit-ref-spacing-large)}.popover__footer,.popover__footer_buttons{align-items:center;column-gap:var(--guit-ref-spacing-xsmall);display:flex}.popover__footer_buttons{-webkit-margin-start:auto;margin-inline-start:auto}";
 styleInject(css_248z);
 
 const getPositionRect = (currentPopoverRect, position) => {
@@ -314,8 +314,7 @@ const Popover = forwardRef(({ size = "medium", fitReference, position = "bottom-
 });
 
 const PopoverBody = ({ children, withPadding = true, className, withScrollbar = true }) => {
-    return (React__default.createElement("div", { className: classNames("popover__body", { popover__body_withPadding: withPadding }, className) },
-        React__default.createElement("div", { className: "popover__content navigation__content" }, withScrollbar ? React__default.createElement(Scrollbar, null, children) : children)));
+    return (React__default.createElement("div", { className: classNames("popover__body", { popover__body_withPadding: withPadding }, className) }, withScrollbar ? React__default.createElement(Scrollbar, null, children) : children));
 };
 
 export { Popover as P, PopoverBody as a };

package/{Products-5d602730.js → Products-2d8aa944.js}

@@ -2,7 +2,7 @@ import React__default, { createContext, useContext, useState, useRef, useMemo }
 import { c as classNames } from './index-ce02421b.js';
 import { _ as _objectWithoutProperties, a as _extends } from './ActivityRecent-b88e2ba8.js';
 import Button from './Button.js';
-import { P as Popover, a as PopoverBody } from './PopoverBody-f9b55763.js';
+import { P as Popover, a as PopoverBody } from './PopoverBody-69518dcc.js';
 import { a as GeneUIDesignSystemContext } from './index-f83efe58.js';
 import { a as useClickOutside } from './index-4159d61d.js';
 import { s as styleInject } from './style-inject.es-746bb8ed.js';

package/Products.js

@@ -1,5 +1,5 @@
-import { a as ProductsContext } from './Products-5d602730.js';
-export { P as Products } from './Products-5d602730.js';
+import { a as ProductsContext } from './Products-2d8aa944.js';
+export { P as Products } from './Products-2d8aa944.js';
 import React__default, { useContext, isValidElement, cloneElement } from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import Badge from './Badge.js';
@@ -9,7 +9,7 @@ import './ActivityRecent-b88e2ba8.js';
 import './Button.js';
 import './Loader.js';
 import './style-inject.es-746bb8ed.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';
 import './Info-0f0741e0.js';

package/Profile.js

@@ -2,8 +2,8 @@ import React__default, { useState, useContext } from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import { S as SvgCaretDownFilled } from './CaretDownFilled-924e7189.js';
 import { A as Avatar, S as SvgPersonFilled } from './index-82e2cf4c.js';
-import { M as Menu } from './ButtonGroup-dd6816d7.js';
-import { M as MenuItem } from './index-8724e0c0.js';
+import { M as Menu } from './ButtonGroup-711d215c.js';
+import { M as MenuItem } from './index-29bde3c5.js';
 import { a as GeneUIDesignSystemContext } from './index-f83efe58.js';
 import './Profile-e9e508cb.js';
 import './ActivityRecent-b88e2ba8.js';
@@ -11,7 +11,7 @@ import './Avatar-243146ad.js';
 import './style-inject.es-746bb8ed.js';
 import './tslib.es6-f211516f.js';
 import './Loader.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';
 import './Info-0f0741e0.js';

package/SegmentedControl.js

@@ -16,14 +16,14 @@ import './Logo-0b408682.js';
 import './Rate-f5be2365.js';
 import Text from './Text.js';
 import './TextLink-ef998d00.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './Scrollbar.js';
 import './Badge-3f37427d.js';
 import './Grid-6fd088b8.js';
 import './Skeleton-d7cc727c.js';
 import 'react-dom';
 import './index-4159d61d.js';
-import './ButtonGroup-dd6816d7.js';
+import './ButtonGroup-711d215c.js';
 import './SplitButton-65849c84.js';
 import './Tabs-e8fccd4f.js';
 import './ProgressBar-f544bfa4.js';
@@ -31,7 +31,7 @@ import './Steps-b3f53e8c.js';
 import './Tag-8d30266b.js';
 import './Switch-24ef29ea.js';
 import './Timeline-3f100bf0.js';
-import './Products-5d602730.js';
+import './Products-2d8aa944.js';
 import './QRCode-4620857a.js';
 import './KeyValue-2fdb0641.js';
 import './tslib.es6-f211516f.js';
@@ -56,6 +56,7 @@ import './NumberField-2d272636.js';
 import './InteractiveCard-05c16126.js';
 import './Section-513d5f5a.js';
 import './Image-4f135206.js';
+import './OTPField-af15abb1.js';
 import './GlobalHeader-e3be2af9.js';
 import './DataCardList-eb674418.js';
 import './useEllipsisDetection-c5f9b175.js';

package/SplitButton.js

@@ -3,13 +3,13 @@ import { c as classNames } from './index-ce02421b.js';
 import { S as SvgCaretDownFilled } from './CaretDownFilled-924e7189.js';
 import Button from './Button.js';
 import Loader from './Loader.js';
-import { M as Menu } from './ButtonGroup-dd6816d7.js';
-import { M as MenuItem } from './index-8724e0c0.js';
+import { M as Menu } from './ButtonGroup-711d215c.js';
+import { M as MenuItem } from './index-29bde3c5.js';
 import './SplitButton-65849c84.js';
 import './ActivityRecent-b88e2ba8.js';
 import './style-inject.es-746bb8ed.js';
 import './tslib.es6-f211516f.js';
-import './PopoverBody-f9b55763.js';
+import './PopoverBody-69518dcc.js';
 import './floating-ui.react-a6c3b969.js';
 import 'react-dom';
 import './Info-0f0741e0.js';

package/components/molecules/Notification/Notification.d.ts

@@ -46,6 +46,9 @@ interface INotificationProps {
     secondaryActionText?: string;
     /**
      * Callback function triggered when the close (X) button is clicked.
+     * When provided, the close (X) button is displayed; when omitted, the button is hidden.
+     * Use this to control whether the notification can be manually dismissed (e.g. persistent
+     * form errors vs. dismissible toasts).
      */
     onClose?: () => void;
     /**

package/components/molecules/OTPField/OTPField.d.ts

@@ -0,0 +1,77 @@
+import { FC, FocusEvent } from "react";
+import { IOTPFieldInputProps } from "@components/molecules/OTPField/OTPFieldInput/OTPFieldInput";
+import "./OTPField.scss";
+interface IOTPFieldProps {
+    /**
+     * Additional class for the parent element.
+     * This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
+     */
+    className?: string;
+    /**
+     * Size of the OTP input boxes.<br>
+     */
+    size?: IOTPFieldInputProps["size"];
+    /**
+     * Controlled value. Each character maps to one digit input.
+     * Accepts a string (`"1234"`) or a non-negative integer (`1234`).
+     */
+    value?: string | number;
+    /**
+     * Default value for uncontrolled usage.
+     * Accepts a string (`"1234"`) or a non-negative integer (`1234`).
+     */
+    defaultValue?: string | number;
+    /**
+     * Disables the OTP field, preventing interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Determines the input appearance based on its status.<br>
+     */
+    status?: "rest" | "error";
+    /**
+     * Helper text displayed below the inputs (e.g. "Code is valid for").
+     */
+    helperText?: string;
+    /**
+     * Countdown duration in seconds (e.g. `180` for 3 minutes).
+     * When provided, the component starts an internal countdown timer displayed as `MM:SS` next to the helper text.
+     */
+    timerDuration?: number;
+    /**
+     * Callback fired when the countdown timer reaches zero.
+     */
+    onTimerExpire?: () => void;
+    /**
+     * Error notification description. Displayed as an inline `sectionMessage` when `status` is `error`.
+     */
+    notification?: string;
+    /**
+     * Callback when the value changes.
+     * @param value - The current OTP string
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback when all digits have been entered.
+     * @param value - The complete OTP string
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Callback when an input receives focus.
+     */
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback when an input loses focus.
+     */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * When `true`, focuses the first OTP input on mount (if not disabled).<br>
+     * Default is `false`.
+     */
+    autoFocus?: boolean;
+}
+/**
+ * The OTP Field component is an input field designed for entering a one-time password, often used for multi-factor authentication. The OTP Field component ensures that applications can securely verify user actions and identities, thereby protecting against unauthorized access and enhancing overall security.
+ */
+declare const OTPField: FC<IOTPFieldProps>;
+export { IOTPFieldProps, OTPField as default };

package/components/molecules/OTPField/OTPFieldInput/OTPFieldInput.d.ts

@@ -0,0 +1,58 @@
+import React, { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from "react";
+import "./OTPFieldInput.scss";
+interface IOTPFieldInputProps {
+    /**
+     * Additional class for the input element. Use for placement using BEM conventions.
+     */
+    className?: string;
+    /**
+     * Position index within the OTP group. Rendered as `data-index` for event delegation.
+     */
+    index: number;
+    /**
+     * Size of the OTP input box.<br>
+     */
+    size: "large" | "medium";
+    /**
+     * Visual state of the input.<br>
+     */
+    status?: "rest" | "error";
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * HTML autocomplete attribute.
+     */
+    autoComplete?: string;
+    /**
+     * Current value of the input.
+     */
+    value: string;
+    /**
+     * Change handler for the input.
+     */
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Key down handler for the input.
+     */
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Focus handler for the input.
+     */
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Blur handler for the input.
+     */
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Click handler for the input.
+     */
+    onClick?: (event: MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Accessible label for screen readers.
+     */
+    "aria-label": string;
+}
+declare const OTPFieldInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<IOTPFieldInputProps & React.RefAttributes<HTMLInputElement>>>;
+export { IOTPFieldInputProps, OTPFieldInput as default };

package/components/molecules/OTPField/hooks/useCountdown.d.ts

@@ -0,0 +1,16 @@
+interface IUseCountdownOptions {
+    /** Duration in seconds to count down from. */
+    duration: number;
+    /** Callback fired when countdown reaches zero. */
+    onExpire?: () => void;
+}
+interface IUseCountdownReturn {
+    /** Remaining seconds. */
+    remaining: number;
+    /** Formatted time string as `MM:SS`. */
+    formatted: string;
+    /** Whether the countdown has expired (reached zero). */
+    isExpired: boolean;
+}
+declare const useCountdown: ({ duration, onExpire }: IUseCountdownOptions) => IUseCountdownReturn;
+export default useCountdown;

package/components/molecules/OTPField/index.d.ts

@@ -0,0 +1 @@
+export { IOTPFieldProps, default } from "./OTPField";

package/components/molecules/OTPField/otpField.helpers.d.ts

@@ -0,0 +1,13 @@
+declare const OTP_LENGTH = 6;
+type OTPIndices = number[];
+declare const OTP_INDICES: OTPIndices;
+declare const DIGIT_PATTERN: RegExp;
+declare const helperTextSizeMap: {
+    readonly large: "medium";
+    readonly medium: "medium";
+};
+declare const createEmptyDigits: () => string[];
+declare const normalizeDigitsLength: (digits: string[]) => string[];
+declare const stringToDigits: (value: string | number | undefined) => string[];
+declare const digitsToString: (digits: string[]) => string;
+export { DIGIT_PATTERN, OTP_LENGTH, OTP_INDICES, createEmptyDigits, digitsToString, helperTextSizeMap, normalizeDigitsLength, stringToDigits };

package/components/organisms/GlobalHeader/GlobalHeader.d.ts

@@ -75,17 +75,19 @@ interface IGlobalHeaderProps {
     /**
      * The time zone to display the time in.
      * If not provided, it will use the local time zone of the user's device.
-     * example: "America/New_York", "Europe/London"
+     * Example: "America/New_York", "Europe/London".
+     * To render the time section at all, you must provide at least one of `timeZone`, `timeFormat`, or `timeLabel`.
      */
     timeZone?: string;
     /**
      * The format of the time to display.
-     * Possible values: "24h" or "12h"
-     * Default is "24h"
+     * Default is "24h".
+     * To render the time section at all, you must provide at least one of `timeZone`, `timeFormat`, or `timeLabel`.
      */
     timeFormat?: "24h" | "12h";
     /**
-     * Label for the time section, in mobile Breakpoint default is "Time"
+     * Label for the time section; in the mobile breakpoint the default is "Time".
+     * To render the time section at all, you must provide at least one of `timeZone`, `timeFormat`, or `timeLabel`.
      */
     timeLabel?: string;
     /**

package/{index-8724e0c0.js → index-29bde3c5.js}

@@ -1,4 +1,4 @@
-import { a as MenuContext, p as popoverSizeMapping, i as isActiveElementInside, M as Menu } from './ButtonGroup-dd6816d7.js';
+import { a as MenuContext, p as popoverSizeMapping, i as isActiveElementInside, M as Menu } from './ButtonGroup-711d215c.js';
 import React__default, { useMemo, useState, useRef, useContext, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { c as classNames } from './index-ce02421b.js';
 import { n as nanoid } from './index-15303b91.js';
@@ -6,7 +6,7 @@ import { S as SvgThreeDotsHorizontal } from './ThreeDotsHorizontal-479c2b4b.js';
 import Button from './Button.js';
 import { r as reactIsExports } from './index-a2688a52.js';
 import Loader from './Loader.js';
-import { P as Popover, a as PopoverBody } from './PopoverBody-f9b55763.js';
+import { P as Popover, a as PopoverBody } from './PopoverBody-69518dcc.js';
 import Scrollbar from './Scrollbar.js';
 import Text from './Text.js';
 import { S as SvgCheckMark } from './CheckMark-34798545.js';

package/index.d.ts

@@ -53,6 +53,7 @@ export { default as NumberField, INumberFieldProps } from "./components/molecule
 export { default as InteractiveCard, IInteractiveCardProps } from "./components/molecules/InteractiveCard";
 export { default as Section, ISectionProps } from "./components/molecules/Section";
 export { default as Image, IImageProps } from "./components/molecules/Image";
+export { default as OTPField, IOTPFieldProps } from "./components/molecules/OTPField";
 export { default as GlobalHeader, IGlobalHeaderProps, IAction, IProducts } from "./components/organisms/GlobalHeader";
 export { default as DataCardList, IDataCardListProps } from "@components/organisms/DataCardList";
 export { default as GeneUIProvider, GeneUIDesignSystemContext, IGeneUIDesignSystemContext, IGeneUIProviderProps } from "./components/providers/GeneUIProvider";

package/index.js

@@ -10,7 +10,7 @@ export { default as Logo } from './Logo.js';
 export { default as Rate } from './Rate.js';
 export { default as Text } from './Text.js';
 export { default as TextLink } from './TextLink.js';
-export { P as Popover, a as PopoverBody } from './PopoverBody-f9b55763.js';
+export { P as Popover, a as PopoverBody } from './PopoverBody-69518dcc.js';
 export { PopoverFooter, PopoverFooterActions } from './Popover.js';
 export { default as Badge } from './Badge.js';
 export { default as Scrollbar } from './Scrollbar.js';
@@ -29,13 +29,13 @@ export { default as Tag } from './Tag.js';
 export { default as Switch } from './Switch.js';
 export { T as Timelines } from './Timeline-3f100bf0.js';
 export { TimelinePoint } from './Timeline.js';
-export { P as Products } from './Products-5d602730.js';
+export { P as Products } from './Products-2d8aa944.js';
 export { Product, ProductsMainSection, ProductsSecondarySection } from './Products.js';
 export { default as QRCode } from './QRCode.js';
 export { K as KeyValue } from './KeyValue-2fdb0641.js';
 export { Key, Value } from './KeyValue.js';
-export { M as Menu } from './ButtonGroup-dd6816d7.js';
-export { B as ButtonGroup, E as Empty, M as MenuItem } from './index-8724e0c0.js';
+export { M as Menu } from './ButtonGroup-711d215c.js';
+export { B as ButtonGroup, E as Empty, M as MenuItem } from './index-29bde3c5.js';
 export { default as Navigation } from './Navigation.js';
 export { default as Checkbox } from './Checkbox.js';
 export { default as Radio } from './Radio.js';
@@ -60,6 +60,7 @@ export { default as NumberField } from './NumberField.js';
 export { default as InteractiveCard } from './InteractiveCard.js';
 export { default as Section } from './Section.js';
 export { default as Image } from './Image.js';
+export { default as OTPField } from './OTPField.js';
 export { default as GlobalHeader } from './GlobalHeader.js';
 export { default as DataCardList } from './DataCardList.js';
 export { a as GeneUIDesignSystemContext, G as GeneUIProvider, u as useBreakpoint } from './index-f83efe58.js';
@@ -125,6 +126,7 @@ import './NumberField-2d272636.js';
 import './InteractiveCard-05c16126.js';
 import './Section-513d5f5a.js';
 import './Image-4f135206.js';
+import './OTPField-af15abb1.js';
 import './GlobalHeader-e3be2af9.js';
 import './DataCardList-eb674418.js';
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-e1bd79a-05032026",
+    "version": "3.0.0-next-91e9add-19032026",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {