chop-logic-components 3.7.2 → 4.0.0

package/README.md

@@ -47,12 +47,12 @@ yarn add chop-logic-components
 | `build`           | Builds the TypeScript types and compiles the library using Vite.                                                                                      |
 | `build:storybook` | Builds a static version of Storybook into the `storybook-static` directory.                                                                           |
 | `prepare`         | Runs the production build and sets up Husky git hooks.                                                                                                |
-| `format`          | Formats all files using both Biome (for JS/TS) and Prettier (for SCSS/MDX).                                                                          |
-| `format:biome`    | Formats JS, TS, JSON, and MD files using Biome.                                                                                                      |
-| `format:prettier` | Formats SCSS and MDX files using Prettier.                                                                                                           |
+| `format`          | Formats all files using both Biome (for JS/TS) and Prettier (for MD/MDX).                                                                          |
+| `format:biome`    | Formats JS, TS, JSON, and CSS files using Biome.                                                                                                      |
+| `format:prettier` | Formats MD and MDX files using Prettier.                                                                                                           |
 | `lint`            | Runs both Biome and Prettier linters to check code style and quality.                                                                                 |
 | `lint:biome`      | Runs Biome linter on JS/TS files.                                                                                                                    |
-| `lint:prettier`   | Checks formatting of SCSS and MDX files using Prettier.                                                                                              |
+| `lint:prettier`   | Checks formatting of MD and MDX files using Prettier.                                                                                              |
 | `lint:errors`     | Shows only error-level diagnostics from Biome (limited to 100 issues).                                                                                |
 | `lint:warnings`   | Shows only warning-level diagnostics from Biome (limited to 100 issues).                                                                              |
 | `lint:fix`        | Automatically fixes Biome issues where possible.                                                                                                      |

package/dist/components/atoms/button/Button.css

