Remove visible caret - iOS always visible

[codercodingthecode]

Update Styling Properties in OTPInput Component to Remove Caret. Partially resolve https://github.com/guilhermerodz/input-otp/issues/32 UI Issue

Update:

• This pull request introduces updates to the styling properties of the OTPInput component within the input.tsx file.
• The changes aim to enhance the component's visual appearance and consistency with the overall design system to reduce internal styling.
• The changes prevent the caret from displaying on the screen when all the inputs are filled in on iOS.
• Users are not forced to auto-submit or blur when all characters/digits are filled in.

Changes:

• Removed the font-family: 'monospace' property.
• Added box-sizing: 'border-box' property.

Rationale: The removal of the monospace font family from the OTPInput component is motivated by a desire to maintain visual consistency throughout the application. As most components utilize the default system font, aligning the OTPInput component with this standard enhances the cohesive appearance of the interface and reduces the internal styling of the components.

Before

After

The introduction of the box-sizing: 'border-box' property addresses layout challenges encountered with the component's sizing. By including padding and borders in the component's dimensions, we can avoid unexpected layout shifts and provide a more stable and predictable interface for users.

Before

After

Result

Impact:

• These changes are expected to improve the visual consistency of the OTPInput component and preventing the caret from displaying.
• No major impacts on functionality or existing layouts are anticipated, as the adjustments are primarily aesthetic and pertain to internal component spacing.