@kubit-ui-web/react-components 2.0.0-beta.47 → 2.0.0-beta.49

package/dist/esm/components/stepperNumber/stepperNumber.js

@@ -1,2 +1,24 @@
-import{jsx as a}from"react/jsx-runtime";import{forwardRef as s}from"react";import{useClassName as t}from"../../lib/hooks/useClassName/useClassName.js";import{StepperNumberStandAlone as o}from"./stepperNumberStandAlone.js";const i="STEPPER_NUMBER",n=s(({additionalOrientationClasses:s,additionalVariantClasses:n,orientation:r="horizontal",variant:e,...m},l)=>{const d=t({additionalClassNames:n,component:i,variant:e}),p=t({additionalClassNames:s,component:i,variant:r});/* @__PURE__ */
-return a(o,{...m,ref:l,cssOrientationClasses:p,cssVariantClasses:d,orientation:r})});export{n as StepperNumber};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { StepperNumberStandAlone } from "./stepperNumberStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var STEPPER_NUMBER = "STEPPER_NUMBER";
+const StepperNumber = forwardRef(({ additionalOrientationClasses: e, additionalVariantClasses: t, orientation: n = "horizontal", variant: r, ...i }, a) => {
+	let o = useClassName({
+		additionalClassNames: t,
+		component: STEPPER_NUMBER,
+		variant: r
+	}), s = useClassName({
+		additionalClassNames: e,
+		component: STEPPER_NUMBER,
+		variant: n
+	});
+	return /* @__PURE__ */ jsx(StepperNumberStandAlone, {
+		...i,
+		ref: a,
+		cssOrientationClasses: s,
+		cssVariantClasses: o,
+		orientation: n
+	});
+});
+export { StepperNumber };

package/dist/esm/components/stepperNumber/stepperNumberStandAlone.js

