@once-ui-system/core 1.8.5 → 2.0.0-alpha.1

package/ai/examples/blocks/Dashboard1.tsx

@@ -1,20 +1,9 @@
 "use client";
 
 import React from "react";
-import {
-  Column,
-  Row,
-  Card,
-  Heading,
-  Text,
-  Grid,
-  Avatar,
-  Button,
-  Scroller,
-  StatusIndicator,
-  Icon,
-  LineChart
-} from "@once-ui-system/core";
+import { Column, Row, Card, Heading, Text, Grid, Avatar, Button, Scroller, StatusIndicator, Icon } from "@once-ui-system/core";
+import type { IconName } from "@once-ui-system/core";
+import { LineChart } from "@once-ui-system/core/data";
 import { Sidebar1 } from "./Sidebar1";
 import { Header1 } from "./Header1";
 import { Table1 } from "./Table1";
@@ -48,7 +37,7 @@ const StatCard: React.FC<StatCardProps> = ({ title, value, change, positive = tr
   }, [positive]);
 
   return (
-    <Card minWidth={12} href={href} paddingX="20" paddingTop="20" paddingBottom="80" radius="l" fillWidth direction="column" border="neutral-alpha-weak" background="transparent">
+    <Card minWidth={12} href={href} paddingX="20" paddingTop="20" paddingBottom="80" radius="l" fillWidth direction="column" border background="transparent">
       <LineChart
         pointerEvents="none"
         position="absolute"
@@ -89,11 +78,11 @@ interface ActivityItemProps {
   action: string;
   time: string;
   href?: string;
-  icon: string;
+  icon: IconName;
 }
 
 const ActivityItem: React.FC<ActivityItemProps> = ({ avatar, action, time, href, icon }) => (
-  <Row fillWidth borderBottom="neutral-alpha-weak">
+  <Row fillWidth borderBottom>
     <Card direction="column" fitHeight href={href} background="transparent" border="transparent" fillWidth>
       <Row fillWidth horizontal="between" paddingX="24" height="64" vertical="center">
         <Column fillWidth gap="8">
@@ -117,11 +106,11 @@ interface StatusItemProps {
   name: string;
   status: string;
   href?: string;
-  icon: string;
+  icon: IconName;
 }
 
 const StatusItem: React.FC<StatusItemProps> = ({ name, status, icon, href = "#" }) => (
-  <Row fillWidth borderBottom="neutral-alpha-weak">
+  <Row fillWidth borderBottom>
     <Card direction="column" background="transparent" href={href} border="transparent" fillWidth>
       <Row fillWidth horizontal="between" height="64" vertical="center" paddingX="24">
         <Row vertical="center" gap="12">
@@ -251,7 +240,7 @@ export const Dashboard1: React.FC = () => {
 
                 <LineChart
                   minHeight={20}
-                  border="neutral-alpha-weak"
+                  border
                   axis="x"
                   grid="y"
                   title="Revenue growth"
@@ -288,7 +277,7 @@ export const Dashboard1: React.FC = () => {
                 />
 
                 <Grid columns="2" m={{columns: 1}} gap="m" fillWidth>
-                  <Column fillWidth border="neutral-alpha-weak" radius="l" overflow="hidden" height={20}>
+                  <Column fillWidth border radius="l" overflow="hidden" height={20}>
                     <Row vertical="center" horizontal="between" fillWidth paddingLeft="24" paddingRight="12" paddingY="12" gap="m" wrap>
                       <Heading wrap="nowrap" variant="heading-strong-s">
                         Project status
@@ -306,14 +295,14 @@ export const Dashboard1: React.FC = () => {
                       </Row>
                     </Row>
                     
-                    <Column fillWidth border="neutral-alpha-weak" topRadius="l" overflowY="auto">
+                    <Column fillWidth border topRadius="l" overflowY="auto">
                       {[
-                        { name: "Mobile App Development", status: "At Risk", icon: "code" },
-                        { name: "Marketing Campaign", status: "On Track", icon: "sparkle" },
-                        { name: "Database Migration", status: "On Track", icon: "code" },
-                        { name: "Website Redesign", status: "On Track", icon: "sparkle" },
-                        { name: "Product Launch", status: "Delayed", icon: "sparkle" },
-                        { name: "Server Upgrade", status: "Delayed", icon: "code" },
+                        { name: "Mobile App Development", status: "At Risk", icon: "code" as IconName },
+                        { name: "Marketing Campaign", status: "On Track", icon: "sparkle" as IconName },
+                        { name: "Database Migration", status: "On Track", icon: "code" as IconName },
+                        { name: "Website Redesign", status: "On Track", icon: "sparkle" as IconName },
+                        { name: "Product Launch", status: "Delayed", icon: "sparkle" as IconName },
+                        { name: "Server Upgrade", status: "Delayed", icon: "code" as IconName },
                       ].map((project, index) => (
                         <StatusItem
                           key={index}
@@ -325,7 +314,7 @@ export const Dashboard1: React.FC = () => {
                     </Column>
                   </Column>
 
-                  <Column border="neutral-alpha-weak" radius="l" fillWidth overflow="hidden" height={20}>
+                  <Column border radius="l" fillWidth overflow="hidden" height={20}>
                     <Row fillWidth vertical="center" horizontal="between" paddingLeft="24" paddingRight="12" paddingY="12" gap="16" wrap>
                       <Heading wrap="nowrap" variant="heading-strong-s">
                         Recent activity
@@ -334,43 +323,43 @@ export const Dashboard1: React.FC = () => {
                         View all
                       </Button>
                     </Row>
-                    <Column fillWidth border="neutral-alpha-weak" topRadius="l" overflowY="auto">
+                    <Column fillWidth border topRadius="l" overflowY="auto">
                       {[
                         {
                           avatar: "/images/creators/lorant.jpg",
                           action: "Completed the Website Redesign task",
                           time: "2 hours ago",
-                          icon: "check"
+                          icon: "check" as IconName
                         },
                         {
                           avatar: "/images/creators/vincent.jpg",
                           action: "Commented on Mobile App Development",
                           time: "4 hours ago",
-                          icon: "chat"
+                          icon: "edit" as IconName
                         },
                         {
                           avatar: "/images/creators/zsofia.jpg",
                           action: "Created a new task in Marketing Campaign",
                           time: "Yesterday",
-                          icon: "plus"
+                          icon: "plus" as IconName
                         },
                         {
                           avatar: "/images/creators/texz.jpg",
                           action: "Completed 3 tasks in Product Launch",
                           time: "Yesterday",
-                          icon: "check"
+                          icon: "check" as IconName
                         },
                         {
                           avatar: "/images/creators/justin.jpg",
                           action: "Created a new task in Marketing Campaign",
                           time: "2 days ago",
-                          icon: "plus"
+                          icon: "plus" as IconName
                         },
                         {
                           avatar: "/images/creators/zsofia.jpg",
                           action: "Completed 3 tasks in Product Launch",
                           time: "4 days ago",
-                          icon: "check"
+                          icon: "check" as IconName
                         }
                       ].map((activity, index) => (
                         <ActivityItem 

package/ai/examples/blocks/Feed3.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Avatar, Button, Column, EmojiPickerDropdown, IconButton, Media, OgCard, Row, Text, Textarea } from "@once-ui-system/core";
+import type { IconName } from "@once-ui-system/core";
 import { useState } from "react";
 import { chatMessages } from "./content/chat1content";
 
@@ -33,7 +34,7 @@ export const Feed3: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }
 
   return (
     <Column fill {...flex}>
-      <Row fillWidth paddingX="24" paddingY="8" background="surface" borderBottom="neutral-alpha-weak" vertical="center" gap="12">
+      <Row fillWidth paddingX="24" paddingY="8" background="surface" borderBottom vertical="center" gap="12">
         <Text variant="label-default-s">👋 | intro</Text>
         <Row minWidth="4" minHeight="4" background="neutral-strong" radius="full"/>
         <Text variant="body-default-xs" onBackground="neutral-weak">Let us know a bit about you!</Text>
@@ -64,7 +65,7 @@ export const Feed3: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }
                               key={aIdx}
                               maxWidth={20}
                               src={att.media}
-                              border="neutral-alpha-weak"
+                              border
                               radius="l"
                               sizes="320px"
                             />
@@ -74,9 +75,9 @@ export const Feed3: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }
                     ) : (
                       messages.attachments[0]?.media && (
                         messages.attachments[0].media.includes("youtube.com") || messages.attachments[0].media.includes("youtu.be") ? (
-                          <Media maxWidth={32} border="neutral-alpha-weak" aspectRatio="16/9" marginTop="16" src={messages.attachments[0].media} radius="l" sizes="320px"/>
+                          <Media maxWidth={32} border aspectRatio="16/9" marginTop="16" src={messages.attachments[0].media} radius="l" sizes="320px"/>
                         ) : (messages.attachments[0].media.match(/\.(png|jpg|jpeg|gif|webp)$/i)) ? (
-                          <Media maxWidth={32} border="neutral-alpha-weak" marginTop="16" src={messages.attachments[0].media} radius="l" sizes="320px"/>
+                          <Media maxWidth={32} border marginTop="16" src={messages.attachments[0].media} radius="l" sizes="320px"/>
                         ) : (
                           <Row maxWidth={24} marginTop="16">
                             <OgCard url={messages.attachments[0].media} description={false} />
@@ -114,9 +115,8 @@ export const Feed3: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }
             id="comment-input"
             placeholder="Message 👋 | intro"
             style={{padding: "0.75rem"}}
-            lines="auto"
             value={message}
-            hasPrefix={
+            prefix={
               <EmojiPickerDropdown
                 onSelect={(emoji) => setMessage(message + emoji)}
                 trigger={
@@ -126,12 +126,12 @@ export const Feed3: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }
                 }
               />
             }
-            hasSuffix={
+            suffix={
               <Row
                 style={{ opacity: message.length > 0 ? 1 : 0, marginRight: "-0.25rem" }}
                 transition="micro-medium">
                 <IconButton
-                  icon={isSubmitting ? "loading" : "send"}
+                  icon={isSubmitting ? "refresh" : "send"}
                   size="m"
                   onClick={handleSubmitMessage}
                   disabled={!message || isSubmitting}

package/ai/examples/blocks/Footer1.tsx

@@ -19,9 +19,11 @@ export const Footer1: React.FC<React.ComponentProps<typeof Row>> = ({ ...flex })
           <Text onBackground="neutral-weak">/ All rights reserved</Text>
         </Text>
         <Row gap="16">
-          <IconButton size="s" variant="ghost" href="#" icon="github" tooltip="GitHub" />
-          <IconButton size="s" variant="ghost" href="#" icon="linkedin" tooltip="LinkedIn" />
-          <IconButton size="s" variant="ghost" href="#" icon="threads" tooltip="Threads" />
+          {/* Brand marks are not part of Once UI — register the ones you need on
+              IconProvider and declare their names, then use them here as usual. */}
+          <IconButton size="s" variant="ghost" href="#" icon="link" tooltip="GitHub" />
+          <IconButton size="s" variant="ghost" href="#" icon="link" tooltip="LinkedIn" />
+          <IconButton size="s" variant="ghost" href="#" icon="link" tooltip="Threads" />
         </Row>
       </Row>
       <Row hide height="80" s={{hide: false}}/>

package/ai/examples/blocks/Footer2.tsx

@@ -83,9 +83,9 @@ export const Footer2: React.FC<React.ComponentProps<typeof Row>> = ({ ...flex })
           <Row paddingX="4" marginBottom="8">
             Social
           </Row>
-          <Button href="#" size="s" variant="secondary" weight="default" prefixIcon="github" label="GitHub" />
-          <Button href="#" size="s" variant="secondary" weight="default" prefixIcon="linkedin" label="LinkedIn" />
-          <Button href="#" size="s" variant="secondary" weight="default" prefixIcon="threads" label="Threads" />
+          <Button href="#" size="s" variant="secondary" weight="default" label="GitHub" />
+          <Button href="#" size="s" variant="secondary" weight="default" label="LinkedIn" />
+          <Button href="#" size="s" variant="secondary" weight="default" label="Threads" />
         </Column>
       </Row>
       <Row fillWidth textVariant="label-default-s" gap="12">

package/ai/examples/blocks/Footer3.tsx

@@ -83,7 +83,7 @@ export const Footer3 = (flex: React.ComponentProps<typeof Column>) => {
                         {item.label}
                       </Text>
                       {item.tag && (
-                        <Tag style={{ transform: "scale(0.9)" }} variant="brand" size="s">
+                        <Tag style={{ transform: "scale(0.9)" }} scheme="brand" size="s">
                           {item.tag}
                         </Tag>
                       )}

package/ai/examples/blocks/Footer4.tsx

@@ -1,17 +1,18 @@
 import { Avatar, Background, Button, Column, IconButton, Logo, Mask, Particle, Row, SmartLink, Tag, Text, TypeFx } from "@once-ui-system/core";
+import type { IconName } from "@once-ui-system/core";
 
-const social = [
+const social: { icon: IconName; label: string; href: string }[] = [
   {
-    icon: "discord",
+    icon: "link",
     label: "Discord",
     href: "https://discord.com/invite/5EyAQ4eNdS" },
   {
-    icon: "github",
+    icon: "link",
     label: "GitHub",
     href: "https://github.com/once-ui-system",
   },
   {
-    icon: "email",
+    icon: "mail",
     label: "Email",
     href: "mailto:demo@email.com",
   },
@@ -293,7 +294,7 @@ export const Footer4 = (flex: React.ComponentProps<typeof Column>) => {
                             {item.label}
                           </Text>
                           {item.tag && (
-                            <Tag style={{ transform: "scale(0.9)" }} variant="brand" size="s">
+                            <Tag style={{ transform: "scale(0.9)" }} scheme="brand" size="s">
                               {item.tag}
                             </Tag>
                           )}

package/ai/examples/blocks/Header1.tsx

@@ -17,6 +17,7 @@ import {
   ToggleButton,
   UserMenu,
 } from "@once-ui-system/core";
+import type { KbarItem, MenuGroup } from "@once-ui-system/core";
 import { usePathname } from "next/navigation";
 import React, { useState } from "react";
 
@@ -29,7 +30,7 @@ export const Header1: React.FC<HeaderProps> = ({ authenticated, avatar, ...flex
   const pathname = usePathname() ?? "";
   const isMac = typeof window !== "undefined" && /Mac/i.test(navigator.platform);
 
-  const kbar = [
+  const kbar: KbarItem[] = [
     {
       id: "dashboard",
       name: "Dashboard",
@@ -68,7 +69,7 @@ export const Header1: React.FC<HeaderProps> = ({ authenticated, avatar, ...flex
     },
   ];
 
-  const nav = [
+  const nav: MenuGroup[] = [
     {
       id: "products",
       label: "Products",
@@ -257,7 +258,7 @@ export const Header1: React.FC<HeaderProps> = ({ authenticated, avatar, ...flex
     >
       <Row gap="4" vertical="center" maxWidth={10}>
         <NavIcon
-          isActive={isActive} 
+          active={isActive} 
           onClick={handleClick} 
           aria-label="Toggle navigation menu"
           aria-expanded={isActive}
@@ -303,10 +304,10 @@ export const Header1: React.FC<HeaderProps> = ({ authenticated, avatar, ...flex
               }}
               dropdown={
                 <Column padding="4" gap="2" minWidth={10}>
-                  <Option hasPrefix={<Icon onBackground="neutral-weak" size="s" name="person" />} label="Profile" value="profile" />
-                  <Option hasPrefix={<Icon onBackground="neutral-weak" size="s" name="settings" />} label="Settings" value="settings" />
+                  <Option prefix={<Icon onBackground="neutral-weak" size="s" name="person" />} label="Profile" value="profile" />
+                  <Option prefix={<Icon onBackground="neutral-weak" size="s" name="settings" />} label="Settings" value="settings" />
                   <Line marginY="2" />
-                  <Option hasPrefix={<Icon onBackground="neutral-weak" size="s" name="logout" />} label="Log out" value="logout" />
+                  <Option prefix={<Icon onBackground="neutral-weak" size="s" name="logout" />} label="Log out" value="logout" />
                 </Column>
               }
             />

package/ai/examples/blocks/Header2.tsx

@@ -29,7 +29,7 @@ export const Header2: React.FC<HeaderProps> = ({ authenticated, avatar, ...flex
       />
       <Row
         as="header"
-        border="neutral-alpha-weak"
+        border
         maxWidth="m"
         paddingX="m"
         radius="l"

package/ai/examples/blocks/Header3.tsx

@@ -81,13 +81,13 @@ export const Header3: React.FC<React.ComponentProps<typeof Row>> = ({ ...flex })
                     <Option
                       label="Profile 1"
                       value="profile"
-                      hasPrefix={
+                      prefix={
                         <Avatar src="/images/creators/justin.jpg"/>
                       }/>
                     <Option
                       label="Profile 2"
                       value="profile"
-                      hasPrefix={
+                      prefix={
                         <Avatar src="/images/creators/light.jpg"/>
                       }/>
                   </Column>
@@ -96,29 +96,29 @@ export const Header3: React.FC<React.ComponentProps<typeof Row>> = ({ ...flex })
                     <Option
                       label="Account"
                       value="account"
-                      hasPrefix={
+                      prefix={
                         <Icon padding="4" margin="2" size="s" name="person" onBackground="neutral-weak"/>
                       } />
                     <Option
                       label="Settings"
                       value="settings"
-                      hasPrefix={
+                      prefix={
                         <Icon padding="4" margin="2" size="s" name="settings" onBackground="neutral-weak"/>
                       } />
                     <Option
                       label="Subscription"
                       value="subscription"
-                      hasPrefix={
+                      prefix={
                         <Icon padding="4" margin="2" size="s" name="payment" onBackground="neutral-weak"/>
                       } />
                     <Option label="Help" value="help"
-                      hasPrefix={
+                      prefix={
                         <Icon padding="4" margin="2" size="s" name="help" onBackground="neutral-weak"/>
                     } />
                   </Column>
                   <Line />
                   <Column fillWidth padding="4">
-                    <Option padding="4" label="Log out" value="logout" hasPrefix={
+                    <Option padding="4" label="Log out" value="logout" prefix={
                       <Icon padding="4" margin="2" size="s" name="logout" onBackground="neutral-weak"/>
                     } />
                   </Column>

package/ai/examples/blocks/Header4.tsx

@@ -39,8 +39,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
             <Row
               data-scaling="90"
               position="absolute"
-              vertical="center"
-              horizontal="center"
+              center
               textVariant="body-default-xs"
               solid="brand-strong"
               onSolid="brand-strong"
@@ -66,7 +65,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
                 key="cart-option"
                 label="Cart"
                 value="cart"
-                hasPrefix={
+                prefix={
                   <Icon
                     size="xs"
                     onBackground="neutral-weak"
@@ -79,7 +78,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
                 key="order-history-option"
                 label="Order history"
                 value="orders"
-                hasPrefix={
+                prefix={
                   <Icon size="xs" onBackground="neutral-weak" name="payment" />
                 }
               />
@@ -87,7 +86,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
                 key="returned-orders-option"
                 label="Returned orders"
                 value="returns"
-                hasPrefix={
+                prefix={
                   <Icon size="xs" onBackground="neutral-weak" name="return" />
                 }
               />
@@ -95,7 +94,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
               <Option
                 key="settings-option"
                 label="Settings"
-                hasPrefix={
+                prefix={
                   <Icon size="xs" onBackground="neutral-weak" name="settings" />
                 }
                 value="settings"
@@ -103,7 +102,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
               <Option
                 key="help-option"
                 label="Help"
-                hasPrefix={<Icon size="xs" onBackground="neutral-weak" name="help" />}
+                prefix={<Icon size="xs" onBackground="neutral-weak" name="help" />}
                 value="help"
               />
               <Line key="line-3" marginY="2" />

package/ai/examples/blocks/Productivity1.tsx

@@ -237,7 +237,7 @@ export const Productivity1 = () => {
             <Column
               key={index}
               minWidth={20}
-              border="neutral-alpha-weak"
+              border
               fillWidth
               paddingX="4"
               radius="m-4"

package/ai/examples/blocks/Roadmap1.tsx

@@ -79,7 +79,7 @@ export function Roadmap1() {
           
           <Row gap="4" fillWidth overflowX="auto" paddingBottom="16">
             {product.columns.map((column, columnIndex) => (
-              <Column key={columnIndex} padding="4" gap="4" radius="s-4" border="neutral-alpha-weak" background="overlay" fillWidth minWidth={20}>
+              <Column key={columnIndex} padding="4" gap="4" radius="s-4" border background="overlay" fillWidth minWidth={20}>
                 <Row fillWidth vertical="center" gap="8" paddingY="8" paddingX="16">
                   <Text variant="label-default-m">
                     {column.title}
@@ -99,7 +99,7 @@ export function Roadmap1() {
                     return typedTask.href ? (
                       <Card
                         onBackground="neutral-strong"
-                        border="neutral-alpha-weak"
+                        border
                         fillWidth
                         radius="s"
                         key={taskIndex} 
@@ -111,7 +111,7 @@ export function Roadmap1() {
                     ) : (
                       <Column
                         onBackground="neutral-strong"
-                        border="neutral-alpha-weak"
+                        border
                         fillWidth
                         radius="s"
                         key={taskIndex}

package/ai/examples/blocks/Sidebar1.tsx

@@ -16,7 +16,7 @@ export const Sidebar1: React.FC<React.ComponentProps<typeof Column>> = ({ ...fle
     fillHeight
     maxWidth={18}
     background="surface"
-    borderRight="neutral-alpha-weak"
+    borderRight
     padding="8"
     gap="4"
     {...flex}

package/ai/examples/blocks/Sidebar2.tsx

@@ -4,7 +4,7 @@ import { Column, Text, ToggleButton } from "@once-ui-system/core";
 
 /** Productivity sidebar — minimal stub for Productivity1 reference */
 export const Sidebar2: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }) => (
-  <Column fillHeight maxWidth={18} background="surface" borderRight="neutral-alpha-weak" padding="8" gap="4" {...flex}>
+  <Column fillHeight maxWidth={18} background="surface" borderRight padding="8" gap="4" {...flex}>
     <Text variant="label-default-s" onBackground="neutral-weak" padding="12">
       Workspace
     </Text>

package/ai/examples/blocks/Sidebar4.tsx

@@ -13,7 +13,7 @@ export const Sidebar4: React.FC<React.ComponentProps<typeof Column> & {
   return (
     <Column fillHeight maxWidth={18} background="surface" {...flex}>
       <Row fillWidth aspectRatio="2/1">
-        <Media src="/images/blocks/vibe-coding-dark.jpg" fill sizes="240px"/>
+        <Media src="/images/blocks/vibe-coding-dark.jpg" stretch sizes="240px"/>
         <Fade position="absolute" top="0" to="bottom" fillWidth height={6} opacity={70}/>
         <Row fillWidth paddingY="12" paddingX="24" position="absolute" top="0" textVariant="label-strong-s" horizontal="center" align="center">
           Design Engineers Club

package/ai/examples/blocks/Streaming1.tsx

@@ -75,7 +75,7 @@ const MediaList = ({ image, progress, title, description, categories }: { image:
       ref={referenceRef}
     >
       <Media aspectRatio="16/9" src={image} alt={title} sizes="400px" radius="l" />
-      {progress > 0 && <ProgressBar label={false} value={progress} paddingX="l" />}
+      {progress > 0 && <ProgressBar showLabel={false} value={progress} paddingX="l" />}
       
       {(portalContainer && (isHovered || isVisible)) && (
         createPortal(
@@ -104,7 +104,7 @@ const MediaList = ({ image, progress, title, description, categories }: { image:
             }}
           >
             <Media aspectRatio="16/9" src={image} alt={title} sizes="400px" radius="l" />
-            {progress > 0 && <ProgressBar label={false} value={progress} paddingX="l" />}
+            {progress > 0 && <ProgressBar showLabel={false} value={progress} paddingX="l" />}
             <Column fillWidth paddingX="16" paddingBottom="20" paddingTop="8" gap="8">
               <Row fillWidth horizontal="between" paddingBottom="12">
                 <Row gap="8" data-border="rounded">
@@ -287,7 +287,7 @@ export const Streaming1: React.FC = () => {
       <Column fillWidth style={{marginTop: "calc(-1 * var(--static-space-64))"}}>
         <Row fillWidth style={{height: "80vh"}} paddingBottom="xl">
           <Carousel
-            fill
+            stretch
             border="transparent"
             radius="none"
             position="absolute"
@@ -306,7 +306,7 @@ export const Streaming1: React.FC = () => {
             pattern={{ display: true, size: "2" }}
           />
           <Carousel
-            fill
+            stretch
             pointerEvents="none"
             border="transparent"
             radius="none"

package/ai/examples/blocks/Table1.tsx

@@ -94,7 +94,7 @@ export const Table1: React.FC<Table1Props> = ({
   };
 
   return (
-    <Column fillWidth radius="l" border="neutral-alpha-weak" {...flex}>
+    <Column fillWidth radius="l" border {...flex}>
       <Row fillWidth horizontal="between" paddingY="12" paddingRight="12" paddingLeft="24" gap="16" vertical="center" s={{direction: "column",}}>
         <Row fillWidth gap="12" vertical="center" horizontal="between">
           {selectable && someCurrentSelected ? (
@@ -112,25 +112,25 @@ export const Table1: React.FC<Table1Props> = ({
         {showSearch && (
           <Row maxWidth={16}>
             <Input
-              height="s"
+              size="s"
               id="search"
               placeholder="Search..."
               value={search}
-              hasPrefix={<Icon name="search" size="s" onBackground="neutral-weak"/>}
-              hasSuffix={search.length > 0 && <IconButton tooltip="Clear" tooltipPosition="left" icon="close" size="s" variant="ghost" onClick={() => setSearch("")}/>}
+              prefix={<Icon name="search" size="s" onBackground="neutral-weak"/>}
+              suffix={search.length > 0 && <IconButton tooltip="Clear" tooltipPosition="left" icon="close" size="s" variant="ghost" onClick={() => setSearch("")}/>}
               onChange={(e) => setSearch(e.target.value)}
             />
           </Row>
         )}
       </Row>
       <Column fillWidth overflowX="auto">
-        <Column fillWidth radius="l" border="neutral-alpha-weak" overflow="hidden">
-          <Row fillWidth gap="16" paddingX="24" paddingY="12" borderBottom="neutral-alpha-weak">
+        <Column fillWidth radius="l" border overflow="hidden">
+          <Row fillWidth gap="16" paddingX="24" paddingY="12" borderBottom>
             {selectable && (
               <Row textVariant="label-default-s" vertical="center" gap="16">
                 <Checkbox
-                  isChecked={allCurrentSelected || (someCurrentSelected && !allCurrentSelected)}
-                  isIndeterminate={someCurrentSelected && !allCurrentSelected}
+                  checked={allCurrentSelected || (someCurrentSelected && !allCurrentSelected)}
+                  indeterminate={someCurrentSelected && !allCurrentSelected}
                   onToggle={toggleSelectAllCurrent}
                 />
               </Row>
@@ -161,7 +161,7 @@ export const Table1: React.FC<Table1Props> = ({
                         <Row vertical="center" gap="16">
                           <Checkbox
                             key={`cb-${id}`}
-                            isChecked={isSelected(id)}
+                            checked={isSelected(id)}
                             onToggle={() => toggleSelect(id)}
                           />
                         </Row>