@kdcloudjs/shoelace 1.0.1 → 1.0.2

package/cdn/chunks/{chunk.WQDITCLK.js → chunk.BTAUZ2GK.js}

@@ -28,7 +28,7 @@ import {
 } from "./chunk.EFE6XYM5.js";
 import {
   ShoelaceElement
-} from "./chunk.S63QOIIY.js";
+} from "./chunk.C5MBP4NZ.js";
 import {
   e as e2,
   n,

package/cdn/chunks/{chunk.2XVSGMNG.js → chunk.BU65MDM4.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.2SU6QBUU.js";
 import {
   ShoelaceElement
-} from "./chunk.S63QOIIY.js";
+} from "./chunk.C5MBP4NZ.js";
 import {
   n
 } from "./chunk.KMJ37RZ3.js";

package/cdn/chunks/{chunk.EKYW6JMS.js → chunk.BWJKC7HR.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.VDD6G6EQ.js";
 import {
   SlButtonGroup
-} from "./chunk.S7QWUQFL.js";
+} from "./chunk.274OIEVI.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -27,7 +27,7 @@ import {
 } from "./chunk.EFE6XYM5.js";
 import {
   ShoelaceElement
-} from "./chunk.S63QOIIY.js";
+} from "./chunk.C5MBP4NZ.js";
 import {
   e as e2,
   n,

package/cdn/chunks/{chunk.S63QOIIY.js → chunk.C5MBP4NZ.js}

@@ -86,7 +86,7 @@ var ShoelaceElement = class extends r {
 _hasRecordedInitialProperties = new WeakMap();
 /* eslint-disable */
 // @ts-expect-error This is auto-injected at build time.
-ShoelaceElement.version = "1.0.1";
+ShoelaceElement.version = "1.0.2";
 ShoelaceElement.dependencies = {};
 __decorateClass([
   n()

package/cdn/chunks/{chunk.WXUIXCKY.js → chunk.C77LBFQ2.js}

@@ -1,6 +1,6 @@
 import {
   SlQrCode
-} from "./chunk.HDHWBI5F.js";
+} from "./chunk.XVF5P3O6.js";
 
 // src/components/qr-code/qr-code.ts
 var qr_code_default = SlQrCode;

package/cdn/chunks/{chunk.23MCZEGK.js → chunk.CD7ANDDQ.js}

@@ -1,15 +1,15 @@
 import {
   menu_item_styles_default
-} from "./chunk.KUN2355C.js";
+} from "./chunk.KJA2CCWT.js";
 import {
   SubmenuController
 } from "./chunk.OS2IKKCL.js";
 import {
   SlPopup
-} from "./chunk.ZUZEZOVI.js";
+} from "./chunk.K2CNA4AH.js";
 import {
   SlSpinner
-} from "./chunk.HMNXDAS4.js";
+} from "./chunk.7NPWMO7X.js";
 import {
   LocalizeController
 } from "./chunk.2SU6QBUU.js";
@@ -22,7 +22,7 @@ import {
 } from "./chunk.ZLZKOPYV.js";
 import {
   SlIcon
-} from "./chunk.Z7UUV7BS.js";
+} from "./chunk.5B2RHXB2.js";
 import {
   watch
 } from "./chunk.WID3TCT6.js";
@@ -31,7 +31,7 @@ import {
 } from "./chunk.EFE6XYM5.js";
 import {
   ShoelaceElement
-} from "./chunk.S63QOIIY.js";
+} from "./chunk.C5MBP4NZ.js";
 import {
   e as e2,
   n

package/cdn/chunks/{chunk.H6I32WY7.js → chunk.CY47GRGG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.IUQQ6GMY.js";
 import {
   SlButton
-} from "./chunk.TGVOO6UZ.js";
+} from "./chunk.XWSZ3UD2.js";
 import {
   e
 } from "./chunk.ZLZKOPYV.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.EFE6XYM5.js";
 import {
   ShoelaceElement
-} from "./chunk.S63QOIIY.js";
+} from "./chunk.C5MBP4NZ.js";
 import {
   n,
   r

package/cdn/chunks/{chunk.TK4U7QEB.js → chunk.D7YZUGAV.js}

@@ -1,6 +1,6 @@
 import {
   SlAnimation
-} from "./chunk.7Q2ZB5N6.js";
+} from "./chunk.E3LJCZQT.js";
 
 // src/components/animation/animation.ts
 var animation_default = SlAnimation;