@@ -1,10 +1,86 @@
-import{jsxs as e,jsx as t,Fragment as s}from"react/jsx-runtime";import{forwardRef as n}from"react";import{Text as a}from"../text/text.js";import{ElementOrIcon as r}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{ScreenReaderOnly as i}from"../../lib/components/screen-reader-only/screenReaderOnly.js";import{STATES as o}from"../../lib/types/states/states.js";import{classNames as c}from"../../lib/utils/classNames/classNames.js";import{pickCustomAttributes as l}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as p}from"../../lib/components/customComponent/customComponent.js";import{buildAriaCurrent as m}from"./helpers/aria.js";import{buildScreenReaderText as d}from"./helpers/screnReader.js";import{mapToStepState as u}from"./helpers/stepState.js";const h=n(({completedStepIcon:n,cssOrientationClasses:h,cssVariantClasses:b,currentStep:f=0,horizontalOrientationWidth:x,orientation:C,screenReaderCompletedStep:j,screenReaderTextBuilder:N,screenReaderTitle:y,stepMaxTruncatedLines:$,steps:O,...T},k)=>{const v=u(O,f),A="vertical"===C,R=Boolean(y),S=T["data-testid"]||"stepper-number";/* @__PURE__ */
-return e("div",{ref:k,"aria-hidden":!A,"data-testid":S,children:[y?.content&&/* @__PURE__ */t(p,{className:"kbt-sr-only",component:y.component,children:y?.content}),
-/* @__PURE__ */t("ol",{className:c(h?.stepper_number,b?.stepper_number),"data-testid":`${S}-steps-container`,children:v.map((u,y)=>{const O=y===v.length-1,T={"data-state":u.state},k=l(T);/* @__PURE__ */
-return e("li",{"aria-current":m(f,y,C),"data-testid":`${S}-li-${y}`,style:{display:A?"flex":"block",width:!A&&O?"auto":x},children:[R&&/* @__PURE__ */t(i,{children:d(y,f,v.length,N,u.name,A)}),
-/* @__PURE__ */e("span",{"aria-hidden":!(A&&!R)||void 0,className:c(h?.stepcontainer,b?.stepcontainer),...k,children:[
-/* @__PURE__ */e("span",{className:b?.stepcirclecontainer,"data-testid":`${S}-step-${y}`,style:{flexDirection:"vertical"===C?"column":"row"},children:[
-/* @__PURE__ */t("span",{className:c(h?.stepcircle,b?.stepcircle),...k,children:u.state===o.COMPLETED?/* @__PURE__ */e(s,{children:[
-/* @__PURE__ */t(r,{className:c(h?.iconselected,b?.iconselected),customAttributes:T,...n}),
-/* @__PURE__ */t(i,{children:y+1})]}):/* @__PURE__ */t(a,{additionalClasses:{text:c(h?.stepindex,b?.stepindex)},component:"span",customAttributes:T,children:y+1})}),!O&&/* @__PURE__ */t("span",{className:c(h?.stepbar,b?.stepbar),...l({"data-state":v[y+1].state})})]}),A&&/* @__PURE__ */e("span",{"aria-hidden":!!R||void 0,className:c(h?.stepnamecontainer,b?.stepnamecontainer),"data-islast":O,"data-testid":`${S}-step-description-${y}`,...k,children:[
-/* @__PURE__ */t(a,{additionalClasses:{text:c(h?.stepname,b?.stepname)},component:"span",customAttributes:T,maxTruncatedLines:$,children:u.name}),!R&&u.state===o.COMPLETED&&j?.content&&/* @__PURE__ */e(p,{className:"kbt-sr-only",component:j.component,"data-testid":j["data-testid"],children:[" ",j.content]})]})]})]},`stepContainer-${y.toString()}`)})})]})});export{h as StepperNumberStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { classNames } from "../../lib/utils/classNames/classNames.js";
+import { Text } from "../text/text2.js";
+import { ScreenReaderOnly } from "../../lib/components/screen-reader-only/screenReaderOnly.js";
+import { ElementOrIcon } from "../../lib/components/elementOrIcon/elementOrIcon.js";
+import { STATES } from "../../lib/types/states/states.js";
+import { buildAriaCurrent } from "./helpers/aria.js";
+import { buildScreenReaderText } from "./helpers/screnReader.js";
+import { mapToStepState } from "./helpers/stepState.js";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+var defaultStep = 0;
+const StepperNumberStandAlone = forwardRef(({ completedStepIcon: t, cssOrientationClasses: r, cssVariantClasses: i, currentStep: a = defaultStep, horizontalOrientationWidth: o, orientation: s, screenReaderCompletedStep: c, screenReaderTextBuilder: l, screenReaderTitle: u, stepMaxTruncatedLines: d, steps: f, ...p }, m) => {
+	let h = mapToStepState(f, a), g = s === "vertical", _ = !!u, v = p["data-testid"] || "stepper-number";
+	return /* @__PURE__ */ jsxs("div", {
+		ref: m,
+		"aria-hidden": !g,
+		"data-testid": v,
+		children: [u?.content && /* @__PURE__ */ jsx(CustomComponent, {
+			className: "kbt-sr-only",
+			component: u.component,
+			children: u?.content
+		}), /* @__PURE__ */ jsx("ol", {
+			className: classNames(r?.stepper_number, i?.stepper_number),
+			"data-testid": `${v}-steps-container`,
+			children: h.map((e, n) => {
+				let u = n === h.length - 1, f = { "data-state": e.state }, p = pickCustomAttributes(f);
+				return /* @__PURE__ */ jsxs("li", {
+					"aria-current": buildAriaCurrent(a, n, s),
+					"data-testid": `${v}-li-${n}`,
+					style: {
+						display: g ? "flex" : "block",
+						width: !g && u ? "auto" : o
+					},
+					children: [_ && /* @__PURE__ */ jsx(ScreenReaderOnly, { children: buildScreenReaderText(n, a, h.length, l, e.name, g) }), /* @__PURE__ */ jsxs("span", {
+						"aria-hidden": !g || _ ? !0 : void 0,
+						className: classNames(r?.stepcontainer, i?.stepcontainer),
+						...p,
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: i?.stepcirclecontainer,
+							"data-testid": `${v}-step-${n}`,
+							style: { flexDirection: s === "vertical" ? "column" : "row" },
+							children: [/* @__PURE__ */ jsx("span", {
+								className: classNames(r?.stepcircle, i?.stepcircle),
+								...p,
+								children: e.state === STATES.COMPLETED ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ElementOrIcon, {
+									className: classNames(r?.iconselected, i?.iconselected),
+									customAttributes: f,
+									...t
+								}), /* @__PURE__ */ jsx(ScreenReaderOnly, { children: n + 1 })] }) : /* @__PURE__ */ jsx(Text, {
+									additionalClasses: { text: classNames(r?.stepindex, i?.stepindex) },
+									component: "span",
+									customAttributes: f,
+									children: n + 1
+								})
+							}), !u && /* @__PURE__ */ jsx("span", {
+								className: classNames(r?.stepbar, i?.stepbar),
+								...pickCustomAttributes({ "data-state": h[n + 1].state })
+							})]
+						}), g && /* @__PURE__ */ jsxs("span", {
+							"aria-hidden": _ ? !0 : void 0,
+							className: classNames(r?.stepnamecontainer, i?.stepnamecontainer),
+							"data-islast": u,
+							"data-testid": `${v}-step-description-${n}`,
+							...p,
+							children: [/* @__PURE__ */ jsx(Text, {
+								additionalClasses: { text: classNames(r?.stepname, i?.stepname) },
+								component: "span",
+								customAttributes: f,
+								maxTruncatedLines: d,
+								children: e.name
+							}), !_ && e.state === STATES.COMPLETED && c?.content && /* @__PURE__ */ jsxs(CustomComponent, {
+								className: "kbt-sr-only",
+								component: c.component,
+								"data-testid": c["data-testid"],
+								children: ["\xA0", c.content]
+							})]
+						})]
+					})]
+				}, `stepContainer-${n.toString()}`);
+			})
+		})]
+	});
+});
+export { StepperNumberStandAlone };

