chop-logic-components 4.0.1 → 4.0.3

package/dist/components/molecules/alert/Alert2.js

@@ -0,0 +1,63 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { AlertMode as t } from "../../../enums/alert-mode.js";
+import { ButtonView as n } from "../../../enums/button-view.js";
+import { ElementSize as r } from "../../../enums/element-size.js";
+import { IconName as i } from "../../../enums/icon-name.js";
+import a from "../../atoms/button/Button2.js";
+import o from "../../atoms/header/Header2.js";
+import s from "../../atoms/portal/Portal.js";
+import { useIsHovered as c } from "../../../hooks/use-is-hovered/use-is-hovered.js";
+import { useIsMounted as l } from "../../../hooks/use-is-mounted/use-is-mounted.js";
+import { useRemainingTimer as u } from "../../../hooks/use-remaining-timer/use-remaining-timer.js";
+import './Alert.css';/* empty css      */
+import { getAlertIcon as d, getAlertTitle as f } from "./Alert.helpers.js";
+import { AlertProgressBar as p } from "./AlertProgressBar.js";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useRef as g } from "react";
+//#region src/components/molecules/alert/Alert.tsx
+var _ = ({ isOpened: _, onClose: v, title: y, message: b, mode: x = t.Info, icon: S, autoClose: C = !1, autoCloseDelay: w = 3e3, ...T }) => {
+	let E = l(_), D = E && !_, O = g(null), k = c(O, E), A = !C, j = u({
+		isOpened: E,
+		isHovered: k,
+		onClose: v,
+		autoCloseDelay: w,
+		autoClose: C
+	});
+	if (!E) return null;
+	let M = f(x, y), N = d(x, S);
+	return /* @__PURE__ */ m(s, { children: /* @__PURE__ */ m("div", {
+		ref: O,
+		className: e([
+			"cl-alert",
+			`cl-alert_${x.toLowerCase()}`,
+			{ "cl-alert_closing": D }
+		]),
+		children: /* @__PURE__ */ h("div", {
+			...T,
+			className: "cl-alert__content",
+			children: [
+				A && /* @__PURE__ */ m(a, {
+					icon: i.X,
+					view: n.Icon,
+					iconSize: r.Medium,
+					label: "Close alert",
+					onClick: v,
+					className: "cl-alert__button"
+				}),
+				/* @__PURE__ */ m("header", { children: /* @__PURE__ */ m(o, {
+					icon: N,
+					as: "h3",
+					className: "cl-alert__header",
+					children: M
+				}) }),
+				/* @__PURE__ */ m("p", {
+					className: "cl-alert__message",
+					children: b
+				}),
+				C && /* @__PURE__ */ m(p, { remainingPercentage: j })
+			]
+		})
+	}) });
+};
+//#endregion
+export { _ as default };

package/dist/components/molecules/alert/AlertProgressBar.js

@@ -1,13 +1,10 @@
-import { jsx as s } from "react/jsx-runtime";
-const t = ({ remainingPercentage: r }) => /* @__PURE__ */ s(
-  "progress",
-  {
-    className: "cl-alert__progress-bar",
-    value: r,
-    max: 100,
-    style: { width: "100%" }
-  }
-);
-export {
-  t as AlertProgressBar
-};
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/molecules/alert/AlertProgressBar.tsx
+var t = ({ remainingPercentage: t }) => /* @__PURE__ */ e("progress", {
+	className: "cl-alert__progress-bar",
+	value: t,
+	max: 100,
+	style: { width: "100%" }
+});
+//#endregion
+export { t as AlertProgressBar };

package/dist/components/molecules/breadcrumbs/BreadcrumbItem.js