@@ -0,0 +1 @@
+.cl-button{font-size:var(--cl-typography-base-mobile);padding:var(--cl-m-gap);display:flex;align-items:center;justify-content:center;width:fit-content}.cl-button:focus-visible{outline:var(--cl-outline-border);outline-offset:var(--cl-s-gap)}.cl-button[disabled]{pointer-events:none;opacity:.5}.cl-button_extended{width:100%}@media(min-width:640px){.cl-button{font-size:var(--cl-typography-base-tablet);padding:var(--cl-m-gap) var(--cl-l-gap)}}@media(min-width:1024px){.cl-button{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/atoms/button/Button.js

@@ -0,0 +1,66 @@
+import { jsx as e } from "react/jsx-runtime";
+import { getClassName as i } from "../../../utils/get-class-name.js";
+import { withTooltip as l } from "../../hocs/with-tooltip/with-tooltip.js";
+import './Button.css';/* empty css           */
+import { IconButton as c } from "./icon-button/IconButton.js";
+import { InnerButton as d } from "./inner-button/InnerButton.js";
+import { PrimaryButton as B } from "./primary-button/PrimaryButton.js";
+import { SecondaryButton as y } from "./secondary-button/SecondaryButton.js";
+import { ButtonView as t } from "../../../enums/button-view.js";
+const I = ({
+  text: u,
+  icon: r,
+  tooltip: w,
+  extended: s = !1,
+  view: f = t.Primary,
+  label: o,
+  className: a,
+  iconSize: n,
+  ...m
+}) => {
+  const p = i([a, "cl-button", { "cl-button_extended": s }]);
+  switch (f) {
+    case t.Primary:
+      return /* @__PURE__ */ e(
+        B,
+        {
+          className: p,
+          icon: r,
+          text: u,
+          "aria-label": o,
+          iconSize: n,
+          ...m
+        }
+      );
+    case t.Secondary:
+      return /* @__PURE__ */ e(
+        y,
+        {
+          className: p,
+          icon: r,
+          text: u,
+          "aria-label": o,
+          iconSize: n,
+          ...m
+        }
+      );
+    case t.Icon:
+      return /* @__PURE__ */ e(c, { label: o, icon: r, iconSize: n, ...m, className: a });
+    case t.Inner:
+      return /* @__PURE__ */ e(
+        d,
+        {
+          label: o,
+          icon: r,
+          iconSize: n,
+          ...m,
+          className: a
+        }
+      );
+    default:
+      return null;
+  }
+}, V = l(I);
+export {
+  V as default
+};

package/dist/components/atoms/button/icon-button/IconButton.css

@@ -0,0 +1 @@
+.cl-icon-button{border:none;cursor:pointer;padding:var(--cl-m-gap);border-radius:50%;background:transparent;width:fit-content;transition:all .15s ease}.cl-icon-button__icon:before{color:var(--cl-base-font-color)}.cl-icon-button:hover{transform:scale(1.1);filter:drop-shadow(0 2px 4px hsla(0,0%,0%,.15))}.cl-icon-button:hover .cl-icon-button__icon:before{color:var(--cl-accent-a0)}.cl-icon-button:active{transform:scale(.95)}.cl-icon-button[disabled]{pointer-events:none;opacity:.5}

package/dist/components/atoms/button/icon-button/IconButton.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { getClassName as r } from "../../../../utils/get-class-name.js";
+import './IconButton.css';/* empty css               */
+import a from "../../icon/Icon.js";
+import { ElementSize as c } from "../../../../enums/element-size.js";
+const f = ({
+  icon: o,
+  className: m,
+  label: e,
+  iconSize: i = c.Medium,
+  ...n
+}) => /* @__PURE__ */ t("button", { ...n, "aria-label": e, className: r(["cl-icon-button", m]), children: o && /* @__PURE__ */ t(a, { name: o, className: "cl-icon-button__icon", size: i }) });
+export {
+  f as IconButton
+};

package/dist/components/atoms/button/icon-button/index.js

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

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

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

package/dist/components/atoms/button/inner-button/InnerButton.css

@@ -0,0 +1 @@
+.cl-inner-button{background:transparent;border:none;padding:0;cursor:pointer;height:var(--cl-icon-size);width:var(--cl-icon-size);transition:all .15s ease}.cl-inner-button:focus-visible{outline:var(--cl-outline-border);outline-offset:-1px}.cl-inner-button:hover{transform:scale(1.15);filter:var(--cl-drop-shadow)}.cl-inner-button:hover .cl-inner-button__icon:before{color:var(--cl-accent-a10)}.cl-inner-button:active{transform:scale(.95)}.cl-inner-button[disabled]{pointer-events:none;opacity:.5}

package/dist/components/atoms/button/inner-button/InnerButton.js

@@ -0,0 +1,28 @@
+import { jsx as t } from "react/jsx-runtime";
+import { getClassName as l } from "../../../../utils/get-class-name.js";
+import './InnerButton.css';/* empty css                */
+import s from "../../icon/Icon.js";
+import { ElementSize as c } from "../../../../enums/element-size.js";
+const x = ({
+  onClick: n,
+  label: o,
+  icon: e,
+  disabled: r,
+  className: m,
+  iconSize: i = c.Small,
+  ...a
+}) => /* @__PURE__ */ t(
+  "button",
+  {
+    className: l(["cl-inner-button", m]),
+    onClick: n,
+    "aria-label": o,
+    type: "button",
+    disabled: r,
+    ...a,
+    children: /* @__PURE__ */ t(s, { name: e, size: i, className: "cl-inner-button__icon" })
+  }
+);
+export {
+  x as InnerButton
+};

package/dist/components/atoms/button/inner-button/index.js

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

package/dist/components/atoms/button/primary-button/PrimaryButton.css

@@ -0,0 +1 @@
+.cl-primary-button{border:none;cursor:pointer;border-radius:var(--cl-border-radius);background:var(--cl-accent-gradient);box-shadow:var(--cl-box-shadow);gap:var(--cl-s-gap);transition:all .15s ease}.cl-primary-button:hover{filter:brightness(1.1);box-shadow:var(--cl-box-shadow-extended)}.cl-primary-button:active{transform:scale(.98);box-shadow:var(--cl-box-shadow)}.cl-primary-button__text{font-family:var(--cl-core-font);font-size:inherit;color:var(--cl-base-background-color);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-primary-button__icon:before{color:var(--cl-base-background-color)}

package/dist/components/atoms/button/primary-button/PrimaryButton.js

@@ -0,0 +1,18 @@
+import { jsxs as s, jsx as m } from "react/jsx-runtime";
+import { getClassName as i } from "../../../../utils/get-class-name.js";
+import './PrimaryButton.css';/* empty css                  */
+import l from "../../icon/Icon.js";
+import { ElementSize as n } from "../../../../enums/element-size.js";
+const x = ({
+  icon: t,
+  text: r,
+  className: o,
+  iconSize: a = n.Small,
+  ...e
+}) => /* @__PURE__ */ s("button", { ...e, className: i(["cl-primary-button", o]), children: [
+  t && /* @__PURE__ */ m(l, { name: t, className: "cl-primary-button__icon", size: a }),
+  /* @__PURE__ */ m("span", { className: "cl-primary-button__text", children: r })
+] });
+export {
+  x as PrimaryButton
+};

package/dist/components/atoms/button/primary-button/index.js

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

package/dist/components/atoms/button/secondary-button/SecondaryButton.css

@@ -0,0 +1 @@
+.cl-secondary-button{background:var(--cl-surface-a10);cursor:pointer;border-radius:var(--cl-border-radius);border:none;gap:var(--cl-s-gap);transition:all .15s ease;box-shadow:var(--cl-box-shadow)}.cl-secondary-button:hover{box-shadow:var(--cl-box-shadow-extended)}.cl-secondary-button:active{transform:scale(.98);box-shadow:var(--cl-box-shadow)}.cl-secondary-button__text{font-family:var(--cl-core-font);font-size:inherit;color:var(--cl-base-font-color);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-secondary-button__icon:before{color:var(--cl-base-font-color);margin-right:var(--cl-s-gap)}

package/dist/components/atoms/button/secondary-button/SecondaryButton.js

@@ -0,0 +1,18 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { getClassName as a } from "../../../../utils/get-class-name.js";
+import './SecondaryButton.css';/* empty css                    */
+import c from "../../icon/Icon.js";
+import { ElementSize as l } from "../../../../enums/element-size.js";
+const f = ({
+  icon: o,
+  text: e,
+  className: s,
+  iconSize: m = l.Small,
+  ...n
+}) => /* @__PURE__ */ r("button", { ...n, className: a(["cl-secondary-button", s]), children: [
+  o && /* @__PURE__ */ t(c, { name: o, className: "cl-secondary-button__icon", size: m }),
+  /* @__PURE__ */ t("span", { className: "cl-secondary-button__text", children: e })
+] });
+export {
+  f as SecondaryButton
+};

package/dist/components/atoms/button/secondary-button/index.js

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

package/dist/components/atoms/editable-text/EditView.js

@@ -0,0 +1,37 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useCallback as f } from "react";
+const g = ({
+  multiline: t,
+  value: e,
+  placeholder: r,
+  onChange: o,
+  onBlur: n,
+  onKeyDown: a,
+  className: p,
+  inputRef: s,
+  ...c
+}) => {
+  const i = t ? "textarea" : "input", m = f(
+    (u) => {
+      o(u.target.value);
+    },
+    [o]
+  );
+  return /* @__PURE__ */ d(
+    i,
+    {
+      ref: s,
+      value: e,
+      onChange: m,
+      onBlur: n,
+      onKeyDown: a,
+      placeholder: r,
+      className: p,
+      rows: t ? 3 : void 0,
+      ...c
+    }
+  );
+};
+export {
+  g as EditView
+};

package/dist/components/atoms/editable-text/EditableText.css

@@ -0,0 +1 @@
+.cl-editable-text{color:var(--cl-base-font-color);border-radius:var(--cl-border-radius);display:inline-block;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-editable-text:hover,.cl-editable-text:focus{outline:var(--cl-accent-border);outline-offset:var(--cl-xs-gap)}.cl-editable-text_edit-mode{border:none;background:transparent;outline:var(--cl-accent-border);outline-offset:var(--cl-xs-gap);min-width:var(--cl-l-gap)}.cl-editable-text_read-only:hover,.cl-editable-text_read-only:focus{outline:none}.cl-editable-text_empty{min-width:var(--cl-l-gap);min-height:24px;outline:var(--cl-accent-border);outline-offset:var(--cl-xs-gap)}@media(min-width:640px){.cl-editable-text{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-editable-text{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/atoms/editable-text/EditableText.js

@@ -0,0 +1,71 @@
+import { jsx as E } from "react/jsx-runtime";
+import { getClassName as D } from "../../../utils/get-class-name.js";
+import { useRef as N, useCallback as r } from "react";
+import './EditableText.css';/* empty css                 */
+import { EditView as R } from "./EditView.js";
+import { ReadView as _ } from "./ReadView.js";
+import { useEditModeState as g } from "./useEditModeState.js";
+import { useInputFocus as B } from "./useInputFocus.js";
+import { useValueState as K } from "./useValueState.js";
+const G = ({
+  value: V,
+  isEditMode: b,
+  onChange: C,
+  onClick: n,
+  className: k,
+  autoSelectTextOnEditMode: M = !1,
+  multiline: a = !1,
+  placeholder: d = "Click to edit...",
+  readOnly: t = !1,
+  ...m
+}) => {
+  const u = N(null), { editMode: i, enterEditMode: c, exitEditMode: o } = g(b, t), { internalValue: l, updateValue: w, commitValue: f, resetValue: p } = K(V, C);
+  B(u, i, M, t);
+  const h = r(
+    (e) => {
+      n?.(e), c();
+    },
+    [n, c]
+  ), s = r(() => {
+    o(), f();
+  }, [o, f]), y = r(
+    (e) => {
+      e.key === "Enter" && !a && (e.preventDefault(), s()), e.key === "Escape" && (p(), o());
+    },
+    [a, s, p, o]
+  ), x = D([
+    "cl-editable-text",
+    k,
+    {
+      "cl-editable-text_edit-mode": i,
+      "cl-editable-text_read-only": t,
+      "cl-editable-text_empty": !l
+    }
+  ]);
+  return i && !t ? /* @__PURE__ */ E(
+    R,
+    {
+      multiline: a,
+      value: l,
+      placeholder: d,
+      onChange: w,
+      onBlur: s,
+      onKeyDown: y,
+      className: x,
+      inputRef: u,
+      ...m
+    }
+  ) : /* @__PURE__ */ E(
+    _,
+    {
+      value: l,
+      placeholder: d,
+      onClick: h,
+      className: x,
+      ...m
+    }
+  );
+};
+export {
+  G as default
+};

package/dist/components/atoms/editable-text/ReadView.js

@@ -0,0 +1,25 @@
+import { jsx as l } from "react/jsx-runtime";
+const y = ({
+  value: t,
+  placeholder: a,
+  onClick: n,
+  className: o,
+  ...r
+}) => /* @__PURE__ */ l(
+  "span",
+  {
+    onClick: n,
+    className: o,
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: (e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n(e));
+    },
+    "aria-label": "Editable text",
+    ...r,
+    children: t || a
+  }
+);
+export {
+  y as ReadView
+};

package/dist/components/atoms/editable-text/index.js

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

package/dist/components/atoms/editable-text/useEditModeState.js

@@ -0,0 +1,17 @@
+import { useState as d } from "react";
+const c = (e, i) => {
+  const [s, o] = d(!1), [t] = d(e !== void 0);
+  return {
+    editMode: t ? !!e : s,
+    enterEditMode: () => {
+      !t && !i && o(!0);
+    },
+    exitEditMode: () => {
+      t || o(!1);
+    },
+    isControlled: t
+  };
+};
+export {
+  c as useEditModeState
+};

package/dist/components/atoms/editable-text/useInputFocus.js

@@ -0,0 +1,9 @@
+import { useEffect as t } from "react";
+const n = (c, u, s, r) => {
+  t(() => {
+    u && c.current && !r && (c.current.focus(), s && c.current.select());
+  }, [u, s, r, c]);
+};
+export {
+  n as useInputFocus
+};

package/dist/components/atoms/editable-text/useValueState.js

@@ -0,0 +1,21 @@
+import { useState as n, useEffect as o } from "react";
+const m = (e, s) => {
+  const [t, a] = n(e);
+  return o(() => {
+    a(e);
+  }, [e]), {
+    internalValue: t,
+    updateValue: (u) => {
+      a(u);
+    },
+    commitValue: () => {
+      t !== e && s?.(t);
+    },
+    resetValue: () => {
+      a(e);
+    }
+  };
+};
+export {
+  m as useValueState
+};

package/dist/components/atoms/error-message/ErrorMessage.css

@@ -0,0 +1 @@
+.cl-error-message{display:none;max-width:100%;z-index:var(--cl-z-index-popup);background-color:var(--cl-surface-a10);color:var(--cl-base-font-color);padding:var(--cl-s-gap) var(--cl-m-gap);border-radius:var(--cl-border-radius);border:var(--cl-danger-border);box-shadow:var(--cl-box-shadow);pointer-events:none;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}@media(min-width:640px){.cl-error-message{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-error-message{font-size:var(--cl-typography-small-desktop)}}.cl-error-message_visible{display:block}

package/dist/components/atoms/error-message/ErrorMessage.js

@@ -0,0 +1,30 @@
+import { jsx as i } from "react/jsx-runtime";
+import { getClassName as l } from "../../../utils/get-class-name.js";
+import './ErrorMessage.css';/* empty css                 */
+const n = ({
+  errorId: e,
+  testId: s,
+  message: a = "Error!",
+  visible: r = !1,
+  className: o
+}) => {
+  const t = l([
+    "cl-error-message",
+    o,
+    { "cl-error-message_visible": r }
+  ]);
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      id: e,
+      className: t,
+      "data-testid": s,
+      "aria-hidden": !r,
+      "aria-live": "polite",
+      children: a
+    }
+  );
+};
+export {
+  n as default
+};

package/dist/components/atoms/error-message/index.js

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

package/dist/components/atoms/header/Header.css

@@ -0,0 +1 @@
+.cl-header{margin:0;color:var(--cl-base-font-color)}.cl-header:before{padding-right:var(--cl-m-gap)}.cl-header__h1{border-bottom:var(--cl-light-border);font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h1-mobile)}@media(min-width:640px){.cl-header__h1{font-size:var(--cl-typography-h1-tablet)}}@media(min-width:1024px){.cl-header__h1{font-size:var(--cl-typography-h1-desktop)}}.cl-header__h2{border-bottom:var(--cl-light-border);font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h2-mobile)}@media(min-width:640px){.cl-header__h2{font-size:var(--cl-typography-h2-tablet)}}@media(min-width:1024px){.cl-header__h2{font-size:var(--cl-typography-h2-desktop)}}.cl-header__h3{border-bottom:var(--cl-light-border);font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h3-mobile)}@media(min-width:640px){.cl-header__h3{font-size:var(--cl-typography-h3-tablet)}}@media(min-width:1024px){.cl-header__h3{font-size:var(--cl-typography-h3-desktop)}}.cl-header__h4{font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h4-mobile)}@media(min-width:640px){.cl-header__h4{font-size:var(--cl-typography-h4-tablet)}}@media(min-width:1024px){.cl-header__h4{font-size:var(--cl-typography-h4-desktop)}}.cl-header__h5{font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h5-mobile)}@media(min-width:640px){.cl-header__h5{font-size:var(--cl-typography-h5-tablet)}}@media(min-width:1024px){.cl-header__h5{font-size:var(--cl-typography-h5-desktop)}}.cl-header__h6{font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h6-mobile)}@media(min-width:640px){.cl-header__h6{font-size:var(--cl-typography-h6-tablet)}}@media(min-width:1024px){.cl-header__h6{font-size:var(--cl-typography-h6-desktop)}}