package/dist/esm/components/table/hooks/useTableHasScroll.js

@@ -1 +1,20 @@
-import{useState as e,useEffect as r}from"react";import{hasScroll as t}from"../../../lib/utils/scroll/hasScroll.js";const o=({disabled:o=!1,ref:l})=>{const[s,c]=e(!1);return r(()=>{const e=l.current?.querySelector?.("[data-table-scrollable-container]");let r;if(e instanceof HTMLElement&&!o){const o=e=>{c(t(e))};o(e),r=new ResizeObserver(()=>{o(e)}),r.observe(e)}return o&&c(!1),()=>{r?.disconnect()}},[o]),{hasScroll:s}};export{o as useTableHasScroll};
+import { hasScroll } from "../../../lib/utils/scroll/hasScroll.js";
+import { useEffect, useState } from "react";
+const useTableHasScroll = ({ disabled: n = !1, ref: r }) => {
+	let [i, a] = useState(!1);
+	return useEffect(() => {
+		let e = r.current?.querySelector?.("[data-table-scrollable-container]"), t;
+		if (e instanceof HTMLElement && !n) {
+			let n = (e) => {
+				a(hasScroll(e));
+			};
+			n(e), t = new ResizeObserver(() => {
+				n(e);
+			}), t.observe(e);
+		}
+		return n && a(!1), () => {
+			t?.disconnect();
+		};
+	}, [n]), { hasScroll: i };
+};
+export { useTableHasScroll };

package/dist/esm/components/table/hooks/useTableShadow.js

@@ -1 +1,21 @@
-import{useEffect as e}from"react";const t=({disabled:t=!1,headBoxShadow:s,leftBoxShadow:a,ref:o,rightBoxShadow:r})=>(e(()=>{const e=o.current,l=e?.querySelector("[data-table-scrollable-container]");let c;const n=()=>{if(!l)return;const t=l.querySelector("[data-table-head]");if(t instanceof HTMLElement&&t.hasAttribute("data-sticky")&&s&&(l.scrollTop?t.classList.add(s):t.classList.remove(s)),a){const t=e?.querySelector("[data-table-left-shadow]");t instanceof HTMLElement&&(l.scrollLeft?t.classList.add(a):t.classList.remove(a))}if(r){const t=e?.querySelector("[data-table-right-shadow]");t instanceof HTMLElement&&(l.scrollLeft+l.clientWidth<l.scrollWidth?t.classList.add(r):t.classList.remove(r))}};return l instanceof HTMLElement&&!t&&(n(),l?.addEventListener("scroll",n),c=new ResizeObserver(()=>{n()}),c.observe(l)),()=>{l?.removeEventListener("scroll",n),c?.disconnect()}},[t]),{});export{t as useTableShadow};
+import { useEffect } from "react";
+const useTableShadow = ({ disabled: t = !1, headBoxShadow: n, leftBoxShadow: r, ref: i, rightBoxShadow: a }) => (useEffect(() => {
+	let e = i.current, o = e?.querySelector("[data-table-scrollable-container]"), s, c = () => {
+		if (!o) return;
+		let t = o.querySelector("[data-table-head]");
+		if (t instanceof HTMLElement && t.hasAttribute("data-sticky") && n && (o.scrollTop ? t.classList.add(n) : t.classList.remove(n)), r) {
+			let t = e?.querySelector("[data-table-left-shadow]");
+			t instanceof HTMLElement && (o.scrollLeft ? t.classList.add(r) : t.classList.remove(r));
+		}
+		if (a) {
+			let t = e?.querySelector("[data-table-right-shadow]");
+			t instanceof HTMLElement && (o.scrollLeft + o.clientWidth < o.scrollWidth ? t.classList.add(a) : t.classList.remove(a));
+		}
+	};
+	return o instanceof HTMLElement && !t && (c(), o?.addEventListener("scroll", c), s = new ResizeObserver(() => {
+		c();
+	}), s.observe(o)), () => {
+		o?.removeEventListener("scroll", c), s?.disconnect();
+	};
+}, [t]), {});
+export { useTableShadow };

package/dist/esm/components/table/hooks/useTableStickyLeftColumns.js

