Update Input component to reposition "Additional Children" when labels are moved/removed

[orion-cengage]

Purpose: We need to update the positioning of the Additional Children when the label is moved or removed.

Figma: https://www.figma.com/design/VoWYiiOKKppcYm5QLgPyDC/Components---Inputs?m=auto&node-id=2113-2766&t=CEU5gyO21XoerN9F-1

• when label position is top, children will be top right
• when label position is left, children will be to the right of the select
• when label is visually hidden, children will be to the right of the select

We should also update the title in the docs: instead of calling it Additional Children (e.g. Help Link), lets rename it to Help Link. We should add an example of the label being on the left, and one where the label is visually hidden.

[chris-cedrone-cengage]

Update Input additional children position based on label position ✅ Check Input with help link behavior based on label position and visibility ✅

All verified on Chrome Version 130.0.6723.70, Safari 18, and Firefox 132.0 using Mac OS Sonoma 14.7 on: https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app/?path=/story/datepicker--default

[silvalaura]

Component issues:

• When using labelPosition top, there is still space being left on the right size of the input, and it should be full width

• Help link - left label: is it okay that the label is centered aligned and looks like this with a long label?

• Help link - top label: is this the expected result?

input.mdx issues:

• type={InputType.button} was passed to IconButton, and it doesn't need a type at all
• Spacer is missing as an import
• size, variant and labelPosition should take an enum instead of a string

https://codesandbox.io/p/sandbox/testing-1163-help-link-input-nwgnrt?file=%2Fexample.tsx

[orion-cengage]

Upon further review, we definitely need to fix the label colliding with the Help button, and take care of that extra space Laura found. We should also try to update how the left-aligned label aligns with the input, especially if it is forced to wrap (which designers and devs need to try and prevent to begin with).

I think it would look the least "broken" if it stayed vertically centered with the input, but I'm not sure this is possible when you start adding helper text and/or errors. So let's try to match what I'm showing in the design below, but we can stick with how it currently is if it doesn't work.

Figma: https://www.figma.com/design/VoWYiiOKKppcYm5QLgPyDC/Components---Inputs?m=auto&node-id=2196-501&t=F9IOHfhmmxJTgSCY-1

[silvalaura]

Validation:

1. when label position is top, children will be top right ✅ -- when label is long, icon stays in the right place ✅ -- behaves as expected with inputSize="large" ✅
2. when label position is left, children will be to the right of the select ✅ -- when label is long, icon stays in the right place ✅ -- works fine with labelWidth prop ✅ -- behaves as expected with inputSize="large" ✅
3. when label is visually hidden, children will be to the right of the select ✅ -- behaves as expected with inputSize="large" ✅
4. Icon can be focused ✅