@shopify/ui-extensions 2025.10.3 → 2025.10.5

package/src/surfaces/admin/components/OrderedList.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -107,7 +107,14 @@ declare module 'preact' {
 declare const tagName = 's-ordered-list';
 export interface OrderedListJSXProps
   extends Partial<OrderedListProps>,
-    Pick<OrderedListProps$1, 'id'> {}
+    Pick<OrderedListProps$1, 'id'> {
+  /**
+   * The items of the OrderedList.
+   *
+   * Only ListItems are accepted.
+   */
+  children?: ComponentChildren;
+}
 
 export {OrderedList};
 export type {OrderedListJSXProps};

package/src/surfaces/admin/components/Page/examples/large-inline-size-for-wide-content.jsx

@@ -1,4 +1,4 @@
-<s-page heading="Store analytics" inline-size="large">
+<s-page heading="Store analytics" inlineSize="large">
   <s-section>
     <s-stack gap="base">
       <s-text>Monitor your store performance across all channels.</s-text>

package/src/surfaces/admin/components/Page/examples/page-with-heading.jsx

@@ -1,4 +1,4 @@
-<s-page heading="Product catalog" inline-size="base">
+<s-page heading="Product catalog" inlineSize="base">
   <s-section>
     <s-text>Manage your product catalog and inventory.</s-text>
   </s-section>

package/src/surfaces/admin/components/Page/examples/small-inline-size-for-focused-content.jsx

@@ -1,4 +1,4 @@
-<s-page heading="Store settings" inline-size="small">
+<s-page heading="Store settings" inlineSize="small">
   <s-section>
     <s-stack gap="base">
       <s-text>Configure your basic store preferences.</s-text>

package/src/surfaces/admin/components/Page.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -117,7 +117,11 @@ declare module 'preact' {
 declare const tagName = 's-page';
 export interface PageJSXProps
   extends Partial<PageProps>,
-    Pick<PageProps$1, 'id'> {
+    Pick<PageProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Page.
+   */
+  children?: ComponentChildren;
   /**
    * The content to display in the aside section of the page.
    *

package/src/surfaces/admin/components/Paragraph.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -128,7 +128,12 @@ declare module 'preact' {
 declare const tagName = 's-paragraph';
 export interface ParagraphJSXProps
   extends Partial<ParagraphProps>,
-    Pick<ParagraphProps$1, 'id'> {}
+    Pick<ParagraphProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Paragraph.
+   */
+  children?: ComponentChildren;
+}
 
 export {Paragraph};
 export type {ParagraphJSXProps};

package/src/surfaces/admin/components/PasswordField/examples/in-form-layout.html

@@ -1,11 +1,10 @@
 <s-stack gap="base">
-  <s-text-field
+  <s-email-field
     label="Email"
     name="email"
-    type="email"
     autocomplete="username"
     required
-  ></s-text-field>
+  ></s-email-field>
   <s-password-field
     label="Password"
     name="password"

package/src/surfaces/admin/components/PasswordField/examples/in-form-layout.jsx

@@ -1,9 +1,8 @@
 <s-stack gap="base">
-  <s-text-field
+  <s-email-field
     label="Email"
     name="email"
-    type="email"
-    autocomplete="username"
+    autocomplete="email"
     required
    />
   <s-password-field

package/src/surfaces/admin/components/PasswordField.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Popover/examples/notifications.html

@@ -5,7 +5,7 @@
 <s-popover id="notifications-popover">
   <s-box padding="base">
     <s-stack gap="small-200">
-      <s-stack gap="small-800">
+      <s-stack gap="small">
         <s-heading>New order received</s-heading>
         <s-paragraph color="subdued">
           Order #1234 was placed 5 minutes ago
@@ -14,7 +14,7 @@
 
       <s-divider />
 
-      <s-stack gap="small-800">
+      <s-stack gap="small">
         <s-heading>Low inventory alert</s-heading>
         <s-paragraph color="subdued">
           3 products are running low on stock
@@ -23,7 +23,7 @@
 
       <s-divider />
 
-      <s-stack gap="small-800">
+      <s-stack gap="small">
         <s-heading>Payment processed</s-heading>
         <s-paragraph color="subdued">
           $250.00 payment confirmed for order #1230

package/src/surfaces/admin/components/Popover/examples/notifications.jsx

@@ -6,21 +6,21 @@
   <s-popover id="notifications-popover">
     <s-box padding="base">
       <s-stack gap="small-200">
-        <s-stack gap="small-800">
+        <s-stack gap="small">
           <s-heading>New order received</s-heading>
           <s-paragraph color="subdued">Order #1234 was placed 5 minutes ago</s-paragraph>
         </s-stack>
 
         <s-divider />
 
-        <s-stack gap="small-800">
+        <s-stack gap="small">
           <s-heading>Low inventory alert</s-heading>
           <s-paragraph color="subdued">3 products are running low on stock</s-paragraph>
         </s-stack>
 
         <s-divider />
 
-        <s-stack gap="small-800">
+        <s-stack gap="small">
           <s-heading>Payment processed</s-heading>
           <s-paragraph color="subdued">$250.00 payment confirmed for order #1230</s-paragraph>
         </s-stack>

package/src/surfaces/admin/components/Popover/examples/table-display-options.html

@@ -5,9 +5,9 @@
 <s-popover id="table-settings-popover">
   <s-box padding="base">
     <s-stack gap="small-200">
-      <s-stack gap="small-800">
+      <s-stack gap="small">
         <s-heading>Choose columns to display</s-heading>
-        <s-choice-list>
+        <s-choice-list label="Select columns to display">
           <s-choice value="sku" selected>Sku</s-choice>
           <s-choice value="inventory" selected>Inventory</s-choice>
           <s-choice value="price" selected>Price</s-choice>

package/src/surfaces/admin/components/Popover/examples/table-display-options.jsx

@@ -1,18 +1,14 @@
 <>
-  <s-button
-    commandFor="table-settings-popover"
-    disclosure={true}
-    icon="settings"
-  >
+  <s-button commandFor="table-settings-popover" icon="settings">
     Columns
   </s-button>
 
   <s-popover id="table-settings-popover">
     <s-box padding="base">
       <s-stack gap="small-200">
-        <s-stack gap="small-800">
+        <s-stack gap="small">
           <s-heading>Choose columns to display</s-heading>
-          <s-choice-list>
+          <s-choice-list label="Select columns to display">
             <s-choice value="sku" selected>
               Sku
             </s-choice>

package/src/surfaces/admin/components/QueryContainer.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -112,7 +112,12 @@ declare module 'preact' {
 declare const tagName = 's-query-container';
 export interface QueryContainerJSXProps
   extends Partial<QueryContainerProps$1>,
-    Pick<QueryContainerProps$1, 'id'> {}
+    Pick<QueryContainerProps$1, 'id' | 'children'> {
+  /**
+   * The content of the container.
+   */
+  children?: ComponentChildren;
+}
 
 export {QueryContainer};
 export type {QueryContainerJSXProps};

package/src/surfaces/admin/components/SearchField.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Section.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -117,7 +117,12 @@ declare module 'preact' {
 declare const tagName = 's-section';
 export interface SectionJSXProps
   extends Partial<SectionProps>,
-    Pick<SectionProps$1, 'id'> {}
+    Pick<SectionProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Section.
+   */
+  children?: ComponentChildren;
+}
 
 export {Section};
 export type {SectionJSXProps};

package/src/surfaces/admin/components/Select/examples/default.jsx

@@ -1,9 +1,9 @@
 <s-select label="Date range">
-  <s-option value={1}>Today</s-option>
-  <s-option value={2}>Yesterday</s-option>
-  <s-option value={3}>Last 7 days</s-option>
+  <s-option value="1">Today</s-option>
+  <s-option value="2">Yesterday</s-option>
+  <s-option value="3">Last 7 days</s-option>
   <s-option-group label="Custom ranges">
-    <s-option value={4}>Last 30 days</s-option>
-    <s-option value={5}>Last 90 days</s-option>
+    <s-option value="4">Last 30 days</s-option>
+    <s-option value="5">Last 90 days</s-option>
   </s-option-group>
 </s-select>

package/src/surfaces/admin/components/Select.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -202,7 +202,13 @@ declare module 'preact' {
 declare const tagName = 's-select';
 export interface SelectJSXProps
   extends Partial<SelectProps>,
-    Pick<SelectProps$1, 'id'> {
+    Pick<SelectProps$1, 'id' | 'children'> {
+  /**
+   * The options a user can select from.
+   *
+   * Accepts `Option` and `OptionGroup` components.
+   */
+  children?: ComponentChildren;
   onChange?: (event: CallbackEvent<typeof tagName>) => void;
   onInput?: (event: CallbackEvent<typeof tagName>) => void;
   onBlur?: (event: CallbackEvent<typeof tagName>) => void;

package/src/surfaces/admin/components/Spinner.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Stack.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -471,7 +471,12 @@ declare module 'preact' {
 declare const tagName = 's-stack';
 export interface StackJSXProps
   extends Partial<StackProps>,
-    Pick<StackProps$1, 'id'> {}
+    Pick<StackProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Stack.
+   */
+  children?: ComponentChildren;
+}
 
 export {Stack};
 export type {StackJSXProps};

package/src/surfaces/admin/components/StandardComponents.ts

@@ -15,6 +15,7 @@ export type StandardComponents =
   | 'ColorPicker'
   | 'DateField'
   | 'DatePicker'
+  | 'DropZone'
   | 'Divider'
   | 'EmailField'
   | 'Grid'

package/src/surfaces/admin/components/Switch.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Table/examples/default.html

@@ -3,23 +3,27 @@
     <s-table-header-row>
       <s-table-header>Name</s-table-header>
       <s-table-header>Email</s-table-header>
+      <s-table-header format="numeric">Orders placed</s-table-header>
       <s-table-header>Phone</s-table-header>
     </s-table-header-row>
     <s-table-body>
       <s-table-row>
-        <s-table-cell>John Doe</s-table-cell>
-        <s-table-cell>john.doe@example.com</s-table-cell>
+        <s-table-cell>John Smith</s-table-cell>
+        <s-table-cell>john@example.com</s-table-cell>
+        <s-table-cell>23</s-table-cell>
         <s-table-cell>123-456-7890</s-table-cell>
       </s-table-row>
       <s-table-row>
-        <s-table-cell>Jane Doe</s-table-cell>
-        <s-table-cell>jane.doe@example.com</s-table-cell>
-        <s-table-cell>123-456-7890</s-table-cell>
+        <s-table-cell>Jane Johnson</s-table-cell>
+        <s-table-cell>jane@example.com</s-table-cell>
+        <s-table-cell>15</s-table-cell>
+        <s-table-cell>234-567-8901</s-table-cell>
       </s-table-row>
       <s-table-row>
-        <s-table-cell>Brandon Doe</s-table-cell>
-        <s-table-cell>brandon.doe@example.com</s-table-cell>
-        <s-table-cell>123-456-7890</s-table-cell>
+        <s-table-cell>Brandon Williams</s-table-cell>
+        <s-table-cell>brandon@example.com</s-table-cell>
+        <s-table-cell>42</s-table-cell>
+        <s-table-cell>345-678-9012</s-table-cell>
       </s-table-row>
     </s-table-body>
   </s-table>

package/src/surfaces/admin/components/Table/examples/default.jsx

@@ -3,24 +3,28 @@
     <s-table-header-row>
       <s-table-header>Name</s-table-header>
       <s-table-header>Email</s-table-header>
+      <s-table-header format="numeric">Orders placed</s-table-header>
       <s-table-header>Phone</s-table-header>
     </s-table-header-row>
     <s-table-body>
       <s-table-row>
-        <s-table-cell>John Doe</s-table-cell>
-        <s-table-cell>john.doe@example.com</s-table-cell>
+        <s-table-cell>John Smith</s-table-cell>
+        <s-table-cell>john@example.com</s-table-cell>
+        <s-table-cell>23</s-table-cell>
         <s-table-cell>123-456-7890</s-table-cell>
       </s-table-row>
       <s-table-row>
-        <s-table-cell>Jane Doe</s-table-cell>
-        <s-table-cell>jane.doe@example.com</s-table-cell>
-        <s-table-cell>123-456-7890</s-table-cell>
+        <s-table-cell>Jane Johnson</s-table-cell>
+        <s-table-cell>jane@example.com</s-table-cell>
+        <s-table-cell>15</s-table-cell>
+        <s-table-cell>234-567-8901</s-table-cell>
       </s-table-row>
       <s-table-row>
-        <s-table-cell>Brandon Doe</s-table-cell>
-        <s-table-cell>brandon.doe@example.com</s-table-cell>
-        <s-table-cell>123-456-7890</s-table-cell>
+        <s-table-cell>Brandon Williams</s-table-cell>
+        <s-table-cell>brandon@example.com</s-table-cell>
+        <s-table-cell>42</s-table-cell>
+        <s-table-cell>345-678-9012</s-table-cell>
       </s-table-row>
     </s-table-body>
   </s-table>
-</s-section>
+</s-section>

package/src/surfaces/admin/components/Table/examples/full-width-product-inventory-table.html

@@ -4,8 +4,8 @@
       <s-table-header listSlot="primary">Product</s-table-header>
       <s-table-header listSlot="kicker">SKU</s-table-header>
       <s-table-header listSlot="inline">Status</s-table-header>
-      <s-table-header listSlot="labeled">Inventory</s-table-header>
-      <s-table-header listSlot="labeled">Price</s-table-header>
+      <s-table-header listSlot="labeled" format="numeric">Inventory</s-table-header>
+      <s-table-header listSlot="labeled" format="currency">Price</s-table-header>
       <s-table-header listSlot="labeled">Last updated</s-table-header>
     </s-table-header-row>
 

package/src/surfaces/admin/components/Table/examples/full-width-product-inventory-table.jsx

@@ -4,8 +4,8 @@
       <s-table-header listSlot="primary">Product</s-table-header>
       <s-table-header listSlot="kicker">SKU</s-table-header>
       <s-table-header listSlot="inline">Status</s-table-header>
-      <s-table-header listSlot="labeled">Inventory</s-table-header>
-      <s-table-header listSlot="labeled">Price</s-table-header>
+      <s-table-header listSlot="labeled" format="numeric">Inventory</s-table-header>
+      <s-table-header listSlot="labeled" format="currency">Price</s-table-header>
       <s-table-header listSlot="labeled">Last updated</s-table-header>
     </s-table-header-row>
 

package/src/surfaces/admin/components/Table/examples/{advanced-table-with-all-list-slot-types.html → list-variant.html}

@@ -1,19 +1,25 @@
 <s-section padding="none">
-  <s-table>
+  <s-table variant="list">
     <s-table-header-row>
       <s-table-header listSlot="kicker">ID</s-table-header>
       <s-table-header listSlot="primary">Customer</s-table-header>
       <s-table-header listSlot="secondary">Email</s-table-header>
       <s-table-header listSlot="inline">Status</s-table-header>
-      <s-table-header listSlot="labeled">Orders</s-table-header>
-      <s-table-header listSlot="labeled">Total spent</s-table-header>
+      <s-table-header listSlot="labeled" format="numeric">
+        Orders
+      </s-table-header>
+      <s-table-header listSlot="labeled" format="currency">
+        Total spent
+      </s-table-header>
     </s-table-header-row>
     <s-table-body>
       <s-table-row>
         <s-table-cell>#1001</s-table-cell>
         <s-table-cell>Sarah Johnson</s-table-cell>
         <s-table-cell>sarah@example.com</s-table-cell>
-        <s-table-cell><s-badge tone="success">Active</s-badge></s-table-cell>
+        <s-table-cell>
+          <s-badge tone="success">Active</s-badge>
+        </s-table-cell>
         <s-table-cell>23</s-table-cell>
         <s-table-cell>$1,245.50</s-table-cell>
       </s-table-row>
@@ -21,7 +27,9 @@
         <s-table-cell>#1002</s-table-cell>
         <s-table-cell>Mike Chen</s-table-cell>
         <s-table-cell>mike@example.com</s-table-cell>
-        <s-table-cell><s-badge tone="neutral">Inactive</s-badge></s-table-cell>
+        <s-table-cell>
+          <s-badge tone="neutral">Inactive</s-badge>
+        </s-table-cell>
         <s-table-cell>7</s-table-cell>
         <s-table-cell>$432.75</s-table-cell>
       </s-table-row>
@@ -29,7 +37,9 @@
         <s-table-cell>#1003</s-table-cell>
         <s-table-cell>Emma Davis</s-table-cell>
         <s-table-cell>emma@example.com</s-table-cell>
-        <s-table-cell><s-badge tone="success">Active</s-badge></s-table-cell>
+        <s-table-cell>
+          <s-badge tone="success">Active</s-badge>
+        </s-table-cell>
         <s-table-cell>15</s-table-cell>
         <s-table-cell>$892.25</s-table-cell>
       </s-table-row>

package/src/surfaces/admin/components/Table/examples/{advanced-table-with-all-list-slot-types.jsx → list-variant.jsx}

@@ -1,12 +1,12 @@
 <s-section padding="none">  
-  <s-table>
+  <s-table variant="list">
     <s-table-header-row>
       <s-table-header listSlot="kicker">ID</s-table-header>
       <s-table-header listSlot="primary">Customer</s-table-header>
       <s-table-header listSlot="secondary">Email</s-table-header>
       <s-table-header listSlot="inline">Status</s-table-header>
-      <s-table-header listSlot="labeled">Orders</s-table-header>
-      <s-table-header listSlot="labeled">Total spent</s-table-header>
+      <s-table-header listSlot="labeled" format="numeric">Orders</s-table-header>
+      <s-table-header listSlot="labeled" format="currency">Total spent</s-table-header>
     </s-table-header-row>
     <s-table-body>
       <s-table-row>

package/src/surfaces/admin/components/Table/examples/with-loading-state.html

@@ -8,9 +8,32 @@
 
     <s-table-body>
       <s-table-row>
-        <s-table-cell>Loading...</s-table-cell>
-        <s-table-cell>Loading...</s-table-cell>
-        <s-table-cell>Loading...</s-table-cell>
+        <s-table-cell>Water bottle</s-table-cell>
+        <s-table-cell>
+          <s-badge tone="success">Active</s-badge>
+        </s-table-cell>
+        <s-table-cell>128</s-table-cell>
+      </s-table-row>
+      <s-table-row>
+        <s-table-cell>T-shirt</s-table-cell>
+        <s-table-cell>
+          <s-badge tone="warning">Low stock</s-badge>
+        </s-table-cell>
+        <s-table-cell>15</s-table-cell>
+      </s-table-row>
+      <s-table-row>
+        <s-table-cell>Cutting board</s-table-cell>
+        <s-table-cell>
+          <s-badge tone="critical">Out of stock</s-badge>
+        </s-table-cell>
+        <s-table-cell>0</s-table-cell>
+      </s-table-row>
+      <s-table-row>
+        <s-table-cell>Notebook set</s-table-cell>
+        <s-table-cell>
+          <s-badge tone="success">Active</s-badge>
+        </s-table-cell>
+        <s-table-cell>245</s-table-cell>
       </s-table-row>
     </s-table-body>
   </s-table>

package/src/surfaces/admin/components/Table/examples/with-loading-state.jsx

@@ -8,10 +8,33 @@
 
     <s-table-body>
       <s-table-row>
-        <s-table-cell>Loading...</s-table-cell>
-        <s-table-cell>Loading...</s-table-cell>
-        <s-table-cell>Loading...</s-table-cell>
+        <s-table-cell>Water bottle</s-table-cell>
+        <s-table-cell>
+          <s-badge tone="success">Active</s-badge>
+        </s-table-cell>
+        <s-table-cell>128</s-table-cell>
+      </s-table-row>
+      <s-table-row>
+        <s-table-cell>T-shirt</s-table-cell>
+        <s-table-cell>
+          <s-badge tone="warning">Low stock</s-badge>
+        </s-table-cell>
+        <s-table-cell>15</s-table-cell>
+      </s-table-row>
+      <s-table-row>
+        <s-table-cell>Cutting board</s-table-cell>
+        <s-table-cell>
+          <s-badge tone="critical">Out of stock</s-badge>
+        </s-table-cell>
+        <s-table-cell>0</s-table-cell>
+      </s-table-row>
+      <s-table-row>
+        <s-table-cell>Notebook set</s-table-cell>
+        <s-table-cell>
+          <s-badge tone="success">Active</s-badge>
+        </s-table-cell>
+        <s-table-cell>245</s-table-cell>
       </s-table-row>
     </s-table-body>
   </s-table>
-</s-section>
+</s-section>

package/src/surfaces/admin/components/Table/examples/with-pagination.html

@@ -3,7 +3,7 @@
     <s-table-header-row>
       <s-table-header listSlot="primary">Product</s-table-header>
       <s-table-header listSlot="inline">Status</s-table-header>
-      <s-table-header listSlot="secondary">Sales</s-table-header>
+      <s-table-header listSlot="secondary" format="numeric">Sales</s-table-header>
     </s-table-header-row>
 
     <s-table-body>

package/src/surfaces/admin/components/Table/examples/with-pagination.jsx

@@ -3,7 +3,7 @@
     <s-table-header-row>
       <s-table-header listSlot="primary">Product</s-table-header>
       <s-table-header listSlot="inline">Status</s-table-header>
-      <s-table-header listSlot="secondary">Sales</s-table-header>
+      <s-table-header listSlot="secondary" format="numeric">Sales</s-table-header>
     </s-table-header-row>
 
     <s-table-body>

package/src/surfaces/admin/components/Table.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -198,7 +198,11 @@ declare module 'preact' {
 declare const tagName = 's-table';
 export interface TableJSXProps
   extends Partial<TableProps>,
-    Pick<TableProps$1, 'id' | 'onNextPage' | 'onPreviousPage'> {
+    Pick<TableProps$1, 'id' | 'children' | 'onNextPage' | 'onPreviousPage'> {
+  /**
+   * The content of the Table.
+   */
+  children?: ComponentChildren;
   /**
    * Additional filters to display in the table. For example, the `s-search-field` component can be used to filter the table data.
    */