@razorpay/blade 6.5.2 → 6.6.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @razorpay/blade
 
+## 6.6.0
+
+### Minor Changes
+
+- 5863f939: feat(OTPInput): add `onFocus` & `onBlur` props
+- 75daaa3c: feat(theme): add `name` property in `theme` to watch on theme changes
+
+### Patch Changes
+
+- 6a8524ab: feat(Link): add `hitSlop` support for native
+
 ## 6.5.2
 
 ### Patch Changes

package/build/components/index.d.ts

@@ -437,6 +437,7 @@ type Colors = {
 type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 
 type ThemeTokens = {
+  name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
   border: Border;
   breakpoints: Breakpoints;
   colors: ColorsWithModes;
@@ -935,6 +936,24 @@ type DotNotationSpacingStringToken = `spacing.${keyof Spacing}`;
  */
 type StringChildrenType = React__default.ReactText | React__default.ReactText[];
 
+/**
+ *
+ * When combined with union, this type utility will give you autocomplete of union while still supporting any string value as input
+ *
+ * ### Usage
+ *
+ * ```ts
+ * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+ * ```
+ *
+ * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
+ *
+ * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
+ * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
+ *
+ */
+type StringWithAutocomplete = string & Record<never, never>;
+
 type TestID$1 = {
   testID?: string;
 };
@@ -993,6 +1012,7 @@ declare type ActionListProps = {
 declare const ActionList: ({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element;
 
 type Theme$1 = {
+  name: ThemeTokens['name'];
   border: Border;
   breakpoints: Breakpoints;
   colors: Colors;
@@ -1705,6 +1725,7 @@ declare const ThemeContext: React$1.Context<ThemeContext>;
 declare const useTheme: () => ThemeContext;
 
 declare type Theme = {
+    name: ThemeTokens['name'];
     border: Border;
     breakpoints: Breakpoints;
     colors: Colors;
@@ -2348,7 +2369,25 @@ declare type LinkCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium';
-} & TestID$1 & StyledPropsBlade;
+} & TestID$1 & StyledPropsBlade & Platform$1.Select<{
+    native: {
+        /**
+         * Defines how far your touch can start away from the link
+         */
+        hitSlop?: {
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        } | number;
+    };
+    web: {
+        /**
+         * This is a react-native only prop and has no effect on web.
+         */
+        hitSlop?: undefined;
+    };
+}>;
 declare type LinkWithoutIconProps = LinkCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -2373,7 +2412,7 @@ declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
     rel?: undefined;
 };
 declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
-declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, ...styledProps }: LinkProps) => ReactElement;
+declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, hitSlop, ...styledProps }: LinkProps) => ReactElement;
 
 type BladeElementRef = Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
 
@@ -4191,6 +4230,11 @@ declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputP
     }> | undefined;
 }, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
 
+declare type FormInputOnEventWithIndex = ({ name, value, inputIndex, }: {
+    name?: string;
+    value?: string;
+    inputIndex: number;
+}) => void;
 declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID'> & {
     /**
      * Determines the number of input fields to show for the OTP
@@ -4219,6 +4263,14 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
      *
      */
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'oneTimeCode'>;
+    /**
+     * The callback function to be invoked when one of the input fields gets focus
+     */
+    onFocus?: FormInputOnEventWithIndex;
+    /**
+     * The callback function to be invoked when one of the input fields is blurred
+     */
+    onBlur?: FormInputOnEventWithIndex;
 } & StyledPropsBlade;
 /**
  * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
@@ -4234,7 +4286,7 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
  *   />
  * ```
  */
-declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
+declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onFocus, onBlur, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
 
 declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder' | 'testID'> & {
     icon?: IconComponent$1;