package/cdn/chunks/{chunk.2KS6USIH.js → chunk.DK7OY5PV.js}

@@ -1,6 +1,6 @@
 import {
   SlRadioButton
-} from "./chunk.QCG447G3.js";
+} from "./chunk.BM7OO3LN.js";
 
 // src/react/radio-button/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.VIUGKMKS.js → chunk.DMPBM3WB.js}

@@ -1,6 +1,6 @@
 import {
   SlTag
-} from "./chunk.ERY5FHKG.js";
+} from "./chunk.T4AVTU5A.js";
 
 // src/react/tag/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.DRKQ5M3Y.js → chunk.DR22TASD.js}

@@ -1,6 +1,6 @@
 import {
   SlColorPicker
-} from "./chunk.HEBGUDU6.js";
+} from "./chunk.TMVJS6LD.js";
 
 // src/components/color-picker/color-picker.ts
 var color_picker_default = SlColorPicker;

package/cdn/chunks/{chunk.OZJOM3TM.js → chunk.DTK4XUYI.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.EFE6XYM5.js";
 import {
   ShoelaceElement
-} from "./chunk.S63QOIIY.js";
+} from "./chunk.C5MBP4NZ.js";
 import {
   x
 } from "./chunk.ZKRJ3RUK.js";

package/cdn/chunks/{chunk.SWNGI3OG.js → chunk.DUQ2OG4T.js}

@@ -1,6 +1,6 @@
 import {
   SlCarousel
-} from "./chunk.J4EOEOJZ.js";
+} from "./chunk.VQY24QQG.js";
 
 // src/react/carousel/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.7Q2ZB5N6.js → chunk.E3LJCZQT.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.EFE6XYM5.js";
 import {
   ShoelaceElement
-} from "./chunk.S63QOIIY.js";
+} from "./chunk.C5MBP4NZ.js";
 import {
   n,
   r2 as r

package/cdn/chunks/{chunk.MNQ7FLV4.js → chunk.E5SJBZWN.js}

@@ -1,6 +1,6 @@
 import {
   SlBreadcrumb
-} from "./chunk.G2HIVVML.js";
+} from "./chunk.NJFOOAX6.js";
 
 // src/react/breadcrumb/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.KRLLUWQA.js → chunk.E6DXGKDY.js}

@@ -1,6 +1,6 @@
 import {
   SlDetails
-} from "./chunk.L633QNYU.js";
+} from "./chunk.WY6I3BUX.js";
 
 // src/components/details/details.ts
 var details_default = SlDetails;

package/cdn/chunks/{chunk.N4EKR2VN.js → chunk.EEXRATVK.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.EFE6XYM5.js";
 import {
   ShoelaceElement
-} from "./chunk.S63QOIIY.js";
+} from "./chunk.C5MBP4NZ.js";
 import {
   n
 } from "./chunk.KMJ37RZ3.js";

package/{dist/chunks/chunk.J36FPWHH.js → cdn/chunks/chunk.EGWMFBMJ.js}

@@ -1,6 +1,6 @@
 import {
   SlTooltip
-} from "./chunk.ZKCCQ4BX.js";
+} from "./chunk.AD227U3E.js";
 
 // src/react/tooltip/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.UE45ZK4Q.js → cdn/chunks/chunk.EHK4FN4I.js}

