chore: refactor wds combobox component (#36286)

## Description
Added styles for input to the combobox
Separate reused components(FieldDescription, FieldError, FieldLabel,
FieldListPopover)

Fixes #36224

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10888601720>
> Commit: 7ef81de
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10888601720&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 16 Sep 2024 17:33:23 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

- **New Features**
- Added a more comprehensive set of button size examples to the
`Button.stories.tsx` file.
- Introduced a new `FieldDescription` component in the `ComboBox.tsx`
file to handle field descriptions.

- **Styling Improvements**
- Refined the spacing, padding, and text size for the `Button` component
based on its size.
- Enhanced the visual feedback for checkboxes in invalid and selected
states in the `Checkbox` component.
- Simplified the CSS structure and improved the visual states of the
`ComboBox` component.

- **Refactor**
- Replaced legacy components in the `ComboBox` with more standardized
design system components for improved consistency.
- Removed the `ListBoxItem` component, indicating a change in the list
box rendering approach.
- Narrowed the allowed sizes for the `ComboBox` component, excluding
"xSmall" and "large" sizes.

- **Chores**
- Removed the `ErrorMessage` component and its associated export in the
`index.ts` file.
- Added a `verbatimModuleSyntax` property to the `tsconfig.json` file,
potentially affecting module handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/packages/design-system/theming/src/token/src/styles.module.css

@@ -1,14 +1,14 @@
 /* THIS FILE IS CREATED AUTOMATICALLY. PLEASE DON'T EDIT IT. */
 :root {
   --outer-spacing-0: 0;
-  --outer-spacing-1: 5.7px;
-  --outer-spacing-2: 8.1px;
-  --outer-spacing-3: 11.5px;
-  --outer-spacing-4: 16.2px;
-  --outer-spacing-5: 22.9px;
-  --outer-spacing-6: 32.5px;
-  --outer-spacing-7: 45.9px;
-  --outer-spacing-8: 64.9px;
+  --outer-spacing-1: 4px;
+  --outer-spacing-2: 6px;
+  --outer-spacing-3: 8.9px;
+  --outer-spacing-4: 13.2px;
+  --outer-spacing-5: 19.6px;
+  --outer-spacing-6: 29.2px;
+  --outer-spacing-7: 43.3px;
+  --outer-spacing-8: 64.4px;
   --inner-spacing-0: 0;
   --inner-spacing-1: 4.2px;
   --inner-spacing-2: 6.3px;
@@ -221,36 +221,36 @@
   --sizing-200: 680px;
   --color-bg: rgb(95.735% 96.105% 96.612%);
   --color-bg-accent: rgb(0% 50.196% 100%);
-  --color-bg-accent-hover: rgb(13.479% 56.597% 100%);
+  --color-bg-accent-hover: rgb(16.706% 56.866% 100%);
   --color-bg-accent-active: rgb(0% 47.644% 97.234%);
-  --color-bg-accent-subtle: rgb(84.049% 91.286% 100%);
-  --color-bg-accent-subtle-hover: rgb(88.309% 93.691% 100%);
-  --color-bg-accent-subtle-active: rgb(81.868% 90.09% 100%);
+  --color-bg-accent-subtle: rgb(81.727% 91.842% 100%);
+  --color-bg-accent-subtle-hover: rgb(85.976% 94.312% 100%);
+  --color-bg-accent-subtle-active: rgb(79.582% 90.604% 100%);
   --color-bg-assistive: rgb(0% 4.2493% 16.493%);
-  --color-bg-neutral: rgb(40.269% 40.585% 41.017%);
-  --color-bg-neutral-opacity: rgb(40.269% 40.585% 41.017% / 0.5);
-  --color-bg-neutral-hover: rgb(44.775% 45.097% 45.538%);
-  --color-bg-neutral-active: rgb(39.155% 39.47% 39.901%);
-  --color-bg-neutral-subtle: rgb(91.338% 91.522% 91.773%);
-  --color-bg-neutral-subtle-hover: rgb(93.938% 94.123% 94.375%);
-  --color-bg-neutral-subtle-active: rgb(90.044% 90.227% 90.478%);
-  --color-bg-positive: rgb(6.7435% 63.436% 18.481%);
+  --color-bg-neutral: rgb(14.34% 14.608% 14.974%);
+  --color-bg-neutral-opacity: rgb(4.1441% 4.3763% 4.6935% / 0.6);
+  --color-bg-neutral-hover: rgb(21.156% 21.44% 21.828%);
+  --color-bg-neutral-active: rgb(11.549% 11.809% 12.164%);
+  --color-bg-neutral-subtle: rgb(95.735% 96.105% 96.612%);
+  --color-bg-neutral-subtle-hover: rgb(97.307% 97.678% 98.187%);
+  --color-bg-neutral-subtle-active: rgb(94.428% 94.798% 95.304%);
+  --color-bg-positive: rgb(6.7436% 63.436% 18.481%);
   --color-bg-positive-hover: rgb(18.172% 69.721% 25.266%);
   --color-bg-positive-active: rgb(0% 60.947% 15.563%);
   --color-bg-positive-subtle: rgb(81.329% 100% 81.391%);
-  --color-bg-positive-subtle-hover: rgb(84.848% 100% 84.841%);
+  --color-bg-positive-subtle-hover: rgb(83.899% 100% 83.95%);
   --color-bg-positive-subtle-active: rgb(80.049% 98.746% 80.116%);
   --color-bg-negative: rgb(83.108% 4.6651% 10.252%);
   --color-bg-negative-hover: rgb(90.296% 17.3% 17.376%);
   --color-bg-negative-active: rgb(80.244% 0% 6.8069%);
-  --color-bg-negative-subtle: rgb(80.244% 0% 6.8069%);
-  --color-bg-negative-subtle-hover: rgb(100% 93.667% 92.497%);
-  --color-bg-negative-subtle-active: rgb(100% 88.348% 86.422%);
-  --color-bg-warning: rgb(85.145% 64.66% 8.0286%);
+  --color-bg-negative-subtle: rgb(100% 89.123% 86.922%);
+  --color-bg-negative-subtle-hover: rgb(100% 92.714% 90.956%);
+  --color-bg-negative-subtle-active: rgb(100% 87.545% 85.228%);
+  --color-bg-warning: rgb(85.145% 64.66% 8.0285%);
   --color-bg-warning-hover: rgb(89.037% 68.413% 15.627%);
-  --color-bg-warning-active: rgb(83.854% 63.416% 4.0505%);
+  --color-bg-warning-active: rgb(83.854% 63.416% 4.0504%);
   --color-bg-warning-subtle: rgb(100% 94.114% 80.142%);
-  --color-bg-warning-subtle-hover: rgb(100% 97.012% 87.859%);
+  --color-bg-warning-subtle-hover: rgb(100% 96.733% 82.696%);
   --color-bg-warning-subtle-active: rgb(99.63% 92.81% 78.869%);
   --color-bg-elevation-1: rgb(98.357% 98.73% 99.239%);
   --color-bg-elevation-2: rgb(100% 100% 100%);
@@ -260,39 +260,39 @@
   --color-shadow-elevation-3: rgb(21.317% 24.208% 28.136% / 0.15);
   --color-fg: rgb(1.8308% 2.2815% 2.989%);
   --color-fg-accent: rgb(0% 31.772% 67.873%);
-  --color-fg-neutral: rgb(32.982% 33.44% 34.067%);
-  --color-fg-neutral-subtle: rgb(44.047% 44.529% 45.189%);
-  --color-fg-positive: rgb(6.7435% 63.436% 18.481%);
-  --color-fg-negative: rgb(100% 0% 28.453%);
-  --color-fg-warning: rgb(71.79% 51.231% 0%);
+  --color-fg-neutral: rgb(11.988% 12.775% 13.849%);
+  --color-fg-neutral-subtle: rgb(48.768% 49.751% 51.095%);
+  --color-fg-positive: rgb(6.7436% 63.436% 18.481%);
+  --color-fg-negative: rgb(100% 0% 31.57%);
+  --color-fg-warning: rgb(76.894% 49.631% 0%);
   --color-fg-on-accent: rgb(92.311% 95.082% 98.864%);
   --color-fg-on-accent-subtle: rgb(1.8308% 2.2815% 2.989%);
-  --color-fg-on-assistive: rgb(92.536% 96.25% 100%);
+  --color-fg-on-assistive: rgb(90.219% 96.774% 100%);
   --color-fg-on-neutral: rgb(94.428% 94.798% 95.304%);
-  --color-fg-on-positive: rgb(89.702% 100% 89.053%);
-  --color-fg-on-negative: rgb(100% 87.612% 85.249%);
-  --color-fg-on-warning: rgb(21.953% 9.0775% 0%);
+  --color-fg-on-positive: rgb(81.009% 100% 81.169%);
+  --color-fg-on-negative: rgb(100% 89.124% 86.925%);
+  --color-fg-on-warning: rgb(19.085% 11.601% 0%);
   --color-bd: rgb(73.392% 74.451% 75.899%);
   --color-bd-accent: rgb(0% 50.196% 100%);
-  --color-bd-focus: rgb(0% 50.196% 100%);
-  --color-bd-neutral: rgb(51.832% 51.998% 52.224%);
-  --color-bd-neutral-hover: rgb(63.734% 63.906% 64.141%);
-  --color-bd-positive: rgb(6.7435% 63.436% 18.481%);
-  --color-bd-positive-hover: rgb(26.362% 76.094% 31.718%);
-  --color-bd-negative: rgb(83.108% 4.6651% 10.252%);
-  --color-bd-negative-hover: rgb(94.628% 22.524% 21.261%);
-  --color-bd-warning: rgb(85.145% 64.66% 8.0286%);
-  --color-bd-warning-hover: rgb(98.232% 77.293% 27.893%);
-  --color-bd-on-accent: rgb(0% 1.6859% 55.697%);
-  --color-bd-on-neutral: rgb(5.3992% 5.6371% 5.9622%);
-  --color-bd-on-neutral-subtle: rgb(83.624% 83.804% 84.052%);
-  --color-bd-on-neutral-subtle-hover: rgb(87.465% 87.647% 87.897%);
-  --color-bd-on-positive: rgb(0% 22.552% 3.6201%);
-  --color-bd-on-negative: rgb(21.923% 0% 2.8118%);
-  --color-bd-on-warning: rgb(39.972% 27.552% 0%);
-  --color-bd-elevation-1: rgb(86.823% 87.005% 87.253%);
-  --color-bd-elevation-2: rgb(90.691% 90.874% 91.125%);
-  --color-bd-elevation-3: rgb(92.637% 92.821% 93.073%);
+  --color-bd-focus: rgb(0% 41.891% 91.024%);
+  --color-bd-neutral: rgb(50.521% 52.173% 54.429%);
+  --color-bd-neutral-hover: rgb(62.374% 64.09% 66.433%);
+  --color-bd-positive: rgb(37.9% 86.464% 41.821%);
+  --color-bd-positive-hover: rgb(51.497% 99.713% 54.439%);
+  --color-bd-negative: rgb(100% 55.521% 50.654%);
+  --color-bd-negative-hover: rgb(100% 72.272% 68.285%);
+  --color-bd-warning: rgb(94.272% 73.467% 23.044%);
+  --color-bd-warning-hover: rgb(100% 86.971% 47.122%);
+  --color-bd-on-accent: rgb(0% 12.715% 44.584%);
+  --color-bd-on-neutral: rgb(36.946% 37.257% 37.683%);
+  --color-bd-on-neutral-subtle: rgb(91.826% 92.194% 92.697%);
+  --color-bd-on-neutral-subtle-hover: rgb(89.884% 90.25% 90.751%);
+  --color-bd-on-positive: rgb(0% 22.253% 0%);
+  --color-bd-on-negative: rgb(25.15% 0% 0%);
+  --color-bd-on-warning: rgb(40.354% 27.735% 0%);
+  --color-bd-elevation-1: rgb(85.384% 87.202% 89.685%);
+  --color-bd-elevation-2: rgb(89.241% 91.074% 93.578%);
+  --color-bd-elevation-3: rgb(91.181% 93.021% 95.535%);
   --border-radius-elevation-1: calc(
     var(--border-radius-elevation-base) + var(--outer-spacing-1) * 2
   );
@@ -309,7 +309,7 @@
     var(--color-shadow-elevation-3);
   --border-width-1: 1px;
   --border-width-2: 2px;
-  --opacity-disabled: 0.3;
+  --opacity-disabled: 0.65;
   --z-index-1: 3;
   --z-index-2: 4;
   --z-index-3: 10;