@govtechsg/sgds-web-component 3.2.0-rc.0 → 3.2.0

package/react/components/Table/sgds-table-row.js

@@ -0,0 +1,23 @@
+'use client';
+import { html } from 'lit';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './table-row.js';
+
+/**
+ * @summary Table row organizes and groups table cells or header cells into a single horizontal line within the table.
+ *
+ * @slot - Insert any table cell or header elements to be displayed as part of this row.
+ */
+class SgdsTableRow extends SgdsElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "row");
+    }
+    render() {
+        return html `<slot class="table-row"></slot>`;
+    }
+}
+SgdsTableRow.styles = [...SgdsElement.styles, css_248z];
+
+export { SgdsTableRow, SgdsTableRow as default };
+//# sourceMappingURL=sgds-table-row.js.map

package/react/components/Table/sgds-table-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-table-row.js","sources":["../../../../src/components/Table/sgds-table-row.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableRowStyle from \"./table-row.css\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table row organizes and groups table cells or header cells into a single horizontal line within the table.\n *\n * @slot - Insert any table cell or header elements to be displayed as part of this row.\n */\nexport class SgdsTableRow extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableRowStyle];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"row\");\n  }\n\n  render() {\n    return html`<slot class=\"table-row\"></slot>`;\n  }\n}\n\nexport default SgdsTableRow;\n"],"names":["tableRowStyle"],"mappings":";;;;;AAOA;;;;AAIG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;IAG3C,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;KAClC;IAED,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,+BAAA,CAAiC,CAAC;KAC9C;;AATM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAa,CAAC;;;;"}

package/react/components/Table/sgds-table.cjs.js