@@ -1,6 +1,6 @@
 import {
   SlMenu
-} from "./chunk.H3IY5UJN.js";
+} from "./chunk.JKOLXWTK.js";
 
 // src/components/menu/menu.ts
 var menu_default = SlMenu;

package/cdn/chunks/{chunk.EB6TUKLT.js → chunk.ETBW3UWE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.2SU6QBUU.js";
 import {
   ShoelaceElement
-} from "./chunk.S63QOIIY.js";
+} from "./chunk.C5MBP4NZ.js";
 import {
   n,
   r

package/cdn/chunks/{chunk.LYWATFDL.js → chunk.F6EXYTIQ.js}

@@ -1,6 +1,6 @@
 import {
   SlDropdown
-} from "./chunk.BIHUFVN4.js";
+} from "./chunk.TIWL7N5C.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SlDropdown;

package/cdn/chunks/{chunk.2S75J74A.js → chunk.F6LAMHEB.js}

@@ -1,6 +1,6 @@
 import {
   SlRadio
-} from "./chunk.G2EACEEP.js";
+} from "./chunk.WBIKWNRR.js";
 
 // src/react/radio/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.MKMSCVMU.js → chunk.FEUFBSB6.js}

@@ -1,6 +1,6 @@
 import {
   SlScreen
-} from "./chunk.VPXWS4TL.js";
+} from "./chunk.MBLMR5PD.js";
 
 // src/components/screen/screen.ts
 var screen_default = SlScreen;

package/cdn/chunks/{chunk.GGRJWHNG.js → chunk.FPSEIB6K.js}

@@ -1,6 +1,6 @@
 import {
   SlButton
-} from "./chunk.TGVOO6UZ.js";
+} from "./chunk.XWSZ3UD2.js";
 
 // src/react/button/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.LU3LDDDN.js → chunk.FUJQ6WAL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ZLZKOPYV.js";
 import {
   SlIcon
-} from "./chunk.Z7UUV7BS.js";
+} from "./chunk.5B2RHXB2.js";
 import {
   watch
 } from "./chunk.WID3TCT6.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk.EFE6XYM5.js";
 import {
   ShoelaceElement
-} from "./chunk.S63QOIIY.js";
+} from "./chunk.C5MBP4NZ.js";
 import {
   n,
   r

package/cdn/chunks/{chunk.C4QDDRYA.js → chunk.FVNSUFSE.js}

@@ -1,6 +1,6 @@
 import {
   SlBadge
-} from "./chunk.WFJE4JXV.js";
+} from "./chunk.XDTCQJW6.js";
 
 // src/components/badge/badge.ts
 var badge_default = SlBadge;

package/cdn/chunks/{chunk.V722FZYB.js → chunk.G4S3RY3U.js}

@@ -1,6 +1,6 @@
 import {
   SlIcon
-} from "./chunk.Z7UUV7BS.js";
+} from "./chunk.5B2RHXB2.js";
 
 // src/react/icon/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.FBET7QPS.js → chunk.GFBIRQG3.js}

@@ -1,6 +1,6 @@
 import {
   SlRadioButton
-} from "./chunk.QCG447G3.js";
+} from "./chunk.BM7OO3LN.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = SlRadioButton;

package/cdn/chunks/{chunk.L5A357JC.js → chunk.GH4Z7QBU.js}

@@ -1,6 +1,6 @@
 import {
   SlIconButton
-} from "./chunk.QB4EPYJW.js";
+} from "./chunk.XAUO4ASA.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SlIconButton;

package/cdn/chunks/{chunk.DA7FG377.js → chunk.GK63N5AE.js}

@@ -1,6 +1,6 @@
 import {
   SlProgressBar
-} from "./chunk.3KZ6RFET.js";
+} from "./chunk.B3SMJ4ZH.js";
 
 // src/components/progress-bar/progress-bar.ts
 var progress_bar_default = SlProgressBar;

package/{dist/chunks/chunk.F7DRAXN5.js → cdn/chunks/chunk.GM3ZSZIB.js}

