mcr-design-systems 1.0.29 → 1.0.31

package/dist/components/Avatar/index.js

@@ -1,9 +1,9 @@
 import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { useState as i, useRef as C, useEffect as A } from "react";
-import { avatar as te, presenceBadge as re } from "./helper/variants.js";
+import { useState as o, useRef as C, useEffect as A } from "react";
+import { avatar as ee, presenceBadge as te } from "./helper/variants.js";
 import O from "../Icon/Icon.js";
 import { cn as x } from "../../shared/utils/cn.js";
-import ae from "../Loading/index.js";
+import re from "../Loading/index.js";
 const d = {
   10: "text-[4.55px]",
   12: "text-[5.45px]",
@@ -23,10 +23,10 @@ const d = {
   88: "text-[40px]",
   128: "text-[58.18px]",
   160: "text-[72.73px]"
-}, se = 2 * 1024 * 1024, P = ["image/jpeg", "image/jpg", "image/png", "image/webp"], _ = "avatar-cache-v1", fe = ({
+}, ae = 2 * 1024 * 1024, P = ["image/jpeg", "image/jpg", "image/png", "image/webp"], M = "avatar-cache-v1", me = ({
   src: s = "",
   size: c = 48,
-  shape: M = "circle",
+  shape: _ = "circle",
   showPresence: $ = !1,
   presenceStatus: B = "available",
   alt: F = "",
@@ -45,32 +45,30 @@ const d = {
   overlapPrefix: y = "",
   ...p
 }) => {
-  const [D, L] = i(!1), [R, u] = i(""), [a, l] = i(s || ""), [m, H] = i(""), [I, w] = i(!1), S = C(null), X = C(null);
-  console.log("Avatar rendered with value:", D);
-  const Y = async (e) => {
+  const [, L] = o(!1), [R, u] = o(""), [a, l] = o(s || ""), [m, D] = o(""), [I, w] = o(!1), S = C(null), H = C(null), X = async (e) => {
     try {
-      const t = await caches.open(_);
+      const t = await caches.open(M);
       if (!await t.match(e)) {
-        const o = await fetch(e, {
+        const i = await fetch(e, {
           mode: "cors",
           method: "GET",
           headers: { "Access-Control-Allow-Origin": "*" }
         });
-        if (!o.ok)
-          throw new Error(`Failed to fetch image: ${o.status}`);
-        await t.put(e, o.clone());
+        if (!i.ok)
+          throw new Error(`Failed to fetch image: ${i.status}`);
+        await t.put(e, i.clone());
       }
     } catch {
     }
   };
   x();
-  const q = async (e) => {
+  const Y = async (e) => {
     if (h) return null;
     try {
-      const n = await (await caches.open(_)).match(e);
+      const n = await (await caches.open(M)).match(e);
       if (n) {
-        const o = await n.blob();
-        return URL.createObjectURL(o);
+        const i = await n.blob();
+        return URL.createObjectURL(i);
       }
       return null;
     } catch {
@@ -79,8 +77,8 @@ const d = {
   };
   A(() => {
     let e = null;
-    return s && !h ? (Y(s), q(s).then((t) => {
-      t ? (H(t), l(t), e = t) : l(s);
+    return s && !h ? (X(s), Y(s).then((t) => {
+      t ? (D(t), l(t), e = t) : l(s);
     })) : l(s || ""), () => {
       e && URL.revokeObjectURL(e);
     };
@@ -96,13 +94,13 @@ const d = {
       a.startsWith("blob:") && URL.revokeObjectURL(a);
     };
   }, [a, m]);
-  const K = () => y || (j ? /* @__PURE__ */ r(
+  const q = () => y || (j ? /* @__PURE__ */ r(
     "span",
     {
       className: `flex h-full w-full items-center justify-center ${d[c ?? 48]}`,
       children: j
     }
-  ) : g || v ? `${g?.[0] || ""}${v?.[0] || ""}`.toUpperCase() : s ? s[0]?.toUpperCase() : ""), Q = async (e) => {
+  ) : g || v ? `${g?.[0] || ""}${v?.[0] || ""}`.toUpperCase() : s ? s[0]?.toUpperCase() : ""), K = async (e) => {
     const t = e.target.files?.[0];
     if (!t) return;
     if (!P.includes(t.type)) {
@@ -111,7 +109,7 @@ const d = {
       );
       return;
     }
-    if (t.size > se) {
+    if (t.size > ae) {
       u("Image is too large, must be no larger than 2 MB.");
       return;
     }
@@ -122,7 +120,7 @@ const d = {
     } finally {
       L(!1), n && URL.revokeObjectURL(n);
     }
-  }, U = W && (b || T) && c >= 24, V = K(), z = c && c >= 24 && c <= 64, { id: ee } = "data-testid" in p ? p : { id: "avatar" }, k = {
+  }, U = W && (b || T) && c >= 24, Q = q(), V = c && c >= 24 && c <= 64, { id: z } = "data-testid" in p ? p : { id: "avatar" }, k = {
     10: "h-[0.625rem] w-[0.625rem]",
     // 10px
     12: "h-[0.75rem] w-[0.75rem]",
@@ -160,13 +158,13 @@ const d = {
     160: "h-[10rem] w-[10rem]"
     // 160px
   };
-  return /* @__PURE__ */ f("div", { "data-testid": ee, className: "relative block w-fit", children: [
+  return /* @__PURE__ */ f("div", { "data-testid": z, className: "relative block w-fit", children: [
     /* @__PURE__ */ f("div", { className: x("w-fit overflow-hidden", k[c ?? 48]), children: [
       /* @__PURE__ */ f(
         "div",
         {
-          className: te({
-            shape: M,
+          className: ee({
+            shape: _,
             // type: previewSrc && !isImageError ? 'image' : 'initials',
             className: x(k[c ?? 48], G),
             bordered: a && !I ? !0 : J,
@@ -185,15 +183,15 @@ const d = {
               "div",
               {
                 className: `flex h-full w-full items-center justify-center ${d[c ?? 48]}`,
-                children: /* @__PURE__ */ r("div", { className: `${d[c ?? 48]} leading-none`, children: V })
+                children: /* @__PURE__ */ r("div", { className: `${d[c ?? 48]} leading-none`, children: Q })
               }
             ),
             U && !E && /* @__PURE__ */ r(
               "div",
               {
-                ref: X,
+                ref: H,
                 className: "absolute bottom-0 flex w-full cursor-pointer items-center justify-center bg-black-alpha-40",
-                style: { color: "white", height: z ? "100%" : "24px" },
+                style: { color: "white", height: V ? "100%" : "24px" },
                 onClick: () => a ? L(!0) : S.current?.click(),
                 children: /* @__PURE__ */ r(
                   O,
@@ -211,14 +209,14 @@ const d = {
                 type: "file",
                 accept: P.join(","),
                 className: "hidden",
-                onChange: Q
+                onChange: K
               }
             ),
-            E && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center bg-bg-white", children: /* @__PURE__ */ r(ae, { thickness: 4, width: 20 }) })
+            E && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center bg-bg-white", children: /* @__PURE__ */ r(re, { thickness: 4, width: 20 }) })
           ]
         }
       ),
-      $ && !U && /* @__PURE__ */ r("span", { className: re({ status: B }), children: /* @__PURE__ */ r("svg", { className: "h-2 w-2", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ r("circle", { cx: "10", cy: "10", r: "10" }) }) })
+      $ && !U && /* @__PURE__ */ r("span", { className: te({ status: B }), children: /* @__PURE__ */ r("svg", { className: "h-2 w-2", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ r("circle", { cx: "10", cy: "10", r: "10" }) }) })
     ] }),
     (R || N) && /* @__PURE__ */ f("div", { className: "mt-2 flex items-center gap-1", children: [
       /* @__PURE__ */ r(O, { name: "circle", color: "error" }),
@@ -227,5 +225,5 @@ const d = {
   ] });
 };
 export {
-  fe as default
+  me as default
 };

package/dist/components/Card/helper/variants.js

@@ -0,0 +1,106 @@
+import { tv as a } from "../../../node_modules/tailwind-variants/dist/index.js";
+const t = a({
+  base: [
+    "bg-bg-card",
+    "border border-card",
+    "rounded-2xl",
+    "overflow-hidden",
+    "w-full",
+    "inline-flex",
+    "flex-col",
+    "justify-start",
+    "items-start"
+  ],
+  variants: {
+    variant: {
+      default: ["bg-bg-card", "border-neutral"],
+      elevated: ["bg-bg-card", "border-neutral", "shadow-300"],
+      outlined: ["bg-transparent", "border-neutral"]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), s = a({
+  base: [
+    "self-stretch",
+    "min-h-16",
+    "px-sm",
+    "py-sm-2",
+    "border-b",
+    "border-card",
+    "flex",
+    "justify-between",
+    "items-center"
+  ],
+  variants: {
+    gap: {
+      xs: "gap-xs",
+      sm: "gap-sm",
+      md: "gap-md"
+    }
+  },
+  defaultVariants: {
+    gap: "xs"
+  }
+}), r = a({
+  base: [
+    "self-stretch",
+    "flex",
+    "flex-col",
+    "justify-start",
+    "items-start"
+  ],
+  variants: {
+    padding: {
+      none: "p-0",
+      sm: "p-sm-2",
+      md: "p-sm",
+      lg: "p-md"
+    },
+    gap: {
+      none: "",
+      sm: "gap-xs",
+      md: "gap-sm",
+      lg: "gap-md"
+    }
+  },
+  defaultVariants: {
+    padding: "md",
+    gap: "md"
+  }
+}), d = a({
+  base: [
+    "flex-1",
+    "min-h-10",
+    "flex",
+    "flex-col",
+    "justify-center",
+    "items-start",
+    "overflow-hidden"
+  ]
+}), n = a({
+  base: [
+    "flex",
+    "justify-end",
+    "items-center",
+    "flex-shrink-0"
+  ],
+  variants: {
+    gap: {
+      xs: "gap-xs",
+      sm: "gap-sm-2",
+      md: "gap-sm"
+    }
+  },
+  defaultVariants: {
+    gap: "xs"
+  }
+});
+export {
+  r as cardContentVariants,
+  n as cardHeaderActionVariants,
+  d as cardHeaderTitleVariants,
+  s as cardHeaderVariants,
+  t as cardVariants
+};

package/dist/components/Card/index.js

@@ -0,0 +1,58 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import "react";
+import { cardHeaderVariants as x, cardHeaderTitleVariants as g, cardHeaderActionVariants as u, cardContentVariants as v, cardVariants as y } from "./helper/variants.js";
+import { cn as N } from "../../shared/utils/cn.js";
+import { dataTestId as h } from "../../shared/utils/dataTestId.js";
+import { Typography as V } from "../Typography/index.js";
+function w({
+  variant: i = "default",
+  title: e,
+  actionButton: s,
+  children: d,
+  className: m,
+  showHeader: c = !0,
+  headerGap: n = "xs",
+  contentPadding: o = "md",
+  contentGap: l = "md",
+  width: a,
+  ...p
+}) {
+  const f = a ? { width: typeof a == "number" ? `${a}px` : a } : {};
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: N(y({ variant: i }), m),
+      style: f,
+      ...h("Card"),
+      ...p,
+      children: [
+        c && (e || s) && /* @__PURE__ */ t("div", { className: x({ gap: n }), children: [
+          e && /* @__PURE__ */ r("div", { className: g(), children: /* @__PURE__ */ r(
+            V,
+            {
+              variants: "heading-xs",
+              size: "xs",
+              className: "self-stretch justify-center text-fg-neutral-main",
+              children: e
+            }
+          ) }),
+          s && /* @__PURE__ */ r("div", { className: u({ gap: "xs" }), children: s })
+        ] }),
+        d && /* @__PURE__ */ r(
+          "div",
+          {
+            className: v({
+              padding: o,
+              gap: l
+            }),
+            style: { wordWrap: "break-word", overflowWrap: "break-word" },
+            children: d
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  w as default
+};

package/dist/components/Icon/generated/User01Icon.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface User01IconProps {
+    /**
+     * Icon size in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Icon color - CSS color value
+     * @default 'currentColor'
+     */
+    color?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Custom styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * Title attribute for tooltip
+     */
+    title?: string;
+}
+/**
+ * User01 icon component
+ */
+export declare const User01Icon: React.FC<User01IconProps>;
+export default User01Icon;

package/dist/components/Icon/generated/User01Icon.js

@@ -0,0 +1,54 @@
+import { jsx as u } from "react/jsx-runtime";
+import f from "react";
+const S = ({
+  size: i = 24,
+  color: s = "currentColor",
+  className: r,
+  style: o,
+  onClick: C,
+  "aria-label": g,
+  title: c
+}) => {
+  const a = f.useMemo(() => {
+    const t = new DOMParser().parseFromString(
+      `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 21C19 19.5317 18.9894 19.019 18.8711 18.6289C18.5802 17.6702 17.8298 16.9198 16.8711 16.6289C16.481 16.5106 15.9683 16.5 14.5 16.5H9.49997C8.03165 16.5 7.51894 16.5106 7.12888 16.6289C6.17019 16.9198 5.41974 17.6702 5.12888 18.6289C5.01055 19.019 4.99997 19.5317 4.99997 21C4.99997 21.5523 4.55225 22 3.99997 22C3.44768 22 2.99997 21.5523 2.99997 21C2.99997 19.6774 2.98877 18.7943 3.21481 18.0488C3.69956 16.4508 4.95079 15.1996 6.5488 14.7148C7.29425 14.4888 8.17737 14.5 9.49997 14.5H14.5C15.8226 14.5 16.7057 14.4888 17.4511 14.7148C19.0491 15.1996 20.3004 16.4508 20.7851 18.0488C21.0112 18.7943 21 19.6774 21 21C21 21.5523 20.5523 22 20 22C19.4477 22 19 21.5523 19 21ZM15.5 7.5C15.5 5.567 13.933 4 12 4C10.067 4 8.49997 5.567 8.49997 7.5C8.49997 9.433 10.067 11 12 11C13.933 11 15.5 9.433 15.5 7.5ZM17.5 7.5C17.5 10.5376 15.0375 13 12 13C8.9624 13 6.49997 10.5376 6.49997 7.5C6.49997 4.46243 8.9624 2 12 2C15.0375 2 17.5 4.46243 17.5 7.5Z" fill="black"/>
+</svg>
+`,
+      "image/svg+xml"
+    ).querySelector("svg");
+    if (!t) return "";
+    if (t.setAttribute("width", i.toString()), t.setAttribute("height", i.toString()), t.querySelectorAll(
+      "path, circle, rect, polygon, polyline, line, ellipse"
+    ).forEach((e) => {
+      const n = e.getAttribute("fill"), l = e.getAttribute("stroke");
+      n && n !== "none" && e.setAttribute("fill", s), l && l !== "none" && e.setAttribute("stroke", s);
+    }), r) {
+      const e = t.getAttribute("class") || "";
+      t.setAttribute("class", `${e} ${r}`.trim());
+    }
+    return new XMLSerializer().serializeToString(t);
+  }, [i, s, r]);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: r,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        ...o
+      },
+      onClick: C,
+      "aria-label": g || "user-01 icon",
+      title: c,
+      dangerouslySetInnerHTML: { __html: a }
+    }
+  );
+};
+export {
+  S as User01Icon,
+  S as default
+};

package/dist/components/Icon/helper/mapicon.js

@@ -81,7 +81,8 @@ const o = {
   "log-out-01": () => import("../generated/LogOut01Icon.js"),
   "log-out-01-solid": () => import("../generated/LogOut01SolidIcon.js"),
   "bank-note-03": () => import("../generated/BankNote03Icon.js"),
-  "bank-note-03-solid": () => import("../generated/BankNote03SolidIcon.js")
+  "bank-note-03-solid": () => import("../generated/BankNote03SolidIcon.js"),
+  "user-01": () => import("../generated/User01Icon.js")
 };
 export {
   o as MAP_ICON

package/dist/index.d.ts

@@ -77,5 +77,7 @@ export { default as Breadcrumb } from './components/Breadcrumb';
 export type { BreadcrumbProps, BreadcrumbItem, BreadcrumbSeparator, } from './components/Breadcrumb';
 export { default as Modal } from './components/Modal';
 export type { ModalProps } from './components/Modal';
+export { default as Card } from './components/Card';
+export type { CardProps } from './components/Card';
 export * from './tokens';
 export { dataTestId, generateTestId } from './shared/utils';

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Alert as a } from "./components/Alert/index.js";
-import { default as f } from "./components/Button/index.js";
+import { default as p } from "./components/Button/index.js";
 import { default as x } from "./components/ButtonFilter/index.js";
 import { default as d } from "./components/Avatar/index.js";
 import { default as l } from "./components/AvatarGroup/index.js";
@@ -7,7 +7,7 @@ import { default as n } from "./components/Loading/index.js";
 import { Box as c } from "./components/Box/index.js";
 import { default as P } from "./components/Divider/index.js";
 import { Popover as I } from "./components/Popover/index.js";
-import { Dropdown as C } from "./components/Dropdown/index.js";
+import { Dropdown as v } from "./components/Dropdown/index.js";
 import { default as b } from "./components/Select/index.js";
 import { MenuItem as w } from "./components/MenuItem/index.js";
 import { Typography as S } from "./components/Typography/index.js";
@@ -23,14 +23,14 @@ import { default as X } from "./components/Tab/index.js";
 import { default as _ } from "./components/Chip/index.js";
 import { Tooltip as oo, TooltipProvider as ro } from "./components/Tooltip/index.js";
 import { default as to, DatePickerHeader as ao } from "./components/DatePicker/index.js";
-import { MonthGrid as fo } from "./components/DatePicker/MonthGrid.js";
+import { MonthGrid as po } from "./components/DatePicker/MonthGrid.js";
 import { YearGrid as xo } from "./components/DatePicker/YearGrid.js";
 import { CalendarGrid as io } from "./components/DatePicker/CalendarGrid.js";
 import { DateRangePicker as uo } from "./components/DatePicker/DateRangePicker.js";
 import { default as To } from "./components/InputPassword/index.js";
 import { default as go } from "./components/InputDatePicker/index.js";
 import { default as ho } from "./components/TextField/index.js";
-import { default as vo } from "./components/InputNumber/index.js";
+import { default as Co } from "./components/InputNumber/index.js";
 import { default as Bo } from "./components/TopNavigationBar/index.js";
 import { default as ko } from "./components/InputBase/index.js";
 import { default as Do } from "./components/CheckBox/index.js";
@@ -40,45 +40,47 @@ import { PIN as Vo } from "./components/PIN/index.js";
 import { ProgressBar as No } from "./components/ProgressBar/index.js";
 import { Breadcrumb as Ho } from "./components/Breadcrumb/index.js";
 import { default as Lo } from "./components/Modal/index.js";
-import { getColorVar as Yo, getSemanticColorVar as jo, getSpacingVar as qo } from "./tokens/index.js";
+import { default as Yo } from "./components/Card/index.js";
+import { getColorVar as qo, getSemanticColorVar as Eo, getSpacingVar as Jo } from "./tokens/index.js";
 import "clsx";
 import "tailwind-merge";
-import { dataTestId as Jo, generateTestId as Ko } from "./shared/utils/dataTestId.js";
-import { alphaColors as Qo, baseColors as Wo, colorScales as Xo, ringColors as Zo } from "./tokens/primitives/colors.js";
-import { typography as $o } from "./tokens/primitives/typography.js";
-import { borderRadius as rr, shadows as er, spacing as tr, transitions as ar, zIndex as pr } from "./tokens/primitives/layout.js";
-import { ThemeProvider as mr } from "./tokens/theme.js";
-import { useTheme as sr } from "./tokens/hooks.js";
-import { themeUtils as ir } from "./tokens/utils.js";
-import { generateTailwindConfig as ur } from "./tokens/tailwind-config.js";
-import { semanticTokens as Tr } from "./tokens/semantic.js";
+import { dataTestId as Oo, generateTestId as Qo } from "./shared/utils/dataTestId.js";
+import { alphaColors as Xo, baseColors as Zo, colorScales as _o, ringColors as $o } from "./tokens/primitives/colors.js";
+import { typography as rr } from "./tokens/primitives/typography.js";
+import { borderRadius as tr, shadows as ar, spacing as fr, transitions as pr, zIndex as mr } from "./tokens/primitives/layout.js";
+import { ThemeProvider as sr } from "./tokens/theme.js";
+import { useTheme as ir } from "./tokens/hooks.js";
+import { themeUtils as ur } from "./tokens/utils.js";
+import { generateTailwindConfig as Tr } from "./tokens/tailwind-config.js";
+import { semanticTokens as gr } from "./tokens/semantic.js";
 export {
   a as Alert,
   d as Avatar,
   l as AvatarGroup,
   c as Box,
   Ho as Breadcrumb,
-  f as Button,
+  p as Button,
   x as ButtonFilter,
   io as CalendarGrid,
+  Yo as Card,
   Do as CheckBox,
   _ as Chip,
   to as DatePicker,
   ao as DatePickerHeader,
   uo as DateRangePicker,
   P as Divider,
-  C as Dropdown,
+  v as Dropdown,
   Go as HelperText,
   yo as Icons,
   A as Image,
   ko as InputBase,
   go as InputDatePicker,
-  vo as InputNumber,
+  Co as InputNumber,
   To as InputPassword,
   n as Loading,
   w as MenuItem,
   Lo as Modal,
-  fo as MonthGrid,
+  po as MonthGrid,
   Vo as PIN,
   z as PhoneInput,
   I as Popover,
@@ -90,7 +92,7 @@ export {
   K as Switch,
   X as Tabs,
   ho as TextField,
-  mr as ThemeProvider,
+  sr as ThemeProvider,
   V as Toast,
   M as ToastAction,
   N as ToastClose,
@@ -101,24 +103,24 @@ export {
   Bo as TopNavigationBar,
   S as Typography,
   xo as YearGrid,
-  Qo as alphaColors,
-  Wo as baseColors,
-  rr as borderRadius,
-  Xo as colorScales,
-  Jo as dataTestId,
-  ur as generateTailwindConfig,
-  Ko as generateTestId,
-  Yo as getColorVar,
-  jo as getSemanticColorVar,
-  qo as getSpacingVar,
-  Zo as ringColors,
-  Tr as semanticTokens,
-  er as shadows,
-  tr as spacing,
-  ir as themeUtils,
-  ar as transitions,
-  $o as typography,
-  sr as useTheme,
+  Xo as alphaColors,
+  Zo as baseColors,
+  tr as borderRadius,
+  _o as colorScales,
+  Oo as dataTestId,
+  Tr as generateTailwindConfig,
+  Qo as generateTestId,
+  qo as getColorVar,
+  Eo as getSemanticColorVar,
+  Jo as getSpacingVar,
+  $o as ringColors,
+  gr as semanticTokens,
+  ar as shadows,
+  fr as spacing,
+  ur as themeUtils,
+  pr as transitions,
+  rr as typography,
+  ir as useTheme,
   j as useToast,
-  pr as zIndex
+  mr as zIndex
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcr-design-systems",
   "private": false,
-  "version": "1.0.29",
+  "version": "1.0.31",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",