@@ -1 +1,23 @@
-import{useEffect as e}from"react";import{hasHorizontalScroll as t}from"../../../lib/utils/scroll/hasScroll.js";const r=({disabled:r=!1,ref:l})=>(e(()=>{const e=l.current?.querySelector("[data-table-scrollable-container]"),o=l.current?.querySelector("[data-table-left-shadow]");let a;if(e instanceof HTMLElement&&!r){const r=e=>{const r=t(e),l=e.querySelectorAll("[data-table-row]");let a=0;l.forEach(e=>{const t=Array.from(e.querySelectorAll('[data-sticky="left"]'));let l=0;t.forEach(e=>{e instanceof HTMLElement&&(e.style.left=r?`${l}px`:"auto",l+=e.offsetWidth)}),a=Math.max(a,l)}),o instanceof HTMLElement&&(o.style.left=`${a}px`)};r(e),a=new ResizeObserver(()=>{r(e)}),a.observe(e)}return()=>{a?.disconnect()}},[r]),{});export{r as useTableStickyLeftColumns};
+import { hasHorizontalScroll } from "../../../lib/utils/scroll/hasScroll.js";
+import { useEffect } from "react";
+const useTableStickyLeftColumns = ({ disabled: n = !1, ref: r }) => (useEffect(() => {
+	let t = r.current?.querySelector("[data-table-scrollable-container]"), i = r.current?.querySelector("[data-table-left-shadow]"), a;
+	if (t instanceof HTMLElement && !n) {
+		let n = (t) => {
+			let n = hasHorizontalScroll(t), r = t.querySelectorAll("[data-table-row]"), a = 0;
+			r.forEach((e) => {
+				let t = Array.from(e.querySelectorAll("[data-sticky=\"left\"]")), r = 0;
+				t.forEach((e) => {
+					e instanceof HTMLElement && (e.style.left = n ? `${r}px` : "auto", r += e.offsetWidth);
+				}), a = Math.max(a, r);
+			}), i instanceof HTMLElement && (i.style.left = `${a}px`);
+		};
+		n(t), a = new ResizeObserver(() => {
+			n(t);
+		}), a.observe(t);
+	}
+	return () => {
+		a?.disconnect();
+	};
+}, [n]), {});
+export { useTableStickyLeftColumns };

package/dist/esm/components/table/hooks/useTableStickyRightColumns.js

@@ -1 +1,29 @@
-import{useEffect as t}from"react";import{hasHorizontalScroll as e,hasVerticalScroll as r}from"../../../lib/utils/scroll/hasScroll.js";const o=({disabled:o=!1,ref:l})=>(t(()=>{const t=l.current?.querySelector("[data-table-scrollable-container]"),a=l.current?.querySelector("[data-table-right-shadow]");let c;if(t instanceof HTMLElement&&!o){const o=t=>{const o=e(t),l=t.querySelectorAll("[data-table-row]");let c=0;if(l.forEach(t=>{const e=Array.from(t.querySelectorAll('[data-sticky="true"], [data-sticky="right"]')).reverse();let r=0;e.forEach(t=>{t instanceof HTMLElement&&(t.style.right=o?`${r}px`:"auto",r+=t.offsetWidth)}),c=Math.max(c,r)}),a instanceof HTMLElement){if(r(t)){const e=t.offsetWidth-t.clientWidth;c+=e}a.style.right=`${c}px`}};o(t),c=new ResizeObserver(()=>{o(t)}),c.observe(t)}return()=>{c?.disconnect()}},[o]),{});export{o as useTableStickyRightColumns};
+import { hasHorizontalScroll, hasVerticalScroll } from "../../../lib/utils/scroll/hasScroll.js";
+import { useEffect } from "react";
+const useTableStickyRightColumns = ({ disabled: r = !1, ref: i }) => (useEffect(() => {
+	let n = i.current?.querySelector("[data-table-scrollable-container]"), a = i.current?.querySelector("[data-table-right-shadow]"), o;
+	if (n instanceof HTMLElement && !r) {
+		let r = (n) => {
+			let r = hasHorizontalScroll(n), i = n.querySelectorAll("[data-table-row]"), o = 0;
+			if (i.forEach((e) => {
+				let t = Array.from(e.querySelectorAll("[data-sticky=\"true\"], [data-sticky=\"right\"]")).reverse(), n = 0;
+				t.forEach((e) => {
+					e instanceof HTMLElement && (e.style.right = r ? `${n}px` : "auto", n += e.offsetWidth);
+				}), o = Math.max(o, n);
+			}), a instanceof HTMLElement) {
+				if (hasVerticalScroll(n)) {
+					let e = n.offsetWidth - n.clientWidth;
+					o += e;
+				}
+				a.style.right = `${o}px`;
+			}
+		};
+		r(n), o = new ResizeObserver(() => {
+			r(n);
+		}), o.observe(n);
+	}
+	return () => {
+		o?.disconnect();
+	};
+}, [r]), {});
+export { useTableStickyRightColumns };

package/dist/esm/components/table/table.js