@@ -1,6 +1,6 @@
 import {
   SlDialog
-} from "./chunk.N2LGAJA2.js";
+} from "./chunk.WENKIBPX.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = SlDialog;

package/cdn/chunks/{chunk.ISWER3QR.js → chunk.H7KGGSN7.js}

@@ -1,6 +1,6 @@
 import {
   SlInclude
-} from "./chunk.AQ5Q7YJ7.js";
+} from "./chunk.KSUQROY6.js";
 
 // src/react/include/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.EWH7BS7Y.js → cdn/chunks/chunk.HAN47AQU.js}

@@ -1,6 +1,6 @@
 import {
   SlIcon
-} from "./chunk.Z6PM4ZSE.js";
+} from "./chunk.5B2RHXB2.js";
 
 // src/components/icon/icon.ts
 var icon_default = SlIcon;

package/{dist/chunks/chunk.ETNZZR4T.js → cdn/chunks/chunk.HJW6J5WI.js}

@@ -1,6 +1,6 @@
 import {
   SlFormatDate
-} from "./chunk.VPK6RGLJ.js";
+} from "./chunk.OSD74RPD.js";
 
 // src/react/format-date/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.WAQCCPIL.js → chunk.I57WXLMR.js}

@@ -1,6 +1,6 @@
 import {
   SlMenuLabel
-} from "./chunk.OZJOM3TM.js";
+} from "./chunk.DTK4XUYI.js";
 
 // src/react/menu-label/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.KBT5YSFI.js → chunk.ICNDZ37C.js}

@@ -1,6 +1,6 @@
 import {
   SlMutationObserver
-} from "./chunk.N4EKR2VN.js";
+} from "./chunk.EEXRATVK.js";
 
 // src/components/mutation-observer/mutation-observer.ts
 var mutation_observer_default = SlMutationObserver;

package/cdn/chunks/{chunk.YQKM65BK.js → chunk.IQGWTOFC.js}

@@ -1,6 +1,6 @@
 import {
   SlInput
-} from "./chunk.Y2LQHEJK.js";
+} from "./chunk.LZIP6CLF.js";
 
 // src/react/input/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.HPMATJAW.js → chunk.IRYP33LO.js}

@@ -19,31 +19,32 @@ var option_styles_default = i`
     display: flex;
     align-items: center;
     font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-medium);
+    font-size: var(--sl-font-size-small);
     font-weight: var(--sl-font-weight-normal);
     line-height: var(--sl-line-height-normal);
     letter-spacing: var(--sl-letter-spacing-normal);
-    color: var(--sl-color-neutral-700);
-    padding: var(--sl-spacing-x-small) var(--sl-spacing-medium) var(--sl-spacing-x-small) var(--sl-spacing-x-small);
+    color: var(--sl-color-neutral-900);
+    padding: var(--sl-spacing-x-small) var(--sl-spacing-small) var(--sl-spacing-x-small) var(--sl-spacing-small);
     transition: var(--sl-transition-fast) fill;
     cursor: pointer;
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
     background-color: var(--sl-color-neutral-100);
-    color: var(--sl-color-neutral-1000);
+    color: var(--sl-color-neutral-900);
   }
 
   .option--current,
   .option--current.option--disabled {
-    background-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
+    background-color: var(--sl-color-primary-100);
+    color: var(--sl-color-primary-600);
     opacity: 1;
   }
 
   .option--disabled {
     outline: none;
-    opacity: 0.5;
+    opacity: 1;
+    color: var(--sl-color-neutral-400);
     cursor: not-allowed;
   }
 
@@ -62,6 +63,10 @@ var option_styles_default = i`
     padding-inline-end: var(--sl-spacing-2x-small);
   }
 
+  .option.option--selected .option__check {
+    font-size: var(--sl-font-size-medium);
+  }
+
   .option--selected .option__check {
     visibility: visible;
   }
