@gobolt/genesis 0.0.7 → 0.0.9

package/dist/components/Input/styles.js

@@ -0,0 +1,529 @@
+import { d as pe } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+import { TYPE as oe, STATE as V } from "../../constants/index.js";
+import * as s from "react";
+import { useContext as ee, useMemo as me, useState as ge, useRef as Ce } from "react";
+import { a as re, c as q } from "../../warning-C63HNL9U.js";
+import { C as Q, v as se, g as be, m as ve, w as xe, b as ne, x as ye, D as he, t as ie } from "../../index-oK7z6jnz.js";
+import { F as X, u as Oe } from "../../context-BMW3aJEf.js";
+import { u as we, i as Ee, a as Pe, I as W, b as $e, T as Ie } from "../../TextArea-DKwCct3i.js";
+import { p as Se } from "../../pickAttrs-B0YTfcV1.js";
+import { g as _e } from "../../useVariants-DvhXfgJY.js";
+import { a as ae, b as ze } from "../../Compact-CGY560JF.js";
+import { I as ue } from "../../AntdIcon-BoLh1dP8.js";
+import { o as Ne } from "../../isVisible-A-IfeFoT.js";
+import { R as je } from "../../SearchOutlined-BP3Z2K6j.js";
+import { c as te } from "../../reactNode-sKPeiqPL.js";
+import { B as Me } from "../../button-CDQgO1OK.js";
+var Re = { icon: { tag: "svg", attrs: { viewBox: "64 64 896 896", focusable: "false" }, children: [{ tag: "path", attrs: { d: "M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z" } }, { tag: "path", attrs: { d: "M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z" } }] }, name: "eye-invisible", theme: "outlined" }, ke = function(o, r) {
+  return /* @__PURE__ */ s.createElement(ue, re({}, o, {
+    ref: r,
+    icon: Re
+  }));
+}, le = /* @__PURE__ */ s.forwardRef(ke);
+process.env.NODE_ENV !== "production" && (le.displayName = "EyeInvisibleOutlined");
+var Ae = { icon: { tag: "svg", attrs: { viewBox: "64 64 896 896", focusable: "false" }, children: [{ tag: "path", attrs: { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" } }] }, name: "eye", theme: "outlined" }, Be = function(o, r) {
+  return /* @__PURE__ */ s.createElement(ue, re({}, o, {
+    ref: r,
+    icon: Ae
+  }));
+}, ce = /* @__PURE__ */ s.forwardRef(Be);
+process.env.NODE_ENV !== "production" && (ce.displayName = "EyeOutlined");
+const Te = (e) => {
+  const {
+    getPrefixCls: o,
+    direction: r
+  } = ee(Q), {
+    prefixCls: n,
+    className: t
+  } = e, a = o("input-group", n), b = o("input"), [d, x] = we(b), v = q(a, {
+    [`${a}-lg`]: e.size === "large",
+    [`${a}-sm`]: e.size === "small",
+    [`${a}-compact`]: e.compact,
+    [`${a}-rtl`]: r === "rtl"
+  }, x, t), f = ee(X), p = me(() => Object.assign(Object.assign({}, f), {
+    isFormItemInput: !1
+  }), [f]);
+  return process.env.NODE_ENV !== "production" && se("Input.Group").deprecated(!1, "Input.Group", "Space.Compact"), d(/* @__PURE__ */ s.createElement("span", {
+    className: v,
+    style: e.style,
+    onMouseEnter: e.onMouseEnter,
+    onMouseLeave: e.onMouseLeave,
+    onFocus: e.onFocus,
+    onBlur: e.onBlur
+  }, /* @__PURE__ */ s.createElement(X.Provider, {
+    value: p
+  }, e.children)));
+}, Ve = (e) => {
+  const {
+    componentCls: o,
+    paddingXS: r
+  } = e;
+  return {
+    [o]: {
+      display: "inline-flex",
+      alignItems: "center",
+      flexWrap: "nowrap",
+      columnGap: r,
+      "&-rtl": {
+        direction: "rtl"
+      },
+      [`${o}-input`]: {
+        textAlign: "center",
+        paddingInline: e.paddingXXS
+      },
+      // ================= Size =================
+      [`&${o}-sm ${o}-input`]: {
+        paddingInline: e.calc(e.paddingXXS).div(2).equal()
+      },
+      [`&${o}-lg ${o}-input`]: {
+        paddingInline: e.paddingXS
+      }
+    }
+  };
+}, De = be(["Input", "OTP"], (e) => {
+  const o = ve(e, Ee(e));
+  return [Ve(o)];
+}, Pe);
+var Fe = function(e, o) {
+  var r = {};
+  for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && o.indexOf(n) < 0 && (r[n] = e[n]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var t = 0, n = Object.getOwnPropertySymbols(e); t < n.length; t++)
+    o.indexOf(n[t]) < 0 && Object.prototype.propertyIsEnumerable.call(e, n[t]) && (r[n[t]] = e[n[t]]);
+  return r;
+};
+const Le = /* @__PURE__ */ s.forwardRef((e, o) => {
+  const {
+    value: r,
+    onChange: n,
+    onActiveChange: t,
+    index: a,
+    mask: b
+  } = e, d = Fe(e, ["value", "onChange", "onActiveChange", "index", "mask"]), x = r && typeof b == "string" ? b : r, v = (m) => {
+    n(a, m.target.value);
+  }, f = s.useRef(null);
+  s.useImperativeHandle(o, () => f.current);
+  const p = () => {
+    xe(() => {
+      var m;
+      const y = (m = f.current) === null || m === void 0 ? void 0 : m.input;
+      document.activeElement === y && y && y.select();
+    });
+  }, I = (m) => {
+    const {
+      key: y,
+      ctrlKey: M,
+      metaKey: R
+    } = m;
+    y === "ArrowLeft" ? t(a - 1) : y === "ArrowRight" ? t(a + 1) : y === "z" && (M || R) && m.preventDefault(), p();
+  }, P = (m) => {
+    m.key === "Backspace" && !r && t(a - 1), p();
+  };
+  return /* @__PURE__ */ s.createElement(W, Object.assign({
+    type: b === !0 ? "password" : "text"
+  }, d, {
+    ref: f,
+    value: x,
+    onInput: v,
+    onFocus: p,
+    onKeyDown: I,
+    onKeyUp: P,
+    onMouseDown: p,
+    onMouseUp: p
+  }));
+});
+var Ke = function(e, o) {
+  var r = {};
+  for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && o.indexOf(n) < 0 && (r[n] = e[n]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var t = 0, n = Object.getOwnPropertySymbols(e); t < n.length; t++)
+    o.indexOf(n[t]) < 0 && Object.prototype.propertyIsEnumerable.call(e, n[t]) && (r[n[t]] = e[n[t]]);
+  return r;
+};
+function U(e) {
+  return (e || "").split("");
+}
+const Ge = /* @__PURE__ */ s.forwardRef((e, o) => {
+  const {
+    prefixCls: r,
+    length: n = 6,
+    size: t,
+    defaultValue: a,
+    value: b,
+    onChange: d,
+    formatter: x,
+    variant: v,
+    disabled: f,
+    status: p,
+    autoFocus: I,
+    mask: P,
+    type: m,
+    onInput: y,
+    inputMode: M
+  } = e, R = Ke(e, ["prefixCls", "length", "size", "defaultValue", "value", "onChange", "formatter", "variant", "disabled", "status", "autoFocus", "mask", "type", "onInput", "inputMode"]);
+  if (process.env.NODE_ENV !== "production") {
+    const i = se("Input.OTP");
+    process.env.NODE_ENV !== "production" && i(!(typeof P == "string" && P.length > 1), "usage", "`mask` prop should be a single character.");
+  }
+  const {
+    getPrefixCls: S,
+    direction: _
+  } = s.useContext(Q), w = S("otp", r), F = Se(R, {
+    aria: !0,
+    data: !0,
+    attr: !0
+  }), $ = Oe(w), [k, L, A] = De(w, $), h = ae((i) => t ?? i), z = s.useContext(X), N = _e(z.status, p), B = s.useMemo(() => Object.assign(Object.assign({}, z), {
+    status: N,
+    hasFeedback: !1,
+    feedbackIcon: null
+  }), [z, N]), E = s.useRef(null), O = s.useRef({});
+  s.useImperativeHandle(o, () => ({
+    focus: () => {
+      var i;
+      (i = O.current[0]) === null || i === void 0 || i.focus();
+    },
+    blur: () => {
+      var i;
+      for (let l = 0; l < n; l += 1)
+        (i = O.current[l]) === null || i === void 0 || i.blur();
+    },
+    nativeElement: E.current
+  }));
+  const K = (i) => x ? x(i) : i, [G, H] = s.useState(U(K(a || "")));
+  s.useEffect(() => {
+    b !== void 0 && H(U(b));
+  }, [b]);
+  const Y = ne((i) => {
+    H(i), y && y(i), d && i.length === n && i.every((l) => l) && i.some((l, c) => G[c] !== l) && d(i.join(""));
+  }), J = ne((i, l) => {
+    let c = ye(G);
+    for (let C = 0; C < i; C += 1)
+      c[C] || (c[C] = "");
+    l.length <= 1 ? c[i] = l : c = c.slice(0, i).concat(U(l)), c = c.slice(0, n);
+    for (let C = c.length - 1; C >= 0 && !c[C]; C -= 1)
+      c.pop();
+    const T = K(c.map((C) => C || " ").join(""));
+    return c = U(T).map((C, Z) => C === " " && !c[Z] ? c[Z] : C), c;
+  }), u = (i, l) => {
+    var c;
+    const T = J(i, l), C = Math.min(i + l.length, n - 1);
+    C !== i && T[i] !== void 0 && ((c = O.current[C]) === null || c === void 0 || c.focus()), Y(T);
+  }, g = (i) => {
+    var l;
+    (l = O.current[i]) === null || l === void 0 || l.focus();
+  }, j = {
+    variant: v,
+    disabled: f,
+    status: N,
+    mask: P,
+    type: m,
+    inputMode: M
+  };
+  return k(/* @__PURE__ */ s.createElement("div", Object.assign({}, F, {
+    ref: E,
+    className: q(w, {
+      [`${w}-sm`]: h === "small",
+      [`${w}-lg`]: h === "large",
+      [`${w}-rtl`]: _ === "rtl"
+    }, A, L)
+  }), /* @__PURE__ */ s.createElement(X.Provider, {
+    value: B
+  }, Array.from({
+    length: n
+  }).map((i, l) => {
+    const c = `otp-${l}`, T = G[l] || "";
+    return /* @__PURE__ */ s.createElement(Le, Object.assign({
+      ref: (C) => {
+        O.current[l] = C;
+      },
+      key: c,
+      index: l,
+      size: h,
+      htmlSize: 1,
+      className: `${w}-input`,
+      onChange: u,
+      value: T,
+      onActiveChange: g,
+      autoFocus: l === 0 && I
+    }, j));
+  }))));
+});
+var He = function(e, o) {
+  var r = {};
+  for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && o.indexOf(n) < 0 && (r[n] = e[n]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var t = 0, n = Object.getOwnPropertySymbols(e); t < n.length; t++)
+    o.indexOf(n[t]) < 0 && Object.prototype.propertyIsEnumerable.call(e, n[t]) && (r[n[t]] = e[n[t]]);
+  return r;
+};
+const Ue = (e) => e ? /* @__PURE__ */ s.createElement(ce, null) : /* @__PURE__ */ s.createElement(le, null), Xe = {
+  click: "onClick",
+  hover: "onMouseOver"
+}, de = /* @__PURE__ */ s.forwardRef((e, o) => {
+  const {
+    disabled: r,
+    action: n = "click",
+    visibilityToggle: t = !0,
+    iconRender: a = Ue
+  } = e, b = s.useContext(he), d = r ?? b, x = typeof t == "object" && t.visible !== void 0, [v, f] = ge(() => x ? t.visible : !1), p = Ce(null);
+  s.useEffect(() => {
+    x && f(t.visible);
+  }, [x, t]);
+  const I = $e(p), P = () => {
+    var h;
+    if (d)
+      return;
+    v && I();
+    const z = !v;
+    f(z), typeof t == "object" && ((h = t.onVisibleChange) === null || h === void 0 || h.call(t, z));
+  }, m = (h) => {
+    const z = Xe[n] || "", N = a(v), B = {
+      [z]: P,
+      className: `${h}-icon`,
+      key: "passwordIcon",
+      onMouseDown: (E) => {
+        E.preventDefault();
+      },
+      onMouseUp: (E) => {
+        E.preventDefault();
+      }
+    };
+    return /* @__PURE__ */ s.cloneElement(/* @__PURE__ */ s.isValidElement(N) ? N : /* @__PURE__ */ s.createElement("span", null, N), B);
+  }, {
+    className: y,
+    prefixCls: M,
+    inputPrefixCls: R,
+    size: S
+  } = e, _ = He(e, ["className", "prefixCls", "inputPrefixCls", "size"]), {
+    getPrefixCls: w
+  } = s.useContext(Q), F = w("input", R), $ = w("input-password", M), k = t && m($), L = q($, y, {
+    [`${$}-${S}`]: !!S
+  }), A = Object.assign(Object.assign({}, Ne(_, ["suffix", "iconRender", "visibilityToggle"])), {
+    type: v ? "text" : "password",
+    className: L,
+    prefixCls: F,
+    suffix: k
+  });
+  return S && (A.size = S), /* @__PURE__ */ s.createElement(W, Object.assign({
+    ref: ie(o, p)
+  }, A));
+});
+process.env.NODE_ENV !== "production" && (de.displayName = "Input.Password");
+var qe = function(e, o) {
+  var r = {};
+  for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && o.indexOf(n) < 0 && (r[n] = e[n]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var t = 0, n = Object.getOwnPropertySymbols(e); t < n.length; t++)
+    o.indexOf(n[t]) < 0 && Object.prototype.propertyIsEnumerable.call(e, n[t]) && (r[n[t]] = e[n[t]]);
+  return r;
+};
+const fe = /* @__PURE__ */ s.forwardRef((e, o) => {
+  const {
+    prefixCls: r,
+    inputPrefixCls: n,
+    className: t,
+    size: a,
+    suffix: b,
+    enterButton: d = !1,
+    addonAfter: x,
+    loading: v,
+    disabled: f,
+    onSearch: p,
+    onChange: I,
+    onCompositionStart: P,
+    onCompositionEnd: m
+  } = e, y = qe(e, ["prefixCls", "inputPrefixCls", "className", "size", "suffix", "enterButton", "addonAfter", "loading", "disabled", "onSearch", "onChange", "onCompositionStart", "onCompositionEnd"]), {
+    getPrefixCls: M,
+    direction: R
+  } = s.useContext(Q), S = s.useRef(!1), _ = M("input-search", r), w = M("input", n), {
+    compactSize: F
+  } = ze(_, R), $ = ae((u) => {
+    var g;
+    return (g = a ?? F) !== null && g !== void 0 ? g : u;
+  }), k = s.useRef(null), L = (u) => {
+    u != null && u.target && u.type === "click" && p && p(u.target.value, u, {
+      source: "clear"
+    }), I == null || I(u);
+  }, A = (u) => {
+    var g;
+    document.activeElement === ((g = k.current) === null || g === void 0 ? void 0 : g.input) && u.preventDefault();
+  }, h = (u) => {
+    var g, j;
+    p && p((j = (g = k.current) === null || g === void 0 ? void 0 : g.input) === null || j === void 0 ? void 0 : j.value, u, {
+      source: "input"
+    });
+  }, z = (u) => {
+    S.current || v || h(u);
+  }, N = typeof d == "boolean" ? /* @__PURE__ */ s.createElement(je, null) : null, B = `${_}-button`;
+  let E;
+  const O = d || {}, K = O.type && O.type.__ANT_BUTTON === !0;
+  K || O.type === "button" ? E = te(O, Object.assign({
+    onMouseDown: A,
+    onClick: (u) => {
+      var g, j;
+      (j = (g = O == null ? void 0 : O.props) === null || g === void 0 ? void 0 : g.onClick) === null || j === void 0 || j.call(g, u), h(u);
+    },
+    key: "enterButton"
+  }, K ? {
+    className: B,
+    size: $
+  } : {})) : E = /* @__PURE__ */ s.createElement(Me, {
+    className: B,
+    type: d ? "primary" : void 0,
+    size: $,
+    disabled: f,
+    key: "enterButton",
+    onMouseDown: A,
+    onClick: h,
+    loading: v,
+    icon: N
+  }, d), x && (E = [E, te(x, {
+    key: "addonAfter"
+  })]);
+  const G = q(_, {
+    [`${_}-rtl`]: R === "rtl",
+    [`${_}-${$}`]: !!$,
+    [`${_}-with-button`]: !!d
+  }, t), H = Object.assign(Object.assign({}, y), {
+    className: G,
+    prefixCls: w,
+    type: "search"
+  }), Y = (u) => {
+    S.current = !0, P == null || P(u);
+  }, J = (u) => {
+    S.current = !1, m == null || m(u);
+  };
+  return /* @__PURE__ */ s.createElement(W, Object.assign({
+    ref: ie(k, o),
+    onPressEnter: z
+  }, H, {
+    size: $,
+    onCompositionStart: Y,
+    onCompositionEnd: J,
+    addonAfter: E,
+    suffix: b,
+    onChange: L,
+    disabled: f
+  }));
+});
+process.env.NODE_ENV !== "production" && (fe.displayName = "Search");
+const D = W;
+D.Group = Te;
+D.Search = fe;
+D.TextArea = Ie;
+D.Password = de;
+D.OTP = Ge;
+const Qe = (e, o, r) => {
+  const n = {
+    color: e.inputs.onsurface.active,
+    borderColor: e[oe.secondary].active.borderColor,
+    ringColor: e[o].focussed.ringColor
+  }, t = {
+    color: e.status.success.default,
+    borderColor: e.status.success.default,
+    ringColor: e.status.success.ringColor
+  }, a = {
+    color: e.status.error.default,
+    borderColor: e.status.error.default,
+    ringColor: e.status.error.ringColor
+  }, b = r !== V.error && r !== V.success && r !== V.filled ? {
+    color: e.inputs.onsurface.active,
+    backgroundColor: e.inputs.surface.active,
+    borderColor: e.inputs.surface.border,
+    ringColor: e[o][r].ringColor
+  } : null;
+  return {
+    filled: n,
+    error: a,
+    success: t,
+    themeState: b
+  }[((f) => [V.filled, V.error, V.success].includes(f) ? f : "themeState")(r)];
+}, We = ({ colors: e, borderRadius: o, components: r }, n, t, a, b) => {
+  const d = Qe(e, n, t), x = (v, f) => f && !v ? `${o.BorderRadiusMd}px 0px 0px ${o.BorderRadiusMd}px` : v && !f ? `0px ${o.BorderRadiusMd}px ${o.BorderRadiusMd}px 0px` : "0px";
+  return `
+    &.ant-input {
+        font-family: 'Inter', sans-serif;
+        color: ${d.color};
+        border-color: ${d.borderColor};
+    }
+
+    .ant-input-group & {
+      &:focus-within {
+        outline: none;
+        color: ${d.color};
+        box-shadow: none;
+        border-color: ${e[n].focussed.borderColor};
+      }
+    }
+
+    .ant-input-group:focus-within {
+      outline: none;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${e[n].focussed.ringColor};
+      border-radius: ${o.BorderRadiusMd}px;
+      transition: box-shadow 0.2s ease-in-out;
+
+      /* Hide focus styles on inner input when parent is focused */
+      .ant-input:focus-within {
+        box-shadow: none;
+        border-radius: 0;
+        border-radius: ${x(a, b)};
+        border-color: #ddd;
+      }
+    }
+
+    /* Remove inner input focus styles when in a group */
+    .ant-input-group .ant-input:focus,
+    .ant-input-group .ant-input:focus-visible,
+    .ant-input-group .ant-input:focus-within {
+      outline: none;
+      box-shadow: none;
+      border-color: ${e[n].focussed.borderColor};
+    }
+
+    /* Single focus ring on group */
+    .ant-input-group:focus-within {
+      outline: none;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${e[n].focussed.ringColor};
+      border-radius: ${o.BorderRadiusMd}px;
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    /* Remove focus styles for standalone inputs */
+    &:not(.ant-input-group):focus-visible {
+      outline: none;
+      color: ${d.color};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${e[n].focussed.ringColor};
+      border-radius: ${o.BorderRadiusMd}px;
+      border-color: ${e[n].focussed.borderColor};
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    &:not(.ant-input-group .ant-input):focus-visible {
+      outline: none;
+      color: ${d.color};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${e[n].focussed.ringColor};
+      border-radius: ${o.BorderRadiusMd}px;
+      border-color: ${e[n].focussed.borderColor};
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    &.ant-input-group-wrapper {
+      .ant-input-group-addon {
+        padding-left: ${r.input.suffixPrefixHorPadding};
+        padding-right: ${r.input.suffixPrefixHorPadding};
+        padding-top: ${r.input.suffixPrefixVerPadding};
+        padding-bottom: ${r.input.suffixPrefixVerPadding};
+      }
+    }
+  `;
+}, pn = pe(D)`
+  ${({ theme: e, state: o, type: r = oe.primary, ...n }) => {
+  const t = !!n.addonBefore, a = !!n.addonAfter;
+  return We(
+    e,
+    r,
+    o,
+    t,
+    a
+  );
+}}
+`;
+export {
+  pn as Input
+};

package/dist/components/Message/Message.d.ts

@@ -0,0 +1,13 @@
+import { STATE, SIZE } from '../../constants';
+
+export interface MessageProps {
+    state: keyof typeof STATE;
+    message: string;
+    action?: {
+        label?: string;
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+    size?: Extract<keyof typeof SIZE, "small" | "standard">;
+}
+declare const Message: ({ state, message, action, size, }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+export default Message;

package/dist/components/Message/Message.js

@@ -0,0 +1,78 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { TYPOGRAPHY_VARIANT as f, STATE as s, SIZE as m } from "../../constants/index.js";
+import { n as p } from "../../styled-components.browser.esm-CZ1XM4o4.js";
+import "../Badge/styles.js";
+import "../Breadcrumb/styles.js";
+import "../../providers/ThemeProvider.js";
+import { a as u, R as g, b as d, c as I, d as R, e as y } from "../../Typography-aGoDUl4R.js";
+import "../Button/styles.js";
+import "../Checkbox/styles.js";
+import "../ErrorBoundaryFallback/styles.js";
+import "../Input/styles.js";
+import "../Notification/styles.js";
+import "react";
+import "../Select/styles.js";
+import "../Toast/styles.js";
+import { MessageRow as T, MessageContent as w, ActionButton as h } from "./styles.js";
+const x = (o, r) => {
+  switch (o) {
+    case s.error:
+      return r.colors.status.error.onsurface;
+    case s.success:
+      return r.colors.status.success.onsurface;
+    case s.warning:
+      return r.colors.status.warning.onsurface;
+    case s.generic:
+      return r.colors.status.generic.onsurface;
+    case s.info:
+    default:
+      return r.colors.status.info.onsurface;
+  }
+}, A = (o, r) => {
+  switch (o) {
+    case s.warning:
+      return /* @__PURE__ */ e(y, { style: { color: r } });
+    case s.error:
+      return /* @__PURE__ */ e(R, { style: { color: r } });
+    case s.success:
+      return /* @__PURE__ */ e(I, { style: { color: r } });
+    case s.generic:
+      return /* @__PURE__ */ e(d, { style: { color: r } });
+    case s.info:
+    default:
+      return /* @__PURE__ */ e(g, { style: { color: r } });
+  }
+}, V = ({
+  state: o = s.info,
+  message: r,
+  action: t,
+  size: l = m.standard
+}) => {
+  const n = p(), c = x(o, n), a = f.message;
+  return /* @__PURE__ */ i(T, { state: o, size: l, children: [
+    /* @__PURE__ */ i(w, { children: [
+      A(o, c),
+      /* @__PURE__ */ e(
+        u,
+        {
+          variant: a,
+          color: c,
+          isText: !0,
+          children: r
+        }
+      )
+    ] }),
+    t ? /* @__PURE__ */ e(h, { onClick: t.onClick, children: /* @__PURE__ */ e(
+      u,
+      {
+        variant: a,
+        color: n.colors.interactive.link.active,
+        isText: !0,
+        children: t.label
+      }
+    ) }) : null
+  ] });
+};
+export {
+  V as default
+};

package/dist/components/Message/__stories__/Message.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Message } from '../Message';
+
+declare const meta: Meta<typeof Message>;
+export default meta;
+type Story = StoryObj<typeof Message>;
+export declare const Default: Story;
+export declare const SuccessMessage: Story;
+export declare const ErrorMessage: Story;
+export declare const InfoMessage: Story;
+export declare const WarningMessage: Story;
+export declare const GenericMessage: Story;
+export declare const LongWarningMessage: Story;
+export declare const NoAction: Story;
+export declare const SmallSize: Story;

package/dist/components/Message/__tests__/Message.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Message/__tests__/Message.test.js

@@ -0,0 +1,42 @@
+import { jsx as c } from "react/jsx-runtime";
+import { v as r, f as a, a as i } from "../../../setup-BvfREoHl.js";
+import m from "../Message.js";
+import { STATE as s } from "../../../constants/index.js";
+describe("<Message />", () => {
+  const t = (e) => i(/* @__PURE__ */ c(m, { ...e }));
+  it("should render message text correctly", () => {
+    const { getByText: e } = t({
+      message: "Test message",
+      state: s.info
+    });
+    expect(e("Test message")).toBeInTheDocument();
+  }), it("should render success state correctly", () => {
+    const { getByText: e } = t({
+      message: "Success message",
+      state: s.success
+    });
+    expect(e("Success message")).toBeInTheDocument();
+  }), it("should render error state correctly", () => {
+    const { getByText: e } = t({
+      message: "Error message",
+      state: s.error
+    });
+    expect(e("Error message")).toBeInTheDocument();
+  }), it("should render action button when action prop is provided", () => {
+    const e = r.fn(), { getByText: o } = t({
+      message: "Message with action",
+      state: s.info,
+      action: {
+        label: "Click me",
+        onClick: e
+      }
+    }), n = o("Click me");
+    expect(n).toBeInTheDocument(), a.click(n), expect(e).toHaveBeenCalled();
+  }), it("should not render action button when action prop is not provided", () => {
+    const { container: e } = t({
+      message: "Message without action",
+      state: s.info
+    }), o = e.querySelector("button");
+    expect(o).not.toBeInTheDocument();
+  });
+});

package/dist/components/Message/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Message';
+export type { MessageProps } from './Message';

package/dist/components/Message/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./Message.js";
+export {
+  o as default
+};