@@ -5014,7 +5066,7 @@ declare const BaseBox: styled_components.StyledComponent<"div", styled_component
     children?: React$1.ReactNode | React$1.ReactNode[];
 } & TestID>, "backgroundColor" | "as"> & Partial<MakeObjectResponsive<{
     borderRadius: "none" | "small" | "medium" | "large" | "max" | "round";
-    backgroundColor: "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "action.background.primary.default" | "action.background.primary.disabled" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.secondary.default" | "action.background.secondary.disabled" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.tertiary.default" | "action.background.tertiary.disabled" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | (string & Record<never, never>);
+    backgroundColor: (string & Record<never, never>) | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "action.background.primary.default" | "action.background.primary.disabled" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.secondary.default" | "action.background.secondary.disabled" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.tertiary.default" | "action.background.tertiary.disabled" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active";
     lineHeight: SpacingValueType;
 } & Pick<styled_components.CSSObject, "border" | "transform" | "borderBottom" | "borderLeft" | "borderRight" | "borderTop">> & {
     className?: string | undefined;

package/build/components/index.native.d.ts

@@ -438,6 +438,7 @@ type Colors = {
 type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 
 type ThemeTokens = {
+  name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
   border: Border;
   breakpoints: Breakpoints;
   colors: ColorsWithModes;
@@ -936,6 +937,24 @@ type DotNotationSpacingStringToken = `spacing.${keyof Spacing}`;
  */
 type StringChildrenType = React__default.ReactText | React__default.ReactText[];
 
+/**
+ *
+ * When combined with union, this type utility will give you autocomplete of union while still supporting any string value as input
+ *
+ * ### Usage
+ *
+ * ```ts
+ * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+ * ```
+ *
+ * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
+ *
+ * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
+ * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
+ *
+ */
+type StringWithAutocomplete = string & Record<never, never>;
+
 type TestID$1 = {
   testID?: string;
 };
@@ -994,6 +1013,7 @@ declare type ActionListProps = {
 declare const ActionList: ({ children, surfaceLevel, testID }: ActionListProps) => JSX.Element;
 
 type Theme$1 = {
+  name: ThemeTokens['name'];
   border: Border;
   breakpoints: Breakpoints;
   colors: Colors;
@@ -1711,6 +1731,7 @@ declare const ThemeContext: React$1.Context<ThemeContext>;
 declare const useTheme: () => ThemeContext;
 
 declare type Theme = {
+    name: ThemeTokens['name'];
     border: Border;
     breakpoints: Breakpoints;
     colors: Colors;
@@ -2354,7 +2375,25 @@ declare type LinkCommonProps = {
      * @default medium
      */
     size?: 'small' | 'medium';
-} & TestID$1 & StyledPropsBlade;
+} & TestID$1 & StyledPropsBlade & Platform.Select<{
+    native: {
+        /**
+         * Defines how far your touch can start away from the link
+         */
+        hitSlop?: {
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        } | number;
+    };
+    web: {
+        /**
+         * This is a react-native only prop and has no effect on web.
+         */
+        hitSlop?: undefined;
+    };
+}>;
 declare type LinkWithoutIconProps = LinkCommonProps & {
     icon?: undefined;
     children: StringChildrenType;
@@ -2379,7 +2418,7 @@ declare type LinkButtonVariantProps = LinkPropsWithOrWithoutIcon & {
     rel?: undefined;
 };
 declare type LinkProps = LinkAnchorVariantProps | LinkButtonVariantProps;
-declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, ...styledProps }: LinkProps) => ReactElement;
+declare const Link: ({ children, icon, iconPosition, isDisabled, onClick, variant, href, target, rel, accessibilityLabel, size, testID, hitSlop, ...styledProps }: LinkProps) => ReactElement;
 
 type BladeElementRef = Pick<HTMLElement, 'focus' | 'scrollIntoView'> | Pick<View, 'focus'>;
 
@@ -3812,7 +3851,7 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
      */
     type?: Type;
 } & StyledPropsBlade;
-declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
+declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "value" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -3901,7 +3940,7 @@ declare type PasswordInputExtraProps = {
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'password' | 'newPassword'>;
 };
 declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps & StyledPropsBlade;
-declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<MakeObjectResponsive<{
+declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "value" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<MakeObjectResponsive<{
     margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
     marginX: SpacingValueType;
     marginY: SpacingValueType;
@@ -3946,7 +3985,7 @@ declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'n
      */
     onClearButtonClick?: () => void;
 } & StyledPropsBlade;
-declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "numberOfLines" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "validationState" | "isRequired" | "maxCharacters"> & {
+declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "value" | "onBlur" | "onFocus" | "numberOfLines" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "validationState" | "isRequired" | "maxCharacters"> & {
     /**
      * Decides whether to render a clear icon button
      */
@@ -3990,6 +4029,11 @@ declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputP
     gridTemplate?: undefined;
 }, "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridArea" | "gridColumn" | "gridRow">> & React__default.RefAttributes<BladeElementRef>>;
 
+declare type FormInputOnEventWithIndex = ({ name, value, inputIndex, }: {
+    name?: string;
+    value?: string;
+    inputIndex: number;
+}) => void;
 declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'onChange' | 'value' | 'isDisabled' | 'autoFocus' | 'keyboardReturnKeyType' | 'keyboardType' | 'placeholder' | 'testID'> & {
     /**
      * Determines the number of input fields to show for the OTP
@@ -4018,6 +4062,14 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
      *
      */
     autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'oneTimeCode'>;
+    /**
+     * The callback function to be invoked when one of the input fields gets focus
+     */
+    onFocus?: FormInputOnEventWithIndex;
+    /**
+     * The callback function to be invoked when one of the input fields is blurred
+     */
+    onBlur?: FormInputOnEventWithIndex;
 } & StyledPropsBlade;
 /**
  * OTPInput component can be used for accepting OTPs sent to users for authentication/verification purposes.
@@ -4033,7 +4085,7 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
  *   />
  * ```
  */
-declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
+declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onFocus, onBlur, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
 
 declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder' | 'testID'> & {
     icon?: IconComponent$1;
@@ -4069,7 +4121,7 @@ declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' |
  *
  * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
  */
-declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "name" | "onBlur" | "onFocus" | "onClick" | "prefix" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired"> & {
+declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "name" | "label" | "onBlur" | "onFocus" | "onClick" | "prefix" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired"> & {
     icon?: IconComponent$1 | undefined;
     onChange?: (({ name, values }: {
         name?: string | undefined;
@@ -4711,7 +4763,7 @@ declare const BaseBox: styled_components.StyledComponent<typeof View, styled_com
     children?: React$1.ReactNode | React$1.ReactNode[];
 } & TestID>, "backgroundColor" | "as"> & Partial<MakeObjectResponsive<{
     borderRadius: "none" | "small" | "medium" | "large" | "max" | "round";
-    backgroundColor: "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "action.background.primary.disabled" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.secondary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.tertiary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active" | (string & Record<never, never>);
+    backgroundColor: (string & Record<never, never>) | "feedback.background.neutral.lowContrast" | "feedback.background.neutral.highContrast" | "feedback.background.information.lowContrast" | "feedback.background.information.highContrast" | "feedback.background.negative.lowContrast" | "feedback.background.negative.highContrast" | "feedback.background.notice.lowContrast" | "feedback.background.notice.highContrast" | "feedback.background.positive.lowContrast" | "feedback.background.positive.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "action.background.primary.disabled" | "action.background.primary.default" | "action.background.primary.hover" | "action.background.primary.focus" | "action.background.primary.active" | "action.background.secondary.disabled" | "action.background.secondary.default" | "action.background.secondary.hover" | "action.background.secondary.focus" | "action.background.secondary.active" | "action.background.tertiary.disabled" | "action.background.tertiary.default" | "action.background.tertiary.hover" | "action.background.tertiary.focus" | "action.background.tertiary.active";
     lineHeight: SpacingValueType;
 } & Pick<styled_components.CSSObject, "border" | "transform" | "borderBottom" | "borderLeft" | "borderRight" | "borderTop">> & {
     className?: string | undefined;

package/build/components/index.native.js

@@ -3950,11 +3950,11 @@ var _excluded$n=["variant","intent","contrast","size","icon","iconPosition","isD
 
 var getStyledLinkStyles=function getStyledLinkStyles(_ref){var cursor=_ref.cursor;return {padding:0,backgroundColor:'transparent',outline:'none',textDecoration:'none',border:'none',cursor:cursor};};
 
-var StyledNativeLink=styled.Pressable(function(props){var styledPropsCSSObject=useStyledProps(props);return _extends({},getStyledLinkStyles({}),{alignSelf:'flex-start'},styledPropsCSSObject);});var openURL=function _callee(href){var canOpen;return _regeneratorRuntime.async(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.prev=0;_context.next=3;return _regeneratorRuntime.awrap(Linking.canOpenURL(href));case 3:canOpen=_context.sent;if(!canOpen){_context.next=7;break;}_context.next=7;return _regeneratorRuntime.awrap(Linking.openURL(href));case 7:_context.next=12;break;case 9:_context.prev=9;_context.t0=_context["catch"](0);console.warn("[Blade: BaseLink]: Could not open the link \"href="+href+"\"");case 12:case"end":return _context.stop();}}},null,null,[[0,9]],Promise);};var StyledLink=function StyledLink(_ref){var variant=_ref.variant,disabled=_ref.disabled,href=_ref.href,onClick=_ref.onClick,children=_ref.children,setCurrentInteraction=_ref.setCurrentInteraction,accessibilityProps=_ref.accessibilityProps,style=_ref.style,testID=_ref.testID;var handleOnPress=function handleOnPress(event){if(href&&variant==='anchor'){void openURL(href);}if(onClick){onClick(event);}};return jsx(StyledNativeLink,_extends({},accessibilityProps,{disabled:disabled,onPress:handleOnPress,onPressIn:function onPressIn(){return setCurrentInteraction('active');},onPressOut:function onPressOut(){return setCurrentInteraction('default');},style:style,testID:testID,children:children}));};
+var StyledNativeLink=styled.Pressable(function(props){var styledPropsCSSObject=useStyledProps(props);return _extends({},getStyledLinkStyles({}),{alignSelf:'flex-start'},styledPropsCSSObject);});var openURL=function _callee(href){var canOpen;return _regeneratorRuntime.async(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.prev=0;_context.next=3;return _regeneratorRuntime.awrap(Linking.canOpenURL(href));case 3:canOpen=_context.sent;if(!canOpen){_context.next=7;break;}_context.next=7;return _regeneratorRuntime.awrap(Linking.openURL(href));case 7:_context.next=12;break;case 9:_context.prev=9;_context.t0=_context["catch"](0);console.warn("[Blade: BaseLink]: Could not open the link \"href="+href+"\"");case 12:case"end":return _context.stop();}}},null,null,[[0,9]],Promise);};var StyledLink=function StyledLink(_ref){var variant=_ref.variant,disabled=_ref.disabled,href=_ref.href,onClick=_ref.onClick,children=_ref.children,setCurrentInteraction=_ref.setCurrentInteraction,accessibilityProps=_ref.accessibilityProps,style=_ref.style,testID=_ref.testID,hitSlop=_ref.hitSlop;var handleOnPress=function handleOnPress(event){if(href&&variant==='anchor'){void openURL(href);}if(onClick){onClick(event);}};return jsx(StyledNativeLink,_extends({},accessibilityProps,{disabled:disabled,onPress:handleOnPress,onPressIn:function onPressIn(){return setCurrentInteraction('active');},onPressOut:function onPressOut(){return setCurrentInteraction('default');},style:style,testID:testID,hitSlop:hitSlop,children:children}));};
 
 var useInteraction=function useInteraction(){var _useState=useState('default'),_useState2=_slicedToArray(_useState,2),currentInteraction=_useState2[0],setCurrentInteraction=_useState2[1];var onMouseEnter=function onMouseEnter(){if(currentInteraction!=='active')setCurrentInteraction('hover');};var onMouseLeave=function onMouseLeave(){if(currentInteraction!=='active')setCurrentInteraction('default');};var onFocus=function onFocus(){setCurrentInteraction('active');};var onBlur=function onBlur(){setCurrentInteraction('default');};return {onMouseEnter:onMouseEnter,onMouseLeave:onMouseLeave,onFocus:onFocus,onBlur:onBlur,currentInteraction:currentInteraction,setCurrentInteraction:setCurrentInteraction};};
 
-var _excluded$m=["children","icon","iconPosition","isDisabled","onClick","variant","href","target","rel","intent","contrast","accessibilityLabel","className","style","size","testID"],_excluded2=["currentInteraction","setCurrentInteraction"];var getColorToken=function getColorToken(_ref){var variant=_ref.variant,intent=_ref.intent,contrast=_ref.contrast,element=_ref.element,currentInteraction=_ref.currentInteraction,isDisabled=_ref.isDisabled,isVisited=_ref.isVisited;var state=currentInteraction;if(isDisabled&&variant=='button'){state='disabled';}if(isVisited&&variant=='anchor'&&!intent){state='visited';}if(intent&&state!=='visited'){return "feedback."+intent+".action."+element+".link."+state+"."+contrast+"Contrast";}return "action."+element+".link."+state;};var getProps=function getProps(_ref2){var theme=_ref2.theme,variant=_ref2.variant,currentInteraction=_ref2.currentInteraction,children=_ref2.children,isDisabled=_ref2.isDisabled,intent=_ref2.intent,contrast=_ref2.contrast,isVisited=_ref2.isVisited,target=_ref2.target,size=_ref2.size;var isButton=variant==='button';var props={as:isButton?'button':'a',textDecorationLine:!isButton&&currentInteraction!=='default'?'underline':'none',iconColor:getColorToken({variant:variant,intent:intent,contrast:contrast,element:'icon',currentInteraction:currentInteraction,isDisabled:isDisabled,isVisited:isVisited}),fontSize:size==='medium'?100:75,lineHeight:size==='medium'?'m':'s',iconSize:size,iconPadding:children!=null&&children.trim()?'spacing.2':'spacing.0',textColor:getColorToken({variant:variant,intent:intent,contrast:contrast,element:'text',currentInteraction:currentInteraction,isDisabled:isDisabled,isVisited:isVisited}),focusRingColor:get_1(theme.colors,'brand.primary.400'),motionDuration:'duration.2xquick',motionEasing:'easing.standard.effective',cursor:isButton&&isDisabled?'not-allowed':'pointer',disabled:isButton&&isDisabled,role:isButton?'button':'link',defaultRel:target&&target==='_blank'?'noreferrer noopener':undefined,type:isButton?'button':undefined};return props;};var BaseLink=function BaseLink(_ref3){var children=_ref3.children,Icon=_ref3.icon,_ref3$iconPosition=_ref3.iconPosition,iconPosition=_ref3$iconPosition===void 0?'left':_ref3$iconPosition,_ref3$isDisabled=_ref3.isDisabled,isDisabled=_ref3$isDisabled===void 0?false:_ref3$isDisabled,onClick=_ref3.onClick,_ref3$variant=_ref3.variant,variant=_ref3$variant===void 0?'anchor':_ref3$variant,href=_ref3.href,target=_ref3.target,rel=_ref3.rel,intent=_ref3.intent,_ref3$contrast=_ref3.contrast,contrast=_ref3$contrast===void 0?'low':_ref3$contrast,accessibilityLabel=_ref3.accessibilityLabel,className=_ref3.className,style=_ref3.style,_ref3$size=_ref3.size,size=_ref3$size===void 0?'medium':_ref3$size,testID=_ref3.testID,styledProps=_objectWithoutProperties(_ref3,_excluded$m);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isVisited=_useState2[0],setIsVisited=_useState2[1];var childrenString=getStringFromReactText(children);var _useInteraction=useInteraction(),currentInteraction=_useInteraction.currentInteraction,setCurrentInteraction=_useInteraction.setCurrentInteraction,syntheticEvents=_objectWithoutProperties(_useInteraction,_excluded2);var _useTheme=useTheme(),theme=_useTheme.theme;if(!Icon&&!(childrenString!=null&&childrenString.trim())){throw new Error("[Blade: BaseLink]: At least one of icon or text is required to render a link.");}var _getProps=getProps({theme:theme,variant:variant,currentInteraction:currentInteraction,children:childrenString,isDisabled:isDisabled,intent:intent,contrast:contrast,isVisited:isVisited,target:target,size:size}),as=_getProps.as,textDecorationLine=_getProps.textDecorationLine,iconColor=_getProps.iconColor,iconPadding=_getProps.iconPadding,iconSize=_getProps.iconSize,fontSize=_getProps.fontSize,textColor=_getProps.textColor,focusRingColor=_getProps.focusRingColor,motionDuration=_getProps.motionDuration,motionEasing=_getProps.motionEasing,cursor=_getProps.cursor,disabled=_getProps.disabled,role=_getProps.role,defaultRel=_getProps.defaultRel,type=_getProps.type,lineHeight=_getProps.lineHeight;var handleOnClick=function handleOnClick(event){if(!isVisited&&!intent&&variant==='anchor'){setIsVisited(true);}if(onClick){onClick(event);}};return jsx(StyledLink,_extends({},syntheticEvents,metaAttribute({name:MetaConstants.Link,testID:testID}),{accessibilityProps:_extends({},makeAccessible({role:role,label:accessibilityLabel,disabled:disabled})),variant:variant,as:as,href:href,target:target,rel:rel!=null?rel:defaultRel,onClick:handleOnClick,disabled:disabled,type:type,cursor:cursor,focusRingColor:focusRingColor,motionDuration:motionDuration,motionEasing:motionEasing,setCurrentInteraction:setCurrentInteraction},styledProps,{className:className,style:style,children:jsxs(BaseBox,{display:"flex",flexDirection:"row",className:"content-container",alignItems:"center",children:[Icon&&iconPosition=='left'?jsx(BaseBox,{paddingRight:iconPadding,display:"flex",alignItems:"center",children:jsx(Icon,{color:iconColor,size:iconSize})}):null,jsx(BaseText,{textDecorationLine:textDecorationLine,color:textColor,fontSize:fontSize,lineHeight:lineHeight,textAlign:"center",fontWeight:"bold",children:children}),Icon&&iconPosition=='right'?jsx(BaseBox,{paddingLeft:iconPadding,display:"flex",alignItems:"center",children:jsx(Icon,{color:iconColor,size:iconSize})}):null]})}));};
+var _excluded$m=["children","icon","iconPosition","isDisabled","onClick","variant","href","target","rel","intent","contrast","accessibilityLabel","className","style","size","testID","hitSlop"],_excluded2=["currentInteraction","setCurrentInteraction"];var getColorToken=function getColorToken(_ref){var variant=_ref.variant,intent=_ref.intent,contrast=_ref.contrast,element=_ref.element,currentInteraction=_ref.currentInteraction,isDisabled=_ref.isDisabled,isVisited=_ref.isVisited;var state=currentInteraction;if(isDisabled&&variant=='button'){state='disabled';}if(isVisited&&variant=='anchor'&&!intent){state='visited';}if(intent&&state!=='visited'){return "feedback."+intent+".action."+element+".link."+state+"."+contrast+"Contrast";}return "action."+element+".link."+state;};var getProps=function getProps(_ref2){var theme=_ref2.theme,variant=_ref2.variant,currentInteraction=_ref2.currentInteraction,children=_ref2.children,isDisabled=_ref2.isDisabled,intent=_ref2.intent,contrast=_ref2.contrast,isVisited=_ref2.isVisited,target=_ref2.target,size=_ref2.size;var isButton=variant==='button';var props={as:isButton?'button':'a',textDecorationLine:!isButton&&currentInteraction!=='default'?'underline':'none',iconColor:getColorToken({variant:variant,intent:intent,contrast:contrast,element:'icon',currentInteraction:currentInteraction,isDisabled:isDisabled,isVisited:isVisited}),fontSize:size==='medium'?100:75,lineHeight:size==='medium'?'m':'s',iconSize:size,iconPadding:children!=null&&children.trim()?'spacing.2':'spacing.0',textColor:getColorToken({variant:variant,intent:intent,contrast:contrast,element:'text',currentInteraction:currentInteraction,isDisabled:isDisabled,isVisited:isVisited}),focusRingColor:get_1(theme.colors,'brand.primary.400'),motionDuration:'duration.2xquick',motionEasing:'easing.standard.effective',cursor:isButton&&isDisabled?'not-allowed':'pointer',disabled:isButton&&isDisabled,role:isButton?'button':'link',defaultRel:target&&target==='_blank'?'noreferrer noopener':undefined,type:isButton?'button':undefined};return props;};var BaseLink=function BaseLink(_ref3){var children=_ref3.children,Icon=_ref3.icon,_ref3$iconPosition=_ref3.iconPosition,iconPosition=_ref3$iconPosition===void 0?'left':_ref3$iconPosition,_ref3$isDisabled=_ref3.isDisabled,isDisabled=_ref3$isDisabled===void 0?false:_ref3$isDisabled,onClick=_ref3.onClick,_ref3$variant=_ref3.variant,variant=_ref3$variant===void 0?'anchor':_ref3$variant,href=_ref3.href,target=_ref3.target,rel=_ref3.rel,intent=_ref3.intent,_ref3$contrast=_ref3.contrast,contrast=_ref3$contrast===void 0?'low':_ref3$contrast,accessibilityLabel=_ref3.accessibilityLabel,className=_ref3.className,style=_ref3.style,_ref3$size=_ref3.size,size=_ref3$size===void 0?'medium':_ref3$size,testID=_ref3.testID,hitSlop=_ref3.hitSlop,styledProps=_objectWithoutProperties(_ref3,_excluded$m);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isVisited=_useState2[0],setIsVisited=_useState2[1];var childrenString=getStringFromReactText(children);var _useInteraction=useInteraction(),currentInteraction=_useInteraction.currentInteraction,setCurrentInteraction=_useInteraction.setCurrentInteraction,syntheticEvents=_objectWithoutProperties(_useInteraction,_excluded2);var _useTheme=useTheme(),theme=_useTheme.theme;if(!Icon&&!(childrenString!=null&&childrenString.trim())){throw new Error("[Blade: BaseLink]: At least one of icon or text is required to render a link.");}var _getProps=getProps({theme:theme,variant:variant,currentInteraction:currentInteraction,children:childrenString,isDisabled:isDisabled,intent:intent,contrast:contrast,isVisited:isVisited,target:target,size:size}),as=_getProps.as,textDecorationLine=_getProps.textDecorationLine,iconColor=_getProps.iconColor,iconPadding=_getProps.iconPadding,iconSize=_getProps.iconSize,fontSize=_getProps.fontSize,textColor=_getProps.textColor,focusRingColor=_getProps.focusRingColor,motionDuration=_getProps.motionDuration,motionEasing=_getProps.motionEasing,cursor=_getProps.cursor,disabled=_getProps.disabled,role=_getProps.role,defaultRel=_getProps.defaultRel,type=_getProps.type,lineHeight=_getProps.lineHeight;var handleOnClick=function handleOnClick(event){if(!isVisited&&!intent&&variant==='anchor'){setIsVisited(true);}if(onClick){onClick(event);}};return jsx(StyledLink,_extends({},syntheticEvents,metaAttribute({name:MetaConstants.Link,testID:testID}),{accessibilityProps:_extends({},makeAccessible({role:role,label:accessibilityLabel,disabled:disabled})),variant:variant,as:as,href:href,target:target,rel:rel!=null?rel:defaultRel,onClick:handleOnClick,disabled:disabled,type:type,cursor:cursor,focusRingColor:focusRingColor,motionDuration:motionDuration,motionEasing:motionEasing,setCurrentInteraction:setCurrentInteraction},styledProps,{className:className,style:style,hitSlop:hitSlop,children:jsxs(BaseBox,{display:"flex",flexDirection:"row",className:"content-container",alignItems:"center",children:[Icon&&iconPosition=='left'?jsx(BaseBox,{paddingRight:iconPadding,display:"flex",alignItems:"center",children:jsx(Icon,{color:iconColor,size:iconSize})}):null,jsx(BaseText,{textDecorationLine:textDecorationLine,color:textColor,fontSize:fontSize,lineHeight:lineHeight,textAlign:"center",fontWeight:"bold",children:children}),Icon&&iconPosition=='right'?jsx(BaseBox,{paddingLeft:iconPadding,display:"flex",alignItems:"center",children:jsx(Icon,{color:iconColor,size:iconSize})}):null]})}));};
 
 var _excluded$l=["description","title","isDismissible","onDismiss","contrast","isFullWidth","intent","actions","testID"];var isReactNative$3=getPlatformType()==='react-native';var CloseButtonWrapper=isReactNative$3?BaseBox:Fragment$1;var intentIconMap={positive:CheckCircleIcon,negative:AlertTriangleIcon,information:InfoIcon,neutral:InfoIcon,notice:AlertTriangleIcon$1};var Alert=function Alert(_ref){var description=_ref.description,title=_ref.title,_ref$isDismissible=_ref.isDismissible,isDismissible=_ref$isDismissible===void 0?true:_ref$isDismissible,onDismiss=_ref.onDismiss,_ref$contrast=_ref.contrast,contrast=_ref$contrast===void 0?'low':_ref$contrast,_ref$isFullWidth=_ref.isFullWidth,isFullWidth=_ref$isFullWidth===void 0?false:_ref$isFullWidth,_ref$intent=_ref.intent,intent=_ref$intent===void 0?'neutral':_ref$intent,actions=_ref.actions,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$l);if(!(actions!=null&&actions.primary)&&actions!=null&&actions.secondary){throw new Error('[Blade: Alert]: SecondaryAction is allowed only when PrimaryAction is defined.');}var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var isDesktop=matchedDeviceType==='desktop';var isMobile=!isDesktop;var _useState=useState(true),_useState2=_slicedToArray(_useState,2),isVisible=_useState2[0],setIsVisible=_useState2[1];var contrastType=contrast+"Contrast";var iconSize=isFullWidth?'large':'medium';var textSize=isFullWidth?'medium':'small';var Icon=intentIconMap[intent];var iconOffset='spacing.1';if(isReactNative$3){if(isFullWidth&&!title){iconOffset='spacing.1';}else if(!isFullWidth&&!title){iconOffset='spacing.0';}else if(!isFullWidth&&title){iconOffset='spacing.2';}}else if(isMobile){if(!isFullWidth&&title){iconOffset='spacing.2';}else if(isFullWidth&&!title){iconOffset='spacing.2';}}else if(isFullWidth){iconOffset='spacing.0';}var icon=jsx(BaseBox,{marginTop:iconOffset,display:"flex",children:jsx(Icon,{color:"feedback.icon."+intent+"."+contrastType,size:iconSize})});var _title=title?jsx(BaseBox,{marginBottom:"spacing.2",children:isFullWidth?jsx(Heading,{type:"subtle",size:"small",contrast:contrast,children:title}):jsx(Text,{type:"subtle",weight:"bold",contrast:contrast,children:title})}):null;var _description=jsx(BaseBox,{marginTop:title||isReactNative$3?'spacing.0':'spacing.1',children:jsx(Text,{type:"subtle",size:textSize,contrast:contrast,children:description})});var primaryAction=actions!=null&&actions.primary?jsx(BaseBox,{marginRight:"spacing.5",display:isReactNative$3?'flex':'inline-flex',children:jsx(BaseButton,{size:textSize,onClick:actions.primary.onClick,intent:intent,contrast:contrast,children:actions.primary.text})}):null;var secondaryActionParams=actions!=null&&actions.secondary?{onClick:actions.secondary.onClick}:null;if(actions!=null&&actions.secondary&&secondaryActionParams&&'href'in actions.secondary){secondaryActionParams.href=actions.secondary.href;secondaryActionParams.target=actions.secondary.target;secondaryActionParams.rel=actions.secondary.rel;}var secondaryAction=actions!=null&&actions.secondary?jsx(BaseBox,{marginRight:"spacing.4",display:isReactNative$3?'flex':'inline-flex',children:jsx(BaseLink,_extends({size:textSize,contrast:contrast,intent:intent},secondaryActionParams,{children:actions.secondary.text}))}):null;var showActionsHorizontal=isFullWidth&&isDesktop;var actionsHorizontal=showActionsHorizontal&&(primaryAction||secondaryAction)?jsxs(BaseBox,{flexDirection:"row",alignItems:"center",children:[primaryAction,secondaryAction]}):null;var actionsVertical=!showActionsHorizontal&&(primaryAction||secondaryAction)?jsxs(BaseBox,{marginTop:"spacing.4",flexDirection:"row",alignItems:"center",children:[primaryAction,secondaryAction]}):null;var onClickDismiss=function onClickDismiss(){if(onDismiss){onDismiss();}setIsVisible(false);};var closeButton=isDismissible?jsx(CloseButtonWrapper,{children:jsx(IconButton,{accessibilityLabel:"Dismiss alert",onClick:onClickDismiss,contrast:contrast,size:iconSize,icon:CloseIcon})}):null;var a11yProps=makeAccessible(_extends({role:isReactNative$3||intent==='negative'||intent==='notice'?'alert':'status'},intent==='notice'&&{liveRegion:'polite'}));if(!isVisible){return null;}return jsxs(StyledAlert,_extends({intent:intent,contrastType:contrastType,isFullWidth:isFullWidth,isDesktop:isDesktop},a11yProps,metaAttribute({name:MetaConstants.Alert,testID:testID}),getStyledProps(styledProps),{children:[icon,jsxs(BaseBox,{flex:1,paddingLeft:isFullWidth?'spacing.4':'spacing.3',paddingRight:showActionsHorizontal?'spacing.4':'spacing.2',children:[_title,_description,actionsVertical]}),actionsHorizontal,closeButton]}));};
 
@@ -3976,7 +3976,7 @@ var CardContext=React__default.createContext(null);var useVerifyInsideCard=funct
 
 var _excluded$i=["children","surfaceLevel","testID"];var ComponentIds$1={CardHeader:'CardHeader',CardHeaderTrailing:'CardHeaderTrailing',CardHeaderLeading:'CardHeaderLeading',CardFooter:'CardFooter',CardFooterTrailing:'CardFooterTrailing',CardFooterLeading:'CardFooterLeading',CardBody:'CardBody',CardHeaderIcon:'CardHeaderIcon',CardHeaderCounter:'CardHeaderCounter',CardHeaderBadge:'CardHeaderBadge',CardHeaderText:'CardHeaderText',CardHeaderLink:'CardHeaderLink',CardHeaderIconButton:'CardHeaderIconButton'};var Card=function Card(_ref){var children=_ref.children,_ref$surfaceLevel=_ref.surfaceLevel,surfaceLevel=_ref$surfaceLevel===void 0?3:_ref$surfaceLevel,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$i);useVerifyAllowedComponents(children,'Card',[ComponentIds$1.CardHeader,ComponentIds$1.CardBody,ComponentIds$1.CardFooter]);return jsx(CardProvider,{children:jsx(CardSurface,_extends({},metaAttribute({name:MetaConstants.Card,testID:testID}),{paddingLeft:"spacing.7",paddingRight:"spacing.7",paddingTop:"spacing.6",paddingBottom:"spacing.6",borderRadius:"medium",surfaceLevel:surfaceLevel},getStyledProps(styledProps),{children:children}))});};var CardBody=function CardBody(_ref2){var children=_ref2.children,testID=_ref2.testID;useVerifyInsideCard('CardBody');return jsx(BaseBox,_extends({},metaAttribute({name:MetaConstants.CardBody,testID:testID}),{children:children}));};CardBody.componentId=ComponentIds$1.CardBody;
 
-var _excluded$h=["children","icon","iconPosition","isDisabled","onClick","variant","href","target","rel","accessibilityLabel","size","testID"];var Link=function Link(_ref){var children=_ref.children,icon=_ref.icon,_ref$iconPosition=_ref.iconPosition,iconPosition=_ref$iconPosition===void 0?'left':_ref$iconPosition,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,onClick=_ref.onClick,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'anchor':_ref$variant,href=_ref.href,target=_ref.target,rel=_ref.rel,accessibilityLabel=_ref.accessibilityLabel,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$h);return jsx(BaseLink,_extends({},icon?{icon:icon,children:children}:{children:children},variant==='anchor'?{variant:variant,href:href,target:target,rel:rel}:{variant:variant,isDisabled:isDisabled},{iconPosition:iconPosition,onClick:onClick,accessibilityLabel:accessibilityLabel,size:size,testID:testID},styledProps));};
+var _excluded$h=["children","icon","iconPosition","isDisabled","onClick","variant","href","target","rel","accessibilityLabel","size","testID","hitSlop"];var Link=function Link(_ref){var children=_ref.children,icon=_ref.icon,_ref$iconPosition=_ref.iconPosition,iconPosition=_ref$iconPosition===void 0?'left':_ref$iconPosition,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,onClick=_ref.onClick,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'anchor':_ref$variant,href=_ref.href,target=_ref.target,rel=_ref.rel,accessibilityLabel=_ref.accessibilityLabel,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,hitSlop=_ref.hitSlop,styledProps=_objectWithoutProperties(_ref,_excluded$h);return jsx(BaseLink,_extends({},icon?{icon:icon,children:children}:{children:children},variant==='anchor'?{variant:variant,href:href,target:target,rel:rel}:{variant:variant,isDisabled:isDisabled},{iconPosition:iconPosition,onClick:onClick,accessibilityLabel:accessibilityLabel,size:size,testID:testID,hitSlop:hitSlop},styledProps));};
 
 var _excluded$g=["children","icon","iconPosition","isDisabled","isFullWidth","isLoading","onClick","size","type","variant","accessibilityLabel","testID"];var _Button=function _Button(_ref,ref){var children=_ref.children,icon=_ref.icon,_ref$iconPosition=_ref.iconPosition,iconPosition=_ref$iconPosition===void 0?'left':_ref$iconPosition,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isFullWidth=_ref.isFullWidth,isFullWidth=_ref$isFullWidth===void 0?false:_ref$isFullWidth,_ref$isLoading=_ref.isLoading,isLoading=_ref$isLoading===void 0?false:_ref$isLoading,onClick=_ref.onClick,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$type=_ref.type,type=_ref$type===void 0?'button':_ref$type,_ref$variant=_ref.variant,variant=_ref$variant===void 0?'primary':_ref$variant,accessibilityLabel=_ref.accessibilityLabel,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$g);return jsx(BaseButton,_extends({},icon?{icon:icon,children:children}:{children:children},styledProps,{ref:ref,accessibilityLabel:accessibilityLabel,iconPosition:iconPosition,isDisabled:isDisabled,isFullWidth:isFullWidth,onClick:onClick,size:size,type:type,variant:variant,isLoading:isLoading,testID:testID}));};var Button=React__default.forwardRef(_Button);Button.displayName='Button';
 