@@ -73,8 +78,13 @@ var option_styles_default = i`
     align-items: center;
   }
 
+  .option__prefix::slotted(*),
+  .option__suffix::slotted(*) {
+    font-size: var(--sl-font-size-medium);
+  }
+
   .option__prefix::slotted(*) {
-    margin-inline-end: var(--sl-spacing-x-small);
+    margin-inline-end: var(--sl-spacing-2x-small);
   }
 
   .option__suffix::slotted(*) {

package/cdn/chunks/{chunk.3PSXUWXP.js → chunk.IT6CLHXE.js}

@@ -1,6 +1,6 @@
 import {
   SlTreeItem
-} from "./chunk.QYUCN4RV.js";
+} from "./chunk.2MHOHVMG.js";
 
 // src/components/tree-item/tree-item.ts
 var tree_item_default = SlTreeItem;

package/cdn/chunks/{chunk.RW5BTS62.js → chunk.IY4XR4U3.js}

@@ -1,6 +1,6 @@
 import {
   SlCarouselItem
-} from "./chunk.BPSOFJF5.js";
+} from "./chunk.YLHUKNQ6.js";
 
 // src/react/carousel-item/index.ts
 import * as React from "react";

package/cdn/chunks/chunk.J5RYNIJI.js

@@ -0,0 +1,47 @@
+import {
+  CUSTOM_CELL,
+  CUSTOM_ROW
+} from "./chunk.4VRHDE3E.js";
+
+// src/components/table/utils.ts
+var getTableAlign = (align) => {
+  let result = "flex-start";
+  if (align === "left") {
+    result = "flex-start";
+  } else if (align === "right") {
+    result = "flex-end";
+  } else if (align === "center") {
+    result = "center";
+  }
+  return result;
+};
+var getTableRect = (width) => {
+  return typeof width === "number" ? `${width}px` : width;
+};
+var iterateStyles = (style) => Object.entries(style).map(([key, value]) => `${key}:${value}`).join(";");
+var generateCustomSlot = (rowKey, data, customs) => {
+  return customs.map((customItem) => {
+    return data.map((row) => {
+      switch (customItem.type) {
+        case "customCell": {
+          const slotName = `${CUSTOM_CELL}-${customItem.columnId}-${row[rowKey]}`;
+          const cellInfo = row[customItem.columnId];
+          return customItem.callback(slotName, row, cellInfo);
+        }
+        case "customRow": {
+          const rowSlotName = `${CUSTOM_ROW}-${row[rowKey]}`;
+          return customItem.callback(rowSlotName, row);
+        }
+        default:
+          return null;
+      }
+    });
+  });
+};
+
+export {
+  getTableAlign,
+  getTableRect,
+  iterateStyles,
+  generateCustomSlot
+};

package/cdn/chunks/{chunk.TXS3LYDO.js → chunk.JABFV2DF.js}

@@ -1,6 +1,6 @@
 import {
   SlTag
-} from "./chunk.ERY5FHKG.js";
+} from "./chunk.T4AVTU5A.js";
 
 // src/components/tag/tag.ts
 var tag_default = SlTag;

package/cdn/chunks/{chunk.ZXNQUYIE.js → chunk.JEIGSLSZ.js}

@@ -1,6 +1,6 @@
 import {
   SlSplitPanel
-} from "./chunk.GGN4C6HZ.js";
+} from "./chunk.LY5O4QV2.js";
 
 // src/react/split-panel/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.ID7XB2CS.js → chunk.JFG3IK2R.js}

@@ -1,3 +1,6 @@
+import {
+  getDefaultFilters
+} from "./chunk.TF3IWFSX.js";
 import {
   convertRowSelectionState,
   getRowSelectionOptions,
@@ -6,9 +9,6 @@ import {
 import {
   getDefaultSorting
 } from "./chunk.WQTJ57OT.js";
-import {
-  getDefaultFilters
-} from "./chunk.TF3IWFSX.js";
 import {
   table_style_default
 } from "./chunk.3XFODJZM.js";
@@ -20,25 +20,28 @@ import {
   getPaginationRowModel,
   getSortedRowModel
 } from "./chunk.JDPUQZOS.js";
+import {
+  CUSTOM_CELL
+} from "./chunk.4VRHDE3E.js";
 import {
   SlRadio
-} from "./chunk.G2EACEEP.js";
+} from "./chunk.WBIKWNRR.js";
 import {
   SlPagination
-} from "./chunk.LGL63TDV.js";
+} from "./chunk.W6BVVB2O.js";
 import {
   e as e2,
   n as n2
 } from "./chunk.WE4USEQU.js";
 import {
   SlCheckbox
-} from "./chunk.J5OZABHC.js";
+} from "./chunk.KW3B3W3A.js";
 import {
   e
 } from "./chunk.ZLZKOPYV.js";
 import {
   ShoelaceElement
-} from "./chunk.S63QOIIY.js";
+} from "./chunk.C5MBP4NZ.js";
 import {
   n,
   r
@@ -5576,7 +5579,7 @@ var SlTable = class extends ShoelaceElement {
     this.bodyWrapRef = e2();
     this.syncing = false;
     this.warnIfNoKey = () => {
-      if (this.rowSelection && (0, import_lodash.some)(this.dataSource, (record) => !this.adapter.getRecordKey(record))) {
+      if ((0, import_lodash.some)(this.dataSource, (record) => this.adapter.getRecordKey(record) === void 0)) {
         console.error(
           'You must specify a key for each element in the dataSource or use "rowKey" to specify an attribute name as the primary key!'
         );
@@ -5613,6 +5616,18 @@ var SlTable = class extends ShoelaceElement {
     };
     this.setScrollPositionClassName = () => {
     };
+    this.generateCustomCellSlot = (filteredRows) => {
+      const hasSlotColumns = this.columns.filter((col) => col.slot);
+      if (!hasSlotColumns.length) return "";
+      return x`
+      ${hasSlotColumns.map(
+        (col) => filteredRows.map((row) => {
+          const slotKey = `${CUSTOM_CELL}-${col.dataIndex}-${this.adapter.getRecordKey(row.original)}`;
+          return x`<slot slot="${slotKey}" name="${slotKey}">${row.original[col.dataIndex]}</slot>`;
+        })
+      )}
+    `;
+    };
     this.handleRowSelectionChange = (updaterOrValue) => {
       if (typeof updaterOrValue === "function") {
         this.rowSelectedMap = updaterOrValue(this.rowSelectedMap);
@@ -5728,7 +5743,10 @@ var SlTable = class extends ShoelaceElement {
       .bodyRef=${this.bodyWrapRef}
       .emptyTemplate=${emptyTemplate}
       .commonProps=${commonProps}
-    ></sl-table-body-table>`;
+    >
+      <slot name="table-empty" slot="table-empty"></slot>
+      ${this.generateCustomCellSlot(filteredRows)}
+    </sl-table-body-table>`;
     return x`${headTable} ${bodyTable}`;
   }
   renderEmpty() {
@@ -5789,6 +5807,10 @@ var SlTable = class extends ShoelaceElement {
           onFilterDropdownVisibleChange
         },
         cell: (info) => {
+          if (col.slot) {
+            const slotKey = `${CUSTOM_CELL}-${dataIndex}-${this.adapter.getRecordKey(info.row.original)}`;
+            return x`<slot name="${slotKey}" slot="${slotKey}">${info.getValue()}</slot>`;
+          }
           return info.getValue();
         },
         header: () => col.title || dataIndex,

package/{dist/chunks/chunk.JUR6F3DD.js → cdn/chunks/chunk.JJBJXO7I.js}

@@ -1,6 +1,6 @@
 import {
   SlSpinner
-} from "./chunk.OTTDDVK3.js";
+} from "./chunk.7NPWMO7X.js";
 
 // src/react/spinner/index.ts
 import * as React from "react";