@iress-oss/ids-components 6.0.0-alpha.0 → 6.0.0-alpha.2

package/dist/components/Text/Text.js

@@ -1,45 +1,25 @@
-import { jsx as m } from "react/jsx-runtime";
-import { s as r } from "../../factory-DHLOr79I.js";
+import { jsx as e } from "react/jsx-runtime";
+import { s as r } from "../../factory-oPXoMw9H.js";
 import { text as s } from "./Text.styles.js";
-import { useMemo as n } from "react";
-import { c as a } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as c } from "../../enums.js";
-const T = [
-  "p",
-  "div",
-  "span",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "code",
-  "small",
-  "cite",
-  "caption",
-  "strong",
-  "em",
-  "a",
-  "blockquote",
-  "pre"
-], d = ({
-  className: t,
-  ...o
+import { useMemo as i } from "react";
+import { c as l } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as n } from "../../enums.js";
+const d = ({
+  className: o,
+  ...m
 }) => {
-  const e = n(
-    () => r(o.element ?? "div", s),
-    [o.element]
+  const t = i(
+    () => r(m.element ?? "div", s),
+    [m.element]
   );
-  return /* @__PURE__ */ m(
-    e,
+  return /* @__PURE__ */ e(
+    t,
     {
-      ...o,
-      className: a(t, c.Text)
+      ...m,
+      className: l(o, n.Text)
     }
   );
 };
 export {
-  d as IressText,
-  T as TEXT_ELEMENTS
+  d as IressText
 };

package/dist/components/Text/Text.styles.js

@@ -1,5 +1,5 @@
-import { m as a, s as n } from "../../cva-B2x59Dph.js";
-import { c as s, m as i } from "../../create-recipe-BqEnhJ30.js";
+import { m as a, s as n } from "../../css-fGu_jDvv.js";
+import { c as s, m as i } from "../../create-recipe-C-ASk1Hy.js";
 const e = /* @__PURE__ */ s("text", {
   element: "div"
 }, [
@@ -12,8 +12,8 @@ const e = /* @__PURE__ */ s("text", {
     css: {
       "& code": {
         textStyle: "typography.code",
-        paddingBlock: "spacing.000",
-        paddingInline: "spacing.100",
+        paddingBlock: "spacing.0",
+        paddingInline: "spacing.1",
         background: "colour.neutral.20",
         color: "colour.neutral.80",
         borderWidth: "0.5px",
@@ -33,6 +33,7 @@ const e = /* @__PURE__ */ s("text", {
       },
       "& a:not([class])": {
         color: "colour.primary.text",
+        fontWeight: "var(--iress-typography-body-md--medium-font-weight, 500)",
         textDecoration: "underline",
         _hover: {
           textDecoration: "none"

package/dist/components/Text/index.js

@@ -1,7 +1,6 @@
 import { text as t } from "./Text.styles.js";
-import { IressText as x, TEXT_ELEMENTS as E } from "./Text.js";
+import { IressText as x } from "./Text.js";
 export {
   x as IressText,
-  E as TEXT_ELEMENTS,
   t as text
 };

package/dist/components/Toaster/Toaster.js

@@ -1,14 +1,62 @@
-import "react/jsx-runtime";
-import "react";
+import { jsx as r, jsxs as u, Fragment as x } from "react/jsx-runtime";
+import { useContext as b, useRef as v, useEffect as C, createElement as T } from "react";
 import "../Stack/Stack.styles.js";
-import "../Stack/Stack.js";
-import "../../floating-ui.react-CPN4oQCc.js";
-import "./Toaster.styles.js";
-import "../../cx-DN21T1EH.js";
-import "./components/Toast/ToastAnimated.js";
-import "../../factory-DHLOr79I.js";
-import "../../enums.js";
-import { a as b } from "../../ToasterProvider-XqpAGfRs.js";
+import { IressStack as g } from "../Stack/Stack.js";
+import { g as h } from "../../floating-ui.react-BetVZ099.js";
+import { toaster as A } from "./Toaster.styles.js";
+import { c as y } from "../../cx-DN21T1EH.js";
+import { ToastAnimated as E } from "./components/Toast/ToastAnimated.js";
+import { s as l } from "../../factory-oPXoMw9H.js";
+import { GlobalCSSClass as S } from "../../enums.js";
+import { ToasterContext as j } from "./hooks/useToaster.js";
+const k = {
+  "bottom-end": "end-x",
+  "bottom-start": "start-x",
+  "bottom-center": "end-y",
+  "top-end": "end-x",
+  "top-start": "start-x",
+  "top-center": "start-y"
+}, m = {
+  role: "alert",
+  "aria-relevant": "additions",
+  "aria-live": "assertive"
+}, q = ({
+  className: d,
+  container: t,
+  position: a = "bottom-end",
+  toasts: n = [],
+  ...f
+}) => {
+  const i = b(j), o = v(null), c = A({ position: a });
+  return C(() => {
+    if (!t)
+      return;
+    const e = t instanceof HTMLElement ? t : t.current;
+    Object.entries(m).forEach(([s, p]) => {
+      e?.setAttribute(s, String(p));
+    });
+  }, [t]), n.length ? /* @__PURE__ */ u(x, { children: [
+    !t && /* @__PURE__ */ r(l.div, { ref: o, ...m }),
+    /* @__PURE__ */ r(h, { root: t ?? o, children: /* @__PURE__ */ r(
+      g,
+      {
+        className: y(c.root, d, S.Toaster),
+        gap: "md",
+        ...f,
+        children: n.map((e) => /* @__PURE__ */ T(
+          E,
+          {
+            ...e,
+            animation: k[a],
+            key: e.id,
+            onClose: (s) => i?.remove(e.id, s),
+            onTimeout: () => i?.remove(e.id)
+          }
+        ))
+      }
+    ) })
+  ] }) : t ? null : /* @__PURE__ */ r(l.div, { ref: o, ...m });
+};
 export {
-  b as Toaster
+  q as Toaster
 };

package/dist/components/Toaster/Toaster.styles.js

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-TRyehFkb.js";
+import { s as t } from "../../sva-OmxClA9g.js";
 const n = t({
   slots: ["root"],
   base: {
@@ -8,7 +8,7 @@ const n = t({
       width: "[500px]",
       maxWidth: "[100%]",
       zIndex: "500",
-      padding: "spacing.700",
+      padding: "spacing.7",
       boxSizing: "border-box",
       "&:empty": {
         display: "none"

package/dist/components/Toaster/ToasterProvider.js

@@ -1,8 +1,51 @@
-import "react/jsx-runtime";
-import "react";
-import { I as a, T as i } from "../../ToasterProvider-XqpAGfRs.js";
-import "./helpers/toasterRegister.js";
+import { jsxs as x, jsx as g } from "react/jsx-runtime";
+import { useState as C, useCallback as a, useMemo as h, useEffect as j } from "react";
+import { Toaster as v } from "./Toaster.js";
+import { registerToaster as w, unregisterToaster as I } from "./helpers/toasterRegister.js";
+import { ToasterContext as P } from "./hooks/useToaster.js";
+const S = ({
+  children: d,
+  id: s,
+  position: n,
+  ...p
+}) => {
+  const [T, m] = C([]), i = a(
+    (t, r) => {
+      m((e) => (e?.find((o) => o.id === t)?.onClose?.(r), e?.filter((o) => o.id !== t)));
+    },
+    []
+  ), f = a(
+    (t, r) => {
+      const e = r.id ?? `${(/* @__PURE__ */ new Date()).getTime()}`, c = n?.includes("top");
+      return m((o = []) => [
+        ...c ? [] : o,
+        { ...r, id: e, status: t },
+        ...c ? o : []
+      ]), e;
+    },
+    [n]
+  ), l = a((t) => {
+    m(
+      (r) => r?.map(
+        (e) => e.id === t ? { ...e, timeout: 100 } : e
+      )
+    );
+  }, []), u = h(
+    () => ({
+      close: l,
+      remove: i,
+      show: f
+    }),
+    [l, i, f]
+  );
+  return j(() => {
+    if (s)
+      return w(s, u), () => I(s);
+  }, [s, u]), /* @__PURE__ */ x(P.Provider, { value: u, children: [
+    d,
+    /* @__PURE__ */ g(v, { id: s, position: n, ...p, toasts: T })
+  ] });
+};
 export {
-  a as IressToasterProvider,
-  i as ToasterContext
+  S as IressToasterProvider
 };

package/dist/components/Toaster/components/Toast/Toast.js

@@ -1,86 +1,86 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { propagateTestid as c } from "../../../../helpers/utility/propagateTestid.js";
-import "../../../../Button-BXzmntRi.js";
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { propagateTestid as i } from "../../../../helpers/utility/propagateTestid.js";
+import "../../../../Button-mmhMLwp9.js";
 import { IressCloseButton as h } from "../../../Button/CloseButton/CloseButton.js";
 import "../../../Inline/Inline.styles.js";
 import { IressInline as y } from "../../../Inline/Inline.js";
 import { IressText as N } from "../../../Text/Text.js";
-import { forwardRef as T } from "react";
-import { c as b } from "../../../../cx-DN21T1EH.js";
-import { toast as g } from "./Toast.styles.js";
-import { s as v } from "../../../../factory-DHLOr79I.js";
-import { IressIcon as S } from "../../../Icon/Icon.js";
+import { forwardRef as b } from "react";
+import { c as g } from "../../../../cx-DN21T1EH.js";
+import { toast as v } from "./Toast.styles.js";
+import { s as C } from "../../../../factory-oPXoMw9H.js";
+import { IressIcon as I } from "../../../Icon/Icon.js";
 import "../../../Icon/Icon.styles.js";
-import { GlobalCSSClass as I } from "../../../../enums.js";
-const F = ["success", "error", "info"], A = {
+import { GlobalCSSClass as T } from "../../../../enums.js";
+const S = {
   error: "colour.system.danger.text",
   success: "colour.system.success.text",
   info: "colour.system.info.text"
-}, _ = {
+}, j = {
   error: "ban",
   success: "check",
   info: "info-square"
-}, j = T(
+}, k = b(
   ({
-    heading: t,
-    status: o,
-    actions: a,
-    children: n,
-    content: l,
-    dismissible: d = !0,
-    onClose: i,
+    heading: e,
+    status: t,
+    actions: c,
+    children: m,
+    content: n,
+    dismissible: l = !0,
+    onClose: d,
     "data-testid": s,
     className: p,
     ...f
-  }, u) => {
-    const e = g({ status: o });
-    return /* @__PURE__ */ r(
-      v.div,
+  }, x) => {
+    const r = v({ status: t });
+    return /* @__PURE__ */ o(
+      C.div,
       {
         ...f,
         "data-testid": s,
-        className: b(p, e.root, I.Toast),
+        className: g(p, r.root, T.Toast),
         tabIndex: -1,
-        ref: u,
-        children: /* @__PURE__ */ r("div", { className: e.panel, children: /* @__PURE__ */ m(y, { gap: "sm", verticalAlign: "top", noWrap: !0, children: [
-          /* @__PURE__ */ r(
-            S,
+        ref: x,
+        children: /* @__PURE__ */ o("div", { className: r.panel, children: /* @__PURE__ */ a(y, { gap: "sm", verticalAlign: "top", noWrap: !0, children: [
+          /* @__PURE__ */ o(
+            I,
             {
-              name: _[o],
-              screenreaderText: `${o}: `,
+              name: j[t],
+              screenreaderText: `${t}: `,
               textStyle: "typography.body.lg",
               fixedWidth: !0,
-              color: A[o]
+              color: S[t]
             }
           ),
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ a(
             "div",
             {
-              className: e.wrapper,
-              "data-testid": c(s, "content"),
+              className: r.wrapper,
+              "data-testid": i(s, "content"),
               children: [
-                t && /* @__PURE__ */ r(
+                e && /* @__PURE__ */ o(
                   N,
                   {
-                    className: e.heading,
-                    "data-testid": c(s, "heading"),
-                    children: typeof t == "string" ? /* @__PURE__ */ r("h2", { children: t }) : t
+                    className: r.heading,
+                    "data-testid": i(s, "heading"),
+                    children: typeof e == "string" ? /* @__PURE__ */ o("h2", { children: e }) : e
                   }
                 ),
-                d && /* @__PURE__ */ r(
+                l && /* @__PURE__ */ o(
                   h,
                   {
-                    "data-testid": c(
+                    "data-testid": i(
                       s,
                       "close-button__button"
                     ),
-                    className: e.closeButton,
-                    onClick: (x) => i == null ? void 0 : i(x),
+                    className: r.closeButton,
+                    onClick: (u) => d?.(u),
                     screenreaderText: "Dismiss"
                   }
                 ),
-                /* @__PURE__ */ r("div", { className: e.content, children: l ?? n }),
-                a && /* @__PURE__ */ r("div", { className: e.footer, children: a })
+                /* @__PURE__ */ o("div", { className: r.content, children: n ?? m }),
+                c && /* @__PURE__ */ o("div", { className: r.footer, children: c })
               ]
             }
           )
@@ -89,8 +89,7 @@ const F = ["success", "error", "info"], A = {
     );
   }
 );
-j.displayName = "Toast";
+k.displayName = "Toast";
 export {
-  F as TOAST_STATUS,
-  j as Toast
+  k as Toast
 };

package/dist/components/Toaster/components/Toast/Toast.styles.js

@@ -1,4 +1,4 @@
-import { s as o } from "../../../../sva-TRyehFkb.js";
+import { s as o } from "../../../../sva-OmxClA9g.js";
 const n = o({
   slots: [
     "root",
@@ -26,25 +26,25 @@ const n = o({
     panel: {
       borderWidth: "1px",
       borderRadius: "radius.system.form",
-      padding: "spacing.400",
+      padding: "spacing.4",
       textStyle: "typography.body.md.regular"
     },
     wrapper: {
       lineHeight: "1.5",
-      paddingRight: "spacing.600"
+      paddingRight: "spacing.6"
     },
     icon: {
       lineHeight: "normal"
     },
     heading: {
       display: "inline-block",
-      marginBottom: "spacing.100",
-      marginRight: "spacing.100",
+      marginBottom: "spacing.1",
+      marginRight: "spacing.1",
       "&:empty": {
         display: "none"
       },
       "& > h2, & > h3, & > h4, & > h5, & > h6": {
-        marginBlock: "spacing.000",
+        marginBlock: "spacing.0",
         textStyle: "typography.body.md.strong"
       }
     },
@@ -52,12 +52,12 @@ const n = o({
       noGutter: !0
     },
     footer: {
-      paddingBlockStart: "spacing.200"
+      paddingBlockStart: "spacing.2"
     },
     closeButton: {
       position: "absolute",
-      top: "spacing.050",
-      right: "spacing.050"
+      top: "spacing.1",
+      right: "spacing.1"
     }
   },
   variants: {
@@ -97,24 +97,24 @@ const n = o({
       "start-x": {
         root: {
           insetInlineStart: "[-100%]",
-          ms: "spacing.400"
+          ms: "spacing.4"
         }
       },
       "end-x": {
         root: {
           insetInlineEnd: "[-100%]",
-          me: "spacing.400"
+          me: "spacing.4"
         }
       },
       "start-y": {
         root: {
-          mt: "spacing.400",
+          mt: "spacing.4",
           transform: "[translateY(-100%)]"
         }
       },
       "end-y": {
         root: {
-          mb: "spacing.400",
+          mb: "spacing.4",
           transform: "[translateY(100%)]"
         }
       },

package/dist/components/Toaster/components/Toast/ToastAnimated.js

@@ -1,51 +1,52 @@
-import { jsx as x } from "react/jsx-runtime";
-import { useState as S, useRef as F, useEffect as c } from "react";
-import { getTransitionDuration as O } from "../../../../helpers/transition/getTransitionDuration.js";
-import { u as R, e as T } from "../../../../floating-ui.react-CPN4oQCc.js";
-import { toast as h } from "./Toast.styles.js";
-import { c as j } from "../../../../cx-DN21T1EH.js";
-import { Toast as A } from "./Toast.js";
-const v = ({
+import { jsx as T } from "react/jsx-runtime";
+import { useState as x, useEffect as f } from "react";
+import { getTransitionDuration as S } from "../../../../helpers/transition/getTransitionDuration.js";
+import { u as C, e as F } from "../../../../floating-ui.react-BetVZ099.js";
+import { toast as O } from "./Toast.styles.js";
+import { c as h } from "../../../../cx-DN21T1EH.js";
+import { Toast as j } from "./Toast.js";
+const q = ({
   animation: u,
-  className: m,
-  onClose: n,
-  onTimeout: s,
-  timeout: o = 6e3,
-  ...p
+  className: c,
+  onClose: m,
+  onTimeout: a,
+  timeout: s = 6e3,
+  ...l
 }) => {
-  const [l, f] = S(!0), a = F(240), { context: e } = R({
-    open: l,
-    onOpenChange: f
-  }), { isMounted: d, status: r } = T(e, {
-    duration: a.current
+  const [p, r] = x(!0);
+  let e = 240;
+  const { context: t } = C({
+    open: p,
+    onOpenChange: r
   });
-  if (c(() => {
-    o && setTimeout(() => {
-      f(!1), setTimeout(() => s == null ? void 0 : s(), a.current);
-    }, o);
-  }, [s, o]), c(() => {
-    var t;
-    r === "initial" && (a.current = O(
-      e.refs.floating.current
-    )), r === "open" && ((t = e.refs.floating.current) == null || t.focus());
-  }, [r, e.refs.floating]), !d) return !1;
-  const i = r === "close" ? "closed" : r, g = h({
+  t.refs.floating.current && (e = S(t.refs.floating.current));
+  const { isMounted: g, status: o } = F(t, {
+    duration: e
+  });
+  if (f(() => {
+    s && setTimeout(() => {
+      r(!1), setTimeout(() => a?.(), e);
+    }, s);
+  }, [e, a, s]), f(() => {
+    o === "open" && t.refs.floating.current?.focus();
+  }, [o, t.refs.floating]), !g) return !1;
+  const i = o === "close" ? "closed" : o, d = O({
     animation: u ?? "fade",
     transitionState: i
   });
-  return /* @__PURE__ */ x(
-    A,
+  return /* @__PURE__ */ T(
+    j,
     {
-      ...p,
-      className: j(m, g.root),
+      ...l,
+      className: h(c, d.root),
       "data-state": i,
-      onClose: (t) => {
-        f(!1), setTimeout(() => n == null ? void 0 : n(t), a.current);
+      onClose: (n) => {
+        r(!1), setTimeout(() => m?.(n), e);
       },
-      ref: (t) => e.refs.setFloating(t)
+      ref: (n) => t.refs.setFloating(n)
     }
   );
 };
 export {
-  v as ToastAnimated
+  q as ToastAnimated
 };

package/dist/components/Toaster/hooks/useToaster.js

@@ -1,37 +1,39 @@
-import { useContext as f, useCallback as u, useMemo as a } from "react";
-import { T as h } from "../../../ToasterProvider-XqpAGfRs.js";
-import { getToaster as w } from "../helpers/toasterRegister.js";
-const l = (o) => {
-  const s = f(h);
-  if (s === void 0)
+import { createContext as w, useContext as i, useCallback as a, useMemo as T } from "react";
+import { getToaster as f } from "../helpers/toasterRegister.js";
+const h = w(
+  void 0
+), n = (o) => typeof o != "string" ? o : { content: o }, l = (o) => {
+  const t = i(h);
+  if (t === void 0)
     throw new Error("useToaster must be used within a IressToasterProvider");
-  const t = u(
-    (r, e) => {
-      const n = o ? w(o) : s;
-      if (!n && o)
+  const e = a(
+    (r, s) => {
+      const u = o ? f(o) : t;
+      if (!u && o)
         throw new Error(`Toaster with id "${o}" not found.`);
-      return (n == null ? void 0 : n.show(r, e)) ?? "";
+      return u?.show(r, s) ?? "";
     },
-    [s, o]
-  ), c = u(
+    [t, o]
+  ), c = a(
     (r) => {
-      const e = o ? w(o) : s;
-      if (!e && o)
+      const s = o ? f(o) : t;
+      if (!s && o)
         throw new Error(`Toaster with id "${o}" not found.`);
-      e == null || e.close(r);
+      s?.close(r);
     },
-    [s, o]
+    [t, o]
   );
-  return a(
+  return T(
     () => ({
-      success: (r) => t("success", r),
-      error: (r) => t("error", r),
-      info: (r) => t("info", r),
+      success: (r) => e("success", n(r)),
+      error: (r) => e("error", n(r)),
+      info: (r) => e("info", n(r)),
       close: c
     }),
-    [c, t]
+    [c, e]
   );
 };
 export {
+  h as ToasterContext,
   l as useToaster
 };

package/dist/components/Toaster/index.js

@@ -1,10 +1,11 @@
-import { I as e } from "../../ToasterProvider-XqpAGfRs.js";
-import { useToaster as s } from "./hooks/useToaster.js";
+import { IressToasterProvider as t } from "./ToasterProvider.js";
+import { ToasterContext as s, useToaster as a } from "./hooks/useToaster.js";
 import { toaster as f } from "./Toaster.styles.js";
 import { toast as p } from "./components/Toast/Toast.styles.js";
 export {
-  e as IressToasterProvider,
+  t as IressToasterProvider,
+  s as ToasterContext,
   p as toast,
   f as toaster,
-  s as useToaster
+  a as useToaster
 };