package/dist/components/atoms/header/Header.js

@@ -0,0 +1,22 @@
+import { jsx as l } from "react/jsx-runtime";
+import { getClassName as t } from "../../../utils/get-class-name.js";
+import './Header.css';/* empty css           */
+const n = ({ as: e = "h1", icon: h, children: r, className: a, ..._ }) => {
+  const c = e, d = t([
+    a,
+    "cl-header",
+    h,
+    {
+      "cl-header__h1": e === "h1",
+      "cl-header__h2": e === "h2",
+      "cl-header__h3": e === "h3",
+      "cl-header__h4": e === "h4",
+      "cl-header__h5": e === "h5",
+      "cl-header__h6": e === "h6"
+    }
+  ]);
+  return /* @__PURE__ */ l(c, { className: d, ..._, children: r });
+};
+export {
+  n as default
+};

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

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

package/dist/components/atoms/icon/Icon.css

@@ -0,0 +1 @@
+.cl-icon{color:var(--cl-base-font-color);display:inline-flex;width:var(--cl-icon-size);height:var(--cl-icon-size);align-items:center;justify-content:center}.cl-icon_extra-small{font-size:var(--cl-typography-small-mobile)}.cl-icon_small{font-size:var(--cl-typography-base-mobile)}.cl-icon_medium{font-size:var(--cl-typography-h5-mobile)}.cl-icon_large{font-size:var(--cl-typography-h4-mobile)}.cl-icon_xlarge{font-size:var(--cl-typography-h3-mobile)}.cl-icon_2xlarge{font-size:var(--cl-typography-h2-mobile)}@media(min-width:640px){.cl-icon_extra-small{font-size:var(--cl-typography-small-tablet)}.cl-icon_small{font-size:var(--cl-typography-base-tablet)}.cl-icon_medium{font-size:var(--cl-typography-h5-tablet)}.cl-icon_large{font-size:var(--cl-typography-h4-tablet)}.cl-icon_xlarge{font-size:var(--cl-typography-h3-tablet)}.cl-icon_2xlarge{font-size:var(--cl-typography-h2-tablet)}}@media(min-width:1024px){.cl-icon_extra-small{font-size:var(--cl-typography-small-desktop)}.cl-icon_small{font-size:var(--cl-typography-base-desktop)}.cl-icon_medium{font-size:var(--cl-typography-h5-desktop)}.cl-icon_large{font-size:var(--cl-typography-h4-desktop)}.cl-icon_xlarge{font-size:var(--cl-typography-h3-desktop)}.cl-icon_2xlarge{font-size:var(--cl-typography-h2-desktop)}}