@@ -1 +1,39 @@
-import{jsx as o}from"react/jsx-runtime";import{forwardRef as s,useRef as a,useImperativeHandle as e}from"react";import{useClassName as t}from"../../lib/hooks/useClassName/useClassName.js";import{useTableHasScroll as r}from"./hooks/useTableHasScroll.js";import{useTableShadow as l}from"./hooks/useTableShadow.js";import{useTableStickyLeftColumns as i}from"./hooks/useTableStickyLeftColumns.js";import{useTableStickyRightColumns as d}from"./hooks/useTableStickyRightColumns.js";import{TableStandAlone as m}from"./tableStandAlone.js";const h=s(({additionalClasses:s,autoLeftStickyCalc:h=!0,autoRightStickyCalc:c=!0,disableShadowEffects:f,hasScrollDisabled:n,variant:b,...u},S)=>{const p=t({additionalClassNames:s,component:"TABLE",variant:b}),k=a(null);e(S,()=>k.current);const{hasScroll:C}=r({disabled:n,ref:k});return d({disabled:!c,ref:k}),i({disabled:!h,ref:k}),l({disabled:f,headBoxShadow:p?.headboxshadow,leftBoxShadow:p?.leftboxshadow,ref:k,rightBoxShadow:p?.rightboxshadow}),/* @__PURE__ */o(m,{ref:k,cssClasses:p,hasScroll:C,...u})});export{h as Table};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { useTableHasScroll } from "./hooks/useTableHasScroll.js";
+import { useTableShadow } from "./hooks/useTableShadow.js";
+import { useTableStickyLeftColumns } from "./hooks/useTableStickyLeftColumns.js";
+import { useTableStickyRightColumns } from "./hooks/useTableStickyRightColumns.js";
+import { TableStandAlone } from "./tableStandAlone.js";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const Table = forwardRef(({ additionalClasses: e, autoLeftStickyCalc: t = !0, autoRightStickyCalc: n = !0, disableShadowEffects: r, hasScrollDisabled: i, variant: a, ...o }, s) => {
+	let c = useClassName({
+		additionalClassNames: e,
+		component: "TABLE",
+		variant: a
+	}), l = useRef(null);
+	useImperativeHandle(s, () => l.current);
+	let { hasScroll: u } = useTableHasScroll({
+		disabled: i,
+		ref: l
+	});
+	return useTableStickyRightColumns({
+		disabled: !n,
+		ref: l
+	}), useTableStickyLeftColumns({
+		disabled: !t,
+		ref: l
+	}), useTableShadow({
+		disabled: r,
+		headBoxShadow: c?.headboxshadow,
+		leftBoxShadow: c?.leftboxshadow,
+		ref: l,
+		rightBoxShadow: c?.rightboxshadow
+	}), /* @__PURE__ */ jsx(TableStandAlone, {
+		ref: l,
+		cssClasses: c,
+		hasScroll: u,
+		...o
+	});
+});
+export { Table };

package/dist/esm/components/table/tableStandAlone.js

@@ -1,5 +1,42 @@
-import{jsxs as a,jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{pickCustomAttributes as o}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as l}from"../../lib/components/customComponent/customComponent.js";const i=e(({children:e,component:i="table",cssClasses:s,hasScroll:r,hasScrollDisabled:d,sticky:n,...c},b)=>{const m=o(c),h=c["data-testid"]||"table-standalone";/* @__PURE__ */
-return a("div",{ref:b,className:s?.table,"data-sticky":n,"data-testid":`${h}-wrapper`,children:[
-/* @__PURE__ */t("div",{"aria-hidden":c["aria-hidden"],"aria-label":r?c["aria-label"]:void 0,"aria-labelledby":r?c["aria-labelledby"]:void 0,className:s?.scrollablecontainer,"data-table-scrollable-container":!0,"data-testid":`${h}-scrollable-container`,role:r?"region":void 0,style:{overflow:d?"visible":"auto"},...r?{tabIndex:0}:{},children:/* @__PURE__ */t(l,{className:s?.container,component:i,"data-testid":h,...m,children:e})}),
-/* @__PURE__ */t("div",{className:s?.leftboxshadowcontainer,"data-table-left-shadow":!0}),
-/* @__PURE__ */t("div",{className:s?.rightboxshadowcontainer,"data-table-right-shadow":!0})]})});export{i as TableStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const TableStandAlone = forwardRef(({ children: e, component: t = "table", cssClasses: n, hasScroll: r, hasScrollDisabled: i, sticky: a, ...o }, s) => {
+	let c = pickCustomAttributes(o), l = o["data-testid"] || "table-standalone";
+	return /* @__PURE__ */ jsxs("div", {
+		ref: s,
+		className: n?.table,
+		"data-sticky": a,
+		"data-testid": `${l}-wrapper`,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": o["aria-hidden"],
+				"aria-label": r ? o["aria-label"] : void 0,
+				"aria-labelledby": r ? o["aria-labelledby"] : void 0,
+				className: n?.scrollablecontainer,
+				"data-table-scrollable-container": !0,
+				"data-testid": `${l}-scrollable-container`,
+				role: r ? "region" : void 0,
+				style: { overflow: i ? "visible" : "auto" },
+				...r ? { tabIndex: 0 } : {},
+				children: /* @__PURE__ */ jsx(CustomComponent, {
+					className: n?.container,
+					component: t,
+					"data-testid": l,
+					...c,
+					children: e
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: n?.leftboxshadowcontainer,
+				"data-table-left-shadow": !0
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: n?.rightboxshadowcontainer,
+				"data-table-right-shadow": !0
+			})
+		]
+	});
+});
+export { TableStandAlone };

