@x-plat/design-system 0.5.20 → 0.5.22

package/dist/components/ChatInput/index.js

@@ -0,0 +1,177 @@
+// src/components/ChatInput/ChatInput.tsx
+import React2 from "react";
+
+// src/components/TextArea/TextArea.tsx
+import React from "react";
+
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/TextArea/TextArea.tsx
+import { jsx } from "react/jsx-runtime";
+var TextArea = React.forwardRef(
+  (props, ref) => {
+    const { value, onChange, disabled, ...textareaProps } = props;
+    const localRef = React.useRef(null);
+    const setRefs = (el) => {
+      localRef.current = el;
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(el);
+      } else if (ref && typeof ref === "object" && "current" in ref) {
+        ref.current = el;
+      }
+    };
+    const handleOnChange = (e) => {
+      const val = e.target.value;
+      if (onChange) {
+        const event = {
+          ...e,
+          target: { value: val }
+        };
+        onChange(event);
+      }
+    };
+    React.useEffect(() => {
+      const el = localRef.current;
+      if (!el) return;
+      el.style.height = "0px";
+      const nextHeight = Math.min(el.scrollHeight, 400);
+      el.style.height = `${nextHeight}px`;
+    }, [value]);
+    return /* @__PURE__ */ jsx("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx_default(
+          "lib-xplat-textarea",
+          disabled ? "disabled" : void 0
+        ),
+        children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ...textareaProps,
+            ref: setRefs,
+            disabled,
+            value,
+            onChange: handleOnChange
+          }
+        )
+      }
+    ) });
+  }
+);
+TextArea.displayName = "TextArea";
+var TextArea_default = TextArea;
+
+// src/tokens/svg/communication/BellIcon.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+
+// src/tokens/svg/communication/BellOffIcon.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/tokens/svg/communication/InboxIcon.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// src/tokens/svg/communication/MessageCircleIcon.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// src/tokens/svg/communication/MessageSquareIcon.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+
+// src/tokens/svg/communication/PaperclipIcon.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// src/tokens/svg/communication/SendIcon.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var SendIcon = () => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsx8("g", { clipPath: "url(#send-clip)", children: /* @__PURE__ */ jsx8("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.3558 0.918873C18.3887 0.919879 18.4212 0.9224 18.4535 0.927663C18.4642 0.929393 18.4751 0.930348 18.4857 0.932545C18.527 0.941123 18.5675 0.953269 18.6068 0.968678C18.6178 0.972968 18.6282 0.978499 18.639 0.983327C18.6672 0.995914 18.6945 1.01021 18.7211 1.0263C18.7403 1.03794 18.7594 1.04988 18.7777 1.0634C18.7803 1.06534 18.7829 1.0673 18.7855 1.06926C18.8126 1.08979 18.839 1.11195 18.8637 1.13665C18.8872 1.16018 18.9084 1.18517 18.9281 1.21087C18.9322 1.21625 18.9359 1.22198 18.9398 1.22747C18.9501 1.24168 18.959 1.25667 18.9681 1.27141C18.9866 1.30108 19.0029 1.33154 19.017 1.36321C19.0214 1.37309 19.0267 1.38248 19.0306 1.39251C19.0461 1.43186 19.0581 1.47231 19.0668 1.5136C19.069 1.52426 19.0699 1.5351 19.0717 1.54583C19.077 1.57815 19.0794 1.61062 19.0805 1.64348C19.0808 1.65621 19.0817 1.66884 19.0814 1.68157C19.0799 1.75981 19.0681 1.83872 19.0414 1.91497L13.2074 18.581C13.1058 18.871 12.8377 19.0703 12.5306 19.0829C12.2237 19.0954 11.9398 18.9192 11.8148 18.6386L8.59706 11.4003L1.3617 8.18547C1.08085 8.06057 0.90492 7.77678 0.917368 7.46965C0.929915 7.16252 1.12827 6.89358 1.41834 6.79192L18.0853 0.958913C18.1613 0.932334 18.2398 0.919479 18.3178 0.917897C18.3305 0.91763 18.3431 0.918498 18.3558 0.918873ZM10.0609 10.999L12.4164 16.2997L16.5375 4.52239L10.0609 10.999ZM3.69862 7.58294L9.00038 9.93841L15.4808 3.45794L3.69862 7.58294Z", fill: "currentColor" }) }),
+      /* @__PURE__ */ jsx8("defs", { children: /* @__PURE__ */ jsx8("clipPath", { id: "send-clip", children: /* @__PURE__ */ jsx8("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
+    ]
+  }
+);
+var SendIcon_default = SendIcon;
+
+// src/components/ChatInput/ChatInput.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChatInput = React2.forwardRef(
+  (props, ref) => {
+    const {
+      placeholder,
+      value: valueProp,
+      disabled = false,
+      buttonType = "primary",
+      onSubmit,
+      onChange
+    } = props;
+    const isControlled = valueProp !== void 0;
+    const [internalValue, setInternalValue] = React2.useState("");
+    const value = isControlled ? valueProp : internalValue;
+    const hasText = value.trim().length > 0;
+    const handleChange = (e) => {
+      const val = e.target.value;
+      if (!isControlled) setInternalValue(val);
+      onChange?.(val);
+    };
+    const handleSubmit = () => {
+      if (!hasText || disabled) return;
+      onSubmit?.(value);
+      if (!isControlled) setInternalValue("");
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    return /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ jsx9(
+        TextArea_default,
+        {
+          ref,
+          placeholder,
+          value,
+          disabled,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          className: clsx_default("chat-input-send", `btn-${buttonType}`),
+          disabled: !hasText || disabled,
+          onClick: handleSubmit,
+          "aria-label": "\uC804\uC1A1",
+          children: /* @__PURE__ */ jsx9(SendIcon_default, {})
+        }
+      )
+    ] });
+  }
+);
+ChatInput.displayName = "ChatInput";
+var ChatInput_default = ChatInput;
+export {
+  ChatInput_default as ChatInput
+};