package/dist/components/atoms/icon/Icon.js

@@ -0,0 +1,31 @@
+import { jsx as n } from "react/jsx-runtime";
+import { getClassName as i } from "../../../utils/get-class-name.js";
+import './Icon.css';/* empty css         */
+import { ElementSize as a } from "../../../enums/element-size.js";
+const u = ({
+  name: r,
+  testId: t,
+  className: c,
+  hidden: o,
+  size: l = a.Medium,
+  ...m
+}) => {
+  if (!r) return null;
+  const e = i([
+    c,
+    "cl-icon",
+    r,
+    {
+      "cl-icon_extra-small": l === a.ExtraSmall,
+      "cl-icon_small": l === a.Small,
+      "cl-icon_medium": l === a.Medium,
+      "cl-icon_large": l === a.Large,
+      "cl-icon_xlarge": l === a.ExtraLarge,
+      "cl-icon_2xlarge": l === a.ExtraExtraLarge
+    }
+  ]);
+  return /* @__PURE__ */ n("span", { "data-testid": t, className: e, "aria-hidden": o, ...m });
+};
+export {
+  u as default
+};

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

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

package/dist/components/atoms/image/BasicImage.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+const l = ({
+  src: a,
+  alt: m,
+  width: s,
+  height: c,
+  sizes: e,
+  loading: i = "lazy",
+  decoding: r = "async",
+  onError: g
+}) => /* @__PURE__ */ o(
+  "img",
+  {
+    src: a,
+    alt: m,
+    width: s,
+    height: c,
+    loading: i,
+    decoding: r,
+    sizes: e,
+    className: "cl-image__img",
+    onError: g
+  }
+);
+export {
+  l as BasicImage
+};

