diff --git a/.changeset/curly-trainers-walk.md b/.changeset/curly-trainers-walk.md
new file mode 100644
index 000000000..f6844a834
--- /dev/null
+++ b/.changeset/curly-trainers-walk.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix minor issues with input styling.
diff --git a/.changeset/famous-items-shop.md b/.changeset/famous-items-shop.md
new file mode 100644
index 000000000..b9c2c29f6
--- /dev/null
+++ b/.changeset/famous-items-shop.md
@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Expose shouldFocusWrap for ListBox, FilterListBox, and FilterPicker to control whether keyboard navigation should wrap around.
diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx
index 63cd732fe..0ee06729e 100644
--- a/src/components/fields/ComboBox/ComboBox.tsx
+++ b/src/components/fields/ComboBox/ComboBox.tsx
@@ -437,6 +437,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
       }}
       data-size={size}
     >
+      {prefix ? <div data-element="Prefix">{prefix}</div> : null}
       <InputElement
         ref={inputRef}
         qa="Input"
@@ -448,7 +449,6 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
         {...modAttrs(mods)}
         data-size={size}
       />
-      {prefix ? <div data-element="Prefix">{prefix}</div> : null}
       <div data-element="Suffix">
         {suffixPosition === 'before' ? suffix : null}
         {validationState || isLoading ? (
diff --git a/src/components/fields/DatePicker/DateInputBase.tsx b/src/components/fields/DatePicker/DateInputBase.tsx
index 879130ec6..b7e5746b6 100644
--- a/src/components/fields/DatePicker/DateInputBase.tsx
+++ b/src/components/fields/DatePicker/DateInputBase.tsx
@@ -32,6 +32,11 @@ const DateInputElement = tasty({
   role: 'presentation',
   styles: {
     ...DEFAULT_INPUT_STYLES,
+    height: {
+      '': '(@size-md - 2bw)',
+      '[data-size="small"]': '(@size-sm - 2bw)',
+      '[data-size="large"]': '(@size-lg - 2bw)',
+    },
     display: 'flex',
     flow: 'row',
     placeItems: 'center start',
diff --git a/src/components/fields/FilterListBox/FilterListBox.stories.tsx b/src/components/fields/FilterListBox/FilterListBox.stories.tsx
index 6953f9dd4..f854d3051 100644
--- a/src/components/fields/FilterListBox/FilterListBox.stories.tsx
+++ b/src/components/fields/FilterListBox/FilterListBox.stories.tsx
@@ -135,6 +135,13 @@ const meta: Meta<typeof FilterListBox> = {
         defaultValue: { summary: false },
       },
     },
+    shouldFocusWrap: {
+      control: { type: 'boolean' },
+      description: 'Whether keyboard navigation should wrap around',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
 
     /* State */
     isLoading: {
diff --git a/src/components/fields/FilterListBox/FilterListBox.tsx b/src/components/fields/FilterListBox/FilterListBox.tsx
index 6663bd640..99d115785 100644
--- a/src/components/fields/FilterListBox/FilterListBox.tsx
+++ b/src/components/fields/FilterListBox/FilterListBox.tsx
@@ -84,8 +84,8 @@ const SearchInputElement = tasty({
     ...DEFAULT_INPUT_STYLES,
     fill: '#clear',
     padding: {
-      '': '.5x 1.5x',
-      prefix: '.5x 1.5x .5x .5x',
+      '': '0 1.5x',
+      prefix: '0 1.5x 0 .5x',
     },
   },
 });
@@ -194,6 +194,7 @@ export const FilterListBox = forwardRef(function FilterListBox<
     description,
     styles,
     focusOnHover,
+    shouldFocusWrap,
     labelSuffix,
     selectedKey,
     defaultSelectedKey,
@@ -607,7 +608,7 @@ export const FilterListBox = forwardRef(function FilterListBox<
             const newIndex = currentIndex + direction;
             if (newIndex >= 0 && newIndex < visibleKeys.length) {
               nextKey = visibleKeys[newIndex];
-            } else {
+            } else if (shouldFocusWrap) {
               // Wrap around
               nextKey = isArrowDown
                 ? visibleKeys[0]
@@ -715,6 +716,7 @@ export const FilterListBox = forwardRef(function FilterListBox<
       focused: isFocused,
       loading: !!isLoading,
       searchable: true,
+      prefix: !!isLoading,
       ...externalMods,
     }),
     [
@@ -784,7 +786,14 @@ export const FilterListBox = forwardRef(function FilterListBox<
   };
 
   const searchInput = (
-    <SearchWrapperElement mods={mods} data-size="small">
+    <SearchWrapperElement mods={mods} data-size={size}>
+      {isLoading && (
+        <div data-element="Prefix">
+          <div data-element="InputIcon">
+            {isLoading ? <LoadingIcon /> : null}
+          </div>
+        </div>
+      )}
       <SearchInputElement
         ref={searchInputRef}
         data-is-prefix={isLoading ? '' : undefined}
@@ -811,13 +820,6 @@ export const FilterListBox = forwardRef(function FilterListBox<
         {...keyboardProps}
         {...modAttrs(mods)}
       />
-      {isLoading && (
-        <div data-element="Prefix">
-          <div data-element="InputIcon">
-            {isLoading ? <LoadingIcon /> : null}
-          </div>
-        </div>
-      )}
     </SearchWrapperElement>
   );
 
@@ -856,6 +858,7 @@ export const FilterListBox = forwardRef(function FilterListBox<
           listRef={listRef}
           stateRef={listStateRef}
           listStyles={listStyles}
+          shouldFocusWrap={shouldFocusWrap}
           optionStyles={optionStyles}
           sectionStyles={sectionStyles}
           headingStyles={headingStyles}
diff --git a/src/components/fields/FilterPicker/FilterPicker.stories.tsx b/src/components/fields/FilterPicker/FilterPicker.stories.tsx
index 6ba29f12f..1cb4da01d 100644
--- a/src/components/fields/FilterPicker/FilterPicker.stories.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.stories.tsx
@@ -161,6 +161,13 @@ const meta: Meta<typeof FilterPicker> = {
         defaultValue: { summary: false },
       },
     },
+    shouldFocusWrap: {
+      control: { type: 'boolean' },
+      description: 'Whether keyboard navigation should wrap around',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
 
     /* State */
     isDisabled: {
diff --git a/src/components/fields/FilterPicker/FilterPicker.tsx b/src/components/fields/FilterPicker/FilterPicker.tsx
index bfca09dcb..37685351a 100644
--- a/src/components/fields/FilterPicker/FilterPicker.tsx
+++ b/src/components/fields/FilterPicker/FilterPicker.tsx
@@ -1,12 +1,17 @@
-import { FocusableRef } from '@react-types/shared';
-import React, {
+import {
+  Children,
+  cloneElement,
   ForwardedRef,
   forwardRef,
+  MutableRefObject,
   ReactElement,
   ReactNode,
+  useCallback,
+  useEffect,
   useRef,
   useState,
 } from 'react';
+import { FocusScope, useKeyboard } from 'react-aria';
 import { Section as BaseSection, Item } from 'react-stately';
 
 import { useWarn } from '../../../_internal/hooks/use-warn';
@@ -92,7 +97,7 @@ export interface CubeFilterPickerProps<T>
     | false;
 
   /** Optional ref to access internal ListBox state (from FilterListBox) */
-  listStateRef?: React.MutableRefObject<any | null>;
+  listStateRef?: MutableRefObject<any | null>;
   /** Mods for the FilterPicker */
   mods?: Record<string, boolean>;
 }
@@ -149,6 +154,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     type = 'outline',
     theme = 'default',
     labelSuffix,
+    shouldFocusWrap,
     children,
     selectedKey,
     defaultSelectedKey,
@@ -242,7 +248,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     const labels: string[] = [];
 
     const extractLabels = (nodes: ReactNode): void => {
-      React.Children.forEach(nodes, (child: any) => {
+      Children.forEach(nodes, (child: any) => {
         if (!child || typeof child !== 'object') return;
 
         if (child.type === Item) {
@@ -267,7 +273,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
 
     // Modified extractLabels to track which keys we've processed
     const extractLabelsWithTracking = (nodes: ReactNode): void => {
-      React.Children.forEach(nodes, (child: any) => {
+      Children.forEach(nodes, (child: any) => {
         if (!child || typeof child !== 'object') return;
 
         if (child.type === Item) {
@@ -326,7 +332,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     multiple: (effectiveSelectedKeys ?? []).map(normalizeKeyValue),
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     latestSelectionRef.current = {
       single:
         effectiveSelectedKey != null
@@ -341,7 +347,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
   }>({ single: null, multiple: [] });
 
   // Function to sort children with selected items on top
-  const getSortedChildren = React.useCallback(() => {
+  const getSortedChildren = useCallback(() => {
     if (!children) return children;
 
     // When the popover is **closed** we don't want to trigger any resorting –
@@ -396,7 +402,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     // Helper function to sort children array
     const sortChildrenArray = (childrenArray: ReactNode[]): ReactNode[] => {
       const cloneWithNormalizedKey = (item: any) =>
-        React.cloneElement(item, {
+        cloneElement(item, {
           key: normalizeKeyValue(item.key),
         });
 
@@ -442,7 +448,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
 
           // Create new section with sorted children, preserving React element properly
           unselected.push(
-            React.cloneElement(child, {
+            cloneElement(child, {
               ...child.props,
               children: [...selectedItems, ...unselectedItems],
             }),
@@ -464,7 +470,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     };
 
     // Sort the children
-    const childrenArray = React.Children.toArray(children);
+    const childrenArray = Children.toArray(children);
     const sortedChildren = sortChildrenArray(childrenArray);
 
     // Cache the sorted order when popover opens
@@ -485,17 +491,6 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
   // We only provide the sorted original children
   const finalChildren = getSortedChildren();
 
-  // Function to close popover and focus trigger button
-  const closeAndFocus = React.useCallback((close: () => void) => {
-    close();
-    // Use setTimeout to ensure the popover closes first, then focus the trigger
-    setTimeout(() => {
-      if (triggerRef.current) {
-        triggerRef.current.focus();
-      }
-    }, 0);
-  }, []);
-
   const renderTriggerContent = () => {
     // When there is a selection and a custom summary renderer is provided – use it.
     if (hasSelection && typeof renderSummary === 'function') {
@@ -545,7 +540,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
   // The trigger is rendered as a function so we can access the dialog state
   const renderTrigger = (state) => {
     // Track popover open/close state to control sorting
-    React.useEffect(() => {
+    useEffect(() => {
       if (state.isOpen !== isPopoverOpen) {
         setIsPopoverOpen(state.isOpen);
         if (!state.isOpen) {
@@ -557,6 +552,16 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
       }
     }, [state.isOpen, isPopoverOpen]);
 
+    // Add keyboard support for arrow keys to open the popover
+    const { keyboardProps } = useKeyboard({
+      onKeyDown: (e) => {
+        if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !state.isOpen) {
+          e.preventDefault();
+          state.open();
+        }
+      },
+    });
+
     return (
       <Button
         ref={triggerRef as any}
@@ -575,6 +580,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
         rightIcon={<DirectionIcon to={state.isOpen ? 'top' : 'bottom'} />}
         styles={styles}
         {...otherProps}
+        {...keyboardProps}
         aria-label={`${props['aria-label'] ?? props.label ?? ''}`}
       >
         {renderTriggerContent()}
@@ -592,97 +598,100 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
       {renderTrigger}
       {(close) => (
         <Dialog display="grid" styles={{ gridRows: '1sf', ...popoverStyles }}>
-          <FilterListBox
-            autoFocus
-            // Pass an aria-label so the internal ListBox is properly labeled and React Aria doesn't warn.
-            aria-label={`${props['aria-label'] ?? props.label ?? ''} Picker`}
-            selectedKey={
-              selectionMode === 'single' ? effectiveSelectedKey : undefined
-            }
-            selectedKeys={
-              selectionMode === 'multiple' ? effectiveSelectedKeys : undefined
-            }
-            disabledKeys={disabledKeys}
-            focusOnHover={focusOnHover}
-            allowsCustomValue={allowsCustomValue}
-            selectionMode={selectionMode}
-            validationState={validationState}
-            isDisabled={isDisabled}
-            stateRef={listStateRef}
-            isCheckable={isCheckable}
-            mods={{
-              popover: true,
-            }}
-            size={size === 'small' ? 'medium' : size}
-            header={header}
-            footer={footer}
-            headerStyles={headerStyles}
-            footerStyles={footerStyles}
-            qa={`${props.qa || 'FilterPicker'}ListBox`}
-            onEscape={() => closeAndFocus(close)}
-            onOptionClick={(key) => {
-              // For FilterPicker, clicking the content area should close the popover
-              // in multiple selection mode (single mode already closes via onSelectionChange)
-              if (selectionMode === 'multiple' && isCheckable) {
-                closeAndFocus(close);
+          <FocusScope restoreFocus>
+            <FilterListBox
+              autoFocus
+              // Pass an aria-label so the internal ListBox is properly labeled and React Aria doesn't warn.
+              aria-label={`${props['aria-label'] ?? props.label ?? ''} Picker`}
+              selectedKey={
+                selectionMode === 'single' ? effectiveSelectedKey : undefined
+              }
+              selectedKeys={
+                selectionMode === 'multiple' ? effectiveSelectedKeys : undefined
               }
-            }}
-            onSelectionChange={(selection) => {
-              // No need to change any flags - children order is cached
-
-              // Update internal state if uncontrolled
-              if (selectionMode === 'single') {
-                if (!isControlledSingle) {
-                  setInternalSelectedKey(selection as any);
+              disabledKeys={disabledKeys}
+              focusOnHover={focusOnHover}
+              shouldFocusWrap={shouldFocusWrap}
+              allowsCustomValue={allowsCustomValue}
+              selectionMode={selectionMode}
+              validationState={validationState}
+              isDisabled={isDisabled}
+              stateRef={listStateRef}
+              isCheckable={isCheckable}
+              mods={{
+                popover: true,
+              }}
+              size={size === 'small' ? 'medium' : size}
+              header={header}
+              footer={footer}
+              headerStyles={headerStyles}
+              footerStyles={footerStyles}
+              qa={`${props.qa || 'FilterPicker'}ListBox`}
+              onEscape={() => close()}
+              onOptionClick={(key) => {
+                // For FilterPicker, clicking the content area should close the popover
+                // in multiple selection mode (single mode already closes via onSelectionChange)
+                if (selectionMode === 'multiple' && isCheckable) {
+                  close();
+                }
+              }}
+              onSelectionChange={(selection) => {
+                // No need to change any flags - children order is cached
+
+                // Update internal state if uncontrolled
+                if (selectionMode === 'single') {
+                  if (!isControlledSingle) {
+                    setInternalSelectedKey(selection as any);
+                  }
+                } else {
+                  if (!isControlledMultiple) {
+                    let normalized: any = selection;
+
+                    if (Array.isArray(selection)) {
+                      normalized = processSelectionArray(selection);
+                    } else if (
+                      selection &&
+                      typeof selection === 'object' &&
+                      selection instanceof Set
+                    ) {
+                      normalized = processSelectionArray(selection as any);
+                    }
+
+                    setInternalSelectedKeys(normalized as any);
+                  }
                 }
-              } else {
-                if (!isControlledMultiple) {
-                  let normalized: any = selection;
 
+                // Update latest selection ref synchronously
+                if (selectionMode === 'single') {
+                  latestSelectionRef.current.single = selection as any;
+                } else {
                   if (Array.isArray(selection)) {
-                    normalized = processSelectionArray(selection);
+                    latestSelectionRef.current.multiple = Array.from(
+                      new Set(processSelectionArray(selection)),
+                    );
                   } else if (
                     selection &&
                     typeof selection === 'object' &&
                     selection instanceof Set
                   ) {
-                    normalized = processSelectionArray(selection as any);
+                    latestSelectionRef.current.multiple = Array.from(
+                      new Set(processSelectionArray(selection as any)),
+                    );
+                  } else {
+                    latestSelectionRef.current.multiple = selection as any;
                   }
-
-                  setInternalSelectedKeys(normalized as any);
-                }
-              }
-
-              // Update latest selection ref synchronously
-              if (selectionMode === 'single') {
-                latestSelectionRef.current.single = selection as any;
-              } else {
-                if (Array.isArray(selection)) {
-                  latestSelectionRef.current.multiple = Array.from(
-                    new Set(processSelectionArray(selection)),
-                  );
-                } else if (
-                  selection &&
-                  typeof selection === 'object' &&
-                  selection instanceof Set
-                ) {
-                  latestSelectionRef.current.multiple = Array.from(
-                    new Set(processSelectionArray(selection as any)),
-                  );
-                } else {
-                  latestSelectionRef.current.multiple = selection as any;
                 }
-              }
 
-              onSelectionChange?.(selection as any);
+                onSelectionChange?.(selection as any);
 
-              if (selectionMode === 'single') {
-                closeAndFocus(close);
-              }
-            }}
-          >
-            {finalChildren}
-          </FilterListBox>
+                if (selectionMode === 'single') {
+                  close();
+                }
+              }}
+            >
+              {finalChildren}
+            </FilterListBox>
+          </FocusScope>
         </Dialog>
       )}
     </DialogTrigger>
diff --git a/src/components/fields/ListBox/ListBox.stories.tsx b/src/components/fields/ListBox/ListBox.stories.tsx
index 236d5bdff..4631c8b45 100644
--- a/src/components/fields/ListBox/ListBox.stories.tsx
+++ b/src/components/fields/ListBox/ListBox.stories.tsx
@@ -112,6 +112,13 @@ const meta: Meta<typeof ListBox> = {
         defaultValue: { summary: false },
       },
     },
+    shouldFocusWrap: {
+      control: { type: 'boolean' },
+      description: 'Whether keyboard navigation should wrap around',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
 
     /* State */
     isDisabled: {
@@ -833,7 +840,7 @@ export const VirtualizedList: StoryFn<CubeListBoxProps<any>> = (args) => {
   // Generate a large list of items with varying content to test virtualization
   // Mix items with and without descriptions to test dynamic sizing
   const items = Array.from({ length: 100 }, (_, i) => ({
-    id: `item-${i}`,
+    key: `item-${i}`,
     name: `Item ${i + 1}${i % 7 === 0 ? ' - This is a longer item name to test dynamic sizing' : ''}`,
     description:
       i % 3 === 0
@@ -851,17 +858,18 @@ export const VirtualizedList: StoryFn<CubeListBoxProps<any>> = (args) => {
 
       <ListBox
         {...args}
+        items={items}
         label="Virtualized List with Mixed Content"
         selectedKey={selected}
         height="300px"
         overflow="auto"
         onSelectionChange={setSelected}
       >
-        {items.map((item) => (
-          <ListBox.Item key={item.id} description={item.description}>
+        {(item) => (
+          <ListBox.Item key={item.key} description={item.description}>
             {item.name}
           </ListBox.Item>
-        ))}
+        )}
       </ListBox>
 
       <Text>
@@ -1016,3 +1024,24 @@ EscapeKeyHandling.parameters = {
     },
   },
 };
+
+export const WithItemsProp: Story = {
+  render: (args) => (
+    <ListBox {...args} items={fruits}>
+      {(item) => <ListBox.Item key={item.key}>{item.label}</ListBox.Item>}
+    </ListBox>
+  ),
+  args: {
+    label: 'Select a fruit using items prop',
+    selectionMode: 'single',
+    defaultSelectedKey: 'apple',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'ListBox supports the `items` prop pattern where you provide an array of data objects and use a render function to create the items. This is useful when working with dynamic data or when you want to separate data from presentation.',
+      },
+    },
+  },
+};
diff --git a/src/components/fields/ListBox/ListBox.tsx b/src/components/fields/ListBox/ListBox.tsx
index 9b37c5419..f3cb4f9f7 100644
--- a/src/components/fields/ListBox/ListBox.tsx
+++ b/src/components/fields/ListBox/ListBox.tsx
@@ -26,6 +26,7 @@ import { CheckIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import {
   BASE_STYLES,
+  BasePropsWithoutChildren,
   COLOR_STYLES,
   extractStyles,
   OUTER_STYLES,
@@ -241,7 +242,8 @@ const SectionListElement = tasty({
 export interface CubeListBoxProps<T>
   extends Omit<AriaListBoxProps<T>, 'onSelectionChange'>,
     CollectionBase<T>,
-    FieldBaseProps {
+    FieldBaseProps,
+    BasePropsWithoutChildren {
   /** Custom styles for the list container */
   listStyles?: Styles;
   /** Custom styles for options */
@@ -508,7 +510,6 @@ export const ListBox = forwardRef(function ListBox<T extends object>(
       'aria-label': props['aria-label'] || label?.toString(),
       isDisabled,
       shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,
-      shouldFocusWrap: true,
       escapeKeyBehavior: onEscape ? 'none' : 'clearSelection',
     },
     listState,
diff --git a/src/components/fields/NumberInput/NumberInput.stories.tsx b/src/components/fields/NumberInput/NumberInput.stories.tsx
index d2f5a1dae..3027ee81f 100644
--- a/src/components/fields/NumberInput/NumberInput.stories.tsx
+++ b/src/components/fields/NumberInput/NumberInput.stories.tsx
@@ -56,11 +56,11 @@ export default {
       description: 'Amount to increment or decrement the value',
     },
     size: {
-      options: ['small', 'default', 'large'],
+      options: ['small', 'medium', 'large'],
       control: { type: 'radio' },
       description: 'Input size',
       table: {
-        defaultValue: { summary: 'default' },
+        defaultValue: { summary: 'medium' },
       },
     },
     /* State */
diff --git a/src/components/fields/NumberInput/NumberInput.tsx b/src/components/fields/NumberInput/NumberInput.tsx
index ee13f0902..bd45293d6 100644
--- a/src/components/fields/NumberInput/NumberInput.tsx
+++ b/src/components/fields/NumberInput/NumberInput.tsx
@@ -29,8 +29,8 @@ const StyledTextInputBase = tasty(TextInputBase, {
 const StepperContainer = tasty({
   styles: {
     display: 'grid',
-    gridColumns: '1fr',
-    gridRows: 'minmax(1px, 1fr) minmax(1px, 1fr)',
+    gridColumns: '1sf',
+    gridRows: '1sf 1sf',
     flow: 'column',
     placeSelf: 'stretch',
   },
diff --git a/src/components/fields/NumberInput/StepButton.tsx b/src/components/fields/NumberInput/StepButton.tsx
index 96bd12f32..0715e59d8 100644
--- a/src/components/fields/NumberInput/StepButton.tsx
+++ b/src/components/fields/NumberInput/StepButton.tsx
@@ -1,39 +1,39 @@
-import { CaretDownIcon, CaretUpIcon } from '../../../icons';
-import { Styles } from '../../../tasty';
+import { CaretDownIcon, CaretUpIcon, DirectionIcon } from '../../../icons';
+import { Styles, tasty } from '../../../tasty';
 import { Button } from '../../actions';
 
-const STEP_BUTTON_STYLES: Styles = {
-  width: '4x',
-  radius: {
-    '': '0 (1r - 1bw) 0 0',
-    down: '0 0 (1r - 1bw) 0',
-  },
-  fontSize: '12px',
-  lineHeight: '12px',
-  height: 'auto',
-  fill: {
-    '': '#dark.0',
-    hovered: '#dark.04',
-    pressed: '#purple.10',
-    '[disabled]': '#dark.0',
-  },
+const StepButtonElement = tasty(Button, {
+  preventDefault: true,
+  type: 'neutral',
+  styles: {
+    width: '2.5x',
+    height: 'auto',
+    radius: {
+      '': '0 (1r - 1bw) 0 0',
+      down: '0 0 (1r - 1bw) 0',
+    },
+    fontSize: '12px',
+    lineHeight: '12px',
+    fill: {
+      '': '#dark.0',
+      hovered: '#dark.04',
+      pressed: '#purple.10',
+      '[disabled]': '#dark.0',
+    },
 
-  '@icon-size': {
-    '': '14px',
-    '[data-size="small"]': '13px',
+    '@icon-size': '1fs',
   },
-};
+});
 
 /**
  * Buttons for NumberField.
  */
 export function StepButton(props) {
   return (
-    <Button
+    <StepButtonElement
       preventDefault
       type="neutral"
-      styles={STEP_BUTTON_STYLES}
-      icon={props.direction === 'up' ? <CaretUpIcon /> : <CaretDownIcon />}
+      icon={<DirectionIcon to={props.direction} />}
       mods={{
         up: props.direction === 'up',
         down: props.direction === 'down',
diff --git a/src/components/fields/PasswordInput/PasswordInput.stories.tsx b/src/components/fields/PasswordInput/PasswordInput.stories.tsx
index 506664073..c8e760ef7 100644
--- a/src/components/fields/PasswordInput/PasswordInput.stories.tsx
+++ b/src/components/fields/PasswordInput/PasswordInput.stories.tsx
@@ -43,11 +43,11 @@ export default {
 
     /* Presentation */
     size: {
-      options: ['small', 'default', 'large'],
+      options: ['small', 'medium', 'large'],
       control: { type: 'radio' },
       description: 'Input size',
       table: {
-        defaultValue: { summary: 'default' },
+        defaultValue: { summary: 'medium' },
       },
     },
 
diff --git a/src/components/fields/SearchInput/SearchInput.stories.tsx b/src/components/fields/SearchInput/SearchInput.stories.tsx
index 719702ff3..82b100345 100644
--- a/src/components/fields/SearchInput/SearchInput.stories.tsx
+++ b/src/components/fields/SearchInput/SearchInput.stories.tsx
@@ -43,11 +43,11 @@ export default {
 
     /* Presentation */
     size: {
-      options: ['small', 'default', 'large'],
+      options: ['small', 'medium', 'large'],
       control: { type: 'radio' },
       description: 'Input size',
       table: {
-        defaultValue: { summary: 'default' },
+        defaultValue: { summary: 'medium' },
       },
     },
 
diff --git a/src/components/fields/Select/Select.tsx b/src/components/fields/Select/Select.tsx
index 03d45f2e1..07ac60443 100644
--- a/src/components/fields/Select/Select.tsx
+++ b/src/components/fields/Select/Select.tsx
@@ -92,6 +92,8 @@ const SelectWrapperElement = tasty({
 
     Value: {
       ...DEFAULT_INPUT_STYLES,
+      display: 'grid',
+      placeItems: 'center stretch',
       preset: {
         '': 't3',
         '[data-type="primary"]': 't3m',
diff --git a/src/components/fields/Switch/Switch.stories.tsx b/src/components/fields/Switch/Switch.stories.tsx
index ec676cee5..d65946e9a 100644
--- a/src/components/fields/Switch/Switch.stories.tsx
+++ b/src/components/fields/Switch/Switch.stories.tsx
@@ -82,11 +82,11 @@ export default {
 
     /* Presentation */
     size: {
-      options: ['small', 'default'],
+      options: ['small', 'large'],
       control: { type: 'radio' },
       description: 'Switch size',
       table: {
-        defaultValue: { summary: 'default' },
+        defaultValue: { summary: 'large' },
       },
     },
 
diff --git a/src/components/fields/TextArea/TextArea.stories.tsx b/src/components/fields/TextArea/TextArea.stories.tsx
index 0609f95b0..6c03a49cd 100644
--- a/src/components/fields/TextArea/TextArea.stories.tsx
+++ b/src/components/fields/TextArea/TextArea.stories.tsx
@@ -66,11 +66,11 @@ export default {
 
     /* Presentation */
     size: {
-      options: ['small', 'default', 'large'],
+      options: ['small', 'medium', 'large'],
       control: { type: 'radio' },
       description: 'Textarea size',
       table: {
-        defaultValue: { summary: 'default' },
+        defaultValue: { summary: 'medium' },
       },
     },
 
diff --git a/src/components/fields/TextArea/TextArea.tsx b/src/components/fields/TextArea/TextArea.tsx
index e92cca350..ee67a7654 100644
--- a/src/components/fields/TextArea/TextArea.tsx
+++ b/src/components/fields/TextArea/TextArea.tsx
@@ -10,7 +10,7 @@ import { useTextField } from 'react-aria';
 
 import { useEvent } from '../../../_internal/index';
 import { useProviderProps } from '../../../provider';
-import { chain, mergeProps } from '../../../utils/react';
+import { chain } from '../../../utils/react';
 import {
   castNullableStringValue,
   WithNullableValue,
diff --git a/src/components/fields/TextInput/TextInputBase.tsx b/src/components/fields/TextInput/TextInputBase.tsx
index 6e1941e07..d367e441b 100644
--- a/src/components/fields/TextInput/TextInputBase.tsx
+++ b/src/components/fields/TextInput/TextInputBase.tsx
@@ -37,6 +37,7 @@ const ADD_STYLES = {
   display: 'grid',
   placeContent: 'stretch',
   placeItems: 'center',
+  gridRows: '1sf',
   flow: 'column',
   gap: 0,
   cursor: 'inherit',
@@ -48,9 +49,15 @@ const ADD_STYLES = {
 
 export const INPUT_WRAPPER_STYLES: Styles = {
   display: 'grid',
+  flow: 'row',
   position: 'relative',
-  gridAreas: '"prefix input suffix"',
-  gridColumns: 'auto 1sf auto',
+  gridColumns: {
+    '': '1sf',
+    prefix: 'max-content 1sf',
+    suffix: '1sf max-content',
+    'prefix & suffix': 'max-content 1sf max-content',
+  },
+  gridRows: '1sf',
   placeItems: 'stretch',
   fill: {
     '': '#white',
@@ -82,16 +89,20 @@ export const INPUT_WRAPPER_STYLES: Styles = {
   boxSizing: 'border-box',
   transition: 'theme',
   backgroundClip: 'content-box',
-
-  Prefix: {
-    ...ADD_STYLES,
-    gridArea: 'prefix',
+  height: {
+    '': '@size-md @size-md',
+    '[data-size="small"]': '@size-sm @size-sm',
+    '[data-size="medium"]': '@size-md @size-md',
+    '[data-size="large"]': '@size-lg @size-lg',
+    multiline: 'min @size-md',
+    '[data-size="small"] & multiline': 'min @size-sm',
+    '[data-size="medium"] & multiline': 'min @size-md',
+    '[data-size="large"] & multiline': 'min @size-lg',
   },
 
-  Suffix: {
-    ...ADD_STYLES,
-    gridArea: 'suffix',
-  },
+  Prefix: ADD_STYLES,
+
+  Suffix: ADD_STYLES,
 
   State: {
     display: 'flex',
@@ -123,11 +134,7 @@ const STYLE_LIST = [...POSITION_STYLES, ...DIMENSION_STYLES];
 const INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];
 
 export const DEFAULT_INPUT_STYLES: Styles = {
-  display: 'grid',
-  placeItems: 'center stretch',
-  placeContent: 'center stretch',
-  gridRows: 'min(1lh)',
-  gridArea: 'input',
+  placeSelf: 'stretch',
   width: 'initial 100% 100%',
   color: 'inherit',
   fill: '#clear',
@@ -139,22 +146,17 @@ export const DEFAULT_INPUT_STYLES: Styles = {
   reset: 'input',
   preset: 't3',
   flexGrow: 1,
-  margin: 0,
+  margin: {
+    '': 0,
+    multiline: '(((@size-md - 1lh) / 2) - 1bw) 0',
+    'multiline & [data-size="small"]': '(((@size-sm - 1lh) / 2) - 1bw) 0',
+    'multiline & [data-size="large"]': '(((@size-lg - 1lh) / 2) - 1bw) 0',
+  },
   resize: 'none',
   boxSizing: 'border-box',
   userSelect: 'auto',
-  height: {
-    '': '(@size-md - 2bw) (@size-md - 2bw)',
-    '[data-size="small"]': '(@size-sm - 2bw) (@size-sm - 2bw)',
-    '[data-size="medium"]': '(@size-md - 2bw) (@size-md - 2bw)',
-    '[data-size="large"]': '(@size-lg - 2bw) (@size-lg - 2bw)',
-    multiline: 'min (@size-md - 2bw)',
-    '[data-size="small"] & multiline': 'min (@size-sm - 2bw)',
-    '[data-size="medium"] & multiline': 'min (@size-md - 2bw)',
-    '[data-size="large"] & multiline': 'min (@size-lg - 2bw)',
-  },
 
-  '@vertical-padding': '(.5x - 1bw)',
+  '@vertical-padding': 0,
   '@left-padding': {
     '': '(1x - 1bw)',
     '[data-size="small"]': '(1x - 1bw)',
@@ -325,7 +327,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
       disabled: isDisabled,
       multiline: multiLine,
       prefix: !!prefix,
-      suffix: !!suffix,
+      suffix: (validationState && !isLoading) || isLoading || !!suffix,
       ...mods,
     }),
     [
@@ -359,6 +361,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
       styles={wrapperStyles}
       {...wrapperProps}
     >
+      {prefix ? <div data-element="Prefix">{prefix}</div> : null}
       <InputElement
         as={ElementType}
         {...mergeProps(inputProps, focusProps, hoverProps)}
@@ -375,7 +378,6 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
         maxLength={maxLength}
         minLength={minLength}
       />
-      {prefix ? <div data-element="Prefix">{prefix}</div> : null}
       {(validationState && !isLoading) || isLoading || suffix ? (
         <div data-element="Suffix">
           {suffixPosition === 'before' ? suffix : null}
diff --git a/src/icons/DirectionIcon.tsx b/src/icons/DirectionIcon.tsx
index 321f814cd..c219bf539 100644
--- a/src/icons/DirectionIcon.tsx
+++ b/src/icons/DirectionIcon.tsx
@@ -19,7 +19,7 @@ export type DirectionIconProps = {
   to?: Direction;
 } & CubeIconProps;
 
-const DIRECTIONS = ['left', 'right', 'top', 'bottom'];
+const DIRECTIONS = ['left', 'right', 'top', 'bottom', 'up', 'down'];
 
 type Direction = (typeof DIRECTIONS)[number];
 
@@ -28,6 +28,8 @@ const rotationByDirection: Record<Direction, number> = {
   right: 90,
   bottom: 180,
   left: 270,
+  up: 0,
+  down: 180,
 };
 
 export const DirectionIcon = memo(function DirectionIcon(
diff --git a/src/stories/Introduction.docs.mdx b/src/stories/Introduction.docs.mdx
index 93a9738c8..d4f461ff2 100644
--- a/src/stories/Introduction.docs.mdx
+++ b/src/stories/Introduction.docs.mdx
@@ -57,11 +57,11 @@ import { Button, TextInput, Form } from '@cube-dev/ui-kit';
 function MyApp() {
   return (
     <Form onSubmit={handleSubmit}>
-      <TextInput 
-        name="email" 
-        label="Email" 
-        type="email" 
-        isRequired 
+      <TextInput
+        name="email"
+        label="Email"
+        type="email"
+        isRequired
       />
       <Button type="primary">Submit</Button>
     </Form>
@@ -129,6 +129,6 @@ Each component includes comprehensive documentation:
 ## Next Steps
 
 1. **Explore Components** - Browse the sidebar to see all available components
-2. **Learn Tasty** - Visit the [Tasty documentation](/docs/tasty-api--docs) to master the styling system
+2. **Learn Tasty** - Visit the [Tasty documentation](/docs/tasty-documentation--docs) to master the styling system
 3. **Build Forms** - Check out [Form documentation](/docs/forms-form--docs) for form development patterns
 4. **Accessibility** - Review accessibility guidelines for inclusive design
diff --git a/src/stories/Tasty.docs.mdx b/src/stories/Tasty.docs.mdx
index 18c7271eb..d03510d20 100644
--- a/src/stories/Tasty.docs.mdx
+++ b/src/stories/Tasty.docs.mdx
@@ -125,9 +125,9 @@ const FlexibleBox = tasty({
 });
 
 // Usage - style properties become direct props
-<FlexibleBox 
-  gap="2x" 
-  align="center" 
+<FlexibleBox
+  gap="2x"
+  align="center"
   placeContent="space-between"
   fill="#surface"
 >
@@ -135,11 +135,11 @@ const FlexibleBox = tasty({
 </FlexibleBox>
 
 // Equivalent to using styles prop:
-<FlexibleBox styles={{ 
-  gap: '2x', 
-  align: 'center', 
+<FlexibleBox styles={{
+  gap: '2x',
+  align: 'center',
   placeContent: 'space-between',
-  fill: '#surface' 
+  fill: '#surface'
 }}>
   Content
 </FlexibleBox>
@@ -155,15 +155,15 @@ const FlexibleBox = tasty({
 **Style Prop Priority:**
 ```jsx
 // Direct props override styles prop
-<FlexibleBox 
-  styles={{ gap: '1x' }} 
+<FlexibleBox
+  styles={{ gap: '1x' }}
   gap="3x"  // This takes priority
 />
 
 // Both direct props and styles can be used together
-<FlexibleBox 
-  styles={{ padding: '2x', border: true }} 
-  gap="2x" 
+<FlexibleBox
+  styles={{ padding: '2x', border: true }}
+  gap="2x"
   align="center"
 />
 ```
@@ -220,7 +220,7 @@ Configure breakpoints and use responsive arrays:
 // Use responsive arrays
 <Block padding={["4x", "2x", "1x"]} />
 // Large screens (≥1200px): 4x
-// Medium screens (640px-1199px): 2x  
+// Medium screens (640px-1199px): 2x
 // Small screens (<640px): 1x
 ```
 
@@ -258,7 +258,7 @@ flow: 'row dense',   // grid-auto-flow: row dense
 Works across all layout types:
 ```jsx
 gap: '2x',           // Standard gap
-gap: '1x 2x',        // Row gap, column gap  
+gap: '1x 2x',        // Row gap, column gap
 gap: true,           // Default: '1x'
 
 // Flex/Grid: Uses native CSS gap
@@ -272,7 +272,7 @@ gap: true,           // Default: '1x'
 Enhanced syntax with directional modifiers:
 ```jsx
 padding: '2x',                    // All sides
-padding: '2x 1x',                 // Vertical, horizontal  
+padding: '2x 1x',                 // Vertical, horizontal
 padding: '2x top',                // Top only
 padding: '1x left right',         // Left and right
 padding: true,                    // Default: '1x'
@@ -330,7 +330,7 @@ border: 'dashed #danger left right', // Left/right borders
 border: '#purple',                // Color only (uses defaults for width/style)
 
 // Default values:
-// - Width: '1bw' → 'var(--border-width)'  
+// - Width: '1bw' → 'var(--border-width)'
 // - Style: 'solid'
 // - Color: 'var(--border-color)'
 // Available styles: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
@@ -366,7 +366,7 @@ preset: 'h2 strong',              // Bold heading 2
 
 // Available presets:
 // Headings: h1, h2, h3, h4, h5, h6
-// Text: t1, t2, t2m, t3, t3m, t4, t4m  
+// Text: t1, t2, t2m, t3, t3m, t4, t4m
 // Paragraphs: p1, p2, p3, p4
 // Main text: m1, m2, m3
 // Captions: c1, c2, tag
@@ -376,7 +376,7 @@ preset: 'h2 strong',              // Bold heading 2
 Unified alignment control for flex and grid:
 ```jsx
 align: 'center',                  // align-items & align-content: center
-justify: 'space-between',         // justify-items & justify-content: space-between  
+justify: 'space-between',         // justify-items & justify-content: space-between
 place: 'center',                  // place-items & place-content: center
 
 // Sets both *-items and *-content properties
@@ -402,13 +402,13 @@ inset: true,                      // Default: 0
 Semantic transition names:
 ```jsx
 transition: 'fill 0.2s',          // Background transitions
-transition: 'fade 0.15s ease-in', // Mask transitions  
+transition: 'fade 0.15s ease-in', // Mask transitions
 transition: 'theme 0.3s',         // All theme properties
 transition: 'border 0.2s, radius 0.3s', // Multiple properties
 
 // Available semantic names:
 // - fade: mask
-// - fill: background-color  
+// - fill: background-color
 // - border: border, box-shadow
 // - radius: border-radius
 // - theme: color, background-color, box-shadow, border, border-radius, outline
@@ -538,7 +538,7 @@ Style inner elements using `data-element` attributes:
 const Card = tasty({
   styles: {
     padding: '4x',
-    
+
     // Sub-element styles
     Title: {                      // Styles data-element="Title"
       preset: 'h3',
@@ -602,7 +602,7 @@ const Component = tasty({
     // Define custom properties
     '@local-spacing': '2x',
     '@theme-color': 'rgb(255 128 0)',
-    
+
     // Use custom properties
     padding: '@local-spacing',
     color: '@theme-color',
@@ -732,7 +732,7 @@ styles: {
 
 ```jsx
 // ✅ Use native style prop for dynamic values
-<Component 
+<Component
   style={{ '--custom-color': dynamicColor }}
   styles={{ color: '@custom-color' }}
 />
@@ -802,8 +802,8 @@ const Button = tasty({
 - **Interactivity**: See [Modifiers & State Binding](#modifiers--state-binding) for hover, focus, and custom states
 - **Theming**: See [Variants & Theming](#variants--theming) for component variations
 - **Performance**: See [Performance Tips](#performance-tips-) for optimization techniques
-- **Create Component Guide**: See [CreateComponent.docs.mdx](/docs/tasty-createcomponent--docs) for component creation patterns
+- **Create Component Guide**: See [CreateComponent.docs.mdx](/docs/tasty-create-component--docs) for component creation patterns
 
 ---
 
-> **Need Help?** This documentation covers the most important `tasty` features. For additional examples and component creation patterns, see the [Component Creation Guide](/docs/tasty-createcomponent--docs).
+> **Need Help?** This documentation covers the most important `tasty` features. For additional examples and component creation patterns, see the [Component Creation Guide](/docs/tasty-create-component--docs).