diff --git a/apps/www/src/app/docs/[[...slug]]/page.tsx b/apps/www/src/app/docs/[[...slug]]/page.tsx
index 5a43853e4..9c9b5463a 100644
--- a/apps/www/src/app/docs/[[...slug]]/page.tsx
+++ b/apps/www/src/app/docs/[[...slug]]/page.tsx
@@ -34,8 +34,13 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
           pageTree={docs.pageTree}
           source={page.data.source}
         />
-        <Flex width='full' align='start'>
-          <Flex direction='column' align='center' justify='center' width='full'>
+        <Flex style={{ width: '100%' }} align='start'>
+          <Flex
+            direction='column'
+            align='center'
+            justify='center'
+            style={{ width: '100%' }}
+          >
             <Flex
               direction='column'
               className={styles.content}
diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx
index d7e8e81af..01048209b 100644
--- a/apps/www/src/app/examples/page.tsx
+++ b/apps/www/src/app/examples/page.tsx
@@ -320,7 +320,7 @@ const Page = () => {
 
               <RangePicker
                 footer={
-                  <Callout width='100%' type='success'>
+                  <Callout style={{ width: '100%' }} type='success'>
                     Some important message in the footer
                   </Callout>
                 }
@@ -1571,7 +1571,7 @@ const Page = () => {
               <Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
 
               <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-                <Dialog.Content width='500px'>
+                <Dialog.Content style={{ width: 500 }}>
                   <Dialog.Header>
                     <Dialog.Title>Dialog Title</Dialog.Title>
                   </Dialog.Header>
@@ -1658,7 +1658,6 @@ const Page = () => {
                         <Input
                           placeholder='Type to filter...'
                           leadingIcon={<MixerHorizontalIcon />}
-                          width='100%'
                         />
                       </Flex>
 
@@ -1732,7 +1731,7 @@ const Page = () => {
                 open={nestedDialogOpen}
                 onOpenChange={setNestedDialogOpen}
               >
-                <Dialog.Content width='500px'>
+                <Dialog.Content style={{ width: 500 }}>
                   <Dialog.Body>
                     <Text>This is the nested dialog content. </Text>
                     <Flex
@@ -1827,7 +1826,6 @@ const Page = () => {
                         <Input
                           placeholder='Type to filter...'
                           leadingIcon={<MixerHorizontalIcon />}
-                          width='100%'
                         />
                       </Flex>
 
diff --git a/apps/www/src/app/not-found.tsx b/apps/www/src/app/not-found.tsx
index fedbdd91e..2f531616d 100644
--- a/apps/www/src/app/not-found.tsx
+++ b/apps/www/src/app/not-found.tsx
@@ -6,8 +6,7 @@ export default function NotFound() {
       align='center'
       justify='center'
       gap={9}
-      width='full'
-      style={{ height: '100vh' }}
+      style={{ width: '100%', height: '100vh' }}
     >
       <Headline size='t3' weight='medium' style={{ width: 'auto' }}>
         404
diff --git a/apps/www/src/components/datatable-demo.tsx b/apps/www/src/components/datatable-demo.tsx
index 1eccfd3c5..c2bcf7e9d 100644
--- a/apps/www/src/components/datatable-demo.tsx
+++ b/apps/www/src/components/datatable-demo.tsx
@@ -110,7 +110,7 @@ export const columns: DataTableColumnDef<Payment, unknown>[] = [
 const DataTableDemo = () => {
   const data = useMemo(() => generateData(100), []);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataTable
           data={data}
@@ -130,7 +130,7 @@ const DataTableVirtualizedDemo = () => {
   const data = useMemo(() => generateData(1000), []);
 
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataTable
           data={data}
@@ -153,8 +153,7 @@ const DataTableSearchDemo = () => {
     <Flex
       direction='column'
       gap={4}
-      width='full'
-      style={{ height: 400, padding: '20px' }}
+      style={{ width: '100%', height: 400, padding: '20px' }}
     >
       <DataTable
         data={data}
diff --git a/apps/www/src/components/dataview-demo.tsx b/apps/www/src/components/dataview-demo.tsx
index 66c741ad0..ee2d86d48 100644
--- a/apps/www/src/components/dataview-demo.tsx
+++ b/apps/www/src/components/dataview-demo.tsx
@@ -186,7 +186,7 @@ const defaultSort = { name: 'name', order: 'asc' as const };
 
 export function DataViewTableDemo() {
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView data={people} fields={fields} defaultSort={defaultSort}>
           <DataView.Toolbar>
@@ -202,7 +202,7 @@ export function DataViewTableDemo() {
 
 export function DataViewListDemo() {
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView data={people} fields={fields} defaultSort={defaultSort}>
           <DataView.Toolbar>
@@ -217,7 +217,7 @@ export function DataViewListDemo() {
 
 export function DataViewSearchDemo() {
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView data={people} fields={fields} defaultSort={defaultSort}>
           <DataView.Toolbar>
@@ -242,7 +242,7 @@ export function DataViewMultiViewDemo() {
     []
   );
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView
           data={people}
@@ -266,7 +266,7 @@ export function DataViewMultiViewDemo() {
 export function DataViewEmptyZeroDemo() {
   const [filtered, setFiltered] = useState(false);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView
           data={filtered ? [] : people}
@@ -296,7 +296,7 @@ export function DataViewEmptyZeroDemo() {
 
 export function DataViewCustomDemo() {
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <DataView data={people} fields={fields} defaultSort={defaultSort}>
         <DataView.Toolbar>
           <DataView.Filters />
@@ -386,7 +386,7 @@ function generatePeople(count: number): Person[] {
 export function DataViewVirtualizedDemo() {
   const data = useMemo(() => generatePeople(1000), []);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView data={data} fields={fields} defaultSort={defaultSort}>
           <DataView.Toolbar>
@@ -414,7 +414,7 @@ export function DataViewGroupingDemo() {
   // so the sticky group header visibly swaps as the user moves between teams.
   const groupedPeople = useMemo(() => generatePeople(60), []);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 320 }}>
         <DataView
           data={groupedPeople}
@@ -446,7 +446,7 @@ export function DataViewGroupingDemo() {
 export function DataViewVirtualizedGroupingDemo() {
   const data = useMemo(() => generatePeople(1500), []);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 360 }}>
         <DataView
           data={data}
@@ -478,7 +478,7 @@ export function DataViewVirtualizedGroupingDemo() {
 export function DataViewLoadingDemo() {
   const [isLoading, setIsLoading] = useState(true);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <Flex gap={3} align='center'>
         <Button
           size='small'
@@ -518,7 +518,7 @@ export function DataViewVirtualizedLoadingDemo() {
   const [isLoading, setIsLoading] = useState(true);
   const allPeople = useMemo(() => generatePeople(1000), []);
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <Flex gap={3} align='center'>
         <Button
           size='small'
@@ -577,7 +577,7 @@ export function DataViewPerViewFieldsDemo() {
     []
   );
   return (
-    <Flex direction='column' gap={4} width='full'>
+    <Flex direction='column' gap={4} style={{ width: '100%' }}>
       <div style={{ height: 400 }}>
         <DataView
           data={people}
diff --git a/apps/www/src/components/docs/footer.tsx b/apps/www/src/components/docs/footer.tsx
index 3fb6cd623..8abb405a8 100644
--- a/apps/www/src/components/docs/footer.tsx
+++ b/apps/www/src/components/docs/footer.tsx
@@ -10,7 +10,7 @@ type DocsFooterProps = {
 export default function DocsFooter({ url }: DocsFooterProps) {
   const neighbours = findNeighbour(docs.pageTree, url);
   return (
-    <Flex width='full' justify='between'>
+    <Flex style={{ width: '100%' }} justify='between'>
       {neighbours.previous ? (
         <Link href={neighbours.previous.url}>
           <Button
diff --git a/apps/www/src/components/docs/search.tsx b/apps/www/src/components/docs/search.tsx
index ff1dcb8d3..31755b7ab 100644
--- a/apps/www/src/components/docs/search.tsx
+++ b/apps/www/src/components/docs/search.tsx
@@ -197,7 +197,7 @@ export default function DocsSearch({ pageTree }: { pageTree: Root }) {
         <MagnifyingGlassIcon />
       </Dialog.Trigger>
       <Dialog.Content
-        width={512}
+        style={{ width: 512 }}
         showCloseButton={false}
         className={styles.searchContainer}
       >
diff --git a/apps/www/src/components/docs/sidebar.tsx b/apps/www/src/components/docs/sidebar.tsx
index 4ba98cc9d..49f0daa9d 100644
--- a/apps/www/src/components/docs/sidebar.tsx
+++ b/apps/www/src/components/docs/sidebar.tsx
@@ -106,7 +106,12 @@ export default function DocsSidebar({ pageTree, className }: Props) {
   return (
     <Sidebar open collapsible={false} className={cx(className, styles.sidebar)}>
       <Sidebar.Header className={styles.header}>
-        <Flex align='center' gap={3} justify='between' width='full'>
+        <Flex
+          align='center'
+          gap={3}
+          justify='between'
+          style={{ width: '100%' }}
+        >
           <Link href='/'>
             <Logo onlyWordmark />
           </Link>
diff --git a/apps/www/src/components/playground/alert-dialog-examples.tsx b/apps/www/src/components/playground/alert-dialog-examples.tsx
index 7923e9e0c..2939a53ff 100644
--- a/apps/www/src/components/playground/alert-dialog-examples.tsx
+++ b/apps/www/src/components/playground/alert-dialog-examples.tsx
@@ -11,7 +11,7 @@ export function AlertDialogExamples() {
           <AlertDialog.Trigger render={<Button color='danger' />}>
             Delete Item
           </AlertDialog.Trigger>
-          <AlertDialog.Content width='400px'>
+          <AlertDialog.Content style={{ width: '400px' }}>
             <AlertDialog.Header>
               <AlertDialog.Title>Are you sure?</AlertDialog.Title>
             </AlertDialog.Header>
@@ -37,7 +37,7 @@ export function AlertDialogExamples() {
           <AlertDialog.Trigger render={<Button variant='outline' />}>
             Discard Changes
           </AlertDialog.Trigger>
-          <AlertDialog.Content width={400}>
+          <AlertDialog.Content style={{ width: 400 }}>
             <AlertDialog.Body>
               <AlertDialog.Title>Unsaved Changes</AlertDialog.Title>
               <AlertDialog.Description>
diff --git a/apps/www/src/components/playground/callout-examples.tsx b/apps/www/src/components/playground/callout-examples.tsx
index 3449bfe59..62c0b6f27 100644
--- a/apps/www/src/components/playground/callout-examples.tsx
+++ b/apps/www/src/components/playground/callout-examples.tsx
@@ -14,7 +14,7 @@ export function CalloutExamples() {
         <Callout type='accent'>Accent Callout</Callout>
         <Callout type='attention'>Attention Callout</Callout>
         <Callout type='normal'>Normal Callout</Callout>
-        <Callout type='success' outline>
+        <Callout type='success' variant='outline'>
           With Outline Callout
         </Callout>
         <Callout dismissible onDismiss={() => alert('Dismissed!')}>
diff --git a/apps/www/src/components/playground/dialog-examples.tsx b/apps/www/src/components/playground/dialog-examples.tsx
index dbeaadafd..9ced737aa 100644
--- a/apps/www/src/components/playground/dialog-examples.tsx
+++ b/apps/www/src/components/playground/dialog-examples.tsx
@@ -10,7 +10,7 @@ export function DialogExamples() {
         <Dialog>
           <Dialog.Trigger render={<Button />}>Dialog</Dialog.Trigger>
           <Dialog.Content
-            width='400px'
+            style={{ width: '400px' }}
             overlay={{
               blur: true,
               className: 'custom-overlay',
@@ -28,7 +28,7 @@ export function DialogExamples() {
           <Dialog.Trigger render={<Button variant='outline' />}>
             Open Dialog
           </Dialog.Trigger>
-          <Dialog.Content width={600} showCloseButton={false}>
+          <Dialog.Content style={{ width: 600 }} showCloseButton={false}>
             <Dialog.Title>No Close Button</Dialog.Title>
             <Dialog.Description>
               This dialog doesn't show the close button.
diff --git a/apps/www/src/components/playground/list-examples.tsx b/apps/www/src/components/playground/list-examples.tsx
index ec49ebe33..20bcfe25e 100644
--- a/apps/www/src/components/playground/list-examples.tsx
+++ b/apps/www/src/components/playground/list-examples.tsx
@@ -10,15 +10,15 @@ export function ListExamples() {
         <List>
           <List.Header>User Information</List.Header>
           <List.Item align='center'>
-            <List.Label minWidth='88px'>Status</List.Label>
+            <List.Label style={{ minWidth: '88px' }}>Status</List.Label>
             <List.Value>Active</List.Value>
           </List.Item>
           <List.Item align='center'>
-            <List.Label minWidth='88px'>Type</List.Label>
+            <List.Label style={{ minWidth: '88px' }}>Type</List.Label>
             <List.Value>Premium Account</List.Value>
           </List.Item>
           <List.Item align='center'>
-            <List.Label minWidth='88px'>Created</List.Label>
+            <List.Label style={{ minWidth: '88px' }}>Created</List.Label>
             <List.Value>April 24, 2024</List.Value>
           </List.Item>
         </List>
diff --git a/apps/www/src/components/playground/text-area-examples.tsx b/apps/www/src/components/playground/text-area-examples.tsx
index dac1e1598..d71e4c69d 100644
--- a/apps/www/src/components/playground/text-area-examples.tsx
+++ b/apps/www/src/components/playground/text-area-examples.tsx
@@ -13,7 +13,10 @@ export function TextAreaExamples() {
         <Field label='Error TextArea' error='This field has an error'>
           <TextArea placeholder='Enter your text here' />
         </Field>
-        <TextArea placeholder='Without Field wrapper' width='300px' />
+        <TextArea
+          placeholder='Without Field wrapper'
+          style={{ width: '300px' }}
+        />
       </Flex>
     </PlaygroundLayout>
   );
diff --git a/apps/www/src/components/theme-customiser/theme-customiser.tsx b/apps/www/src/components/theme-customiser/theme-customiser.tsx
index 7b6d28958..17ecef6d7 100644
--- a/apps/www/src/components/theme-customiser/theme-customiser.tsx
+++ b/apps/www/src/components/theme-customiser/theme-customiser.tsx
@@ -125,7 +125,7 @@ export default function ThemeCustomizer() {
           </div>
         </Radio.Group>
       </div>
-      <Button onClick={handleCopyTheme} type='button' width='100%'>
+      <Button onClick={handleCopyTheme} type='button' style={{ width: '100%' }}>
         Copy Theme Options
       </Button>
     </div>
diff --git a/apps/www/src/content/docs/components/alert-dialog/props.ts b/apps/www/src/content/docs/components/alert-dialog/props.ts
index 9bca5916d..0c3d626f1 100644
--- a/apps/www/src/content/docs/components/alert-dialog/props.ts
+++ b/apps/www/src/content/docs/components/alert-dialog/props.ts
@@ -7,9 +7,6 @@ export interface AlertDialogProps {
 }
 
 export interface AlertDialogContentProps {
-  /** Controls alert dialog width */
-  width?: string | number;
-
   /**
    * Toggle nested dialog animation (scaling and translation)
    * @default true
diff --git a/apps/www/src/content/docs/components/button/props.ts b/apps/www/src/content/docs/components/button/props.ts
index 682e543c2..95ff545d5 100644
--- a/apps/www/src/content/docs/components/button/props.ts
+++ b/apps/www/src/content/docs/components/button/props.ts
@@ -37,12 +37,6 @@ export type ButtonProps = {
   /** Icon element to display after button text */
   trailingIcon?: React.ReactNode;
 
-  /** Custom maximum width for the button */
-  maxWidth?: string | number;
-
-  /** Custom width for the button */
-  width?: string | number;
-
   /**
    * Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>).
    * Defaults to false when render prop is provided.
diff --git a/apps/www/src/content/docs/components/callout/demo.ts b/apps/www/src/content/docs/components/callout/demo.ts
index 55868aee7..dcf1cc170 100644
--- a/apps/www/src/content/docs/components/callout/demo.ts
+++ b/apps/www/src/content/docs/components/callout/demo.ts
@@ -34,9 +34,10 @@ export const playground = {
     icon: {
       type: 'icon'
     },
-    outline: {
-      type: 'checkbox',
-      defaultValue: false
+    variant: {
+      type: 'select',
+      options: ['solid', 'outline'],
+      defaultValue: 'solid'
     },
     highContrast: {
       type: 'checkbox',
@@ -45,9 +46,6 @@ export const playground = {
     dismissible: {
       type: 'checkbox',
       defaultValue: false
-    },
-    width: {
-      type: 'text'
     }
   },
   getCode
@@ -71,7 +69,7 @@ export const outlineDemo = {
   code: `
   <Flex gap={5} direction="column">
     <Callout type="success">Without Outline Callout</Callout>
-    <Callout type="success" outline>With Outline Callout</Callout>
+    <Callout type="success" variant="outline">With Outline Callout</Callout>
   </Flex>`
 };
 
@@ -99,8 +97,3 @@ export const actionDemo = {
     A short message to attract user's attention
   </Callout>`
 };
-
-export const widthDemo = {
-  type: 'code',
-  code: `<Callout type="success" width={500}>A short message to attract user's attention</Callout>`
-};
diff --git a/apps/www/src/content/docs/components/callout/index.mdx b/apps/www/src/content/docs/components/callout/index.mdx
index 3e0fe9c86..1e3bca24b 100644
--- a/apps/www/src/content/docs/components/callout/index.mdx
+++ b/apps/www/src/content/docs/components/callout/index.mdx
@@ -11,7 +11,6 @@ import {
   highContrastDemo,
   dismissibleDemo,
   actionDemo,
-  widthDemo,
 } from "./demo.ts";
 
 <Demo data={playground} />
@@ -66,12 +65,6 @@ The Callout component can include an action button:
 
 <Demo data={actionDemo} />
 
-### Custom Width
-
-The Callout component supports custom width:
-
-<Demo data={widthDemo} />
-
 ## Accessibility
 
 The Callout component includes appropriate ARIA attributes for accessibility:
diff --git a/apps/www/src/content/docs/components/callout/props.ts b/apps/www/src/content/docs/components/callout/props.ts
index 606c2d8a7..72c3696cb 100644
--- a/apps/www/src/content/docs/components/callout/props.ts
+++ b/apps/www/src/content/docs/components/callout/props.ts
@@ -13,10 +13,10 @@ export interface CalloutProps {
     | 'normal';
 
   /**
-   * Whether to show an outline border
-   * @defaultValue false
+   * Visual style variant.
+   * @defaultValue "solid"
    */
-  outline?: boolean;
+  variant?: 'solid' | 'outline';
 
   /**
    * Whether to use high contrast colors
@@ -48,12 +48,6 @@ export interface CalloutProps {
   /** Text content of the callout */
   children?: React.ReactNode;
 
-  /**
-   * Custom width for the callout
-   * @defaultValue 400
-   */
-  width?: string | number;
-
   /** Additional CSS class names */
   className?: string;
 }
diff --git a/apps/www/src/content/docs/components/dialog/demo.ts b/apps/www/src/content/docs/components/dialog/demo.ts
index 5b55d2b94..f20c75d05 100644
--- a/apps/www/src/content/docs/components/dialog/demo.ts
+++ b/apps/www/src/content/docs/components/dialog/demo.ts
@@ -8,7 +8,7 @@ export const getCode = (props: { title?: string; description?: string }) => {
         Basic Dialog
       </Dialog.Trigger>
       <Dialog.Content
-        width={300}
+        style={{ width: 300 }}
         ariaLabel="Basic Dialog"
         ariaDescription="A simple dialog example"
       >
@@ -51,7 +51,7 @@ export const controlledDemo = {
         <Dialog.Trigger render={<Button />}>
           Controlled Dialog
         </Dialog.Trigger>
-        <Dialog.Content width={600}>
+        <Dialog.Content style={{ width: 600 }}>
           <Dialog.Body>
             <Dialog.Title>Controlled State</Dialog.Title>
             <Dialog.Description>
@@ -72,7 +72,7 @@ export const customDemo = {
       Styled Dialog
     </Dialog.Trigger>
     <Dialog.Content
-      width="400px"
+      style={{ width: '400px' }}
       overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'oklch(0 0 0 / 0.5)' } }}
     >
       <Dialog.Body>
@@ -93,7 +93,7 @@ export const onlyHeaderDemo = {
       Only Header and Body
     </Dialog.Trigger>
     <Dialog.Content
-      width="400px"
+      style={{ width: '400px' }}
       overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'oklch(0 0 0 / 0.5)' } }}
     >
       <Dialog.Header>
@@ -116,7 +116,7 @@ export const onlyFooterDemo = {
       Only Footer and Body
     </Dialog.Trigger>
     <Dialog.Content
-      width="400px"
+      style={{ width: '400px' }}
       overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'oklch(0 0 0 / 0.5)' } }}
     >
       <Dialog.Body>
@@ -146,7 +146,7 @@ export const nestedDemo = {
           <Dialog.Trigger render={<Button />}>
             Open Parent Dialog
           </Dialog.Trigger>
-          <Dialog.Content width={400}>
+          <Dialog.Content style={{ width: 400 }}>
             <Dialog.Header>
               <Dialog.Title>Parent Dialog</Dialog.Title>
             </Dialog.Header>
@@ -158,7 +158,7 @@ export const nestedDemo = {
                 <Dialog.Trigger render={<Button />}>
                   Open Nested Dialog
                 </Dialog.Trigger>
-                <Dialog.Content width={400}>
+                <Dialog.Content style={{ width: 400 }}>
                   <Dialog.Header>
                     <Dialog.Title>Nested Dialog</Dialog.Title>
                   </Dialog.Header>
diff --git a/apps/www/src/content/docs/components/dialog/props.ts b/apps/www/src/content/docs/components/dialog/props.ts
index b82638044..0c1905183 100644
--- a/apps/www/src/content/docs/components/dialog/props.ts
+++ b/apps/www/src/content/docs/components/dialog/props.ts
@@ -13,9 +13,6 @@ export interface DialogProps {
 }
 
 export interface DialogContentProps {
-  /** Controls dialog width */
-  width?: string | number;
-
   /**
    * Controls whether to show the close button
    * @default true
diff --git a/apps/www/src/content/docs/components/flex/props.ts b/apps/www/src/content/docs/components/flex/props.ts
index 04ae89156..3a5d2f529 100644
--- a/apps/www/src/content/docs/components/flex/props.ts
+++ b/apps/www/src/content/docs/components/flex/props.ts
@@ -34,11 +34,6 @@ export interface FlexProps {
   /** Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed) */
   direction?: 'row' | 'rowReverse' | 'column' | 'columnReverse';
 
-  /**
-   * Sets the width of the flex container.
-   */
-  width?: 'full';
-
   /**
    * Allows rendering the flex container as a different element.
    * Accepts a React element or a function that receives props and returns an element.
diff --git a/apps/www/src/content/docs/components/input/demo.ts b/apps/www/src/content/docs/components/input/demo.ts
index f03b99db2..5becc9c14 100644
--- a/apps/www/src/content/docs/components/input/demo.ts
+++ b/apps/www/src/content/docs/components/input/demo.ts
@@ -15,7 +15,6 @@ export const playground = {
     trailingIcon: { type: 'icon', initialValue: '' },
     prefix: { type: 'text', initialValue: '' },
     suffix: { type: 'text', initialValue: '' },
-    width: { type: 'text', initialValue: '560px' },
     size: {
       type: 'select',
       options: ['small', 'large'],
@@ -27,7 +26,7 @@ export const playground = {
 
 export const basicDemo = {
   type: 'code',
-  code: `<Input placeholder="Enter text" width="560px" />`
+  code: `<Input placeholder="Enter text" />`
 };
 
 export const withFieldDemo = {
@@ -51,7 +50,6 @@ export const prefixDemo = {
   placeholder="0.00"
   prefix="$"
   suffix="USD"
-  width="560px"
 />`
 };
 
@@ -61,7 +59,6 @@ export const iconDemo = {
   placeholder="Enter text"
   leadingIcon={<Home size={16}/>}
   trailingIcon={<Info size={16}/>}
-  width="560px"
 />`
 };
 
@@ -70,7 +67,6 @@ export const disabledDemo = {
   code: `<Input
   placeholder="Enter text"
   disabled
-  width="560px"
 />`
 };
 
@@ -79,7 +75,6 @@ export const disabledChipsDemo = {
   code: `<Input
   placeholder="Type and press Enter..."
   disabled
-  width="560px"
   chips={[
     { label: "Tag1", onRemove: () => console.log("Remove Tag1") },
     { label: "Tag2", onRemove: () => console.log("Remove Tag2") }
@@ -87,14 +82,6 @@ export const disabledChipsDemo = {
 />`
 };
 
-export const widthDemo = {
-  type: 'code',
-  code: `<Input
-  placeholder="Enter text"
-  width="300px"
-/>`
-};
-
 export const sizeDemo = {
   type: 'code',
   code: `<Flex direction="column" gap={5}>
@@ -170,7 +157,6 @@ export const interactiveChipDemo = {
 
       <Input
         placeholder="Type and press Enter..."
-        width="560px"
         value={input}
         onChange={(e) => setInput(e.target.value)}
         onKeyDown={(e) => {
diff --git a/apps/www/src/content/docs/components/input/index.mdx b/apps/www/src/content/docs/components/input/index.mdx
index 756c8fca1..3e6e8ade7 100644
--- a/apps/www/src/content/docs/components/input/index.mdx
+++ b/apps/www/src/content/docs/components/input/index.mdx
@@ -11,7 +11,6 @@ import {
   iconDemo,
   disabledDemo,
   disabledChipsDemo,
-  widthDemo,
   sizeDemo,
   sizeChipDemo,
   interactiveChipDemo,
@@ -109,12 +108,6 @@ When disabled, chips become non-interactive and their dismiss buttons are hidden
 
 <Demo data={disabledChipsDemo} />
 
-### Custom Width
-
-Input with custom width.
-
-<Demo data={widthDemo} />
-
 ### Size Variants
 
 Input comes in two sizes: small (24px) and large (32px).
diff --git a/apps/www/src/content/docs/components/input/props.ts b/apps/www/src/content/docs/components/input/props.ts
index d8e337a4a..71f686200 100644
--- a/apps/www/src/content/docs/components/input/props.ts
+++ b/apps/www/src/content/docs/components/input/props.ts
@@ -20,9 +20,6 @@ export interface InputProps {
   /** Text or symbol to show after input value. */
   suffix?: string;
 
-  /** Custom width for the input. */
-  width?: string | number;
-
   /**
    * Array of chip objects with label and optional onRemove function.
    */
diff --git a/apps/www/src/content/docs/components/list/demo.ts b/apps/www/src/content/docs/components/list/demo.ts
index fa6654839..acfa3cab1 100644
--- a/apps/www/src/content/docs/components/list/demo.ts
+++ b/apps/www/src/content/docs/components/list/demo.ts
@@ -7,15 +7,15 @@ export const preview = {
     <List>
       <List.Header>User Information</List.Header>
       <List.Item align="center">
-        <List.Label minWidth="88px">Status</List.Label>
+        <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
         <List.Value>Active</List.Value>
       </List.Item>
       <List.Item align="center">
-        <List.Label minWidth="88px">Type</List.Label>
+        <List.Label style={{ minWidth: "88px" }}>Type</List.Label>
         <List.Value>Premium Account</List.Value>
       </List.Item>
       <List.Item align="center">
-        <List.Label minWidth="88px">Created</List.Label>
+        <List.Label style={{ minWidth: "88px" }}>Created</List.Label>
         <List.Value>April 24, 2024</List.Value>
       </List.Item>
     </List>
@@ -25,10 +25,10 @@ export const preview = {
 export const basicDemo = {
   type: 'code',
   code: `
-  <List maxWidth="600px">
+  <List>
   <List.Header>User Information</List.Header>
   <List.Item align="center">
-    <List.Label minWidth="88px">Status</List.Label>
+    <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
     <List.Value>Active</List.Value>
   </List.Item>
 </List>;
diff --git a/apps/www/src/content/docs/components/list/props.ts b/apps/www/src/content/docs/components/list/props.ts
index 223b321a8..7fd35a1eb 100644
--- a/apps/www/src/content/docs/components/list/props.ts
+++ b/apps/www/src/content/docs/components/list/props.ts
@@ -1,7 +1,4 @@
 export interface ListRootProps {
-  /** Maximum width of the list container. */
-  maxWidth?: string | number;
-
   /** Additional CSS class names. */
   className?: string;
 }
@@ -35,9 +32,6 @@ export interface ListItemProps {
 }
 
 export interface ListLabelProps {
-  /** Minimum width of the label. */
-  minWidth?: string;
-
   /** Content to be displayed in the label. */
   children?: React.ReactNode;
 
diff --git a/apps/www/src/content/docs/components/radio/demo.ts b/apps/www/src/content/docs/components/radio/demo.ts
index 4a9f6b911..8383a55b7 100644
--- a/apps/www/src/content/docs/components/radio/demo.ts
+++ b/apps/www/src/content/docs/components/radio/demo.ts
@@ -196,7 +196,7 @@ export const formDemo = {
         <label htmlFor="yp">Yearly Plan</label>
       </Flex>
     </Radio.Group>
-    <Button type="submit" width="100%">Submit</Button>
+    <Button type="submit" style={{ width: "100%" }}>Submit</Button>
   </Flex>
 </form>`
 };
diff --git a/apps/www/src/content/docs/components/sidepanel/demo.ts b/apps/www/src/content/docs/components/sidepanel/demo.ts
index 843c97021..0b1cf1bdd 100644
--- a/apps/www/src/content/docs/components/sidepanel/demo.ts
+++ b/apps/www/src/content/docs/components/sidepanel/demo.ts
@@ -10,15 +10,15 @@ export const preview = {
           <List>
             <List.Header>User Information</List.Header>
             <List.Item align="center">
-              <List.Label minWidth="88px">Status</List.Label>
+              <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
               <List.Value>Active</List.Value>
             </List.Item>
             <List.Item align="center">
-              <List.Label minWidth="88px">Type</List.Label>
+              <List.Label style={{ minWidth: "88px" }}>Type</List.Label>
               <List.Value>Premium Account</List.Value>
             </List.Item>
             <List.Item align="center">
-              <List.Label minWidth="88px">Created</List.Label>
+              <List.Label style={{ minWidth: "88px" }}>Created</List.Label>
               <List.Value>April 24, 2024</List.Value>
             </List.Item>
           </List>
@@ -27,15 +27,15 @@ export const preview = {
           <List>
             <List.Header>User Information</List.Header>
             <List.Item align="center">
-              <List.Label minWidth="88px">Status</List.Label>
+              <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
               <List.Value>Active</List.Value>
             </List.Item>
             <List.Item align="center">
-              <List.Label minWidth="88px">Type</List.Label>
+              <List.Label style={{ minWidth: "88px" }}>Type</List.Label>
               <List.Value>Premium Account</List.Value>
             </List.Item>
             <List.Item align="center">
-              <List.Label minWidth="88px">Created</List.Label>
+              <List.Label style={{ minWidth: "88px" }}>Created</List.Label>
               <List.Value>April 24, 2024</List.Value>
             </List.Item>
           </List>
@@ -53,7 +53,7 @@ export const basicDemo = {
     <List>
       <List.Header>User Information</List.Header>
       <List.Item align="center">
-        <List.Label minWidth="88px">Status</List.Label>
+        <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
         <List.Value>Active</List.Value>
       </List.Item>
     </List>
@@ -74,7 +74,7 @@ export const positionDemo = {
       <List>
         <List.Header>User Information</List.Header>
         <List.Item align="center">
-          <List.Label minWidth="88px">Status</List.Label>
+          <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
           <List.Value>Active</List.Value>
         </List.Item>
       </List>
@@ -91,7 +91,7 @@ export const positionDemo = {
       <List>
         <List.Header>User Information</List.Header>
         <List.Item align="center">
-          <List.Label minWidth="88px">Status</List.Label>
+          <List.Label style={{ minWidth: "88px" }}>Status</List.Label>
           <List.Value>Active</List.Value>
         </List.Item>
       </List>
diff --git a/apps/www/src/content/docs/components/textarea/demo.ts b/apps/www/src/content/docs/components/textarea/demo.ts
index 3d1e0d037..c0db36fab 100644
--- a/apps/www/src/content/docs/components/textarea/demo.ts
+++ b/apps/www/src/content/docs/components/textarea/demo.ts
@@ -28,10 +28,6 @@ export const playground = {
       type: 'number',
       defaultValue: 3,
       min: 1
-    },
-    width: {
-      type: 'text',
-      defaultValue: '400px'
     }
   },
   getCode
@@ -111,11 +107,3 @@ export const rowsDemo = {
   <TextArea placeholder="6 rows" rows={6} />
 </Flex>`
 };
-
-export const widthDemo = {
-  type: 'code',
-  code: `<TextArea
-  width="300px"
-  placeholder="This textarea is 300px wide"
-/>`
-};
diff --git a/apps/www/src/content/docs/components/textarea/index.mdx b/apps/www/src/content/docs/components/textarea/index.mdx
index 81f8b0f01..de8b63a15 100644
--- a/apps/www/src/content/docs/components/textarea/index.mdx
+++ b/apps/www/src/content/docs/components/textarea/index.mdx
@@ -12,7 +12,6 @@ import {
   sizeDemo,
   variantDemo,
   rowsDemo,
-  widthDemo,
   withFieldDemo,
 } from "./demo.ts";
 
@@ -88,12 +87,6 @@ TextArea defaults to 3 visible rows. Use the `rows` prop to adjust.
 
 <Demo data={rowsDemo} />
 
-### Custom Width
-
-TextArea with custom width specification.
-
-<Demo data={widthDemo} />
-
 ## Accessibility
 
 - Use with [Field](/docs/components/field) for automatic label association and error linking
diff --git a/apps/www/src/content/docs/components/textarea/props.ts b/apps/www/src/content/docs/components/textarea/props.ts
index 8016591f8..c04776396 100644
--- a/apps/www/src/content/docs/components/textarea/props.ts
+++ b/apps/www/src/content/docs/components/textarea/props.ts
@@ -17,12 +17,6 @@ export interface TextAreaProps {
   /** Placeholder text. */
   placeholder?: string;
 
-  /**
-   * Custom width for the textarea.
-   * @defaultValue "100%"
-   */
-  width?: string | number;
-
   /**
    * Number of visible text rows.
    * @defaultValue 3
diff --git a/docs/V1-migration.md b/docs/V1-migration.md
index c3298a467..5de604973 100644
--- a/docs/V1-migration.md
+++ b/docs/V1-migration.md
@@ -16,6 +16,7 @@ This guide covers all breaking changes when upgrading from the last stable Radix
     - [CSS Variables](#css-variables)
       - [Overlay Tokens](#overlay-tokens)
     - [Form Field Pattern](#form-field-pattern)
+    - [One-off styling props removed](#one-off-styling-props-removed)
   - [Component Migration](#component-migration)
     - [Accordion](#accordion)
       - [New Props](#new-props)
@@ -255,6 +256,49 @@ The `Field` component also provides context so that child controls (Input, TextA
 
 See [Input (formerly InputField)](#input-formerly-inputfield) and [TextArea](#textarea) for full migration details.
 
+### One-off styling props removed
+
+Several components exposed bespoke layout props (`width`, `maxWidth`, `minWidth`) and a boolean `outline` toggle. These are removed — handle layout via standard `style` / `className` (or a sized wrapper) instead. Each component forwards those to the underlying element. Defaults that were previously applied inline (e.g. `width: 100%`) are now provided by the component's own CSS, so **default rendering is unchanged** — only explicit prop usage needs migrating.
+
+> **Prefer `className` over inline `style`.** Where the element already has (or can reuse) a CSS class, apply the layout there via `className` rather than an inline `style` object — it keeps styling in your stylesheet and reuses existing rules. The `style={{ … }}` form shown below is the quickest 1:1 swap; reach for it only for genuinely one-off or dynamic values.
+
+| Component | Removed prop | Migrate to |
+|-----------|--------------|------------|
+| `Callout` | `width` | `style={{ width }}` |
+| `Callout` | `outline` (boolean) | `variant="outline"` (see below) |
+| `Button` | `width`, `maxWidth` | `style={{ width, maxWidth }}` |
+| `Input` | `width` | `classNames={{ container }}` or a sized wrapper (defaults to full width) |
+| `TextArea` | `width` | `style={{ width }}` (defaults to full width) |
+| `List` | `maxWidth` | `style={{ maxWidth }}` |
+| `List.Label` | `minWidth` | `style={{ minWidth }}` |
+| `Flex` | `width="full"` | `style={{ width: '100%' }}` |
+| `Dialog.Content` | `width` | `style={{ width }}` (default max-width unchanged) |
+| `AlertDialog.Content` | `width` | `style={{ width }}` |
+
+```tsx
+// Before
+<Button width="100%" />
+<Flex width="full" />
+<Dialog.Content width={500}>…</Dialog.Content>
+<List maxWidth="600px"><List.Label minWidth="88px">…</List.Label></List>
+
+// After
+<Button style={{ width: '100%' }} />
+<Flex style={{ width: '100%' }} />
+<Dialog.Content style={{ width: 500 }}>…</Dialog.Content>
+<List style={{ maxWidth: '600px' }}><List.Label style={{ minWidth: '88px' }}>…</List.Label></List>
+```
+
+**Callout `outline` → `variant`.** The boolean `outline` prop becomes a `variant` prop (`'solid' | 'outline'`, default `'solid'`). It stays orthogonal to `type`, so the combination still works:
+
+```tsx
+// Before
+<Callout type="success" outline>Saved</Callout>
+
+// After
+<Callout type="success" variant="outline">Saved</Callout>
+```
+
 ---
 
 ## Component Migration
@@ -935,7 +979,7 @@ import { Command, Button } from '@raystack/apsara';
 ### Dialog
 
 1. **`DialogContent` props rewritten:**
-   - Removed: `ariaLabel`, `ariaDescription`, `overlayBlur`, `overlayClassName`, `overlayStyle`, `scrollableOverlay`
+   - Removed: `ariaLabel`, `ariaDescription`, `overlayBlur`, `overlayClassName`, `overlayStyle`, `scrollableOverlay`, `width` (use `style={{ width }}`)
    - New: `showCloseButton` (default `true`), `overlay` (object with `blur?: boolean`, `className`, `style`), `showNestedAnimation`
 
 2. **CloseButton is now auto-rendered** inside Content. Remove manual `<Dialog.CloseButton />` from headers. Pass `showCloseButton={false}` to suppress.
@@ -975,7 +1019,7 @@ import { Command, Button } from '@raystack/apsara';
 <Dialog open={open} onOpenChange={setOpen}>
   <Dialog.Trigger render={<Button />}>Open Settings</Dialog.Trigger>
   <Dialog.Content
-    width="500px"
+    style={{ width: 500 }}
     aria-label="Settings"
     overlay={{
       blur: true,
@@ -1364,7 +1408,9 @@ The `render` prop also supports render functions for full control:
 </Field>
 ```
 
-Unchanged props: `size`, `variant`, `disabled`, `leadingIcon`, `trailingIcon`, `prefix`, `suffix`, `width`, `chips`, `maxChipsVisible`, `containerRef`, and all native `<input>` attributes.
+Unchanged props: `size`, `variant`, `disabled`, `leadingIcon`, `trailingIcon`, `prefix`, `suffix`, `chips`, `maxChipsVisible`, `containerRef`, and all native `<input>` attributes.
+
+> **Removed:** `width` — use `classNames={{ container }}` or a sized wrapper. See [One-off styling props removed](#one-off-styling-props-removed).
 
 **Related API changes:**
 
@@ -2075,11 +2121,13 @@ If you relied on the previous heavier weights, bold-looking text now renders as
 
 // After
 <Field label="Bio" description="Tell us about yourself" error={hasError ? "This field is required" : undefined} required={false}>
-  <TextArea placeholder="Write something..." width="400px" />
+  <TextArea placeholder="Write something..." style={{ width: 400 }} />
 </Field>
 ```
 
-Unchanged props: `disabled`, `placeholder`, `width`, `value`, `onChange`, `rows`, and all native `<textarea>` attributes.
+Unchanged props: `disabled`, `placeholder`, `value`, `onChange`, `rows`, and all native `<textarea>` attributes.
+
+> **Removed:** `width` — use `style={{ width }}`. The default `100%` width is now provided by CSS. See [One-off styling props removed](#one-off-styling-props-removed).
 
 #### New Features
 
diff --git a/packages/raystack/components/alert-dialog/alert-dialog-content.tsx b/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
index d3f807e72..ffb238110 100644
--- a/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
+++ b/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
@@ -7,7 +7,6 @@ import styles from '../dialog/dialog.module.css';
 export interface AlertDialogContentProps
   extends AlertDialogPrimitive.Popup.Props {
   overlay?: AlertDialogPrimitive.Backdrop.Props & { blur?: boolean };
-  width?: string | number;
   /**
    * Toggles nested dialog animation (scaling and translation)
    * `@default` true
@@ -19,8 +18,6 @@ export const AlertDialogContent = ({
   className,
   children,
   overlay,
-  width,
-  style,
   showNestedAnimation = true,
   ...props
 }: AlertDialogContentProps) => {
@@ -41,7 +38,6 @@ export const AlertDialogContent = ({
             showNestedAnimation && styles.showNestedAnimation,
             className
           )}
-          style={{ width, ...style }}
           {...props}
         >
           {children}
diff --git a/packages/raystack/components/button/button.tsx b/packages/raystack/components/button/button.tsx
index b4571146e..4c5c8ccb9 100644
--- a/packages/raystack/components/button/button.tsx
+++ b/packages/raystack/components/button/button.tsx
@@ -130,8 +130,6 @@ type ButtonProps = VariantProps<typeof button> &
     loaderText?: ReactNode;
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
-    maxWidth?: string | number;
-    width?: string | number;
     style?: React.CSSProperties;
   };
 
@@ -145,16 +143,11 @@ export const Button = ({
   loaderText,
   leadingIcon,
   trailingIcon,
-  maxWidth,
-  width,
-  style = {},
   children,
   render,
   ...props
 }: ButtonProps) => {
   const isLoaderOnly = loading && !loaderText;
-  const widthStyle = { maxWidth, width };
-  const buttonStyle = { ...widthStyle, ...style };
 
   return (
     <ButtonPrimitive
@@ -163,7 +156,6 @@ export const Button = ({
         isLoaderOnly && getLoaderOnlyClass(size)
       )}
       disabled={disabled}
-      style={buttonStyle}
       render={render}
       nativeButton={!render}
       focusableWhenDisabled={loading}
diff --git a/packages/raystack/components/callout/__tests__/callout.test.tsx b/packages/raystack/components/callout/__tests__/callout.test.tsx
index 20debd031..f93e860eb 100644
--- a/packages/raystack/components/callout/__tests__/callout.test.tsx
+++ b/packages/raystack/components/callout/__tests__/callout.test.tsx
@@ -75,7 +75,7 @@ describe('Callout', () => {
     });
 
     it('renders outline variant', () => {
-      render(<Callout outline>Test message</Callout>);
+      render(<Callout variant='outline'>Test message</Callout>);
 
       const callout = screen.getByRole('status');
       expect(callout).toHaveClass(styles['callout-outline']);
@@ -171,28 +171,7 @@ describe('Callout', () => {
   });
 
   describe('Styling and Layout', () => {
-    it('applies custom width as number', () => {
-      render(<Callout width={300}>Custom width message</Callout>);
-
-      const callout = screen.getByRole('status');
-      expect(callout).toHaveStyle({ width: '300px' });
-    });
-
-    it('applies custom width as string', () => {
-      render(<Callout width='50%'>Custom width message</Callout>);
-
-      const callout = screen.getByRole('status');
-      expect(callout).toHaveStyle({ width: '50%' });
-    });
-
-    it('applies width={0} instead of dropping it', () => {
-      render(<Callout width={0}>Zero width message</Callout>);
-
-      const callout = screen.getByRole('status');
-      expect(callout).toHaveStyle({ width: '0px' });
-    });
-
-    it('falls back to style.width when no width prop is given', () => {
+    it('forwards style to the callout', () => {
       render(
         <Callout style={{ width: '200px' }}>Styled width message</Callout>
       );
diff --git a/packages/raystack/components/callout/callout.tsx b/packages/raystack/components/callout/callout.tsx
index bf88830a0..f5f587e47 100644
--- a/packages/raystack/components/callout/callout.tsx
+++ b/packages/raystack/components/callout/callout.tsx
@@ -23,12 +23,16 @@ const callout = cva(styles.callout, {
       attention: styles['callout-attention'],
       normal: styles['callout-normal']
     },
-    outline: {
-      true: styles['callout-outline']
+    variant: {
+      solid: '',
+      outline: styles['callout-outline']
     },
     highContrast: {
       true: styles['callout-high-contrast']
     }
+  },
+  defaultVariants: {
+    variant: 'solid'
   }
 });
 
@@ -44,7 +48,6 @@ export interface CalloutProps
    * removal (the callout stays mounted). When omitted, the callout hides itself.
    */
   onDismiss?: () => void;
-  width?: string | number;
   style?: CSSProperties;
   icon?: ReactNode;
 }
@@ -52,14 +55,12 @@ export interface CalloutProps
 export function Callout({
   className,
   type = 'grey',
-  outline,
+  variant,
   highContrast,
   children,
   action,
   dismissible,
   onDismiss,
-  width,
-  style,
   icon = <InfoCircledIcon />,
   ...props
 }: CalloutProps) {
@@ -72,19 +73,11 @@ export function Callout({
   };
   if (dismissed) return null;
 
-  // Resolve up front so `width={0}` is kept (a `width && …` guard would drop it).
-  const resolvedWidth = typeof width === 'number' ? `${width}px` : width;
-  const combinedStyle = {
-    ...style,
-    width: resolvedWidth ?? style?.width
-  };
-
   const role = type === 'alert' ? 'alert' : 'status';
 
   return (
     <div
-      className={callout({ type, outline, highContrast, className })}
-      style={combinedStyle}
+      className={callout({ type, variant, highContrast, className })}
       role={role}
       aria-live={type === 'alert' ? 'assertive' : 'polite'}
       {...props}
diff --git a/packages/raystack/components/dialog/dialog-content.tsx b/packages/raystack/components/dialog/dialog-content.tsx
index 4d9ea7c2a..0610e4dd5 100644
--- a/packages/raystack/components/dialog/dialog-content.tsx
+++ b/packages/raystack/components/dialog/dialog-content.tsx
@@ -8,7 +8,6 @@ import { CloseButton } from './dialog-misc';
 export interface DialogContentProps extends DialogPrimitive.Popup.Props {
   showCloseButton?: boolean;
   overlay?: DialogPrimitive.Backdrop.Props & { blur?: boolean };
-  width?: string | number;
   /**
    * Toggles nested dialog animation (scaling and translation)
    * `@default` true
@@ -21,8 +20,6 @@ export function DialogContent({
   children,
   showCloseButton = true,
   overlay,
-  width,
-  style,
   showNestedAnimation = true,
   ...props
 }: DialogContentProps) {
@@ -43,7 +40,6 @@ export function DialogContent({
             showNestedAnimation && styles.showNestedAnimation,
             className
           )}
-          style={{ width, ...style }}
           {...props}
         >
           {children}
diff --git a/packages/raystack/components/filter-chip/__tests__/filter-chip.test.tsx b/packages/raystack/components/filter-chip/__tests__/filter-chip.test.tsx
index 2bbfcbe3f..3c78a59ec 100644
--- a/packages/raystack/components/filter-chip/__tests__/filter-chip.test.tsx
+++ b/packages/raystack/components/filter-chip/__tests__/filter-chip.test.tsx
@@ -199,26 +199,6 @@ describe('FilterChip', () => {
     });
   });
 
-  describe('Content-fit width', () => {
-    // The value hug lives on the input (`field-sizing` in `.chip input`);
-    // these pin the containers to the fluid width that lets the input shrink.
-    it('keeps the string input container fluid so the input can shrink', () => {
-      const { container } = render(
-        <FilterChip label='Name' columnType={FilterType.string} />
-      );
-      const inputContainer = container.querySelector(`.${styles.inputField}`);
-      expect(inputContainer).toHaveStyle({ width: '100%' });
-    });
-
-    it('keeps the date field container fluid so the input can shrink', () => {
-      const { container } = render(
-        <FilterChip label='Created' columnType={FilterType.date} />
-      );
-      const dateContainer = container.querySelector(`.${styles.dateField}`);
-      expect(dateContainer).toHaveStyle({ width: '100%' });
-    });
-  });
-
   describe('Forwarded HTML attributes', () => {
     it('forwards arbitrary HTML attributes onto the root div', () => {
       render(
diff --git a/packages/raystack/components/flex/__tests__/flex.test.tsx b/packages/raystack/components/flex/__tests__/flex.test.tsx
index 67a0f53c2..31275ded4 100644
--- a/packages/raystack/components/flex/__tests__/flex.test.tsx
+++ b/packages/raystack/components/flex/__tests__/flex.test.tsx
@@ -120,20 +120,6 @@ describe('Flex', () => {
     });
   });
 
-  describe('Width', () => {
-    it('renders full width correctly', () => {
-      const { container } = render(<Flex width='full'>Content</Flex>);
-      const flex = container.firstChild as HTMLElement;
-      expect(flex).toHaveClass(styles['width-full']);
-    });
-
-    it('renders without width class when not specified', () => {
-      const { container } = render(<Flex>Content</Flex>);
-      const flex = container.firstChild as HTMLElement;
-      expect(flex).not.toHaveClass(styles['width-full']);
-    });
-  });
-
   describe('HTML Attributes', () => {
     it('supports data attributes', () => {
       const { container } = render(
diff --git a/packages/raystack/components/flex/flex.module.css b/packages/raystack/components/flex/flex.module.css
index 8b003bdb2..d8e02e2a7 100644
--- a/packages/raystack/components/flex/flex.module.css
+++ b/packages/raystack/components/flex/flex.module.css
@@ -66,7 +66,3 @@
 .wrap-wrapReverse {
   flex-wrap: wrap-reverse;
 }
-
-.width-full {
-  width: 100%;
-}
diff --git a/packages/raystack/components/flex/flex.tsx b/packages/raystack/components/flex/flex.tsx
index 3556c5752..2f18dfdbc 100644
--- a/packages/raystack/components/flex/flex.tsx
+++ b/packages/raystack/components/flex/flex.tsx
@@ -29,10 +29,7 @@ const flex = cva(styles.flex, {
       wrap: styles['wrap-wrap'],
       wrapReverse: styles['wrap-wrapReverse']
     },
-    gap: gapVariants,
-    width: {
-      full: styles['width-full']
-    }
+    gap: gapVariants
   },
   defaultVariants: {
     direction: 'row',
@@ -51,7 +48,6 @@ export function Flex({
   wrap,
   gap,
   className,
-  width,
   render,
   ref,
   ...props
@@ -63,8 +59,7 @@ export function Flex({
       justify,
       wrap,
       gap,
-      className,
-      width
+      className
     })
   };
 
diff --git a/packages/raystack/components/input/__tests__/input.test.tsx b/packages/raystack/components/input/__tests__/input.test.tsx
index ea8f171d6..5b6d46d41 100644
--- a/packages/raystack/components/input/__tests__/input.test.tsx
+++ b/packages/raystack/components/input/__tests__/input.test.tsx
@@ -30,24 +30,6 @@ describe('Input', () => {
       expect(input).toBeInTheDocument();
     });
 
-    it('sets custom width', () => {
-      const { container } = render(<Input width='300px' />);
-      const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
-      expect(wrapper).toHaveStyle({ width: '300px' });
-    });
-
-    it('sets numeric width as pixels', () => {
-      const { container } = render(<Input width={400} />);
-      const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
-      expect(wrapper).toHaveStyle({ width: '400px' });
-    });
-
-    it('defaults to 100% width', () => {
-      const { container } = render(<Input />);
-      const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
-      expect(wrapper).toHaveStyle({ width: '100%' });
-    });
-
     it('disables input when disabled prop is true', () => {
       render(<Input disabled />);
       const input = screen.getByRole('textbox');
diff --git a/packages/raystack/components/input/input.tsx b/packages/raystack/components/input/input.tsx
index fb8b38fad..8d19d9ed7 100644
--- a/packages/raystack/components/input/input.tsx
+++ b/packages/raystack/components/input/input.tsx
@@ -30,7 +30,6 @@ export interface InputProps
   trailingIcon?: ReactNode;
   prefix?: string;
   suffix?: string;
-  width?: string | number;
   chips?: Array<{ label: string; onRemove?: () => void }>;
   maxChipsVisible?: number;
   variant?: 'default' | 'borderless';
@@ -46,7 +45,6 @@ export function Input({
   trailingIcon,
   prefix,
   suffix,
-  width,
   chips,
   maxChipsVisible = 2,
   size,
@@ -67,7 +65,6 @@ export function Input({
         classNames?.container
       )}
       data-disabled={disabled || undefined}
-      style={{ width: width || '100%' }}
       ref={containerRef}
     >
       {leadingIcon && (
diff --git a/packages/raystack/components/list/__tests__/list.test.tsx b/packages/raystack/components/list/__tests__/list.test.tsx
index 900e92bc4..29adbe25c 100644
--- a/packages/raystack/components/list/__tests__/list.test.tsx
+++ b/packages/raystack/components/list/__tests__/list.test.tsx
@@ -33,18 +33,6 @@ describe('List', () => {
       expect(list).toHaveClass(styles.list);
     });
 
-    it('sets maxWidth style', () => {
-      render(<List maxWidth='500px'>Content</List>);
-      const list = screen.getByRole('list');
-      expect(list).toHaveStyle({ maxWidth: '500px' });
-    });
-
-    it('sets maxWidth as number', () => {
-      render(<List maxWidth={400}>Content</List>);
-      const list = screen.getByRole('list');
-      expect(list).toHaveStyle({ maxWidth: '400px' });
-    });
-
     it('does not set a generic default aria-label', () => {
       render(<List>Content</List>);
       const list = screen.getByRole('list');
@@ -150,18 +138,6 @@ describe('List', () => {
       const label = container.querySelector(`.${styles.label}`);
       expect(label).toBeInTheDocument();
     });
-
-    it('sets minWidth style', () => {
-      render(
-        <List>
-          <List.Item>
-            <List.Label minWidth='100px'>Label</List.Label>
-          </List.Item>
-        </List>
-      );
-      const label = screen.getByText('Label');
-      expect(label).toHaveStyle({ minWidth: '100px' });
-    });
   });
 
   describe('List.Value', () => {
@@ -299,7 +275,7 @@ describe('List', () => {
       render(
         <List>
           <List.Item>
-            <List.Label minWidth='100px'>Status:</List.Label>
+            <List.Label>Status:</List.Label>
             <List.Value>
               <span style={{ color: 'green' }}>Active</span>
             </List.Value>
@@ -307,8 +283,6 @@ describe('List', () => {
         </List>
       );
 
-      const label = screen.getByText('Status:');
-      expect(label).toHaveStyle({ minWidth: '100px' });
       const value = screen.getByText('Active');
       expect(value).toHaveStyle({ color: 'rgb(0, 128, 0)' });
     });
diff --git a/packages/raystack/components/list/list.tsx b/packages/raystack/components/list/list.tsx
index 5c47fb2bc..1039b966e 100644
--- a/packages/raystack/components/list/list.tsx
+++ b/packages/raystack/components/list/list.tsx
@@ -14,7 +14,6 @@ interface ListRootProps
   extends ComponentProps<'ul'>,
     VariantProps<typeof list> {
   children: ReactNode;
-  maxWidth?: string | number;
 }
 
 interface ListItemProps extends ComponentProps<'li'> {
@@ -22,7 +21,6 @@ interface ListItemProps extends ComponentProps<'li'> {
 }
 
 interface ListLabelProps extends ComponentProps<'span'> {
-  minWidth?: string;
   children: ReactNode;
 }
 
@@ -39,17 +37,10 @@ interface ListHeaderProps extends ComponentProps<'div'> {
   'aria-level'?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 
-const ListRoot = ({
-  children,
-  className,
-  maxWidth,
-  style,
-  ...props
-}: ListRootProps) => {
+const ListRoot = ({ children, className, ...props }: ListRootProps) => {
   return (
     <ul
       className={list({ className })}
-      style={{ maxWidth, ...style }}
       // `list-style: none` causes Safari/VoiceOver to drop the implicit
       // list role; keep the explicit role so the list stays announced.
       role='list'
@@ -68,19 +59,9 @@ const ListItem = ({ children, className, ...props }: ListItemProps) => {
   );
 };
 
-const ListLabel = ({
-  children,
-  minWidth,
-  className,
-  style,
-  ...props
-}: ListLabelProps) => {
+const ListLabel = ({ children, className, ...props }: ListLabelProps) => {
   return (
-    <span
-      className={label({ className })}
-      style={{ minWidth, ...style }}
-      {...props}
-    >
+    <span className={label({ className })} {...props}>
       {children}
     </span>
   );
diff --git a/packages/raystack/components/text-area/__tests__/text-area.test.tsx b/packages/raystack/components/text-area/__tests__/text-area.test.tsx
index 89f3062c7..a8d6e274e 100644
--- a/packages/raystack/components/text-area/__tests__/text-area.test.tsx
+++ b/packages/raystack/components/text-area/__tests__/text-area.test.tsx
@@ -30,18 +30,6 @@ describe('TextArea', () => {
       render(<TextArea ref={ref} />);
       expect(ref).toHaveBeenCalled();
     });
-
-    it('defaults to 100% width', () => {
-      render(<TextArea />);
-      const textarea = screen.getByRole('textbox');
-      expect(textarea).toHaveStyle({ width: '100%' });
-    });
-
-    it('accepts custom width as string', () => {
-      render(<TextArea width='500px' />);
-      const textarea = screen.getByRole('textbox');
-      expect(textarea).toHaveStyle({ width: '500px' });
-    });
   });
 
   describe('Disabled State', () => {
diff --git a/packages/raystack/components/text-area/text-area.tsx b/packages/raystack/components/text-area/text-area.tsx
index 04c8e4f0b..08851775d 100644
--- a/packages/raystack/components/text-area/text-area.tsx
+++ b/packages/raystack/components/text-area/text-area.tsx
@@ -27,7 +27,6 @@ export interface TextAreaProps
     VariantProps<typeof textAreaVariants> {
   disabled?: boolean;
   placeholder?: string;
-  width?: string | number;
   value?: string;
   onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   onValueChange?: (
@@ -38,9 +37,7 @@ export interface TextAreaProps
 
 export function TextArea({
   className,
-  style,
   disabled,
-  width = '100%',
   value,
   onChange,
   onValueChange,
@@ -71,7 +68,6 @@ export function TextArea({
       disabled={disabled}
       placeholder={placeholder}
       required={resolvedRequired}
-      style={{ ...style, width }}
       {...props}
     />
   );
diff --git a/packages/raystack/components/toast/toast-root.tsx b/packages/raystack/components/toast/toast-root.tsx
index cc69eeb58..266b2f866 100644
--- a/packages/raystack/components/toast/toast-root.tsx
+++ b/packages/raystack/components/toast/toast-root.tsx
@@ -79,7 +79,7 @@ export function ToastRoot({
       {...props}
     >
       <ToastPrimitive.Content className={styles.content}>
-        <Flex align='start' gap={3} width='full'>
+        <Flex align='start' gap={3} style={{ width: '100%' }}>
           {leadingIcon && (
             <span className={styles.leadingIcon} aria-hidden='true'>
               {leadingIcon}
diff --git a/packages/raystack/figma/callout.figma.tsx b/packages/raystack/figma/callout.figma.tsx
index 65d850783..7846e5125 100644
--- a/packages/raystack/figma/callout.figma.tsx
+++ b/packages/raystack/figma/callout.figma.tsx
@@ -13,7 +13,10 @@ figma.connect(Callout, '<FIGMA_LINK>?node-id=661-1063', {
       Normal: 'normal',
       Grey: 'grey'
     }),
-    outline: figma.boolean('Outline'),
+    variant: figma.boolean('Outline', {
+      true: 'outline',
+      false: undefined
+    }),
     highContrast: figma.boolean('High Contrast'),
     structure: figma.nestedProps('.callout_structure', {
       children: figma.textContent(