chop-logic-components 3.7.3 → 4.0.0

package/dist/components/atoms/label/Label.css

@@ -0,0 +1 @@
+.cl-label{display:flex;align-items:baseline;gap:var(--cl-s-gap);color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-small-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-label{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-label{font-size:var(--cl-typography-small-desktop)}}.cl-label:hover{text-shadow:var(--cl-text-shadow);cursor:pointer}.cl-label__text{text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.cl-label__required{text-decoration:none;cursor:pointer;color:var(--cl-accent-a0);margin-left:var(--cl-s-gap)}.cl-label_disabled{pointer-events:none;opacity:.5}

package/dist/components/atoms/label/Label.js

@@ -0,0 +1,30 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import './Label.css';/* empty css          */
+import { getClassName as x } from "../../../utils/get-class-name.js";
+import { ElementSize as _ } from "../../../enums/element-size.js";
+import u from "../icon/Icon.js";
+const q = ({
+  label: r,
+  required: i,
+  inputId: m,
+  icon: e,
+  iconPosition: l,
+  isTextHidden: c = !1,
+  iconSize: o = _.ExtraSmall,
+  disabled: n = !1,
+  className: b,
+  testId: d
+}) => {
+  const f = !!e && l === "left", p = !!e && l === "right", a = /* @__PURE__ */ t(u, { name: e, size: o }), h = x(["cl-label", b, { "cl-label_disabled": n }]);
+  return /* @__PURE__ */ s("label", { className: h, htmlFor: m, "data-testid": d, children: [
+    f && a,
+    !c && /* @__PURE__ */ s("span", { className: "cl-label__text", children: [
+      r,
+      i && /* @__PURE__ */ t("abbr", { className: "cl-label__required", title: "required", children: "*" })
+    ] }),
+    p && a
+  ] });
+};
+export {
+  q as default
+};

package/dist/components/atoms/label/index.js

@@ -0,0 +1,3 @@
+export { default } from './Label.js';
+export * from './Label.js';
+import './Label.css';

package/dist/components/atoms/link/Link.css

@@ -0,0 +1 @@
+.cl-link{display:inline-flex;align-items:center;gap:var(--cl-s-gap);text-decoration:none;transition:all .2s ease;color:var(--cl-info-a0)}.cl-link:focus{outline:var(--cl-outline-border);outline-offset:var(--cl-s-gap);border-radius:var(--cl-border-radius)}.cl-link:focus:not(:focus-visible){outline:none}.cl-link:visited{color:var(--cl-warning-a0)}.cl-link:hover{text-shadow:var(--cl-text-shadow)}.cl-link_disabled{pointer-events:none;opacity:.5}.cl-link__text{font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);color:inherit;font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:underline}.cl-link__icon:before{color:var(--cl-info-a0)}@media(min-width:640px){.cl-link__text{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-link__text{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/atoms/link/Link.js

@@ -0,0 +1,39 @@
+import { jsx as r, jsxs as _ } from "react/jsx-runtime";
+import { getClassName as g } from "../../../utils/get-class-name.js";
+import './Link.css';/* empty css         */
+import x from "../icon/Icon.js";
+import { ElementSize as u } from "../../../enums/element-size.js";
+const j = ({
+  href: s,
+  children: n,
+  icon: t,
+  iconPosition: l = "left",
+  external: m = !1,
+  disabled: e = !1,
+  className: c,
+  target: a,
+  ...p
+}) => {
+  const f = g(["cl-link", c, { "cl-link_disabled": e }]), i = m || s.startsWith("http") || s.startsWith("//"), k = i ? a || "_blank" : a, o = t ? /* @__PURE__ */ r(x, { name: t, className: "cl-link__icon", hidden: !0, size: u.Small }) : null, d = t && l === "left", w = t && l === "right";
+  return /* @__PURE__ */ _(
+    "a",
+    {
+      href: s,
+      className: f,
+      target: k,
+      ...i && {
+        "aria-label": typeof n == "string" ? `${n} (opens in new window)` : "Opens in new window"
+      },
+      "aria-disabled": e,
+      ...p,
+      children: [
+        d && o,
+        /* @__PURE__ */ r("span", { className: "cl-link__text", children: n }),
+        w && o
+      ]
+    }
+  );
+};
+export {
+  j as default
+};

package/dist/components/atoms/link/index.js

@@ -0,0 +1,3 @@
+export { default } from './Link.js';
+export * from './Link.js';
+import './Link.css';

package/dist/components/atoms/portal/Portal.js

@@ -0,0 +1,11 @@
+import { useState as r, useEffect as o } from "react";
+import a from "react-dom";
+const m = ({ children: t }) => {
+  const [e] = r(() => document.createElement("div"));
+  return o(() => (document.body.appendChild(e), () => {
+    e.remove();
+  }), [e]), a.createPortal(t, e);
+};
+export {
+  m as default
+};

package/dist/components/atoms/portal/index.js

@@ -0,0 +1,2 @@
+export { default } from './Portal.js';
+export * from './Portal.js';

package/dist/components/atoms/tooltip/Tooltip.controller.js

@@ -0,0 +1,35 @@
+import { useState as T, useRef as r } from "react";
+import { useTooltipPosition as O } from "../../../hooks/use-tooltip-position/use-tooltip-position.js";
+import { useElementIds as R } from "../../../hooks/use-element-ids/use-element-ids.js";
+import { useKeyPress as k } from "../../../hooks/use-key-press/use-key-press.js";
+import { useClickOutside as y } from "../../../hooks/use-click-outside/use-click-outside.js";
+import { useAutoClose as I } from "../../../hooks/use-auto-close/use-auto-close.js";
+const v = ({ id: p, autoClose: i, autoCloseDelay: u }) => {
+  const [e, s] = T(!1), n = r(null), o = r(null), { top: f, left: c } = O({ wrapperRef: n, tooltipRef: o, isOpened: e }), { elementId: m } = R(p), t = () => s(!1), d = () => s(!0), l = () => s(!e), a = (C) => {
+    C.preventDefault(), l();
+  };
+  return k({ keyCode: "Escape", ref: o, onKeyPress: t }), y({
+    ref: o,
+    onClickOutsideHandler: t,
+    dependentRef: n
+  }), I({
+    isOpened: e,
+    onClose: t,
+    autoClose: i,
+    autoCloseDelay: u
+  }), {
+    elementId: m,
+    openTooltip: d,
+    closeTooltip: t,
+    toggleTooltip: l,
+    handleContextMenu: a,
+    top: f,
+    left: c,
+    isOpened: e,
+    wrapperRef: n,
+    tooltipRef: o
+  };
+};
+export {
+  v as useTooltipController
+};

package/dist/components/atoms/tooltip/Tooltip.css

@@ -0,0 +1 @@
+.cl-tooltip{color:var(--cl-base-font-color);position:absolute;left:0;top:0;z-index:var(--cl-z-index-popup);background-color:var(--cl-surface-a0);border:var(--cl-light-border);padding:var(--cl-m-gap);border-radius:var(--cl-border-radius);box-shadow:var(--cl-box-shadow);pointer-events:none;white-space:nowrap;animation:cl-fade-in ease .4s;font-family:var(--cl-core-font);font-size:var(--cl-typography-small-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-tooltip_info{background-color:var(--cl-info-a0);color:#fff;border:none}.cl-tooltip_success{background-color:var(--cl-success-a0);color:#fff;border:none}.cl-tooltip_danger{background-color:var(--cl-danger-a0);color:#fff;border:none}.cl-tooltip_warning{background-color:var(--cl-warning-a0);color:#fff;border:none}@media(min-width:640px){.cl-tooltip{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-tooltip{font-size:var(--cl-typography-small-desktop)}}

package/dist/components/atoms/tooltip/Tooltip.js

@@ -0,0 +1,70 @@
+import { jsxs as I, jsx as i } from "react/jsx-runtime";
+import { getClassName as N } from "../../../utils/get-class-name.js";
+import './Tooltip.css';/* empty css            */
+import { useTooltipController as R } from "./Tooltip.controller.js";
+import { SemanticColor as n } from "../../../enums/semantic-color.js";
+import { TooltipContainer as S } from "../../../enums/tooltip-container.js";
+import w from "../portal/Portal.js";
+const z = ({
+  children: p,
+  tooltipContent: s,
+  id: a,
+  style: c,
+  className: m,
+  containerTag: d = S.Span,
+  visibleOn: o = "hover",
+  autoClose: f = !1,
+  autoCloseDelay: u = 3e3,
+  color: t = n.Default,
+  ...C
+}) => {
+  const v = d, {
+    openTooltip: e,
+    closeTooltip: r,
+    toggleTooltip: h,
+    handleContextMenu: x,
+    elementId: l,
+    top: T,
+    left: M,
+    isOpened: g,
+    wrapperRef: y,
+    tooltipRef: j
+  } = R({ id: a, autoClose: f, autoCloseDelay: u }), k = N([
+    "cl-tooltip",
+    m,
+    { [`cl-tooltip_${t}`]: t !== n.Default }
+  ]);
+  return /* @__PURE__ */ I(
+    v,
+    {
+      style: { position: "relative", cursor: "pointer" },
+      onClick: o === "click" ? h : void 0,
+      onMouseOver: o === "hover" ? e : void 0,
+      onMouseLeave: o === "hover" ? r : void 0,
+      onFocus: o === "focus" ? e : void 0,
+      onBlur: o === "focus" ? r : void 0,
+      onContextMenu: o === "contextmenu" ? (D) => x(D) : void 0,
+      tabIndex: -1,
+      ref: y,
+      "aria-describedby": l,
+      children: [
+        p,
+        g && /* @__PURE__ */ i(w, { children: /* @__PURE__ */ i(
+          "div",
+          {
+            style: { ...c, top: T, left: M },
+            ref: j,
+            role: "tooltip",
+            id: l,
+            ...C,
+            className: k,
+            children: s
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  z as default
+};

package/dist/components/atoms/tooltip/index.js

@@ -0,0 +1,3 @@
+export { default } from './Tooltip.js';
+export * from './Tooltip.js';
+import './Tooltip.css';

package/dist/components/contexts/form/FormContext.js

@@ -0,0 +1,5 @@
+import { createContext as t } from "react";
+const e = t({});
+export {
+  e as FormContext
+};

package/dist/components/contexts/theme/ThemeContext.js

@@ -0,0 +1,11 @@
+import { createContext as e } from "react";
+const t = "cl-components-light-theme", n = "cl-components-dark-theme", c = e({
+  mode: t,
+  setMode: () => {
+  }
+});
+export {
+  n as CL_DARK_THEME_CLASS,
+  t as CL_LIGHT_THEME_CLASS,
+  c as ThemeContext
+};

package/dist/components/contexts/theme/ThemeProvider.js

@@ -0,0 +1,21 @@
+import { jsx as u } from "react/jsx-runtime";
+import '../../../styles/icons.css';import '../../../styles/main.css';/* empty css                       */
+/* empty css                        */
+import { useState as a, useEffect as s, useMemo as c } from "react";
+import { CL_LIGHT_THEME_CLASS as e, CL_DARK_THEME_CLASS as r, ThemeContext as f } from "./ThemeContext.js";
+const y = ({
+  children: m,
+  injectedMode: t
+}) => {
+  const [o, i] = a(e);
+  s(() => {
+    o && typeof o == "string" && (document.body.classList.remove(e, r), document.body.classList.add(o));
+  }, [o]), s(() => {
+    t && typeof t == "string" && (document.body.classList.remove(e, r), document.body.classList.add(t));
+  }, [t]);
+  const d = c(() => ({ mode: o, setMode: i }), [o]);
+  return /* @__PURE__ */ u(f.Provider, { value: d, children: m });
+};
+export {
+  y as ThemeProvider
+};

package/dist/components/hocs/with-figure-caption/Figure.css

@@ -0,0 +1 @@
+.cl-figure{margin:0;display:block}.cl-figure__caption{text-align:center;padding-top:var(--cl-s-gap);color:var(--cl-base-font-color);font-size:var(--cl-typography-small-mobile)}@media(min-width:640px){.cl-figure__caption{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-figure__caption{font-size:var(--cl-typography-small-desktop)}}

package/dist/components/hocs/with-figure-caption/index.js

@@ -0,0 +1,2 @@
+export { default } from './with-figure-caption.js';
+export * from './with-figure-caption.js';

package/dist/components/hocs/with-figure-caption/with-figure-caption.js

@@ -0,0 +1,11 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import './Figure.css';/* empty css           */
+function f(r) {
+  return ({ caption: e, ...t }) => e?.trim()?.length ? /* @__PURE__ */ c("figure", { className: "cl-figure", children: [
+    /* @__PURE__ */ i(r, { ...t }),
+    /* @__PURE__ */ i("figcaption", { className: "cl-figure__caption", children: e })
+  ] }) : /* @__PURE__ */ i(r, { ...t });
+}
+export {
+  f as withFigureCaption
+};

package/dist/components/hocs/with-tooltip/index.js

@@ -0,0 +1,2 @@
+export { default } from './with-tooltip.js';
+export * from './with-tooltip.js';

package/dist/components/hocs/with-tooltip/with-tooltip.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import e from "../../atoms/tooltip/Tooltip.js";
+function h(o) {
+  return ({ tooltip: i, visibleOn: n, ...r }) => i?.length ? /* @__PURE__ */ t(e, { tooltipContent: i, visibleOn: n, children: /* @__PURE__ */ t(o, { ...r }) }) : /* @__PURE__ */ t(o, { ...r });
+}
+export {
+  h as withTooltip
+};

package/dist/components/molecules/accordion/Accordion.css

@@ -0,0 +1 @@
+.cl-accordion{display:flex;flex-direction:column;width:100%}

package/dist/components/molecules/accordion/Accordion.js

@@ -0,0 +1,11 @@
+import { jsx as r } from "react/jsx-runtime";
+import { getClassName as s } from "../../../utils/get-class-name.js";
+import './Accordion.css';/* empty css              */
+import { AccordionItem as t } from "./AccordionItem.js";
+const l = ({ items: c, className: m }) => {
+  const a = s(["cl-accordion", m]);
+  return /* @__PURE__ */ r("div", { className: a, children: c.map((o) => /* @__PURE__ */ r(t, { ...o }, o.summary)) });
+};
+export {
+  l as default
+};

package/dist/components/molecules/accordion/AccordionItem.css

@@ -0,0 +1 @@
+.cl-accordion{display:flex;flex-direction:column;width:100%}.cl-accordion-item{display:flex;flex-direction:column}.cl-accordion-item__summary{font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:700;color:var(--cl-base-font-color);cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:var(--cl-l-gap);border-bottom:var(--cl-light-border);line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-accordion-item__summary{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-accordion-item__summary{font-size:var(--cl-typography-base-desktop)}}.cl-accordion-item__summary:hover{text-shadow:var(--cl-text-shadow)}.cl-accordion-item__summary::-webkit-details-marker{display:none}.cl-accordion-item__summary:focus-visible{outline:var(--cl-outline-border);outline-offset:-4px}.cl-accordion-item__content{color:var(--cl-base-font-color);padding:var(--cl-l-gap);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}@media(min-width:640px){.cl-accordion-item__content{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-accordion-item__content{font-size:var(--cl-typography-base-desktop)}}.cl-accordion-item__icon{transition:transform .3s ease}.cl-accordion-item[open] .cl-accordion-item__summary{border-bottom:none}.cl-accordion-item[open] .cl-accordion-item__content{border-bottom:var(--cl-light-border)}.cl-accordion-item[open] .cl-accordion-item__icon{transform:rotate(180deg)}

package/dist/components/molecules/accordion/AccordionItem.js

@@ -0,0 +1,24 @@
+import { jsxs as o, jsx as c } from "react/jsx-runtime";
+import './AccordionItem.css';/* empty css                  */
+import i from "../../atoms/icon/Icon.js";
+import { ElementSize as r } from "../../../enums/element-size.js";
+import { IconName as a } from "../../../enums/icon-name.js";
+const p = ({ summary: e, children: m }) => /* @__PURE__ */ o("details", { className: "cl-accordion-item", children: [
+  /* @__PURE__ */ o("summary", { className: "cl-accordion-item__summary", children: [
+    e,
+    /* @__PURE__ */ c(
+      i,
+      {
+        name: a.ChevronDown,
+        className: "cl-accordion-item__icon",
+        "aria-label": "Toggle Details",
+        testId: "accordion-icon",
+        size: r.Small
+      }
+    )
+  ] }),
+  /* @__PURE__ */ c("div", { className: "cl-accordion-item__content", children: m })
+] });
+export {
+  p as AccordionItem
+};

package/dist/components/molecules/accordion/index.js

@@ -0,0 +1,3 @@
+export { default } from './Accordion.js';
+export * from './Accordion.js';
+import './Accordion.css';

package/dist/components/molecules/alert/Alert.css

@@ -0,0 +1 @@
+.cl-alert{animation:cl-fade-in ease .4s;position:fixed;bottom:var(--cl-l-gap);left:50%;transform:translate(-50%);z-index:var(--cl-z-index-popup);width:90vw}@media screen and (min-width:1024px){.cl-alert{width:50vw;transform:none;right:var(--cl-l-gap);left:auto}}.cl-alert__content{color:var(--cl-base-font-color);display:flex;flex-direction:column;gap:var(--cl-m-gap);background:var(--cl-base-background-color);padding:var(--cl-m-gap) var(--cl-l-gap);box-shadow:var(--cl-box-shadow);border:var(--cl-accent-border);border-radius:var(--cl-border-radius);position:relative;font-family:var(--cl-core-font);font-size:var(--cl-typography-small-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-alert__header{padding-right:var(--cl-thumb-size)}@media(min-width:640px){.cl-alert__content{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-alert__content{font-size:var(--cl-typography-small-desktop)}}.cl-alert__message{margin:var(--cl-m-gap) 0}.cl-alert__button{position:absolute;right:var(--cl-m-gap);top:var(--cl-m-gap)}.cl-alert__progress-bar{-webkit-appearance:none;appearance:none;width:100%;height:var(--cl-s-gap);border:none;background-color:var(--cl-base-background-color)}.cl-alert__progress-bar::-webkit-progress-bar{background-color:var(--cl-base-background-color)}.cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-surface-tonal-a30)}.cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-surface-tonal-a30)}.cl-alert_closing{animation:cl-fade-out ease .4s}.cl-alert_success .cl-alert__content{border:var(--cl-success-border);color:var(--cl-success-a0)}.cl-alert_success .cl-alert__header{border-bottom:var(--cl-success-border);color:var(--cl-success-a0)}.cl-alert_success .cl-alert__button span:before{color:var(--cl-success-a0)}.cl-alert_success .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-success-a0)}.cl-alert_success .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-success-a0)}.cl-alert_error .cl-alert__content{border:var(--cl-danger-border);color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__button span:before{color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__header{border-bottom:var(--cl-danger-border);color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-danger-a0)}.cl-alert_warning .cl-alert__content{border:var(--cl-warning-border);color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__header{border-bottom:var(--cl-warning-border);color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__button span:before{color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-warning-a0)}.cl-alert_info .cl-alert__content{border:var(--cl-info-border);color:var(--cl-info-a0)}.cl-alert_info .cl-alert__header{border-bottom:var(--cl-info-border);color:var(--cl-info-a0)}.cl-alert_info .cl-alert__button span:before{color:var(--cl-info-a0)}.cl-alert_info .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-info-a0)}.cl-alert_info .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-info-a0)}.cl-alert_help .cl-alert__content{border:var(--cl-light-border)}

package/dist/components/molecules/alert/Alert.helpers.js

@@ -0,0 +1,41 @@
+import { AlertMode as r } from "../../../enums/alert-mode.js";
+import { IconName as t } from "../../../enums/icon-name.js";
+function a(n, e) {
+  if (e) return e;
+  switch (n) {
+    case r.Info:
+      return "For your information";
+    case r.Warning:
+      return "Please pay attention";
+    case r.Error:
+      return "Something went wrong";
+    case r.Success:
+      return "Everything is okay";
+    case r.Help:
+      return "Useful tip";
+    default:
+      return "Alert";
+  }
+}
+function c(n, e) {
+  if (e)
+    return e;
+  switch (n) {
+    case r.Info:
+      return t.Info;
+    case r.Warning:
+      return t.AlertTriangle;
+    case r.Error:
+      return t.XOctagon;
+    case r.Success:
+      return t.CheckCircle;
+    case r.Help:
+      return t.LifeBuoy;
+    default:
+      return;
+  }
+}
+export {
+  c as getAlertIcon,
+  a as getAlertTitle
+};

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

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

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

@@ -0,0 +1,13 @@
+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
+};

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

@@ -0,0 +1,3 @@
+export { default } from './Alert.js';
+export * from './Alert.js';
+import './Alert.css';

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

@@ -0,0 +1,27 @@
+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
+};

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

@@ -0,0 +1,6 @@
+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
+};

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

@@ -0,0 +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)}}

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

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

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

@@ -0,0 +1,3 @@
+export { default } from './Breadcrumbs.js';
+export * from './Breadcrumbs.js';
+import './Breadcrumbs.css';

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

@@ -0,0 +1,25 @@
+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
+  };
+}
+export {
+  v as useCheckboxController
+};

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

@@ -0,0 +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}

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

@@ -0,0 +1,10 @@
+function t({
+  defaultChecked: r,
+  initialValues: o,
+  name: e
+}) {
+  return o?.[e] !== void 0 ? !!o?.[e] : !!r;
+}
+export {
+  t as getCheckboxInitialValue
+};

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

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import o from "./CheckboxStateful.js";
+import r from "./CheckboxStateless.js";
+const a = (t) => t.stateless ? /* @__PURE__ */ e(r, { ...t }) : /* @__PURE__ */ e(o, { ...t });
+export {
+  a as default
+};