package/dist/components/Dropdown/index.cjs

@@ -51,6 +51,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const popH = popRef.current.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
     let direction = "bottom";
     let top;
     let left;
@@ -76,6 +77,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
+  import_react.default.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
   import_react.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);

package/dist/components/Dropdown/index.js

@@ -15,6 +15,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const popH = popRef.current.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
     let direction = "bottom";
     let top;
     let left;
@@ -40,6 +41,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
+  React.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
   React.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);

package/dist/components/PopOver/index.cjs

@@ -51,6 +51,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const popH = popRef.current.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
     let direction = "bottom";
     let top;
     let left;
@@ -76,6 +77,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
+  import_react.default.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
   import_react.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);

package/dist/components/PopOver/index.js

@@ -15,6 +15,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const popH = popRef.current.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
     let direction = "bottom";
     let top;
     let left;
@@ -40,6 +41,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
+  React.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
   React.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);

package/dist/components/Select/index.cjs

@@ -52,6 +52,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const popH = popRef.current.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
     let direction = "bottom";
     let top;
     let left;
@@ -77,6 +78,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
+  import_react.default.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
   import_react.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);

package/dist/components/Select/index.js

@@ -15,6 +15,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const popH = popRef.current.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
+    if (popH === 0 || popW === 0) return;
     let direction = "bottom";
     let top;
     let left;
@@ -40,6 +41,14 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
+  React.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition();
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
   React.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);

package/dist/components/Table/index.cjs

@@ -53,12 +53,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Table = (props) => {
   const {
     children,
+    size = "md",
     rowBorderUse = true,
     colBorderUse = true,
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-table-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     TableContext_default.Provider,
     {
       value: {

package/dist/components/Table/index.css

@@ -6,6 +6,27 @@
   position: relative;
   overflow: auto;
 }
+.lib-xplat-table-wrapper.sm > .lib-xplat-table > thead > tr > th,
+.lib-xplat-table-wrapper.sm > .lib-xplat-table > thead > tr > td,
+.lib-xplat-table-wrapper.sm > .lib-xplat-table > tbody > tr > th,
+.lib-xplat-table-wrapper.sm > .lib-xplat-table > tbody > tr > td {
+  padding: var(--spacing-space-1) var(--spacing-space-2);
+  font-size: 12px;
+}
+.lib-xplat-table-wrapper.md > .lib-xplat-table > thead > tr > th,
+.lib-xplat-table-wrapper.md > .lib-xplat-table > thead > tr > td,
+.lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > th,
+.lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > td {
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-size: 14px;
+}
+.lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > th,
+.lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > td,
+.lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > th,
+.lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > td {
+  padding: var(--spacing-space-3) var(--spacing-space-4);
+  font-size: 16px;
+}
 .lib-xplat-table-wrapper > .lib-xplat-table {
   width: 100%;
   min-width: 600px;
@@ -66,6 +87,102 @@
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > th {
   background-color: var(--semantic-surface-neutral-subtle);
 }
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success > th.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success > th.cell-hover:hover {
+  background-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success.hover:hover > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success.hover:hover > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error > th.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error > th.cell-hover:hover {
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.error.hover:hover > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.error.hover:hover > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > th {
+  color: var(--semantic-text-strong);
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > th.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > th.cell-hover:hover {
+  background-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning.hover:hover > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > th {
+  color: var(--semantic-text-strong);
+  background-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info > th.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > td.cell-hover:hover,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info > th.cell-hover:hover {
+  background-color: var(--semantic-surface-info-strong);
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info.hover:hover > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info.hover:hover > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.info.hover:hover > th {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-info-strong);
+}
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.clickable,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.clickable {
   cursor: pointer;

package/dist/components/Table/index.d.cts

@@ -1,8 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
+type TableSize = "sm" | "md" | "lg";
 interface TableProps {
     children: React.ReactNode;
+    size?: TableSize;
     rowBorderUse?: boolean;
     colBorderUse?: boolean;
     headerSticky?: boolean;
@@ -42,7 +44,7 @@ declare const TableHead: {
 
 interface TableRowProps {
     children: React.ReactNode;
-    type?: "primary" | "secondary";
+    type?: "primary" | "secondary" | "success" | "error" | "warning" | "info";
     isHover?: boolean;
     onClick?: (e: React.MouseEvent<HTMLTableRowElement>) => void;
 }

package/dist/components/Table/index.d.ts

@@ -1,8 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
+type TableSize = "sm" | "md" | "lg";
 interface TableProps {
     children: React.ReactNode;
+    size?: TableSize;
     rowBorderUse?: boolean;
     colBorderUse?: boolean;
     headerSticky?: boolean;
@@ -42,7 +44,7 @@ declare const TableHead: {
 
 interface TableRowProps {
     children: React.ReactNode;
-    type?: "primary" | "secondary";
+    type?: "primary" | "secondary" | "success" | "error" | "warning" | "info";
     isHover?: boolean;
     onClick?: (e: React.MouseEvent<HTMLTableRowElement>) => void;
 }

package/dist/components/Table/index.js

@@ -13,12 +13,13 @@ import { jsx } from "react/jsx-runtime";
 var Table = (props) => {
   const {
     children,
+    size = "md",
     rowBorderUse = true,
     colBorderUse = true,
     headerSticky = false,
     stickyShadow = true
   } = props;
-  return /* @__PURE__ */ jsx("div", { className: "lib-xplat-table-wrapper", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ jsx(
     TableContext_default.Provider,
     {
       value: {