@kushagradhawan/kookie-ui 0.1.52 → 0.1.54

package/src/components/_internal/shell-sidebar.tsx

@@ -6,8 +6,8 @@ import { useShell } from '../shell.context.js';
 import { useResponsivePresentation, useResponsiveValue } from '../shell.hooks.js';
 import { PaneResizeContext } from './shell-resize.js';
 import { SidebarHandle, PaneHandle } from './shell-handles.js';
-import type { Breakpoint, PaneMode, PaneSizePersistence, PresentationValue, ResponsivePresentation, ResponsiveSidebarMode, SidebarMode, Responsive } from '../shell.types.js';
-import { BREAKPOINTS } from '../shell.types.js';
+import type { Breakpoint, PaneMode, PaneSizePersistence, ResponsivePresentation, SidebarMode, Responsive } from '../shell.types.js';
+import { _BREAKPOINTS } from '../shell.types.js';
 
 interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
   presentation?: ResponsivePresentation;

package/src/components/chatbar.css

@@ -165,34 +165,37 @@
 /* Sizes (padding and radius via tokens) */
 @breakpoints {
   .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarBox {
-    border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
-    padding: var(--space-2);
+    /* Map Chatbar size 1 to Card size 2 */
+    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    padding: var(--space-3);
   }
   .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarInput {
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
   }
   .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarBox {
-    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
-    padding: var(--space-3);
+    /* Map Chatbar size 2 to Card size 3 */
+    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    padding: var(--space-4);
   }
   .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarInput {
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
   }
   .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox {
-    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
-    padding: var(--space-4);
+    /* Map Chatbar size 3 to Card size 4 */
+    border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+    padding: var(--space-5);
   }
   .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput {
-    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);

package/src/components/chatbar.tsx

@@ -8,9 +8,7 @@ import { Flex } from './flex.js';
 import { ScrollArea } from './scroll-area.js';
 import { Slot } from './slot.js';
 import { Box } from './box.js';
-import { Card } from './card.js';
 import { Text } from './text.js';
-import { Inset } from './inset.js';
 import { useDropzone } from 'react-dropzone';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 
@@ -287,7 +285,10 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
   // `attachments={undefined}` to clear attachments. In that case we normalize to an empty array.
   const isAttachmentsControlled = 'attachments' in props;
   const [attachmentsUncontrolled, setAttachmentsUncontrolled] = React.useState<ChatbarAttachment[]>(defaultAttachments);
-  const attachments = isAttachmentsControlled ? ((attachmentsProp ?? []) as ChatbarAttachment[]) : attachmentsUncontrolled;
+  const attachments = React.useMemo(
+    () => (isAttachmentsControlled ? ((attachmentsProp ?? []) as ChatbarAttachment[]) : attachmentsUncontrolled),
+    [isAttachmentsControlled, attachmentsProp, attachmentsUncontrolled],
+  );
 
   // Track generated object URLs for cleanup
   const generatedUrlSetRef = React.useRef<Set<string>>(new Set());
@@ -416,11 +417,12 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
 
   // Revoke any remaining generated URLs on unmount
   React.useEffect(() => {
+    const urlSet = generatedUrlSetRef.current;
     return () => {
-      for (const url of Array.from(generatedUrlSetRef.current)) {
+      for (const url of Array.from(urlSet)) {
         URL.revokeObjectURL(url);
       }
-      generatedUrlSetRef.current.clear();
+      urlSet.clear();
     };
   }, []);
 

package/src/components/shell.hooks.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Breakpoint, PresentationValue, ResponsivePresentation } from './shell.types.js';
-import { BREAKPOINTS } from './shell.types.js';
+import { _BREAKPOINTS } from './shell.types.js';
 import { useShell } from './shell.context.js';
 
 export function useResponsivePresentation(presentation: ResponsivePresentation): PresentationValue {
@@ -15,7 +15,7 @@ export function useResponsivePresentation(presentation: ResponsivePresentation):
       return presentation[currentBreakpoint]!;
     }
 
-    const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
+    const bpKeys = Object.keys(_BREAKPOINTS) as Array<keyof typeof _BREAKPOINTS>;
     const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);
     const startIdx = order.indexOf(currentBreakpoint as Breakpoint);
 