@@ -1,27 +1,29 @@
-import { jsxs as c, Fragment as l, jsx as e } from "react/jsx-runtime";
-import i from "../../atoms/link/Link.js";
-import o from "../../atoms/icon/Icon.js";
-import { ElementSize as m } from "../../../enums/element-size.js";
-import { IconName as s } from "../../../enums/icon-name.js";
-const f = ({ item: r, isLastItem: n }) => {
-  const a = !!r.link && !n;
-  return /* @__PURE__ */ c(l, { children: [
-    /* @__PURE__ */ e("li", { className: "cl-breadcrumbs__item", children: a ? /* @__PURE__ */ e(
-      i,
-      {
-        href: r?.link ?? "",
-        icon: r.icon,
-        iconPosition: "left",
-        className: "cl-breadcrumbs__link",
-        children: r.label
-      }
-    ) : /* @__PURE__ */ c("span", { "aria-current": n ? "page" : void 0, className: "cl-breadcrumbs__text", children: [
-      r.icon && /* @__PURE__ */ e(o, { name: r.icon, hidden: !0 }),
-      r.label
-    ] }) }),
-    !n && /* @__PURE__ */ e(o, { name: s.ChevronRight, size: m.Small, testId: "breadcrumb-separator" })
-  ] });
-};
-export {
-  f as default
-};
+import { ElementSize as e } from "../../../enums/element-size.js";
+import { IconName as t } from "../../../enums/icon-name.js";
+import n from "../../atoms/icon/Icon2.js";
+import r from "../../atoms/link/Link2.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/molecules/breadcrumbs/BreadcrumbItem.tsx
+var s = ({ item: s, isLastItem: c }) => /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("li", {
+	className: "cl-breadcrumbs__item",
+	children: s.link && !c ? /* @__PURE__ */ a(r, {
+		href: s?.link ?? "",
+		icon: s.icon,
+		iconPosition: "left",
+		className: "cl-breadcrumbs__link",
+		children: s.label
+	}) : /* @__PURE__ */ o("span", {
+		"aria-current": c ? "page" : void 0,
+		className: "cl-breadcrumbs__text",
+		children: [s.icon && /* @__PURE__ */ a(n, {
+			name: s.icon,
+			hidden: !0
+		}), s.label]
+	})
+}), !c && /* @__PURE__ */ a(n, {
+	name: t.ChevronRight,
+	size: e.Small,
+	testId: "breadcrumb-separator"
+})] });
+//#endregion
+export { s as default };

package/dist/components/molecules/breadcrumbs/BreadcrumbList.js

@@ -1,6 +1,12 @@
-import { jsx as e } from "react/jsx-runtime";
-import l from "./BreadcrumbItem.js";
-const c = ({ items: r }) => /* @__PURE__ */ e("ol", { className: "cl-breadcrumbs__list", children: r.map((a, t) => /* @__PURE__ */ e(l, { item: a, isLastItem: t === r.length - 1 }, a.label)) });
-export {
-  c as default
-};
+import e from "./BreadcrumbItem.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/molecules/breadcrumbs/BreadcrumbList.tsx
+var n = ({ items: n }) => /* @__PURE__ */ t("ol", {
+	className: "cl-breadcrumbs__list",
+	children: n.map((r, i) => /* @__PURE__ */ t(e, {
+		item: r,
+		isLastItem: i === n.length - 1
+	}, r.label))
+});
+//#endregion
+export { n as default };

package/dist/components/molecules/breadcrumbs/Breadcrumbs.css