package/dist/esm/components/tableBody/tableBody.js

@@ -1,2 +1,14 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as a}from"react";import{useClassName as o}from"../../lib/hooks/useClassName/useClassName.js";import{TableBodyStandAlone as t}from"./tableBodyStandAlone.js";const r=a(({additionalClasses:a,variant:r,...e},m)=>{const i=o({additionalClassNames:a,component:"TABLE_BODY",variant:r});/* @__PURE__ */
-return s(t,{ref:m,cssClasses:i,...e})});export{r as TableBody};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { TableBodyStandAlone } from "./tableBodyStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableBody = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => /* @__PURE__ */ jsx(TableBodyStandAlone, {
+	ref: r,
+	cssClasses: useClassName({
+		additionalClassNames: e,
+		component: "TABLE_BODY",
+		variant: t
+	}),
+	...n
+}));
+export { TableBody };

package/dist/esm/components/tableBody/tableBodyStandAlone.js

@@ -1,2 +1,17 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{pickCustomAttributes as s}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as e}from"../../lib/components/customComponent/customComponent.js";const m=o(({children:o,component:m="tbody",cssClasses:r,id:i,...n},c)=>{const p=s(n);/* @__PURE__ */
-return t(e,{ref:c,className:r?.table_body,component:m,"data-testid":"table-body",...p,id:i,children:o})});export{m as TableBodyStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableBodyStandAlone = forwardRef(({ children: e, component: t = "tbody", cssClasses: n, id: r, ...i }, a) => {
+	let o = pickCustomAttributes(i);
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: a,
+		className: n?.table_body,
+		component: t,
+		"data-testid": "table-body",
+		...o,
+		id: r,
+		children: e
+	});
+});
+export { TableBodyStandAlone };

package/dist/esm/components/tableCaption/tableCaption.js

@@ -1,2 +1,14 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as a}from"react";import{useClassName as o}from"../../lib/hooks/useClassName/useClassName.js";import{TableCaptionStandAlone as t}from"./tableCaptionStandAlone.js";const r=a(({additionalClasses:a,variant:r,...e},i)=>{const m=o({additionalClassNames:a,component:"TABLE_CAPTION",variant:r});/* @__PURE__ */
-return s(t,{ref:i,cssClasses:m,...e})});export{r as TableCaption};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { TableCaptionStandAlone } from "./tableCaptionStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableCaption = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => /* @__PURE__ */ jsx(TableCaptionStandAlone, {
+	ref: r,
+	cssClasses: useClassName({
+		additionalClassNames: e,
+		component: "TABLE_CAPTION",
+		variant: t
+	}),
+	...n
+}));
+export { TableCaption };

package/dist/esm/components/tableCaption/tableCaptionStandAlone.js

@@ -1,2 +1,17 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{pickCustomAttributes as e}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as i}from"../../lib/components/customComponent/customComponent.js";const n=o(({children:o,component:n="caption",cssClasses:s,hidden:m,id:r,...c},p)=>{const a=e(c);/* @__PURE__ */
-return t(i,{ref:p,className:s?.table_caption,component:n,"data-hidden":m,id:r,...a,children:o})});export{n as TableCaptionStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableCaptionStandAlone = forwardRef(({ children: e, component: t = "caption", cssClasses: n, hidden: r, id: i, ...a }, o) => {
+	let s = pickCustomAttributes(a);
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: o,
+		className: n?.table_caption,
+		component: t,
+		"data-hidden": r,
+		id: i,
+		...s,
+		children: e
+	});
+});
+export { TableCaptionStandAlone };

package/dist/esm/components/tableCell/tableCell.js

@@ -1,2 +1,14 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as a}from"react";import{useClassName as o}from"../../lib/hooks/useClassName/useClassName.js";import{TableCellStandAlone as t}from"./tableCellStandAlone.js";const e=a(({additionalClasses:a,variant:e,...r},m)=>{const i=o({additionalClassNames:a,component:"TABLE_CELL",variant:e});/* @__PURE__ */
-return s(t,{ref:m,cssClasses:i,...r})});export{e as TableCell};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { TableCellStandAlone } from "./tableCellStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableCell = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => /* @__PURE__ */ jsx(TableCellStandAlone, {
+	ref: r,
+	cssClasses: useClassName({
+		additionalClassNames: e,
+		component: "TABLE_CELL",
+		variant: t
+	}),
+	...n
+}));
+export { TableCell };

package/dist/esm/components/tableCell/tableCellStandAlone.js