@@ -50,7 +50,7 @@ export function useResponsiveValue<T>(value: T | Partial<Record<Breakpoint, T>>
       return map[currentBreakpoint as Breakpoint] as T;
     }
 
-    const bpKeys = Object.keys(BREAKPOINTS) as Array<keyof typeof BREAKPOINTS>;
+    const bpKeys = Object.keys(_BREAKPOINTS) as Array<keyof typeof _BREAKPOINTS>;
     const order: Breakpoint[] = ([...bpKeys].reverse() as Breakpoint[]).concat('initial' as Breakpoint);
     const startIdx = order.indexOf(currentBreakpoint as Breakpoint);
 

package/src/components/shell.tsx

@@ -31,12 +31,12 @@ import * as Sheet from './sheet.js';
 import { VisuallyHidden } from './visually-hidden.js';
 import { useResponsivePresentation, useResponsiveValue } from './shell.hooks.js';
 import { PaneResizeContext } from './_internal/shell-resize.js';
-import { PaneHandle, PanelHandle, SidebarHandle, InspectorHandle, BottomHandle } from './_internal/shell-handles.js';
+import { PaneHandle, PanelHandle } from './_internal/shell-handles.js';
 import { Sidebar } from './_internal/shell-sidebar.js';
 import { Bottom } from './_internal/shell-bottom.js';
 import { Inspector } from './_internal/shell-inspector.js';
 import type { PresentationValue, ResponsivePresentation, PaneMode, SidebarMode, PaneSizePersistence, Breakpoint, PaneTarget, Responsive } from './shell.types.js';