@@ -4022,7 +4022,7 @@ var _excluded$8=["label","labelPosition","showRevealButton","maxCharacters","val
 
 var _excluded$7=["label","labelPosition","necessityIndicator","errorText","helpText","successText","validationState","defaultValue","isDisabled","isRequired","name","onChange","onFocus","onBlur","onSubmit","placeholder","value","maxCharacters","showClearButton","onClearButtonClick","autoFocus","numberOfLines","testID"];var isReactNative$1=function isReactNative(_textInputRef){return getPlatformType()==='react-native';};var _TextArea=function _TextArea(_ref,ref){var label=_ref.label,labelPosition=_ref.labelPosition,necessityIndicator=_ref.necessityIndicator,errorText=_ref.errorText,helpText=_ref.helpText,successText=_ref.successText,validationState=_ref.validationState,defaultValue=_ref.defaultValue,isDisabled=_ref.isDisabled,isRequired=_ref.isRequired,name=_ref.name,_onChange=_ref.onChange,onFocus=_ref.onFocus,onBlur=_ref.onBlur,onSubmit=_ref.onSubmit,placeholder=_ref.placeholder,value=_ref.value,maxCharacters=_ref.maxCharacters,showClearButton=_ref.showClearButton,onClearButtonClick=_ref.onClearButtonClick,autoFocus=_ref.autoFocus,_ref$numberOfLines=_ref.numberOfLines,numberOfLines=_ref$numberOfLines===void 0?2:_ref$numberOfLines,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$7);var inputRef=useBladeInnerRef(ref);var _React$useState=React__default.useState(false),_React$useState2=_slicedToArray(_React$useState,2),shouldShowClearButton=_React$useState2[0],setShouldShowClearButton=_React$useState2[1];React__default.useEffect(function(){setShouldShowClearButton(Boolean(showClearButton&&((value==null?void 0:value.length)||(defaultValue==null?void 0:defaultValue.length))));},[showClearButton,defaultValue,value]);var renderInteractionElement=function renderInteractionElement(){if(shouldShowClearButton){return jsx(BaseBox,{paddingTop:"spacing.3",marginTop:"spacing.1",children:jsx(IconButton,{icon:CloseIcon,accessibilityLabel:"Clear textarea content",onClick:function onClick(){var _inputRef$current;if(isEmpty_1(value)&&inputRef.current){if(isReactNative$1(inputRef.current)){inputRef.current.clear();inputRef.current.focus();}else if(inputRef.current instanceof HTMLTextAreaElement){inputRef.current.value='';inputRef.current.focus();}}onClearButtonClick==null?void 0:onClearButtonClick();inputRef==null?void 0:(_inputRef$current=inputRef.current)==null?void 0:_inputRef$current.focus();setShouldShowClearButton(false);}})});}return null;};return jsx(BaseInput,_extends({as:"textarea",id:"textarea",componentName:"textarea",autoFocus:autoFocus,ref:inputRef,label:label,labelPosition:labelPosition,necessityIndicator:necessityIndicator,errorText:errorText,helpText:helpText,successText:successText,validationState:validationState,isDisabled:isDisabled,isRequired:isRequired,name:name,maxCharacters:maxCharacters,placeholder:placeholder,interactionElement:renderInteractionElement(),defaultValue:defaultValue,value:value,numberOfLines:numberOfLines,onChange:function onChange(_ref2){var name=_ref2.name,value=_ref2.value;if(showClearButton&&value!=null&&value.length){setShouldShowClearButton(true);}if(shouldShowClearButton&&!(value!=null&&value.length)){setShouldShowClearButton(false);}_onChange==null?void 0:_onChange({name:name,value:value});},onFocus:onFocus,onBlur:onBlur,onSubmit:onSubmit,trailingFooterSlot:function trailingFooterSlot(value){var _value$length;return maxCharacters?jsx(BaseBox,{marginTop:"spacing.2",marginRight:"spacing.1",children:jsx(CharacterCounter,{currentCount:(_value$length=value==null?void 0:value.length)!=null?_value$length:0,maxCount:maxCharacters})}):null;},testID:testID},styledProps));};var TextArea=React__default.forwardRef(_TextArea);TextArea.displayName='TextArea';
 