@@ -1,2 +1,42 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{pickCustomAttributes as o}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as i}from"../../lib/components/customComponent/customComponent.js";const n=e(({alignItems:e,bottom:n,children:l,colSpan:a,component:s,cssClasses:d,height:r,hidden:c,id:m,justifyContent:p,left:h,maxWidth:u,minWidth:b,onClick:$,onMouseEnter:g,onMouseLeave:f,right:C,role:y,rowSpan:A,scope:k,sticky:x,textAlign:M,th:j,top:W,verticalAlign:v,width:S,...w},L)=>{const E=o(w),I=d?.dynamic_values({$tdAlignItems:e||"",$tdBottom:n||"",$tdHeight:r||"",$tdJustifyContent:p||"",$tdLeft:h||"",$tdMaxWidth:u||"",$tdMinWidth:b||"",$tdRight:C||"",$tdTextAlign:M||"",$tdTop:W||"",$tdVerticalAlign:v||"",$tdWidth:S||""}).object;/* @__PURE__ */
-return t(i,{ref:L,"aria-label":w["aria-label"],"aria-labelledby":w["aria-labelledby"],className:d?.table_cell,colSpan:a,component:s||(j?"th":"td"),"data-hidden":c,"data-sticky":x,"data-testid":"table-cell",id:m,role:y,rowSpan:A,scope:k,style:I,onClick:$,onMouseEnter:g,onMouseLeave:f,...E,children:c?/* @__PURE__ */t("span",{children:l}):l})});export{n as TableCellStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableCellStandAlone = forwardRef(({ alignItems: e, bottom: t, children: n, colSpan: r, component: i, cssClasses: a, height: o, hidden: s, id: c, justifyContent: l, left: u, maxWidth: d, minWidth: f, onClick: p, onMouseEnter: m, onMouseLeave: h, right: g, role: _, rowSpan: v, scope: y, sticky: b, textAlign: x, th: S, top: C, verticalAlign: w, width: T, ...E }, D) => {
+	let O = pickCustomAttributes(E), k = a?.dynamic_values({
+		$tdAlignItems: e || "",
+		$tdBottom: t || "",
+		$tdHeight: o || "",
+		$tdJustifyContent: l || "",
+		$tdLeft: u || "",
+		$tdMaxWidth: d || "",
+		$tdMinWidth: f || "",
+		$tdRight: g || "",
+		$tdTextAlign: x || "",
+		$tdTop: C || "",
+		$tdVerticalAlign: w || "",
+		$tdWidth: T || ""
+	}).object;
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: D,
+		"aria-label": E["aria-label"],
+		"aria-labelledby": E["aria-labelledby"],
+		className: a?.table_cell,
+		colSpan: r,
+		component: i || (S ? "th" : "td"),
+		"data-hidden": s,
+		"data-sticky": b,
+		"data-testid": "table-cell",
+		id: c,
+		role: _,
+		rowSpan: v,
+		scope: y,
+		style: k,
+		onClick: p,
+		onMouseEnter: m,
+		onMouseLeave: h,
+		...O,
+		children: s ? /* @__PURE__ */ jsx("span", { children: n }) : n
+	});
+});
+export { TableCellStandAlone };

package/dist/esm/components/tableDivider/tableDivider.js

@@ -1,2 +1,14 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as a}from"react";import{useClassName as o}from"../../lib/hooks/useClassName/useClassName.js";import{TableDividerStandAlone as r}from"./tableDividerStandAlone.js";const t=a(({additionalClasses:a,variant:t,...e},i)=>{const m=o({additionalClassNames:a,component:"TABLE_DIVIDER",variant:t});/* @__PURE__ */
-return s(r,{ref:i,cssClasses:m,...e})});export{t as TableDivider};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { TableDividerStandAlone } from "./tableDividerStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableDivider = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => /* @__PURE__ */ jsx(TableDividerStandAlone, {
+	ref: r,
+	cssClasses: useClassName({
+		additionalClassNames: e,
+		component: "TABLE_DIVIDER",
+		variant: t
+	}),
+	...n
+}));
+export { TableDivider };

package/dist/esm/components/tableDivider/tableDividerStandAlone.js

@@ -1,2 +1,18 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{pickCustomAttributes as e}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as i}from"../../lib/components/customComponent/customComponent.js";const r=o(({children:o,component:r="div",cssClasses:s,id:m,...n},c)=>{const d=e(n);/* @__PURE__ */
-return t(i,{ref:c,className:s?.table_divider,component:r,"data-table-divider":!0,"data-testid":"table-divider",id:m,...d,children:o})});export{r as TableDividerStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableDividerStandAlone = forwardRef(({ children: e, component: t = "div", cssClasses: n, id: r, ...i }, a) => {
+	let o = pickCustomAttributes(i);
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: a,
+		className: n?.table_divider,
+		component: t,
+		"data-table-divider": !0,
+		"data-testid": "table-divider",
+		id: r,
+		...o,
+		children: e
+	});
+});
+export { TableDividerStandAlone };

package/dist/esm/components/tableFoot/tableFoot.js