-import { BREAKPOINTS } from './shell.types.js';
+import { _BREAKPOINTS } from './shell.types.js';
 import {
   ShellProvider,
   useShell,
@@ -75,7 +75,7 @@ function useBreakpoint(): { bp: Breakpoint; ready: boolean } {
   React.useEffect(() => {
     if (typeof window === 'undefined') return;
 
-    const queries: [key: keyof typeof BREAKPOINTS, query: string][] = Object.entries(BREAKPOINTS) as any;
+    const queries: [key: keyof typeof _BREAKPOINTS, query: string][] = Object.entries(_BREAKPOINTS) as any;
     const mqls = queries.map(([k, q]) => [k, window.matchMedia(q)] as const);
 
     const compute = () => {
@@ -556,7 +556,7 @@ type RailProps = React.ComponentPropsWithoutRef<'div'> & {
 
 // Left container - behaves like Inspector but contains Rail+Panel
 const Left = React.forwardRef<HTMLDivElement, LeftProps>(
-  ({ className, presentation = { initial: 'fixed', sm: 'fixed' }, collapsible = true, onExpand, onCollapse, children, style, ...props }, ref) => {
+  ({ className, presentation = { initial: 'fixed', sm: 'fixed' }, collapsible: _collapsible = true, onExpand, onCollapse, children, style, ...props }, ref) => {
     const shell = useShell();
     const resolvedPresentation = useResponsivePresentation(presentation);
     const isOverlay = resolvedPresentation === 'overlay';
@@ -581,7 +581,7 @@ const Left = React.forwardRef<HTMLDivElement, LeftProps>(
       return () => shell.setHasLeft(false);
     }, [shell]);
 
-    const lastBpRef = React.useRef<Breakpoint | null>(null);
+    const _lastBpRef = React.useRef<Breakpoint | null>(null);
     const lastLeftModeRef = React.useRef<PaneMode | null>(null);
     const initNotifiedRef = React.useRef(false);
     const resolvedDefaultOpen = useResponsiveValue((props as any).defaultOpen as any);
@@ -633,7 +633,7 @@ const Left = React.forwardRef<HTMLDivElement, LeftProps>(
       }
     }, [shell.leftMode, onExpand, onCollapse]);
 
-    const isExpanded = shell.leftMode === 'expanded';
+    const _isExpanded = shell.leftMode === 'expanded';
 
     // Left is not resizable; width derives from Rail/Panel.
 
@@ -674,11 +674,11 @@ const Left = React.forwardRef<HTMLDivElement, LeftProps>(
       const isType = (el: React.ReactElement, comp: any) => React.isValidElement(el) && el.type === comp;
       const railEl = childArray.find((el) => isType(el, Rail));
       const panelEl = childArray.find((el) => isType(el, Panel));
-      const railSize = typeof (railEl as any)?.props?.expandedSize === 'number' ? (railEl as any).props.expandedSize : 64;
-      const panelSize = typeof (panelEl as any)?.props?.expandedSize === 'number' ? (panelEl as any).props.expandedSize : 288;
-      const hasRail = Boolean(railEl);
-      const hasPanel = Boolean(panelEl);
-      const includePanel = hasPanel && (shell.panelMode === 'expanded' || shell.peekTarget === 'panel');
+      const _railSize = typeof (railEl as any)?.props?.expandedSize === 'number' ? (railEl as any).props.expandedSize : 64;
+      const _panelSize = typeof (panelEl as any)?.props?.expandedSize === 'number' ? (panelEl as any).props.expandedSize : 288;
+      const _hasRail = Boolean(railEl);
+      const _hasPanel = Boolean(panelEl);
+      const _includePanel = _hasPanel && (shell.panelMode === 'expanded' || shell.peekTarget === 'panel');
 
       // Strip control props from DOM spread
       const { open: _openIgnored, defaultOpen: _defaultOpenIgnored, onOpenChange: _onOpenChangeIgnored, ...stackDomProps } = props as any;
@@ -810,7 +810,7 @@ type PanelComponent = React.ForwardRefExoticComponent<PanelPublicProps & React.R
   Handle: HandleComponent;
 };
 
-type SidebarComponent = React.ForwardRefExoticComponent<
+type _SidebarComponent = React.ForwardRefExoticComponent<
   (Omit<PaneProps, 'mode' | 'defaultMode' | 'onModeChange'> & {
     state?: Responsive<SidebarMode>;
     defaultState?: SidebarMode;
@@ -821,9 +821,9 @@ type SidebarComponent = React.ForwardRefExoticComponent<
     React.RefAttributes<HTMLDivElement>
 > & { Handle: HandleComponent };
 
-type InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: HandleComponent };
+type _InspectorComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: HandleComponent };
 
-type BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: HandleComponent };
+type _BottomComponent = React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>> & { Handle: HandleComponent };
 
 const Panel = React.forwardRef<HTMLDivElement, PanelPublicProps>(
   (

package/src/components/shell.types.ts

@@ -16,7 +16,7 @@ export type PaneSizePersistence = {
   save?: (size: number) => void | Promise<void>;
 };
 
-export const BREAKPOINTS = {
+export const _BREAKPOINTS = {
   xs: '(min-width: 520px)',
   sm: '(min-width: 768px)',
   md: '(min-width: 1024px)',
@@ -24,6 +24,6 @@ export const BREAKPOINTS = {
   xl: '(min-width: 1640px)',
 } as const;
 
-export type Breakpoint = 'initial' | keyof typeof BREAKPOINTS;
+export type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;
 
 export type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';

package/styles.css

@@ -24489,68 +24489,68 @@
   --backdrop-filter-components: none;
 }
 .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarBox{
-  border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
-  padding: var(--space-2);
+  border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+  padding: var(--space-3);
 }
 .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarInput{
-  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-  --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+  --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+  --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
   letter-spacing: var(--letter-spacing-1);
 }
 .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarBox{
-  border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
-  padding: var(--space-3);
+  border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+  padding: var(--space-4);
 }
 .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarInput{
-  --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-  --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+  --text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
+  --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
   font-size: var(--font-size-2);
   line-height: var(--line-height-2);
   letter-spacing: var(--letter-spacing-2);
 }
 .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox{
-  border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
-  padding: var(--space-4);
+  border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+  padding: var(--space-5);
 }
 .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput{
-  --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
-  --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+  --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
+  --text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
   font-size: var(--font-size-3);
   line-height: var(--line-height-3);
   letter-spacing: var(--letter-spacing-3);
 }
 @media (min-width: 520px){
   .rt-ChatbarRoot:where(.xs\:rt-r-size-1) .rt-ChatbarBox{
-    border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
-    padding: var(--space-2);
+    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    padding: var(--space-3);
   }
   .rt-ChatbarRoot:where(.xs\:rt-r-size-1) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
   }
   .rt-ChatbarRoot:where(.xs\:rt-r-size-2) .rt-ChatbarBox{
-    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
-    padding: var(--space-3);
+    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    padding: var(--space-4);
   }
   .rt-ChatbarRoot:where(.xs\:rt-r-size-2) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
   }
   .rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarBox{
-    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
-    padding: var(--space-4);
+    border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+    padding: var(--space-5);
   }
   .rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);
@@ -24558,34 +24558,34 @@
 }
 @media (min-width: 768px){
   .rt-ChatbarRoot:where(.sm\:rt-r-size-1) .rt-ChatbarBox{
-    border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
-    padding: var(--space-2);
+    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    padding: var(--space-3);
   }
   .rt-ChatbarRoot:where(.sm\:rt-r-size-1) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
   }
   .rt-ChatbarRoot:where(.sm\:rt-r-size-2) .rt-ChatbarBox{
-    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
-    padding: var(--space-3);
+    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    padding: var(--space-4);
   }
   .rt-ChatbarRoot:where(.sm\:rt-r-size-2) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
   }
   .rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarBox{
-    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
-    padding: var(--space-4);
+    border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+    padding: var(--space-5);
   }
   .rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);
@@ -24593,34 +24593,34 @@
 }
 @media (min-width: 1024px){
   .rt-ChatbarRoot:where(.md\:rt-r-size-1) .rt-ChatbarBox{
-    border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
-    padding: var(--space-2);
+    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    padding: var(--space-3);
   }
   .rt-ChatbarRoot:where(.md\:rt-r-size-1) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
   }
   .rt-ChatbarRoot:where(.md\:rt-r-size-2) .rt-ChatbarBox{
-    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
-    padding: var(--space-3);
+    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    padding: var(--space-4);
   }
   .rt-ChatbarRoot:where(.md\:rt-r-size-2) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
   }
   .rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarBox{
-    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
-    padding: var(--space-4);
+    border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+    padding: var(--space-5);
   }
   .rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);
