chop-logic-components 4.0.1 → 4.1.0

package/dist/components/molecules/text-input/TextInputStateless.js

@@ -1,89 +1,60 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { getClassName as $ } from "../../../utils/get-class-name.js";
-import { useState as b } from "react";
-import './TextInput.css';/* empty css              */
-import y from "./TextInputButtons.js";
-import E from "../../atoms/label/Label.js";
-import L from "../../atoms/input/Input.js";
-import V from "../../atoms/error-message/ErrorMessage.js";
-const R = ({
-  name: t,
-  label: a,
-  errorMessage: s,
-  value: c,
-  onChange: e,
-  onBlur: d,
-  onFocus: x,
-  onClear: w,
-  maxLength: g,
-  id: I,
-  tabIndex: h,
-  placeholder: v = "Type here...",
-  disabled: i = !1,
-  required: l = !1,
-  clearable: P = !0,
-  readOnly: n = !1,
-  autoComplete: S = "off",
-  type: m = "text",
-  className: N,
-  style: T,
-  defaultValue: j
-}) => {
-  const p = I ?? `text-input-${t}`, f = `${t}-error`, [r, B] = b(!1), C = m === "password", _ = $(["cl-text-input", N]);
-  return /* @__PURE__ */ u("div", { style: T, className: _, children: [
-    /* @__PURE__ */ o(E, { label: a, required: l, inputId: p }),
-    /* @__PURE__ */ u(
-      L,
-      {
-        id: p,
-        name: t,
-        type: r ? "text" : m,
-        disabled: i,
-        placeholder: v,
-        required: l,
-        readOnly: n,
-        defaultValue: j,
-        autoComplete: S,
-        "aria-invalid": !!s,
-        "aria-errormessage": f,
-        "aria-readonly": n,
-        value: c ?? "",
-        onChange: e,
-        maxLength: g,
-        onBlur: d,
-        onFocus: x,
-        tabIndex: h,
-        children: [
-          /* @__PURE__ */ o(
-            y,
-            {
-              clearable: P,
-              isPasswordButtonVisible: C,
-              handleClear: () => {
-                e && e({ target: { value: "" } }), w?.();
-              },
-              togglePassword: () => {
-                B(!r);
-              },
-              passwordShown: r,
-              label: a,
-              disabled: i
-            }
-          ),
-          /* @__PURE__ */ o(
-            V,
-            {
-              errorId: f,
-              message: s,
-              visible: !!s,
-              className: "cl-text-input__error-message"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-export {
-  R as default
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import t from "../../atoms/error-message/ErrorMessage2.js";
+import n from "../../atoms/input/Input2.js";
+import r from "../../atoms/label/Label2.js";
+import './TextInput.css';/* empty css          */
+import i from "./TextInputButtons.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useState as s } from "react";
+//#region src/components/molecules/text-input/TextInputStateless.tsx
+var c = ({ name: c, label: l, errorMessage: u, value: d, onChange: f, onBlur: p, onFocus: m, onClear: h, maxLength: g, id: _, tabIndex: v, placeholder: y = "Type here...", disabled: b = !1, required: x = !1, clearable: S = !0, readOnly: C = !1, autoComplete: w = "off", type: T = "text", className: E, style: D, defaultValue: O }) => {
+	let k = _ ?? `text-input-${c}`, A = `${c}-error`, [j, M] = s(!1), N = T === "password";
+	return /* @__PURE__ */ o("div", {
+		style: D,
+		className: e(["cl-text-input", E]),
+		children: [/* @__PURE__ */ a(r, {
+			label: l,
+			required: x,
+			inputId: k
+		}), /* @__PURE__ */ o(n, {
+			id: k,
+			name: c,
+			type: j ? "text" : T,
+			disabled: b,
+			placeholder: y,
+			required: x,
+			readOnly: C,
+			defaultValue: O,
+			autoComplete: w,
+			"aria-invalid": !!u,
+			"aria-errormessage": A,
+			"aria-readonly": C,
+			value: d ?? "",
+			onChange: f,
+			maxLength: g,
+			onBlur: p,
+			onFocus: m,
+			tabIndex: v,
+			children: [/* @__PURE__ */ a(i, {
+				clearable: S,
+				isPasswordButtonVisible: N,
+				handleClear: () => {
+					f && f({ target: { value: "" } }), h?.();
+				},
+				togglePassword: () => {
+					M(!j);
+				},
+				passwordShown: j,
+				label: l,
+				disabled: b
+			}), /* @__PURE__ */ a(t, {
+				errorId: A,
+				message: u,
+				visible: !!u,
+				className: "cl-text-input__error-message"
+			})]
+		})]
+	});
 };
+//#endregion
+export { c as default };

package/dist/components/organisms/dialog/Dialog.css

@@ -1 +1 @@
-.cl-dialog{animation:cl-fade-in ease .4s;position:fixed;top:0;left:0;width:100%;height:100%;z-index:inherit;display:flex;justify-content:center;align-items:center;background-color:#0000004d}.cl-dialog__layout{z-index:var(--cl-z-index-modal);background-color:var(--cl-base-background-color);box-shadow:var(--cl-box-shadow);color:var(--cl-base-font-color);padding:var(--cl-l-gap);height:90%;position:absolute;bottom:0;left:0;border-top-left-radius:var(--cl-border-radius);border-top-right-radius:var(--cl-border-radius);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-dialog__button{position:absolute;right:var(--cl-s-gap);top:var(--cl-s-gap)}@media(min-width:640px){.cl-dialog__layout{font-size:var(--cl-typography-base-tablet)}.cl-dialog__button{right:var(--cl-m-gap);top:var(--cl-m-gap)}}@media(min-width:1024px){.cl-dialog__layout{font-size:var(--cl-typography-base-desktop);padding:var(--cl-xl-gap)}.cl-dialog__button{right:var(--cl-l-gap);top:var(--cl-l-gap)}}@media screen and (min-width:640px){.cl-dialog__layout{width:fit-content;height:fit-content;position:relative;min-width:40%;max-width:90%;max-height:90%;border-bottom-left-radius:var(--cl-border-radius);border-bottom-right-radius:var(--cl-border-radius)}}.cl-dialog_closing{animation:cl-fade-out ease .4s}
+.cl-dialog{width:100%;height:100%;z-index:inherit;background-color:var(--cl-shadow-background);justify-content:center;align-items:center;animation:.4s cl-fade-in;display:flex;position:fixed;top:0;left:0}.cl-dialog__layout{z-index:var(--cl-z-index-modal);background-color:var(--cl-base-background-color);box-shadow:var(--cl-box-shadow);color:var(--cl-base-font-color);padding:var(--cl-l-gap);border-top-left-radius:var(--cl-border-radius);border-top-right-radius:var(--cl-border-radius);height:90%;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5;position:absolute;bottom:0;left:0}.cl-dialog__button{right:var(--cl-s-gap);top:var(--cl-s-gap);position:absolute}@media (width>=640px){.cl-dialog__layout{font-size:var(--cl-typography-base-tablet)}.cl-dialog__button{right:var(--cl-m-gap);top:var(--cl-m-gap)}}@media (width>=1024px){.cl-dialog__layout{font-size:var(--cl-typography-base-desktop);padding:var(--cl-xl-gap)}.cl-dialog__button{right:var(--cl-l-gap);top:var(--cl-l-gap)}}@media screen and (width>=640px){.cl-dialog__layout{border-bottom-left-radius:var(--cl-border-radius);border-bottom-right-radius:var(--cl-border-radius);width:fit-content;min-width:40%;max-width:90%;height:fit-content;max-height:90%;position:relative}}.cl-dialog_closing{animation:.4s cl-fade-out}

package/dist/components/organisms/dialog/Dialog2.js

@@ -0,0 +1,50 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ButtonView as t } from "../../../enums/button-view.js";
+import { IconName as n } from "../../../enums/icon-name.js";
+import r from "../../atoms/button/Button2.js";
+import i from "../../atoms/header/Header2.js";
+import a from "../../atoms/portal/Portal.js";
+import { useIsMounted as o } from "../../../hooks/use-is-mounted/use-is-mounted.js";
+import { useKeyPress as s } from "../../../hooks/use-key-press/use-key-press.js";
+import { useModalFocusTrap as c } from "../../../hooks/use-modal-focus-trap/use-modal-focus-trap.js";
+import './Dialog.css';/* empty css       */
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useRef as d } from "react";
+//#region src/components/organisms/dialog/Dialog.tsx
+var f = ({ isOpened: f, onClose: p, title: m, children: h, icon: g, ..._ }) => {
+	let v = o(f), y = v && !f, b = d(null);
+	return c({
+		modalRef: b,
+		isOpened: f
+	}), s({
+		keyCode: "Escape",
+		ref: b,
+		onKeyPress: p
+	}), v ? /* @__PURE__ */ l(a, { children: /* @__PURE__ */ l("div", {
+		className: e(["cl-dialog", { "cl-dialog_closing": y }]),
+		children: /* @__PURE__ */ u("div", {
+			ref: b,
+			role: "dialog",
+			"aria-modal": "true",
+			..._,
+			className: "cl-dialog__layout",
+			children: [
+				/* @__PURE__ */ l(r, {
+					icon: n.X,
+					view: t.Icon,
+					label: "Close modal window",
+					onClick: p,
+					className: "cl-dialog__button"
+				}),
+				/* @__PURE__ */ l("header", { children: /* @__PURE__ */ l(i, {
+					as: "h3",
+					icon: g,
+					children: m
+				}) }),
+				/* @__PURE__ */ l("div", { children: h })
+			]
+		})
+	}) }) : null;
+};
+//#endregion
+export { f as default };

package/dist/components/organisms/form/Form.controller.js

@@ -1,29 +1,29 @@
-import { useState as e } from "react";
-import { getInitialValidationState as S, isFormDataValid as h, updateValidationState as f } from "./Form.helpers.js";
-function I({
-  initialValues: a,
-  onReset: d,
-  onSubmit: i,
-  onClickSubmit: c
-}) {
-  const [n, o] = e(a), [l, u] = e(S(a)), [r, m] = e(0);
-  return {
-    handleInputChange: (t) => {
-      const s = { ...n, [t.name]: t.value };
-      o(s), u(f(l, t));
-    },
-    handleSubmit: (t) => {
-      t.preventDefault();
-      const D = { ...Object.fromEntries(new FormData(t.target)), ...n };
-      i?.(t), c?.(D);
-    },
-    handleReset: (t) => {
-      d?.(t), o(a), m(r + 1);
-    },
-    resetSignal: r,
-    valid: h(l)
-  };
+import { getInitialValidationState as e, isFormDataValid as t, updateValidationState as n } from "./Form.helpers.js";
+import { useState as r } from "react";
+//#region src/components/organisms/form/Form.controller.ts
+function i({ initialValues: i, onReset: a, onSubmit: o, onClickSubmit: s }) {
+	let [c, l] = r(i), [u, d] = r(e(i)), [f, p] = r(0);
+	return {
+		handleInputChange: (e) => {
+			l({
+				...c,
+				[e.name]: e.value
+			}), d(n(u, e));
+		},
+		handleSubmit: (e) => {
+			e.preventDefault();
+			let t = {
+				...Object.fromEntries(new FormData(e.target)),
+				...c
+			};
+			o?.(e), s?.(t);
+		},
+		handleReset: (e) => {
+			a?.(e), l(i), p(f + 1);
+		},
+		resetSignal: f,
+		valid: t(u)
+	};
 }
-export {
-  I as useFormController
-};
+//#endregion
+export { i as useFormController };

package/dist/components/organisms/form/Form.css

@@ -1 +1 @@
-.cl-form{display:grid;align-items:end;gap:var(--cl-l-gap);grid-template-columns:auto;grid-template-rows:auto}@media screen and (min-width:640px){.cl-form{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:1024px){.cl-form{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:1280px){.cl-form{grid-template-columns:repeat(4,1fr)}}.cl-form__buttons{display:flex;align-items:center;justify-content:space-between;padding-top:var(--cl-l-gap);grid-column:1 / -1}
+.cl-form{align-items:end;gap:var(--cl-l-gap);grid-template-rows:auto;grid-template-columns:auto;display:grid}@media screen and (width>=640px){.cl-form{grid-template-columns:repeat(2,1fr)}}@media screen and (width>=1024px){.cl-form{grid-template-columns:repeat(3,1fr)}}@media screen and (width>=1280px){.cl-form{grid-template-columns:repeat(4,1fr)}}.cl-form__buttons{padding-top:var(--cl-l-gap);grid-column:1/-1;justify-content:space-between;align-items:center;display:flex}

package/dist/components/organisms/form/Form.helpers.js

@@ -1,14 +1,12 @@
-function e(t) {
-  return t ? Object.keys(t).map((n) => [n, !0]) : [];
+//#region src/components/organisms/form/Form.helpers.ts
+function e(e) {
+	return e ? Object.keys(e).map((e) => [e, !0]) : [];
 }
-function i(t, n) {
-  return n?.valid === void 0 ? t : t.map((r) => r[0] !== n.name ? r : [r[0], !!n?.valid]);
+function t(e, t) {
+	return t?.valid === void 0 ? e : e.map((e) => e[0] === t.name ? [e[0], !!t?.valid] : e);
 }
-function u(t) {
-  return t.every((n) => n[1]);
+function n(e) {
+	return e.every((e) => e[1]);
 }
-export {
-  e as getInitialValidationState,
-  u as isFormDataValid,
-  i as updateValidationState
-};
+//#endregion
+export { e as getInitialValidationState, n as isFormDataValid, t as updateValidationState };

package/dist/components/organisms/form/Form2.js

@@ -0,0 +1,52 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ButtonView as t } from "../../../enums/button-view.js";
+import { IconName as n } from "../../../enums/icon-name.js";
+import r from "../../atoms/button/Button2.js";
+import { FormContext as i } from "../../contexts/form/FormContext.js";
+import { useFormController as a } from "./Form.controller.js";
+import './Form.css';/* empty css     */
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+//#region src/components/organisms/form/Form.tsx
+var l = ({ children: l, initialValues: u, onReset: d, onSubmit: f, onClickSubmit: p, hasReset: m = !0, className: h, ...g }) => {
+	let { handleInputChange: _, handleSubmit: v, handleReset: y, resetSignal: b, valid: x } = a({
+		initialValues: u,
+		onReset: d,
+		onSubmit: f,
+		onClickSubmit: p
+	}), S = e(["cl-form", h]), C = c(() => ({
+		onChangeFormInput: _,
+		initialValues: u,
+		resetSignal: b
+	}), [
+		_,
+		u,
+		b
+	]);
+	return /* @__PURE__ */ o("form", {
+		onSubmit: v,
+		onReset: y,
+		...g,
+		className: S,
+		children: /* @__PURE__ */ s(i.Provider, {
+			value: C,
+			children: [l, /* @__PURE__ */ s("div", {
+				className: "cl-form__buttons",
+				children: [m && /* @__PURE__ */ o(r, {
+					type: "reset",
+					text: "Reset",
+					icon: n.Delete,
+					view: t.Secondary
+				}), /* @__PURE__ */ o(r, {
+					type: "submit",
+					text: "Submit",
+					icon: n.ArrowRight,
+					extended: !m,
+					disabled: !x
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/organisms/grid/Grid.controller.js

@@ -1,34 +1,28 @@
-import { useState as m } from "react";
-import { useElementIds as S } from "../../../hooks/use-element-ids/use-element-ids.js";
-const B = ({
-  data: n,
-  id: d,
-  onSelect: o
-}) => {
-  const { elementId: a } = S(d), [l, h] = m([]), c = n.map((e) => e.id), r = c.length === l.length, I = n.some((e) => e?.disabled), t = (e) => {
-    h(e), o?.(e);
-  };
-  return {
-    elementId: a,
-    isAllSelected: r,
-    isAllCheckboxDisabled: I,
-    selectedIds: l,
-    handleSelectAll: () => {
-      t(c);
-    },
-    handleDeselectAll: () => {
-      t([]);
-    },
-    handleSelectRowById: (e) => {
-      const s = [...l, e];
-      t(s);
-    },
-    handleDeselectRowById: (e) => {
-      const s = l.filter((i) => i !== e);
-      t(s);
-    }
-  };
-};
-export {
-  B as useGridController
+import { useElementIds as e } from "../../../hooks/use-element-ids/use-element-ids.js";
+import { useState as t } from "react";
+//#region src/components/organisms/grid/Grid.controller.ts
+var n = ({ data: n, id: r, onSelect: i }) => {
+	let { elementId: a } = e(r), [o, s] = t([]), c = n.map((e) => e.id), l = c.length === o.length, u = n.some((e) => e?.disabled), d = (e) => {
+		s(e), i?.(e);
+	};
+	return {
+		elementId: a,
+		isAllSelected: l,
+		isAllCheckboxDisabled: u,
+		selectedIds: o,
+		handleSelectAll: () => {
+			d(c);
+		},
+		handleDeselectAll: () => {
+			d([]);
+		},
+		handleSelectRowById: (e) => {
+			d([...o, e]);
+		},
+		handleDeselectRowById: (e) => {
+			d(o.filter((t) => t !== e));
+		}
+	};
 };
+//#endregion
+export { n as useGridController };

package/dist/components/organisms/grid/Grid.css

@@ -1 +1 @@
-.cl-grid{border-collapse:collapse}.cl-grid__caption{color:var(--cl-base-font-color);padding:var(--cl-m-gap);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-grid__caption{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-grid__caption{font-size:var(--cl-typography-base-desktop)}}.cl-grid__wrapper{overflow-x:auto}
+.cl-grid{border-collapse:collapse}.cl-grid__caption{color:var(--cl-base-font-color);padding:var(--cl-m-gap);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;line-height:1.5}@media (width>=640px){.cl-grid__caption{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-grid__caption{font-size:var(--cl-typography-base-desktop)}}.cl-grid__wrapper{overflow-x:auto}

package/dist/components/organisms/grid/Grid.helpers.js

@@ -1,15 +1,14 @@
-function u({
-  item: e,
-  columns: s,
-  renderDataItem: o
-}) {
-  const i = [];
-  for (const l of s) {
-    let f;
-    o && e[l.field] ? f = o(e, l.field) : e[l.field] ? f = e[l.field].toString() : f = "", i.push({ field: l.field, value: f });
-  }
-  return i;
+//#region src/components/organisms/grid/Grid.helpers.ts
+function e({ item: e, columns: t, renderDataItem: n }) {
+	let r = [];
+	for (let i of t) {
+		let t;
+		t = n && e[i.field] ? n(e, i.field) : e[i.field] ? e[i.field].toString() : "", r.push({
+			field: i.field,
+			value: t
+		});
+	}
+	return r;
 }
-export {
-  u as getGridRowValues
-};
+//#endregion
+export { e as getGridRowValues };

package/dist/components/organisms/grid/Grid2.js

@@ -0,0 +1,52 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import './Grid.css';/* empty css     */
+import { GridBody as t } from "./body/GridBody2.js";
+import { GridColumnGroup as n } from "./column-group/GridColumnGroup2.js";
+import { useGridController as r } from "./Grid.controller.js";
+import { GridHead as i } from "./head/GridHead2.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/organisms/grid/Grid.tsx
+var s = ({ columns: s, data: c, id: l, onSelect: u, renderDataItem: d, caption: f, selectable: p = !1, className: m, ...h }) => {
+	let { elementId: g, handleSelectAll: _, handleDeselectAll: v, isAllCheckboxDisabled: y, isAllSelected: b, handleDeselectRowById: x, handleSelectRowById: S, selectedIds: C } = r({
+		id: l,
+		data: c,
+		onSelect: u
+	});
+	return /* @__PURE__ */ a("div", {
+		className: "cl-grid__wrapper",
+		children: /* @__PURE__ */ o("table", {
+			...h,
+			className: e(["cl-grid", m]),
+			children: [
+				f && /* @__PURE__ */ a("caption", {
+					className: "cl-grid__caption",
+					children: f
+				}),
+				/* @__PURE__ */ a(n, {
+					columns: s,
+					selectable: p
+				}),
+				/* @__PURE__ */ a(i, {
+					gridId: g,
+					columns: s,
+					selectable: p,
+					selectAll: _,
+					deselectAll: v,
+					isAllSelected: b,
+					isAllCheckboxDisabled: y
+				}),
+				/* @__PURE__ */ a(t, {
+					columns: s,
+					data: c,
+					selectable: p,
+					selectRowById: S,
+					deselectRowById: x,
+					selectedIds: C,
+					renderDataItem: d
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { s as default };

package/dist/components/organisms/grid/body/GridBody.css

@@ -1 +1 @@
-.cl-grid-body{color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-grid-body td{padding:var(--cl-xs-gap)}@media(min-width:640px){.cl-grid-body{font-size:var(--cl-typography-base-tablet)}.cl-grid-body td{padding:var(--cl-s-gap)}}@media(min-width:1024px){.cl-grid-body{font-size:var(--cl-typography-base-desktop)}.cl-grid-body td{padding:var(--cl-m-gap)}}
+.cl-grid-body{color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}.cl-grid-body td{padding:var(--cl-xs-gap)}@media (width>=640px){.cl-grid-body{font-size:var(--cl-typography-base-tablet)}.cl-grid-body td{padding:var(--cl-s-gap)}}@media (width>=1024px){.cl-grid-body{font-size:var(--cl-typography-base-desktop)}.cl-grid-body td{padding:var(--cl-m-gap)}}

package/dist/components/organisms/grid/body/GridBody2.js

@@ -0,0 +1,26 @@
+import { getGridRowValues as e } from "../Grid.helpers.js";
+import { GridRow as t } from "../grid-row/GridRow2.js";
+import './GridBody.css';/* empty css         */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/organisms/grid/body/GridBody.tsx
+var r = ({ selectRowById: r, deselectRowById: i, renderDataItem: a, selectedIds: o, selectable: s, data: c, columns: l }) => /* @__PURE__ */ n("tbody", {
+	className: "cl-grid-body",
+	children: c.map((c) => {
+		let u = e({
+			item: c,
+			columns: l,
+			renderDataItem: a
+		});
+		return /* @__PURE__ */ n(t, {
+			rowId: c.id,
+			disabled: c?.disabled,
+			selectRowById: r,
+			deselectRowById: i,
+			selectable: s,
+			values: u,
+			selectedIds: o
+		}, c.id);
+	})
+});
+//#endregion
+export { r as GridBody };

package/dist/components/organisms/grid/checkbox/GridCheckbox.css

@@ -1 +1 @@
-.cl-grid-checkbox{display:flex;gap:var(--cl-s-gap);padding:var(--cl-s-gap);position:relative;overflow:hidden;background-position:center}.cl-grid-checkbox label{cursor:pointer;gap:var(--cl-s-gap);font-size:var(--cl-typography-small-mobile)}.cl-grid-checkbox label:hover,.cl-grid-checkbox label:active{text-shadow:var(--cl-text-shadow)}.cl-grid-checkbox__input{position:absolute;z-index:-1;opacity:0;top:4px;left:0;margin:0}.cl-grid-checkbox__input:focus-visible+label{outline:var(--cl-outline-border);outline-offset:var(--cl-xs-gap)}.cl-grid-checkbox_disabled{pointer-events:none;opacity:.5}
+.cl-grid-checkbox{gap:var(--cl-s-gap);padding:var(--cl-s-gap);background-position:50%;display:flex;position:relative;overflow:hidden}.cl-grid-checkbox label{cursor:pointer;gap:var(--cl-s-gap);font-size:var(--cl-typography-small-mobile)}.cl-grid-checkbox label:hover,.cl-grid-checkbox label:active{text-shadow:var(--cl-text-shadow)}.cl-grid-checkbox__input{z-index:-1;opacity:0;margin:0;position:absolute;top:4px;left:0}.cl-grid-checkbox__input:focus-visible+label{outline:var(--cl-outline-border);outline-offset:var(--cl-xs-gap)}.cl-grid-checkbox_disabled{pointer-events:none;opacity:.5}

package/dist/components/organisms/grid/checkbox/GridCheckbox2.js

@@ -0,0 +1,35 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { IconName as t } from "../../../../enums/icon-name.js";
+import n from "../../../atoms/label/Label2.js";
+import { useElementIds as r } from "../../../../hooks/use-element-ids/use-element-ids.js";
+import './GridCheckbox.css';/* empty css             */
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/organisms/grid/checkbox/GridCheckbox.tsx
+var o = ({ name: o, label: s, disabled: c, required: l = !1, onChange: u, checked: d = !1, ...f }) => {
+	let { elementId: p } = r(f?.id);
+	return /* @__PURE__ */ a("div", {
+		className: e(["cl-grid-checkbox", {
+			"cl-grid-checkbox_disabled": !!c,
+			"cl-grid-checkbox_checked": !!d
+		}]),
+		children: [/* @__PURE__ */ i("input", {
+			id: p,
+			name: o,
+			type: "checkbox",
+			disabled: c,
+			required: l,
+			checked: d,
+			onChange: u,
+			className: "cl-grid-checkbox__input"
+		}), /* @__PURE__ */ i(n, {
+			label: s,
+			required: l,
+			inputId: p,
+			isTextHidden: !0,
+			iconPosition: "left",
+			icon: d ? t.CheckSquare : t.Square
+		})]
+	});
+};
+//#endregion
+export { o as GridCheckbox };

package/dist/components/organisms/grid/column-group/GridColumnGroup2.js

@@ -0,0 +1,14 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import './GridColumnGroup.css';/* empty css                */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/organisms/grid/column-group/GridColumnGroup.tsx
+var r = ({ columns: r, selectable: i }) => /* @__PURE__ */ n("colgroup", { children: [i && /* @__PURE__ */ t("col", { className: "cl-grid-column cl-grid-column_first cl-grid-column_check" }), r.map((n, r) => /* @__PURE__ */ t("col", { className: e([
+	"cl-grid-column",
+	n?.className,
+	{
+		"cl-grid-column_first": r === 0 && !i,
+		"cl-grid-column_highlighted": !!n?.highlighted
+	}
+]) }, n?.title))] });
+//#endregion
+export { r as GridColumnGroup };

package/dist/components/organisms/grid/data-cell/GridDataCell.js

@@ -1,5 +1,5 @@
-import { jsx as t } from "react/jsx-runtime";
-const o = ({ value: r }) => /* @__PURE__ */ t("td", { children: r });
-export {
-  o as GridDataCell
-};
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/organisms/grid/data-cell/GridDataCell.tsx
+var t = ({ value: t }) => /* @__PURE__ */ e("td", { children: t });
+//#endregion
+export { t as GridDataCell };

package/dist/components/organisms/grid/grid-row/GridRow2.js

@@ -0,0 +1,24 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { GridDataCell as t } from "../data-cell/GridDataCell.js";
+import { SelectGridRowCell as n } from "../select-grid-row-cell/SelectGridRowCell.js";
+import './GridRow.css';/* empty css        */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/organisms/grid/grid-row/GridRow.tsx
+var a = ({ rowId: a, selectRowById: o, deselectRowById: s, selectable: c, values: l, selectedIds: u, disabled: d }) => {
+	let f = u.includes(a);
+	return /* @__PURE__ */ i("tr", {
+		className: e(["cl-grid-row", { "cl-grid-row_selected": f }]),
+		children: [c && /* @__PURE__ */ r(n, {
+			rowId: a,
+			selectRowById: o,
+			deselectRowById: s,
+			isRowSelected: f,
+			disabled: d
+		}), l.map((e) => {
+			let n = `cell-${a}-${e.field}`;
+			return /* @__PURE__ */ r(t, { value: e.value }, n);
+		})]
+	});
+};
+//#endregion
+export { a as GridRow };

package/dist/components/organisms/grid/head/GridHead.css

@@ -1 +1 @@
-.cl-grid-head{color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-grid-head th{padding:var(--cl-xs-gap)}@media(min-width:640px){.cl-grid-head{font-size:var(--cl-typography-base-tablet)}.cl-grid-head th{padding:var(--cl-s-gap)}}@media(min-width:1024px){.cl-grid-head{font-size:var(--cl-typography-base-desktop)}.cl-grid-head th{padding:var(--cl-m-gap)}}.cl-grid-head__row{border-top:var(--cl-light-border);border-bottom:var(--cl-light-border);background-color:var(--cl-accent-background)}
+.cl-grid-head{color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;line-height:1.5}.cl-grid-head th{padding:var(--cl-xs-gap)}@media (width>=640px){.cl-grid-head{font-size:var(--cl-typography-base-tablet)}.cl-grid-head th{padding:var(--cl-s-gap)}}@media (width>=1024px){.cl-grid-head{font-size:var(--cl-typography-base-desktop)}.cl-grid-head th{padding:var(--cl-m-gap)}}.cl-grid-head__row{border-top:var(--cl-light-border);border-bottom:var(--cl-light-border);background-color:var(--cl-accent-background)}