@@ -1,2 +1,14 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as a}from"react";import{useClassName as o}from"../../lib/hooks/useClassName/useClassName.js";import{TableFootStandAlone as t}from"./tableFootStandAlone.js";const r=a(({additionalClasses:a,variant:r,...e},m)=>{const i=o({additionalClassNames:a,component:"TABLE_FOOT",variant:r});/* @__PURE__ */
-return s(t,{ref:m,cssClasses:i,...e})});export{r as TableFoot};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { TableFootStandAlone } from "./tableFootStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableFoot = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => /* @__PURE__ */ jsx(TableFootStandAlone, {
+	ref: r,
+	cssClasses: useClassName({
+		additionalClassNames: e,
+		component: "TABLE_FOOT",
+		variant: t
+	}),
+	...n
+}));
+export { TableFoot };

package/dist/esm/components/tableFoot/tableFootStandAlone.js

@@ -1,2 +1,17 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{pickCustomAttributes as s}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as e}from"../../lib/components/customComponent/customComponent.js";const m=o(({children:o,component:m="tfoot",cssClasses:r,id:i,...n},c)=>{const p=s(n);/* @__PURE__ */
-return t(e,{ref:c,className:r?.table_foot,component:m,"data-testid":"table-foot",id:i,...p,children:o})});export{m as TableFootStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableFootStandAlone = forwardRef(({ children: e, component: t = "tfoot", cssClasses: n, id: r, ...i }, a) => {
+	let o = pickCustomAttributes(i);
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: a,
+		className: n?.table_foot,
+		component: t,
+		"data-testid": "table-foot",
+		id: r,
+		...o,
+		children: e
+	});
+});
+export { TableFootStandAlone };

package/dist/esm/components/tableHead/tableHead.js

@@ -1,2 +1,14 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as a}from"react";import{useClassName as o}from"../../lib/hooks/useClassName/useClassName.js";import{TableHeadStandAlone as t}from"./tableHeadStandAlone.js";const e=a(({additionalClasses:a,variant:e,...r},m)=>{const i=o({additionalClassNames:a,component:"TABLE_HEAD",variant:e});/* @__PURE__ */
-return s(t,{ref:m,cssClasses:i,...r})});export{e as TableHead};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { TableHeadStandAlone } from "./tableHeadStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableHead = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => /* @__PURE__ */ jsx(TableHeadStandAlone, {
+	ref: r,
+	cssClasses: useClassName({
+		additionalClassNames: e,
+		component: "TABLE_HEAD",
+		variant: t
+	}),
+	...n
+}));
+export { TableHead };

package/dist/esm/components/tableHead/tableHeadStandAlone.js

@@ -1,2 +1,20 @@
-import{jsx as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{pickCustomAttributes as o}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{CustomComponent as s}from"../../lib/components/customComponent/customComponent.js";const i=e(({children:e,component:i="thead",cssClasses:a,hidden:m,id:r,sticky:n,...c},d)=>{const p=o(c);/* @__PURE__ */
-return t(s,{ref:d,className:a?.table_head,component:i,"data-hidden":m,"data-sticky":n,"data-table-head":!0,"data-testid":"table-head",id:r,...p,children:e})});export{i as TableHeadStandAlone};
+import { pickCustomAttributes } from "../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";
+import { CustomComponent } from "../../lib/components/customComponent/customComponent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableHeadStandAlone = forwardRef(({ children: e, component: t = "thead", cssClasses: n, hidden: r, id: i, sticky: a, ...o }, s) => {
+	let c = pickCustomAttributes(o);
+	return /* @__PURE__ */ jsx(CustomComponent, {
+		ref: s,
+		className: n?.table_head,
+		component: t,
+		"data-hidden": r,
+		"data-sticky": a,
+		"data-table-head": !0,
+		"data-testid": "table-head",
+		id: i,
+		...c,
+		children: e
+	});
+});
+export { TableHeadStandAlone };

package/dist/esm/components/tableRow/tableRow.js

@@ -1,2 +1,14 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as a}from"react";import{useClassName as o}from"../../lib/hooks/useClassName/useClassName.js";import{TableRowStandAlone as t}from"./tableRowStandAlone.js";const r=a(({additionalClasses:a,variant:r,...e},m)=>{const i=o({additionalClassNames:a,component:"TABLE_ROW",variant:r});/* @__PURE__ */
-return s(t,{ref:m,cssClasses:i,...e})});export{r as TableRow};
+import { useClassName } from "../../lib/hooks/useClassName/useClassName.js";
+import { TableRowStandAlone } from "./tableRowStandAlone.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+const TableRow = forwardRef(({ additionalClasses: e, variant: t, ...n }, r) => /* @__PURE__ */ jsx(TableRowStandAlone, {
+	ref: r,
+	cssClasses: useClassName({
+		additionalClassNames: e,
+		component: "TABLE_ROW",
+		variant: t
+	}),
+	...n
+}));
+export { TableRow };