@@ -24628,34 +24628,34 @@
 }
 @media (min-width: 1280px){
   .rt-ChatbarRoot:where(.lg\:rt-r-size-1) .rt-ChatbarBox{
-    border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
-    padding: var(--space-2);
+    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    padding: var(--space-3);
   }
   .rt-ChatbarRoot:where(.lg\:rt-r-size-1) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
   }
   .rt-ChatbarRoot:where(.lg\:rt-r-size-2) .rt-ChatbarBox{
-    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
-    padding: var(--space-3);
+    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    padding: var(--space-4);
   }
   .rt-ChatbarRoot:where(.lg\:rt-r-size-2) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
   }
   .rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarBox{
-    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
-    padding: var(--space-4);
+    border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+    padding: var(--space-5);
   }
   .rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);
@@ -24663,34 +24663,34 @@
 }
 @media (min-width: 1640px){
   .rt-ChatbarRoot:where(.xl\:rt-r-size-1) .rt-ChatbarBox{
-    border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
-    padding: var(--space-2);
+    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    padding: var(--space-3);
   }
   .rt-ChatbarRoot:where(.xl\:rt-r-size-1) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
   }
   .rt-ChatbarRoot:where(.xl\:rt-r-size-2) .rt-ChatbarBox{
-    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
-    padding: var(--space-3);
+    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    padding: var(--space-4);
   }
   .rt-ChatbarRoot:where(.xl\:rt-r-size-2) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-4) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-4) - var(--text-area-border-width));
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
   }
   .rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarBox{
-    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
-    padding: var(--space-4);
+    border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+    padding: var(--space-5);
   }
   .rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarInput{
-    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
-    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-y: calc(var(--space-5) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-5) - var(--text-area-border-width));
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);