@@ -1 +1 @@
-.cl-breadcrumbs{display:inline-block;background-color:transparent}.cl-breadcrumbs__list{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:var(--cl-s-gap)}.cl-breadcrumbs__item{display:flex;align-items:center}.cl-breadcrumbs__text{display:inline-flex;align-items:center;gap:var(--cl-s-gap);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-breadcrumbs__link{color:var(--cl-base-font-color)!important}.cl-breadcrumbs__link span:before{color:var(--cl-base-font-color)}@media(min-width:640px){.cl-breadcrumbs__text{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-breadcrumbs__text{font-size:var(--cl-typography-base-desktop)}}
+.cl-breadcrumbs{background-color:#0000;display:inline-block}.cl-breadcrumbs__list{align-items:center;gap:var(--cl-s-gap);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.cl-breadcrumbs__item{align-items:center;display:flex}.cl-breadcrumbs__text{align-items:center;gap:var(--cl-s-gap);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;display:inline-flex}.cl-breadcrumbs__link{color:var(--cl-base-font-color)!important}.cl-breadcrumbs__link span:before{color:var(--cl-base-font-color)}@media (width>=640px){.cl-breadcrumbs__text{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-breadcrumbs__text{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/molecules/breadcrumbs/Breadcrumbs2.js

@@ -0,0 +1,20 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import './Breadcrumbs.css';/* empty css            */
+import t from "./BreadcrumbList.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/molecules/breadcrumbs/Breadcrumbs.tsx
+var r = ({ items: r, className: i, id: a, style: o, tabIndex: s, title: c, ...l }) => {
+	let u = e(["cl-breadcrumbs", i]);
+	return !r || r.length === 0 ? null : /* @__PURE__ */ n("nav", {
+		"aria-label": "Breadcrumb",
+		className: u,
+		id: a,
+		style: o,
+		tabIndex: s,
+		title: c,
+		...l,
+		children: /* @__PURE__ */ n(t, { items: r })
+	});
+};
+//#endregion
+export { r as default };

package/dist/components/molecules/checkbox/Checkbox.controller.js

@@ -1,25 +1,29 @@
-import { useContext as k, useState as p, useRef as i, useCallback as d } from "react";
-import { getCheckboxInitialValue as g } from "./Checkbox.helpers.js";
-import { FormContext as x } from "../../contexts/form/FormContext.js";
-import { useResetFormInput as I } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
-function v({
-  name: e,
-  defaultChecked: a,
-  onChange: l
-}) {
-  const { onChangeFormInput: t, initialValues: h } = k(x), n = g({ initialValues: h, name: e, defaultChecked: a }), [C, r] = p(n), c = i(t), o = i(n);
-  c.current = t, o.current = n;
-  const m = (u) => {
-    const s = u.target.checked;
-    r(s), l?.(u), t?.({ name: e, value: s });
-  }, f = d(() => {
-    r(o.current), c.current?.({ name: e, value: o.current });
-  }, [e]);
-  return I(f), {
-    handleChange: m,
-    checked: C
-  };
+import { FormContext as e } from "../../contexts/form/FormContext.js";
+import { useResetFormInput as t } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
+import { getCheckboxInitialValue as n } from "./Checkbox.helpers.js";
+import { useCallback as r, useContext as i, useRef as a, useState as o } from "react";
+//#region src/components/molecules/checkbox/Checkbox.controller.ts
+function s({ name: s, defaultChecked: c, onChange: l }) {
+	let { onChangeFormInput: u, initialValues: d } = i(e), f = n({
+		initialValues: d,
+		name: s,
+		defaultChecked: c
+	}), [p, m] = o(f), h = a(u), g = a(f);
+	return h.current = u, g.current = f, t(r(() => {
+		m(g.current), h.current?.({
+			name: s,
+			value: g.current
+		});
+	}, [s])), {
+		handleChange: (e) => {
+			let t = e.target.checked;
+			m(t), l?.(e), u?.({
+				name: s,
+				value: t
+			});
+		},
+		checked: p
+	};
 }
-export {
-  v as useCheckboxController
-};
+//#endregion
+export { s as useCheckboxController };

package/dist/components/molecules/checkbox/Checkbox.css

@@ -1 +1 @@
-.cl-checkbox{overflow:hidden;padding:var(--cl-m-gap);display:inline-flex;justify-content:flex-start;align-items:center}.cl-checkbox label{font-size:var(--cl-typography-base-mobile);align-items:center;gap:var(--cl-m-gap)}@media(min-width:640px){.cl-checkbox .cl-label__text{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-checkbox .cl-label__text{font-size:var(--cl-typography-base-desktop)}}.cl-checkbox input{position:absolute;z-index:-1;opacity:0;top:4px;left:0;margin:0}.cl-checkbox input:focus-visible+label{outline:var(--cl-outline-border);outline-offset:var(--cl-s-gap)}.cl-checkbox_checked svg{color:var(--cl-accent-a0)}.cl-checkbox_disabled{pointer-events:none;opacity:.5}
+.cl-checkbox{padding:var(--cl-m-gap);justify-content:flex-start;align-items:center;display:inline-flex;overflow:hidden}.cl-checkbox label{font-size:var(--cl-typography-base-mobile);align-items:center;gap:var(--cl-m-gap)}@media (width>=640px){.cl-checkbox .cl-label__text{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-checkbox .cl-label__text{font-size:var(--cl-typography-base-desktop)}}.cl-checkbox input{z-index:-1;opacity:0;margin:0;position:absolute;top:4px;left:0}.cl-checkbox input:focus-visible+label{outline:var(--cl-outline-border);outline-offset:var(--cl-s-gap)}.cl-checkbox_checked svg{color:var(--cl-accent-a0)}.cl-checkbox_disabled{pointer-events:none;opacity:.5}

package/dist/components/molecules/checkbox/Checkbox.helpers.js

@@ -1,10 +1,6 @@
-function t({
-  defaultChecked: r,
-  initialValues: o,
-  name: e
-}) {
-  return o?.[e] !== void 0 ? !!o?.[e] : !!r;
+//#region src/components/molecules/checkbox/Checkbox.helpers.ts
+function e({ defaultChecked: e, initialValues: t, name: n }) {
+	return t?.[n] === void 0 ? !!e : !!t?.[n];
 }
-export {
-  t as getCheckboxInitialValue
-};
+//#endregion
+export { e as getCheckboxInitialValue };

package/dist/components/molecules/checkbox/Checkbox2.js

@@ -0,0 +1,7 @@
+import e from "./CheckboxStateful.js";
+import t from "./CheckboxStateless.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/molecules/checkbox/Checkbox.tsx
+var r = (r) => r.stateless ? /* @__PURE__ */ n(t, { ...r }) : /* @__PURE__ */ n(e, { ...r });
+//#endregion
+export { r as default };

package/dist/components/molecules/checkbox/CheckboxStateful.js

@@ -1,61 +1,48 @@
-import { jsxs as C, jsx as s } from "react/jsx-runtime";
-import { getClassName as b } from "../../../utils/get-class-name.js";
-import { useCheckboxController as S } from "./Checkbox.controller.js";
-import './Checkbox.css';/* empty css             */
-import { useElementIds as I } from "../../../hooks/use-element-ids/use-element-ids.js";
-import g from "../../atoms/label/Label.js";
-import { ElementSize as N } from "../../../enums/element-size.js";
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../enums/element-size.js";
 import { IconName as n } from "../../../enums/icon-name.js";
-const M = ({
-  name: o,
-  label: c,
-  disabled: t,
-  noLabel: r,
-  required: i = !1,
-  iconPosition: l = "left",
-  defaultChecked: a,
-  onChange: h,
-  id: d,
-  className: p,
-  style: f,
-  tabIndex: x
-}) => {
-  const { handleChange: k, checked: e } = S({ name: o, defaultChecked: a, onChange: h }), { elementId: m } = I(d), u = b([
-    "cl-checkbox",
-    p,
-    {
-      "cl-checkbox_disabled": !!t,
-      "cl-checkbox_checked": e
-    }
-  ]);
-  return /* @__PURE__ */ C("div", { style: f, tabIndex: x, className: u, children: [
-    /* @__PURE__ */ s(
-      "input",
-      {
-        id: m,
-        name: o,
-        type: "checkbox",
-        disabled: t,
-        required: i,
-        checked: e,
-        onChange: k,
-        "aria-label": r ? c : void 0
-      }
-    ),
-    /* @__PURE__ */ s(
-      g,
-      {
-        label: c,
-        required: i,
-        inputId: m,
-        isTextHidden: r,
-        icon: e ? n.CheckSquare : n.Square,
-        iconPosition: l,
-        iconSize: N.Medium
-      }
-    )
-  ] });
-};
-export {
-  M as default
+import r from "../../atoms/label/Label2.js";
+import { useElementIds as i } from "../../../hooks/use-element-ids/use-element-ids.js";
+import { useCheckboxController as a } from "./Checkbox.controller.js";
+import './Checkbox.css';/* empty css         */
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/molecules/checkbox/CheckboxStateful.tsx
+var c = ({ name: c, label: l, disabled: u, noLabel: d, required: f = !1, iconPosition: p = "left", defaultChecked: m, onChange: h, id: g, className: _, style: v, tabIndex: y }) => {
+	let { handleChange: b, checked: x } = a({
+		name: c,
+		defaultChecked: m,
+		onChange: h
+	}), { elementId: S } = i(g);
+	return /* @__PURE__ */ s("div", {
+		style: v,
+		tabIndex: y,
+		className: e([
+			"cl-checkbox",
+			_,
+			{
+				"cl-checkbox_disabled": !!u,
+				"cl-checkbox_checked": x
+			}
+		]),
+		children: [/* @__PURE__ */ o("input", {
+			id: S,
+			name: c,
+			type: "checkbox",
+			disabled: u,
+			required: f,
+			checked: x,
+			onChange: b,
+			"aria-label": d ? l : void 0
+		}), /* @__PURE__ */ o(r, {
+			label: l,
+			required: f,
+			inputId: S,
+			isTextHidden: d,
+			icon: x ? n.CheckSquare : n.Square,
+			iconPosition: p,
+			iconSize: t.Medium
+		})]
+	});
 };
+//#endregion
+export { c as default };

package/dist/components/molecules/checkbox/CheckboxStateless.js

@@ -1,59 +1,42 @@
-import { jsxs as k, jsx as r } from "react/jsx-runtime";
-import { getClassName as b } from "../../../utils/get-class-name.js";
-import './Checkbox.css';/* empty css             */
-import u from "../../atoms/label/Label.js";
-import { ElementSize as S } from "../../../enums/element-size.js";
-import { IconName as a } from "../../../enums/icon-name.js";
-const _ = ({
-  name: c,
-  label: o,
-  disabled: t,
-  noLabel: i,
-  required: s = !1,
-  iconPosition: l = "left",
-  checked: e,
-  onChange: n,
-  id: x,
-  className: p,
-  style: d,
-  tabIndex: f
-}) => {
-  const m = x ?? `checkbox-${c}`, h = b([
-    "cl-checkbox",
-    p,
-    {
-      "cl-checkbox_disabled": !!t,
-      "cl-checkbox_checked": !!e
-    }
-  ]);
-  return /* @__PURE__ */ k("div", { style: d, tabIndex: f, className: h, children: [
-    /* @__PURE__ */ r(
-      "input",
-      {
-        id: m,
-        name: c,
-        type: "checkbox",
-        disabled: t,
-        required: s,
-        checked: e ?? !1,
-        onChange: n,
-        "aria-label": i ? o : void 0
-      }
-    ),
-    /* @__PURE__ */ r(
-      u,
-      {
-        label: o,
-        required: s,
-        inputId: m,
-        isTextHidden: i,
-        icon: e ? a.CheckSquare : a.Square,
-        iconPosition: l,
-        iconSize: S.Medium
-      }
-    )
-  ] });
-};
-export {
-  _ as default
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../enums/element-size.js";
+import { IconName as n } from "../../../enums/icon-name.js";
+import r from "../../atoms/label/Label2.js";
+import './Checkbox.css';/* empty css         */
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/molecules/checkbox/CheckboxStateless.tsx
+var o = ({ name: o, label: s, disabled: c, noLabel: l, required: u = !1, iconPosition: d = "left", checked: f, onChange: p, id: m, className: h, style: g, tabIndex: _ }) => {
+	let v = m ?? `checkbox-${o}`;
+	return /* @__PURE__ */ a("div", {
+		style: g,
+		tabIndex: _,
+		className: e([
+			"cl-checkbox",
+			h,
+			{
+				"cl-checkbox_disabled": !!c,
+				"cl-checkbox_checked": !!f
+			}
+		]),
+		children: [/* @__PURE__ */ i("input", {
+			id: v,
+			name: o,
+			type: "checkbox",
+			disabled: c,
+			required: u,
+			checked: f ?? !1,
+			onChange: p,
+			"aria-label": l ? s : void 0
+		}), /* @__PURE__ */ i(r, {
+			label: s,
+			required: u,
+			inputId: v,
+			isTextHidden: l,
+			icon: f ? n.CheckSquare : n.Square,
+			iconPosition: d,
+			iconSize: t.Medium
+		})]
+	});
 };
+//#endregion
+export { o as default };

package/dist/components/molecules/multi-select/MultiSelect.Combobox.js

@@ -1,47 +1,35 @@
-import { jsxs as x, jsx as c } from "react/jsx-runtime";
-import { getClassName as d } from "../../../utils/get-class-name.js";
-import '../select/combobox/Combobox.css';/* empty css                              */
-import { MultiSelectComboboxSelectedValues as u } from "./MultiSelectComboboxSelectedValues.js";
-import f from "../../atoms/icon/Icon.js";
-import { ElementSize as C } from "../../../enums/element-size.js";
-import { IconName as S } from "../../../enums/icon-name.js";
-const g = ({
-  opened: e,
-  onClick: m,
-  comboboxId: r,
-  dropdownId: l,
-  name: i,
-  placeholder: s,
-  disabled: a,
-  required: n,
-  values: t
-}) => {
-  const b = t?.filter((o) => o.selected).map((o) => o.id), p = d([
-    "cl-select-combobox__icon",
-    { "cl-select-combobox__icon_opened": e }
-  ]);
-  return /* @__PURE__ */ x(
-    "button",
-    {
-      type: "button",
-      name: i,
-      value: b,
-      role: "combobox",
-      "aria-haspopup": "listbox",
-      "aria-expanded": e,
-      "aria-controls": l,
-      id: r,
-      onClick: m,
-      disabled: a,
-      "aria-required": n,
-      className: "cl-select-combobox",
-      children: [
-        /* @__PURE__ */ c(u, { values: t, placeholder: s }),
-        /* @__PURE__ */ c(f, { name: S.ChevronDown, className: p, size: C.Small })
-      ]
-    }
-  );
-};
-export {
-  g as MultiSelectCombobox
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../enums/element-size.js";
+import { IconName as n } from "../../../enums/icon-name.js";
+import r from "../../atoms/icon/Icon2.js";
+import '../select/combobox/Combobox.css';/* empty css                          */
+import { MultiSelectComboboxSelectedValues as i } from "./MultiSelectComboboxSelectedValues.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/molecules/multi-select/MultiSelect.Combobox.tsx
+var s = ({ opened: s, onClick: c, comboboxId: l, dropdownId: u, name: d, placeholder: f, disabled: p, required: m, values: h }) => {
+	let g = h?.filter((e) => e.selected).map((e) => e.id), _ = e(["cl-select-combobox__icon", { "cl-select-combobox__icon_opened": s }]);
+	return /* @__PURE__ */ o("button", {
+		type: "button",
+		name: d,
+		value: g,
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-expanded": s,
+		"aria-controls": u,
+		id: l,
+		onClick: c,
+		disabled: p,
+		"aria-required": m,
+		className: "cl-select-combobox",
+		children: [/* @__PURE__ */ a(i, {
+			values: h,
+			placeholder: f
+		}), /* @__PURE__ */ a(r, {
+			name: n.ChevronDown,
+			className: _,
+			size: t.Small
+		})]
+	});
 };
+//#endregion
+export { s as MultiSelectCombobox };

package/dist/components/molecules/multi-select/MultiSelect.Dropdown.js

@@ -1,31 +1,23 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { handleDropdownListKeyPress as t } from "../../../utils/handle-dropdown-list-key-press.js";
+import '../select/dropdown/Dropdown.css';/* empty css                          */
+import { MultiSelectOption as n } from "./Option.js";
 import { jsx as r } from "react/jsx-runtime";
-import { getClassName as p } from "../../../utils/get-class-name.js";
-import { handleDropdownListKeyPress as c } from "../../../utils/handle-dropdown-list-key-press.js";
-import '../select/dropdown/Dropdown.css';/* empty css                              */
-import { MultiSelectOption as i } from "./Option.js";
-const x = ({
-  options: e,
-  opened: l,
-  onClose: t,
-  onSelect: d,
-  dropdownId: n
-}) => {
-  const s = p([
-    "cl-select-dropdown",
-    { "cl-select-dropdown_opened": l }
-  ]);
-  return /* @__PURE__ */ r(
-    "ul",
-    {
-      role: "listbox",
-      id: n,
-      tabIndex: -1,
-      onKeyDown: (o) => c({ e: o, options: e, onClose: t }),
-      className: s,
-      children: e.map((o) => /* @__PURE__ */ r(i, { value: o, onSelect: () => d(o.id) }, o.id))
-    }
-  );
-};
-export {
-  x as MultiSelectDropdown
-};
+//#region src/components/molecules/multi-select/MultiSelect.Dropdown.tsx
+var i = ({ options: i, opened: a, onClose: o, onSelect: s, dropdownId: c }) => /* @__PURE__ */ r("ul", {
+	role: "listbox",
+	id: c,
+	tabIndex: -1,
+	onKeyDown: (e) => t({
+		e,
+		options: i,
+		onClose: o
+	}),
+	className: e(["cl-select-dropdown", { "cl-select-dropdown_opened": a }]),
+	children: i.map((e) => /* @__PURE__ */ r(n, {
+		value: e,
+		onSelect: () => s(e.id)
+	}, e.id))
+});
+//#endregion
+export { i as MultiSelectDropdown };