-var _excluded$6=["autoFocus","errorText","helpText","isDisabled","keyboardReturnKeyType","keyboardType","label","labelPosition","name","onChange","onOTPFilled","otpLength","placeholder","successText","validationState","value","isMasked","autoCompleteSuggestionType","testID"];var isReactNative=getPlatformType()==='react-native';var otpToArray=function otpToArray(code){var _code$split;return (_code$split=code==null?void 0:code.split(''))!=null?_code$split:Array(6).fill('');};var OTPInput=function OTPInput(_ref){var autoFocus=_ref.autoFocus,errorText=_ref.errorText,helpText=_ref.helpText,isDisabled=_ref.isDisabled,keyboardReturnKeyType=_ref.keyboardReturnKeyType,_ref$keyboardType=_ref.keyboardType,keyboardType=_ref$keyboardType===void 0?'decimal':_ref$keyboardType,label=_ref.label,labelPosition=_ref.labelPosition,name=_ref.name,onChange=_ref.onChange,onOTPFilled=_ref.onOTPFilled,_ref$otpLength=_ref.otpLength,otpLength=_ref$otpLength===void 0?6:_ref$otpLength,placeholder=_ref.placeholder,successText=_ref.successText,validationState=_ref.validationState,inputValue=_ref.value,isMasked=_ref.isMasked,_ref$autoCompleteSugg=_ref.autoCompleteSuggestionType,autoCompleteSuggestionType=_ref$autoCompleteSugg===void 0?'oneTimeCode':_ref$autoCompleteSugg,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$6);var inputRefs=[];var _useState=useState(otpToArray(inputValue)),_useState2=_slicedToArray(_useState,2),otpValue=_useState2[0],setOtpValue=_useState2[1];var _useState3=useState([]),_useState4=_slicedToArray(_useState3,2),inputType=_useState4[0],setInputType=_useState4[1];var isLabelLeftPositioned=labelPosition==='left';var _useFormId=useFormId('otp'),inputId=_useFormId.inputId,helpTextId=_useFormId.helpTextId,errorTextId=_useFormId.errorTextId,successTextId=_useFormId.successTextId;var _useTheme=useTheme(),platform=_useTheme.platform;useEffect(function(){if(inputValue&&inputValue.length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:inputValue.slice(0,otpLength),name:name});}else if(!inputValue&&otpValue.join('').length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:otpValue.slice(0,otpLength).join(''),name:name});}},[otpValue,otpLength,name,inputValue,onOTPFilled]);useEffect(function(){otpValue.forEach(function(otp,index){if(!isEmpty_1(otp)&&!inputType[index]&&isMasked){var newInputType=Array.from(inputType);newInputType[index]='password';setInputType(newInputType);}if(isEmpty_1(otp)&&inputType[index]){var _newInputType=Array.from(inputType);_newInputType[index]=undefined;setInputType(_newInputType);}});},[otpValue,inputType,isMasked]);var setOtpValueByIndex=function setOtpValueByIndex(_ref2){var value=_ref2.value,index=_ref2.index;var newOtpValue=Array.from(otpValue);newOtpValue[index]=value;setOtpValue(newOtpValue);return newOtpValue.join('');};var focusOnOtpByIndex=function focusOnOtpByIndex(index){var _inputRefs$index,_inputRefs$index$curr;(_inputRefs$index=inputRefs[index])==null?void 0:(_inputRefs$index$curr=_inputRefs$index.current)==null?void 0:_inputRefs$index$curr.focus();if(!isReactNative){var _inputRefs$index2,_inputRefs$index2$cur;(_inputRefs$index2=inputRefs[index])==null?void 0:(_inputRefs$index2$cur=_inputRefs$index2.current)==null?void 0:_inputRefs$index2$cur.select();}};var handleOnChange=function handleOnChange(_ref3){var value=_ref3.value,currentOtpIndex=_ref3.currentOtpIndex;if(value&&value===' '){return;}if(inputValue&&inputValue.length>0){var newOtpValue=Array.from(inputValue);newOtpValue[currentOtpIndex]=value!=null?value:'';setOtpValue(newOtpValue);onChange==null?void 0:onChange({name:name,value:newOtpValue.join('')});}else if(value&&value.trim().length>1){setOtpValue(Array.from(value));onChange==null?void 0:onChange({name:name,value:value.trim().slice(0,otpLength)});}else if(otpValue[currentOtpIndex]!==(value==null?void 0:value.trim())){var _value$trim;var newValue=setOtpValueByIndex({value:(_value$trim=value==null?void 0:value.trim())!=null?_value$trim:'',index:currentOtpIndex});onChange==null?void 0:onChange({name:name,value:newValue});}};var handleOnInput=function handleOnInput(_ref4){var value=_ref4.value,currentOtpIndex=_ref4.currentOtpIndex;if(value&&value.trim().length===1){focusOnOtpByIndex(++currentOtpIndex);}};var handleOnKeyDown=function handleOnKeyDown(_ref5){var key=_ref5.key,code=_ref5.code,event=_ref5.event,currentOtpIndex=_ref5.currentOtpIndex;if(key==='Backspace'||code==='Backspace'||code==='Delete'||key==='Delete'){event.preventDefault==null?void 0:event.preventDefault();handleOnChange({value:'',currentOtpIndex:currentOtpIndex});focusOnOtpByIndex(--currentOtpIndex);}else if(key==='ArrowLeft'||code==='ArrowLeft'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(--currentOtpIndex);}else if(key==='ArrowRight'||code==='ArrowRight'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(++currentOtpIndex);}else if(key===' '||code==='Space'){event.preventDefault==null?void 0:event.preventDefault();}};var getHiddenInput=function getHiddenInput(){if(!isReactNative){var _ref6;return jsx("input",{hidden:true,id:inputId,name:name,value:(_ref6=inputValue!=null?inputValue:otpValue.join(''))!=null?_ref6:'',readOnly:true});}return null;};var getOTPInputFields=function getOTPInputFields(){var inputs=[];var _loop=function _loop(index){var _otpValue$index,_Array$from$index;var currentValue=inputValue?otpToArray(inputValue)[index]||'':otpValue[index]||'';var ref=React__default.createRef();var currentInputType=void 0;if(isMasked){currentInputType=inputValue?'password':inputType[index];}inputRefs.push(ref);inputs.push(jsx(BaseBox,{flex:1,marginLeft:index==0?'spacing.0':'spacing.3',maxWidth:platform==='onDesktop'?makeSize(size[36]):makeSize(size[40]),children:jsx(BaseInput,{autoFocus:autoFocus&&index===0,accessibilityLabel:(index===0?label:'')+" character "+(index+1),label:label,hideLabelText:true,id:inputId+"-"+index,textAlign:"center",ref:ref,value:currentValue,maxCharacters:((_otpValue$index=otpValue[index])==null?void 0:_otpValue$index.length)>0?1:undefined,onChange:function onChange(formEvent){return handleOnChange(_extends({},formEvent,{currentOtpIndex:index}));},onInput:function onInput(formEvent){return handleOnInput(_extends({},formEvent,{currentOtpIndex:index}));},onKeyDown:function onKeyDown(keyboardEvent){return handleOnKeyDown(_extends({},keyboardEvent,{currentOtpIndex:index}));},isDisabled:isDisabled,placeholder:(_Array$from$index=Array.from(placeholder!=null?placeholder:'')[index])!=null?_Array$from$index:'',isRequired:true,autoCompleteSuggestionType:autoCompleteSuggestionType,keyboardType:keyboardType,keyboardReturnKeyType:keyboardReturnKeyType,validationState:validationState,successText:successText,errorText:errorText,helpText:helpText,hideFormHint:true,type:currentInputType})},inputId+"-"+index));};for(var index=0;index<otpLength;index++){_loop(index);}return inputs;};return jsxs(BaseBox,_extends({},metaAttribute({name:MetaConstants.OTPInput,testID:testID}),getStyledProps(styledProps),{children:[jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'row':'column',alignItems:isLabelLeftPositioned?'center':undefined,position:"relative",children:[jsx(FormLabel,{as:"label",position:labelPosition,htmlFor:inputId,children:label}),jsxs(BaseBox,{display:"flex",flexDirection:"row",children:[getHiddenInput(),getOTPInputFields()]})]}),jsx(BaseBox,{marginLeft:makeSize(isLabelLeftPositioned?136:0),children:jsx(FormHint,{type:getHintType({validationState:validationState,hasHelpText:Boolean(helpText)}),helpText:helpText,errorText:errorText,successText:successText,helpTextId:helpTextId,errorTextId:errorTextId,successTextId:successTextId})})]}));};
+var _excluded$6=["autoFocus","errorText","helpText","isDisabled","keyboardReturnKeyType","keyboardType","label","labelPosition","name","onChange","onFocus","onBlur","onOTPFilled","otpLength","placeholder","successText","validationState","value","isMasked","autoCompleteSuggestionType","testID"];var isReactNative=getPlatformType()==='react-native';var otpToArray=function otpToArray(code){var _code$split;return (_code$split=code==null?void 0:code.split(''))!=null?_code$split:Array(6).fill('');};var OTPInput=function OTPInput(_ref){var autoFocus=_ref.autoFocus,errorText=_ref.errorText,helpText=_ref.helpText,isDisabled=_ref.isDisabled,keyboardReturnKeyType=_ref.keyboardReturnKeyType,_ref$keyboardType=_ref.keyboardType,keyboardType=_ref$keyboardType===void 0?'decimal':_ref$keyboardType,label=_ref.label,labelPosition=_ref.labelPosition,name=_ref.name,onChange=_ref.onChange,_onFocus=_ref.onFocus,_onBlur=_ref.onBlur,onOTPFilled=_ref.onOTPFilled,_ref$otpLength=_ref.otpLength,otpLength=_ref$otpLength===void 0?6:_ref$otpLength,placeholder=_ref.placeholder,successText=_ref.successText,validationState=_ref.validationState,inputValue=_ref.value,isMasked=_ref.isMasked,_ref$autoCompleteSugg=_ref.autoCompleteSuggestionType,autoCompleteSuggestionType=_ref$autoCompleteSugg===void 0?'oneTimeCode':_ref$autoCompleteSugg,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$6);var inputRefs=[];var _useState=useState(otpToArray(inputValue)),_useState2=_slicedToArray(_useState,2),otpValue=_useState2[0],setOtpValue=_useState2[1];var _useState3=useState([]),_useState4=_slicedToArray(_useState3,2),inputType=_useState4[0],setInputType=_useState4[1];var isLabelLeftPositioned=labelPosition==='left';var _useFormId=useFormId('otp'),inputId=_useFormId.inputId,helpTextId=_useFormId.helpTextId,errorTextId=_useFormId.errorTextId,successTextId=_useFormId.successTextId;var _useTheme=useTheme(),platform=_useTheme.platform;useEffect(function(){if(inputValue&&inputValue.length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:inputValue.slice(0,otpLength),name:name});}else if(!inputValue&&otpValue.join('').length>=otpLength){onOTPFilled==null?void 0:onOTPFilled({value:otpValue.slice(0,otpLength).join(''),name:name});}},[otpValue,otpLength,name,inputValue,onOTPFilled]);useEffect(function(){otpValue.forEach(function(otp,index){if(!isEmpty_1(otp)&&!inputType[index]&&isMasked){var newInputType=Array.from(inputType);newInputType[index]='password';setInputType(newInputType);}if(isEmpty_1(otp)&&inputType[index]){var _newInputType=Array.from(inputType);_newInputType[index]=undefined;setInputType(_newInputType);}});},[otpValue,inputType,isMasked]);var setOtpValueByIndex=function setOtpValueByIndex(_ref2){var value=_ref2.value,index=_ref2.index;var newOtpValue=Array.from(otpValue);newOtpValue[index]=value;setOtpValue(newOtpValue);return newOtpValue.join('');};var focusOnOtpByIndex=function focusOnOtpByIndex(index){var _inputRefs$index,_inputRefs$index$curr;(_inputRefs$index=inputRefs[index])==null?void 0:(_inputRefs$index$curr=_inputRefs$index.current)==null?void 0:_inputRefs$index$curr.focus();if(!isReactNative){var _inputRefs$index2,_inputRefs$index2$cur;(_inputRefs$index2=inputRefs[index])==null?void 0:(_inputRefs$index2$cur=_inputRefs$index2.current)==null?void 0:_inputRefs$index2$cur.select();}};var handleOnChange=function handleOnChange(_ref3){var value=_ref3.value,currentOtpIndex=_ref3.currentOtpIndex;if(value&&value===' '){return;}if(inputValue&&inputValue.length>0){var newOtpValue=Array.from(inputValue);newOtpValue[currentOtpIndex]=value!=null?value:'';setOtpValue(newOtpValue);onChange==null?void 0:onChange({name:name,value:newOtpValue.join('')});}else if(value&&value.trim().length>1){setOtpValue(Array.from(value));onChange==null?void 0:onChange({name:name,value:value.trim().slice(0,otpLength)});}else if(otpValue[currentOtpIndex]!==(value==null?void 0:value.trim())){var _value$trim;var newValue=setOtpValueByIndex({value:(_value$trim=value==null?void 0:value.trim())!=null?_value$trim:'',index:currentOtpIndex});onChange==null?void 0:onChange({name:name,value:newValue});}};var handleOnInput=function handleOnInput(_ref4){var value=_ref4.value,currentOtpIndex=_ref4.currentOtpIndex;if(value&&value.trim().length===1){focusOnOtpByIndex(++currentOtpIndex);}};var handleOnKeyDown=function handleOnKeyDown(_ref5){var key=_ref5.key,code=_ref5.code,event=_ref5.event,currentOtpIndex=_ref5.currentOtpIndex;if(key==='Backspace'||code==='Backspace'||code==='Delete'||key==='Delete'){event.preventDefault==null?void 0:event.preventDefault();handleOnChange({value:'',currentOtpIndex:currentOtpIndex});focusOnOtpByIndex(--currentOtpIndex);}else if(key==='ArrowLeft'||code==='ArrowLeft'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(--currentOtpIndex);}else if(key==='ArrowRight'||code==='ArrowRight'){event.preventDefault==null?void 0:event.preventDefault();focusOnOtpByIndex(++currentOtpIndex);}else if(key===' '||code==='Space'){event.preventDefault==null?void 0:event.preventDefault();}};var getHiddenInput=function getHiddenInput(){if(!isReactNative){var _ref6;return jsx("input",{hidden:true,id:inputId,name:name,value:(_ref6=inputValue!=null?inputValue:otpValue.join(''))!=null?_ref6:'',readOnly:true});}return null;};var getOTPInputFields=function getOTPInputFields(){var inputs=[];var _loop=function _loop(index){var _otpValue$index,_Array$from$index;var currentValue=inputValue?otpToArray(inputValue)[index]||'':otpValue[index]||'';var ref=React__default.createRef();var currentInputType=void 0;if(isMasked){currentInputType=inputValue?'password':inputType[index];}inputRefs.push(ref);inputs.push(jsx(BaseBox,{flex:1,marginLeft:index==0?'spacing.0':'spacing.3',maxWidth:platform==='onDesktop'?makeSize(size[36]):makeSize(size[40]),children:jsx(BaseInput,{autoFocus:autoFocus&&index===0,accessibilityLabel:(index===0?label:'')+" character "+(index+1),label:label,hideLabelText:true,id:inputId+"-"+index,textAlign:"center",ref:ref,name:name,value:currentValue,maxCharacters:((_otpValue$index=otpValue[index])==null?void 0:_otpValue$index.length)>0?1:undefined,onChange:function onChange(formEvent){return handleOnChange(_extends({},formEvent,{currentOtpIndex:index}));},onFocus:function onFocus(formEvent){return _onFocus==null?void 0:_onFocus(_extends({},formEvent,{inputIndex:index}));},onBlur:function onBlur(formEvent){return _onBlur==null?void 0:_onBlur(_extends({},formEvent,{inputIndex:index}));},onInput:function onInput(formEvent){return handleOnInput(_extends({},formEvent,{currentOtpIndex:index}));},onKeyDown:function onKeyDown(keyboardEvent){return handleOnKeyDown(_extends({},keyboardEvent,{currentOtpIndex:index}));},isDisabled:isDisabled,placeholder:(_Array$from$index=Array.from(placeholder!=null?placeholder:'')[index])!=null?_Array$from$index:'',isRequired:true,autoCompleteSuggestionType:autoCompleteSuggestionType,keyboardType:keyboardType,keyboardReturnKeyType:keyboardReturnKeyType,validationState:validationState,successText:successText,errorText:errorText,helpText:helpText,hideFormHint:true,type:currentInputType})},inputId+"-"+index));};for(var index=0;index<otpLength;index++){_loop(index);}return inputs;};return jsxs(BaseBox,_extends({},metaAttribute({name:MetaConstants.OTPInput,testID:testID}),getStyledProps(styledProps),{children:[jsxs(BaseBox,{display:"flex",flexDirection:isLabelLeftPositioned?'row':'column',alignItems:isLabelLeftPositioned?'center':undefined,position:"relative",children:[jsx(FormLabel,{as:"label",position:labelPosition,htmlFor:inputId,children:label}),jsxs(BaseBox,{display:"flex",flexDirection:"row",children:[getHiddenInput(),getOTPInputFields()]})]}),jsx(BaseBox,{marginLeft:makeSize(isLabelLeftPositioned?136:0),children:jsx(FormHint,{type:getHintType({validationState:validationState,hasHelpText:Boolean(helpText)}),helpText:helpText,errorText:errorText,successText:successText,helpTextId:helpTextId,errorTextId:errorTextId,successTextId:successTextId})})]}));};
 
 var StyledChevronIconContainer=styled(TouchableOpacity)(function(_props){return {display:'flex',justifyContent:'center'};});var SelectChevronIcon=function SelectChevronIcon(props){var Icon=props.icon;return jsx(StyledChevronIconContainer,{accessibilityLabel:"Chevron Icon",onPress:props.onClick,children:jsx(Icon,{color:"surface.text.normal.lowContrast",size:"medium"})});};