@@ -9,9 +9,13 @@ var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var table = require('./table.cjs.js');
+var slot = require('../../utils/slot.cjs.js');
 
 /**
- * @summary The use of a table is to organise a collections of data into readable rows
+ * @summary Table is used for displaying collections of data in organized rows and columns.
+ * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.
+ *
+ * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.
  */
 class SgdsTable extends sgdsElement["default"] {
     constructor() {
@@ -33,18 +37,17 @@ class SgdsTable extends sgdsElement["default"] {
          */
         this.headerPosition = "horizontal";
         /** @internal */
-        this.originalTableData = [];
+        this.hasSlotController = new slot.HasSlotController(this, "[default]");
     }
     connectedCallback() {
         super.connectedCallback();
-        this.originalTableData = [...this.tableData];
     }
     _renderTable() {
         if (this.headerPosition === "horizontal") {
             return lit.html `
         <thead>
           <tr>
-            ${this.rowHeader.map((header, index) => lit.html ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => lit.html ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -61,7 +64,7 @@ class SgdsTable extends sgdsElement["default"] {
         <thead>
           <tr>
             <th></th>
-            ${this.rowHeader.map((header, index) => lit.html ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => lit.html ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -87,6 +90,7 @@ class SgdsTable extends sgdsElement["default"] {
         }
     }
     render() {
+        const hasDefaultSlot = this.hasSlotController.test("[default]");
         return lit.html `
       <div
         class=${classMap_js.classMap({
@@ -98,9 +102,13 @@ class SgdsTable extends sgdsElement["default"] {
         })}
         tabindex="0"
       >
-        <table class="table">
-          ${this._renderTable()}
-        </table>
+        <slot id="table-slot" class="table"></slot>
+
+        ${!hasDefaultSlot
+            ? lit.html `<table class="table">
+              ${this._renderTable()}
+            </table>`
+            : ""}
       </div>
     `;
     }
@@ -119,11 +127,8 @@ tslib.__decorate([
     decorators_js.property({ type: Array })
 ], SgdsTable.prototype, "tableData", void 0);
 tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
+    decorators_js.property({ type: String })
 ], SgdsTable.prototype, "headerPosition", void 0);
-tslib.__decorate([
-    decorators_js.state()
-], SgdsTable.prototype, "originalTableData", void 0);
 
 exports.SgdsTable = SgdsTable;
 exports["default"] = SgdsTable;

package/react/components/Table/sgds-table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-table.cjs.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./table.css\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary The use of a table is to organise a collections of data into readable rows\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Use responsive=\"sm\", responsive=\"md\" , responsive=\"lg\", or responsive=\"xl\" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive=\"always\" to let table be always responsive\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Populate row header cells using Arrays\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Populate column header cells using Arrays only when <code>headerPosition=\"vertical\"</code> or <code>headerPosition=\"both\"</code>\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table (horizontal, vertical, or both)\n   */\n  @property({ type: String, reflect: true }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /** @internal */\n  @state() originalTableData: Array<(string | number)[]> = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.originalTableData = [...this.tableData];\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string, index: number) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th></th>\n            ${this.rowHeader.map((header: string, index: number) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th>${this.columnHeader[index]}</th>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th>${this.columnHeader[index]}</th>\n              ${row.map((cell: string) => html`<td>${cell}</td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <table class=\"table\">\n          ${this._renderTable()}\n        </table>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["SgdsElement","html","classMap","tableStyle","__decorate","property","state"],"mappings":"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"}
+{"version":3,"file":"sgds-table.cjs.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableStyle from \"./table.css\";\nimport { HasSlotController } from \"../../utils/slot\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table is used for displaying collections of data in organized rows and columns.\n * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.\n *\n * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Use responsive=\"sm\", responsive=\"md\" , responsive=\"lg\", or responsive=\"xl\" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive=\"always\" to let table be always responsive\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Populate row header cells using Arrays\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Populate column header cells using Arrays only when <code>headerPosition=\"vertical\"</code> or <code>headerPosition=\"both\"</code>\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table (horizontal, vertical, or both)\n   */\n  @property({ type: String }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th></th>\n            ${this.rowHeader.map((header: string) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th>${this.columnHeader[index]}</th>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th>${this.columnHeader[index]}</th>\n              ${row.map((cell: string) => html`<td>${cell}</td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <slot id=\"table-slot\" class=\"table\"></slot>\n\n        ${!hasDefaultSlot\n          ? html`<table class=\"table\">\n              ${this._renderTable()}\n            </table>`\n          : \"\"}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["SgdsElement","HasSlotController","html","classMap","tableStyle","__decorate","property"],"mappings":"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"}

package/react/components/Table/sgds-table.js

@@ -1,13 +1,17 @@
 'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
 import css_248z from './table.js';
+import { HasSlotController } from '../../utils/slot.js';
 
 /**
- * @summary The use of a table is to organise a collections of data into readable rows
+ * @summary Table is used for displaying collections of data in organized rows and columns.
+ * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.
+ *
+ * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.
  */
 class SgdsTable extends SgdsElement {
     constructor() {
@@ -29,18 +33,17 @@ class SgdsTable extends SgdsElement {
          */
         this.headerPosition = "horizontal";
         /** @internal */
-        this.originalTableData = [];
+        this.hasSlotController = new HasSlotController(this, "[default]");
     }
     connectedCallback() {
         super.connectedCallback();
-        this.originalTableData = [...this.tableData];
     }
     _renderTable() {
         if (this.headerPosition === "horizontal") {
             return html `
         <thead>
           <tr>
-            ${this.rowHeader.map((header, index) => html ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => html ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -57,7 +60,7 @@ class SgdsTable extends SgdsElement {
         <thead>
           <tr>
             <th></th>
-            ${this.rowHeader.map((header, index) => html ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => html ` <th>${header}</th> `)}
           </tr>
         </thead>
         <tbody>
@@ -83,6 +86,7 @@ class SgdsTable extends SgdsElement {
         }
     }
     render() {
+        const hasDefaultSlot = this.hasSlotController.test("[default]");
         return html `
       <div
         class=${classMap({
@@ -94,9 +98,13 @@ class SgdsTable extends SgdsElement {
         })}
         tabindex="0"
       >
-        <table class="table">
-          ${this._renderTable()}
-        </table>
+        <slot id="table-slot" class="table"></slot>
+
+        ${!hasDefaultSlot
+            ? html `<table class="table">
+              ${this._renderTable()}
+            </table>`
+            : ""}
       </div>
     `;
     }
@@ -115,11 +123,8 @@ __decorate([
     property({ type: Array })
 ], SgdsTable.prototype, "tableData", void 0);
 __decorate([
-    property({ type: String, reflect: true })
+    property({ type: String })
 ], SgdsTable.prototype, "headerPosition", void 0);
-__decorate([
-    state()
-], SgdsTable.prototype, "originalTableData", void 0);
 
 export { SgdsTable, SgdsTable as default };
 //# sourceMappingURL=sgds-table.js.map

package/react/components/Table/sgds-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-table.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./table.css\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary The use of a table is to organise a collections of data into readable rows\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Use responsive=\"sm\", responsive=\"md\" , responsive=\"lg\", or responsive=\"xl\" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive=\"always\" to let table be always responsive\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Populate row header cells using Arrays\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Populate column header cells using Arrays only when <code>headerPosition=\"vertical\"</code> or <code>headerPosition=\"both\"</code>\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table (horizontal, vertical, or both)\n   */\n  @property({ type: String, reflect: true }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /** @internal */\n  @state() originalTableData: Array<(string | number)[]> = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.originalTableData = [...this.tableData];\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string, index: number) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th></th>\n            ${this.rowHeader.map((header: string, index: number) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th>${this.columnHeader[index]}</th>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th>${this.columnHeader[index]}</th>\n              ${row.map((cell: string) => html`<td>${cell}</td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <table class=\"table\">\n          ${this._renderTable()}\n        </table>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["tableStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-table.js","sources":["../../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableStyle from \"./table.css\";\nimport { HasSlotController } from \"../../utils/slot\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table is used for displaying collections of data in organized rows and columns.\n * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.\n *\n * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Use responsive=\"sm\", responsive=\"md\" , responsive=\"lg\", or responsive=\"xl\" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive=\"always\" to let table be always responsive\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Populate row header cells using Arrays\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Populate column header cells using Arrays only when <code>headerPosition=\"vertical\"</code> or <code>headerPosition=\"both\"</code>\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table (horizontal, vertical, or both)\n   */\n  @property({ type: String }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th></th>\n            ${this.rowHeader.map((header: string) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th>${this.columnHeader[index]}</th>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th>${this.columnHeader[index]}</th>\n              ${row.map((cell: string) => html`<td>${cell}</td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <slot id=\"table-slot\" class=\"table\"></slot>\n\n        ${!hasDefaultSlot\n          ? html`<table class=\"table\">\n              ${this._renderTable()}\n            </table>`\n          : \"\"}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["tableStyle"],"mappings":"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"}

package/react/components/Table/table-cell.cjs.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+
+var css_248z = lit.css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;padding:var(--sgds-padding-lg)}`;
+
+exports["default"] = css_248z;
+//# sourceMappingURL=table-cell.cjs.js.map

package/react/components/Table/table-cell.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Table/table-cell.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;padding:var(--sgds-padding-lg)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=table-cell.js.map

package/react/components/Table/table-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/Table/table-head.cjs.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+
+var css_248z = lit.css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis);display:table-cell;font-weight:700;padding:var(--sgds-padding-lg)}:host(:not([border])){border-color:var(--sgds-border-color-muted)}`;
+
+exports["default"] = css_248z;
+//# sourceMappingURL=table-head.cjs.js.map

package/react/components/Table/table-head.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-head.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Table/table-head.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis);display:table-cell;font-weight:700;padding:var(--sgds-padding-lg)}:host(:not([border])){border-color:var(--sgds-border-color-muted)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=table-head.js.map

package/react/components/Table/table-head.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-head.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/Table/table-row.cjs.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+
+var css_248z = lit.css`:host{display:table-row;width:100%}`;
+
+exports["default"] = css_248z;
+//# sourceMappingURL=table-row.cjs.js.map

package/react/components/Table/table-row.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-row.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Table/table-row.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{display:table-row;width:100%}`;
+
+export { css_248z as default };
+//# sourceMappingURL=table-row.js.map

package/react/components/Table/table-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-row.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/Table/table.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{border-color:var(--sgds-border-color-default);vertical-align:top;width:100%}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-lg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>thead th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
+var css_248z = lit.css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{border-color:var(--sgds-border-color-default);display:table;vertical-align:top;width:100%}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-lg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>thead th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=table.cjs.js.map

package/react/components/Table/table.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{border-color:var(--sgds-border-color-default);vertical-align:top;width:100%}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-lg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>thead th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
+var css_248z = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{border-color:var(--sgds-border-color-default);display:table;vertical-align:top;width:100%}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-lg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>thead th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=table.js.map

package/react/components/Toast/toast.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color-default)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color-fixed-light)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-body strong{line-height:var(--sgds-line-height-min)}.toast-body span{color:var(--sgds-color-subtle)}.toast-action{word-wrap:break-word;color:var(--sgds-link-color-default)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
+var css_248z = lit.css`:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color-default)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color-fixed-light)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-body{gap:var(--sgds-gap-2-xs)}.toast-body strong{line-height:var(--sgds-line-height-min)}.toast-body span{color:var(--sgds-color-subtle)}.toast-action{word-wrap:break-word;color:var(--sgds-link-color-default)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=toast.cjs.js.map

package/react/components/Toast/toast.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color-default)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color-fixed-light)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-body strong{line-height:var(--sgds-line-height-min)}.toast-body span{color:var(--sgds-color-subtle)}.toast-action{word-wrap:break-word;color:var(--sgds-link-color-default)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
+var css_248z = css`:host([variant=info]) slot[name=icon]::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success]) slot[name=icon]::slotted(*){color:var(--sgds-success-color-default)}:host([variant=danger]) slot[name=icon]::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=warning]) slot[name=icon]::slotted(*){color:var(--sgds-warning-color-fixed-light)}.toast{align-items:flex-start;background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);display:flex;flex-direction:row;gap:var(--sgds-gap-xs);max-width:var(--sgds-dimension-480);min-width:var(--sgds-dimension-320);padding:var(--sgds-padding-md);pointer-events:auto;width:320px}.toast-content{word-wrap:break-word;gap:var(--sgds-gap-sm)}.toast-body,.toast-content{display:flex;flex-direction:column}.toast-body{gap:var(--sgds-gap-2-xs)}.toast-body strong{line-height:var(--sgds-line-height-min)}.toast-body span{color:var(--sgds-color-subtle)}.toast-action{word-wrap:break-word;color:var(--sgds-link-color-default)}.toast-header strong{margin-right:auto;word-break:break-all}.close-btn{margin-left:auto}.d-none{display:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=toast.js.map

package/react/index.cjs.js

@@ -40,10 +40,10 @@ var index$x = require('./progress-bar/index.cjs.js');
 var index$y = require('./quantity-toggle/index.cjs.js');
 var index$z = require('./radio-group/index.cjs.js');
 var index$A = require('./radio/index.cjs.js');
-var index$B = require('./select/index.cjs.js');
-var index$C = require('./sidenav-item/index.cjs.js');
-var index$D = require('./sidenav-link/index.cjs.js');
-var index$E = require('./sidenav/index.cjs.js');
+var index$B = require('./sidenav-item/index.cjs.js');
+var index$C = require('./sidenav-link/index.cjs.js');
+var index$D = require('./sidenav/index.cjs.js');
+var index$E = require('./select/index.cjs.js');
 var index$F = require('./skeleton/index.cjs.js');
 var index$G = require('./spinner/index.cjs.js');
 var index$H = require('./stepper/index.cjs.js');
@@ -53,12 +53,15 @@ var index$K = require('./switch/index.cjs.js');
 var index$L = require('./tab-group/index.cjs.js');
 var index$M = require('./tab-panel/index.cjs.js');
 var index$N = require('./tab/index.cjs.js');
-var index$O = require('./table/index.cjs.js');
-var index$P = require('./table-of-contents/index.cjs.js');
-var index$Q = require('./textarea/index.cjs.js');
-var index$R = require('./toast-container/index.cjs.js');
-var index$S = require('./toast/index.cjs.js');
-var index$T = require('./tooltip/index.cjs.js');
+var index$O = require('./table-cell/index.cjs.js');
+var index$P = require('./table-head/index.cjs.js');
+var index$Q = require('./table-row/index.cjs.js');
+var index$R = require('./table/index.cjs.js');
+var index$S = require('./table-of-contents/index.cjs.js');
+var index$T = require('./textarea/index.cjs.js');
+var index$U = require('./toast-container/index.cjs.js');
+var index$V = require('./toast/index.cjs.js');
+var index$W = require('./tooltip/index.cjs.js');
 
 
 
@@ -99,10 +102,10 @@ exports.SgdsProgressBar = index$x["default"];
 exports.SgdsQuantityToggle = index$y["default"];
 exports.SgdsRadioGroup = index$z["default"];
 exports.SgdsRadio = index$A["default"];
-exports.SgdsSelect = index$B["default"];
-exports.SgdsSidenavItem = index$C["default"];
-exports.SgdsSidenavLink = index$D["default"];
-exports.SgdsSidenav = index$E["default"];
+exports.SgdsSidenavItem = index$B["default"];
+exports.SgdsSidenavLink = index$C["default"];
+exports.SgdsSidenav = index$D["default"];
+exports.SgdsSelect = index$E["default"];
 exports.SgdsSkeleton = index$F["default"];
 exports.SgdsSpinner = index$G["default"];
 exports.SgdsStepper = index$H["default"];
@@ -112,10 +115,13 @@ exports.SgdsSwitch = index$K["default"];
 exports.SgdsTabGroup = index$L["default"];
 exports.SgdsTabPanel = index$M["default"];
 exports.SgdsTab = index$N["default"];
-exports.SgdsTable = index$O["default"];
-exports.SgdsTableOfContents = index$P["default"];
-exports.SgdsTextarea = index$Q["default"];
-exports.SgdsToastContainer = index$R["default"];
-exports.SgdsToast = index$S["default"];
-exports.SgdsTooltip = index$T["default"];
+exports.SgdsTableCell = index$O["default"];
+exports.SgdsTableHead = index$P["default"];
+exports.SgdsTableRow = index$Q["default"];
+exports.SgdsTable = index$R["default"];
+exports.SgdsTableOfContents = index$S["default"];
+exports.SgdsTextarea = index$T["default"];
+exports.SgdsToastContainer = index$U["default"];
+exports.SgdsToast = index$V["default"];
+exports.SgdsTooltip = index$W["default"];
 //# sourceMappingURL=index.cjs.js.map

package/react/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/react/index.d.ts

@@ -35,10 +35,10 @@ export { default as SgdsProgressBar } from './progress-bar';
 export { default as SgdsQuantityToggle } from './quantity-toggle';
 export { default as SgdsRadioGroup } from './radio-group';
 export { default as SgdsRadio } from './radio';
-export { default as SgdsSelect } from './select';
 export { default as SgdsSidenavItem } from './sidenav-item';
 export { default as SgdsSidenavLink } from './sidenav-link';
 export { default as SgdsSidenav } from './sidenav';
+export { default as SgdsSelect } from './select';
 export { default as SgdsSkeleton } from './skeleton';
 export { default as SgdsSpinner } from './spinner';
 export { default as SgdsStepper } from './stepper';
@@ -48,6 +48,9 @@ export { default as SgdsSwitch } from './switch';
 export { default as SgdsTabGroup } from './tab-group';
 export { default as SgdsTabPanel } from './tab-panel';
 export { default as SgdsTab } from './tab';
+export { default as SgdsTableCell } from './table-cell';
+export { default as SgdsTableHead } from './table-head';
+export { default as SgdsTableRow } from './table-row';
 export { default as SgdsTable } from './table';
 export { default as SgdsTableOfContents } from './table-of-contents';
 export { default as SgdsTextarea } from './textarea';

package/react/index.js

@@ -36,10 +36,10 @@ export { default as SgdsProgressBar } from './progress-bar/index.js';
 export { default as SgdsQuantityToggle } from './quantity-toggle/index.js';
 export { default as SgdsRadioGroup } from './radio-group/index.js';
 export { default as SgdsRadio } from './radio/index.js';
-export { default as SgdsSelect } from './select/index.js';
 export { default as SgdsSidenavItem } from './sidenav-item/index.js';
 export { default as SgdsSidenavLink } from './sidenav-link/index.js';
 export { default as SgdsSidenav } from './sidenav/index.js';
+export { default as SgdsSelect } from './select/index.js';
 export { default as SgdsSkeleton } from './skeleton/index.js';
 export { default as SgdsSpinner } from './spinner/index.js';
 export { default as SgdsStepper } from './stepper/index.js';
@@ -49,6 +49,9 @@ export { default as SgdsSwitch } from './switch/index.js';
 export { default as SgdsTabGroup } from './tab-group/index.js';
 export { default as SgdsTabPanel } from './tab-panel/index.js';
 export { default as SgdsTab } from './tab/index.js';
+export { default as SgdsTableCell } from './table-cell/index.js';
+export { default as SgdsTableHead } from './table-head/index.js';
+export { default as SgdsTableRow } from './table-row/index.js';
 export { default as SgdsTable } from './table/index.js';
 export { default as SgdsTableOfContents } from './table-of-contents/index.js';
 export { default as SgdsTextarea } from './textarea/index.js';

package/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/react/table-cell/index.cjs.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var react = require('@lit/react');
+var sgdsTableCell = require('../components/Table/sgds-table-cell.cjs.js');
+var ceRegistry = require('../utils/ce-registry.cjs.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+ceRegistry.register("sgds-table-cell", sgdsTableCell.SgdsTableCell);
+var index = react.createComponent({
+    react: React__namespace,
+    tagName: "sgds-table-cell",
+    elementClass: sgdsTableCell.SgdsTableCell,
+    events: {}
+});
+
+exports["default"] = index;
+//# sourceMappingURL=index.cjs.js.map

package/react/table-cell/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/table-cell/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Table/sgds-table-cell\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-table-cell\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-table-cell\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,iBAAiB,EAAEC,2BAAS,CAAC,CAAC;AAEvC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAEF,2BAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/table-cell/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: React.ForwardRefExoticComponent<any>;
+export default _default;

package/react/table-cell/index.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { SgdsTableCell } from '../components/Table/sgds-table-cell.js';
+import { register } from '../utils/ce-registry.js';
+
+register("sgds-table-cell", SgdsTableCell);
+var index = createComponent({
+    react: React,
+    tagName: "sgds-table-cell",
+    elementClass: SgdsTableCell,
+    events: {}
+});
+
+export { index as default };
+//# sourceMappingURL=index.js.map