package/dist/components/atoms/image/FallBackImage.js

@@ -0,0 +1,10 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import m from "../icon/Icon.js";
+import { IconName as c } from "../../../enums/icon-name.js";
+const s = () => /* @__PURE__ */ l("div", { className: "cl-image__fallback", children: [
+  /* @__PURE__ */ a(m, { name: c.Image, className: "cl-image__fallback-icon" }),
+  /* @__PURE__ */ a("span", { className: "cl-image__fallback-text", children: "Image not available" })
+] });
+export {
+  s as FallbackImage
+};

package/dist/components/atoms/image/Image.css

@@ -0,0 +1 @@
+.cl-image{object-fit:cover;border-radius:var(--cl-border-radius)}.cl-image__img{max-width:100%;height:auto;border-radius:var(--cl-border-radius)}.cl-image__picture{display:block;object-fit:cover;border-radius:var(--cl-border-radius)}.cl-image__fallback{display:flex;flex-direction:column;align-items:center;justify-content:space-between}.cl-image__fallback-icon{width:148px;height:148px}.cl-image__fallback-icon:before{font-size:6rem}.cl-image__fallback-text{text-align:center;padding-top: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-image__fallback-text{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-image__fallback-text{font-size:var(--cl-typography-small-desktop)}}

package/dist/components/atoms/image/Image.js

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+import { getClassName as u } from "../../../utils/get-class-name.js";
+import { useState as h } from "react";
+import { BasicImage as E } from "./BasicImage.js";
+import { FallbackImage as d } from "./FallBackImage.js";
+import './Image.css';/* empty css          */
+import { ResponsivePicture as C } from "./ResponsivePicture.js";
+import { withFigureCaption as I } from "../../hocs/with-figure-caption/with-figure-caption.js";
+const v = ({
+  alt: s,
+  sources: o = [],
+  className: m,
+  decorative: i = !1,
+  onError: n,
+  ...t
+}) => {
+  const [l, p] = h(!1), c = u(["cl-image", m]), f = o.length > 0, a = i ? "" : s, e = (g) => {
+    p(!0), n?.(g);
+  };
+  return l ? /* @__PURE__ */ r(d, {}) : f ? /* @__PURE__ */ r(C, { alt: a, sources: o, onError: e, ...t }) : /* @__PURE__ */ r("div", { className: c, children: /* @__PURE__ */ r(E, { alt: a, onError: e, ...t }) });
+}, k = I(v);
+export {
+  k as default
+};

package/dist/components/atoms/image/ResponsivePicture.js

@@ -0,0 +1,17 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { BasicImage as s } from "./BasicImage.js";
+const d = ({ sources: i = [], ...t }) => /* @__PURE__ */ m("picture", { className: "cl-image__picture", children: [
+  i.map((r, p) => /* @__PURE__ */ e(
+    "source",
+    {
+      srcSet: r.descriptor ? `${r.src} ${r.descriptor}` : r.src,
+      media: r.media,
+      type: r.type
+    },
+    `${r.src}-${p}`
+  )),
+  /* @__PURE__ */ e(s, { ...t })
+] });
+export {
+  d as ResponsivePicture
+};

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

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

package/dist/components/atoms/input/Input.css

@@ -0,0 +1 @@
+.cl-input__wrapper{display:flex;gap:var(--cl-m-gap);align-items:center;border:var(--cl-light-border);border-radius:var(--cl-border-radius);padding:var(--cl-m-gap);background-color:var(--cl-surface-a10);position:relative}.cl-input__wrapper:has(input:focus){border:var(--cl-outline-border)}.cl-input__wrapper:has(input[aria-invalid=true]){border:var(--cl-danger-border)}.cl-input__wrapper:has(input[disabled]){pointer-events:none;opacity:.5}.cl-input__wrapper>span:nth-child(2){display:flex;gap:var(--cl-m-gap);align-items:center}.cl-input__field{color:var(--cl-base-font-color);padding:0;border:none;display:inline-block;background:transparent;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-grow:1;min-width:0;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-input__field:focus-visible{outline:none}.cl-input__field:placeholder-shown+span{display:none!important}.cl-input__field::-webkit-outer-spin-button,.cl-input__field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cl-input__field[type=number]{-moz-appearance:textfield;appearance:textfield}@media(min-width:640px){.cl-input__field{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-input__field{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/atoms/input/Input.js

@@ -0,0 +1,10 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import './Input.css';/* empty css          */
+const n = ({ children: r, ...t }, p) => /* @__PURE__ */ s("div", { className: "cl-input__wrapper", children: [
+  /* @__PURE__ */ e("input", { ...t, className: "cl-input__field", ref: p }),
+  r
+] }), l = i(n);
+export {
+  l as default
+};

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

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