@foi/design-system 0.0.18 → 0.0.19

package/dist/{ThemeProvider-BlqXHfU_.js.map → ThemeProvider-C_PzAJz3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider-BlqXHfU_.js","names":[],"sources":["../src/hocs/ThemeProvider/fonts/loadFonts.ts","../src/hocs/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["const mulishRegular = new URL('../../../assets/fonts/Mulish/Mulish-Regular.ttf', import.meta.url).href;\nconst mulishMedium = new URL('../../../assets/fonts/Mulish/Mulish-Medium.ttf', import.meta.url).href;\nconst mulishSemiBold = new URL('../../../assets/fonts/Mulish/Mulish-SemiBold.ttf', import.meta.url).href;\nconst mulishBold = new URL('../../../assets/fonts/Mulish/Mulish-Bold.ttf', import.meta.url).href;\n\nconst leagueSpartanRegular = new URL('../../../assets/fonts/LeagueSpartan/LeagueSpartan-Regular.ttf', import.meta.url)\n  .href;\nconst leagueSpartanBold = new URL('../../../assets/fonts/LeagueSpartan/LeagueSpartan-Bold.ttf', import.meta.url).href;\n\nconst googleSansCodeLight = new URL('../../../assets/fonts/GoogleSansCode/Light.ttf', import.meta.url).href;\nconst googleSansCodeLightItalic = new URL('../../../assets/fonts/GoogleSansCode/LightItalic.ttf', import.meta.url).href;\nconst googleSansCodeRegular = new URL('../../../assets/fonts/GoogleSansCode/Regular.ttf', import.meta.url).href;\nconst googleSansCodeItalic = new URL('../../../assets/fonts/GoogleSansCode/Italic.ttf', import.meta.url).href;\nconst googleSansCodeMedium = new URL('../../../assets/fonts/GoogleSansCode/Medium.ttf', import.meta.url).href;\nconst googleSansCodeMediumItalic = new URL('../../../assets/fonts/GoogleSansCode/MediumItalic.ttf', import.meta.url)\n  .href;\nconst googleSansCodeSemiBold = new URL('../../../assets/fonts/GoogleSansCode/SemiBold.ttf', import.meta.url).href;\nconst googleSansCodeSemiBoldItalic = new URL('../../../assets/fonts/GoogleSansCode/SemiBoldItalic.ttf', import.meta.url)\n  .href;\nconst googleSansCodeBold = new URL('../../../assets/fonts/GoogleSansCode/Bold.ttf', import.meta.url).href;\nconst googleSansCodeBoldItalic = new URL('../../../assets/fonts/GoogleSansCode/BoldItalic.ttf', import.meta.url).href;\n\nconst materialSymbolsRounded = new URL(\n  '../../../assets/fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.woff2',\n  import.meta.url,\n).href;\n\nconst fontFaceCSS = `\n@font-face { font-family: 'Mulish'; src: url('${mulishRegular}') format('truetype'); }\n@font-face { font-family: 'Mulish'; src: url('${mulishMedium}') format('truetype'); font-weight: 500; }\n@font-face { font-family: 'Mulish'; src: url('${mulishSemiBold}') format('truetype'); font-weight: 600; }\n@font-face { font-family: 'Mulish'; src: url('${mulishBold}') format('truetype'); font-weight: 700; }\n\n@font-face { font-family: 'League Spartan'; src: url('${leagueSpartanRegular}') format('truetype'); }\n@font-face { font-family: 'League Spartan'; src: url('${leagueSpartanBold}') format('truetype'); font-weight: bold; }\n\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeLight}') format('truetype'); font-weight: 300; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeLightItalic}') format('truetype'); font-weight: 300; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeRegular}') format('truetype'); font-weight: 400; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeItalic}') format('truetype'); font-weight: 400; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeMedium}') format('truetype'); font-weight: 500; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeMediumItalic}') format('truetype'); font-weight: 500; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeSemiBold}') format('truetype'); font-weight: 600; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeSemiBoldItalic}') format('truetype'); font-weight: 600; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeBold}') format('truetype'); font-weight: 700; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeBoldItalic}') format('truetype'); font-weight: 700; font-style: italic; }\n\n@font-face { font-family: 'Material Symbols Rounded'; src: url('${materialSymbolsRounded}') format('woff2'); font-weight: 100 900; font-style: normal; font-display: block; }\n`;\n\nlet injected = false;\n\nexport const loadFonts = () => {\n  console.log('loadFonts called, injected:', injected);\n  if (typeof document === 'undefined' || injected) return;\n  injected = true;\n  const style = document.createElement('style');\n  style.textContent = fontFaceCSS;\n  document.head.appendChild(style);\n  console.log('font style injected');\n};\n","import { useLayoutEffect } from 'react';\nimport { ThemeProviderComponent } from './ThemeProvider.interface';\nimport type { Theme } from './ThemeProvider.interface';\nimport { useCreateThemeStyles } from './useThemeProvider.hook';\nimport { loadFonts } from './fonts/loadFonts';\n\nconst ThemeProvider = <T extends readonly Theme[]>(props: ThemeProviderComponent<T>) => {\n  const { themes, theme: selectedTheme, children } = props;\n  useCreateThemeStyles(themes, selectedTheme);\n  useLayoutEffect(() => {\n    loadFonts();\n  }, []);\n\n  return <>{children}</>;\n};\n\nexport default ThemeProvider;\n"],"mappings":";;;AA2BA,IAAM,IAAc;gDA3BE,IAAA,IAAA,iv1IAAA,KAAA,OAAA,KAAA,IAA2E,CAAC,KA4BpC;gDA3BzC,IAAA,IAAA,qy1IAAA,KAAA,OAAA,KAAA,IAA0E,CAAC,KA4BnC;gDA3BtC,IAAA,IAAA,qt1IAAA,KAAA,OAAA,KAAA,IAA4E,CAAC,KA4BrC;gDA3B5C,IAAA,IAAA,iz1IAAA,KAAA,OAAA,KAAA,IAAwE,CAAC,KA4BjC;;wDA1B9B,IAAA,IAAA,im0EAAA,KAAA,OAAA,KAAA,IAAyF,CACnH,KA2B0E;wDA1BnD,IAAA,IAAA,yv0EAAA,KAAA,OAAA,KAAA,IAAsF,CAAC,KA2BvC;;0DAzB9C,IAAA,IAAA,qgvEAAA,KAAA,OAAA,KAAA,IAA0E,CAAC,KA2BzB;0DA1B5C,IAAA,IAAA,q30EAAA,KAAA,OAAA,KAAA,IAAgF,CAAC,KA2B/B;0DA1BtD,IAAA,IAAA,yqvEAAA,KAAA,OAAA,KAAA,IAA4E,CAAC,KA2B3B;0DA1BnD,IAAA,IAAA,y80EAAA,KAAA,OAAA,KAAA,IAA2E,CAAC,KA2B1B;0DA1BlD,IAAA,IAAA,ykvEAAA,KAAA,OAAA,KAAA,IAA2E,CAAC,KA2B1B;0DA1B5C,IAAA,IAAA,qj1EAAA,KAAA,OAAA,KAAA,IAAiF,CACjH,KA0BkF;0DAzBtD,IAAA,IAAA,ihwEAAA,KAAA,OAAA,KAAA,IAA6E,CAAC,KA0B5B;0DAzB5C,IAAA,IAAA,y/1EAAA,KAAA,OAAA,KAAA,IAAmF,CACrH,KAyBoF;0DAxB5D,IAAA,IAAA,qxwEAAA,KAAA,OAAA,KAAA,IAAyE,CAAC,KAyBxB;0DAxB5C,IAAA,IAAA,qo2EAAA,KAAA,OAAA,KAAA,IAA+E,CAAC,KAyB9B;;kEAvBpD,IAAA,IAAA,m7pxNAAA,KAAA,OAAA,KAAA,IAG9B,CAAC,KAsBuF;GAGrF,IAAW,IAEF,UAAkB;CAE7B,IADA,QAAQ,IAAI,+BAA+B,EAAS,EAChD,OAAO,WAAa,OAAe,GAAU;CACjD,IAAW;CACX,IAAM,IAAQ,SAAS,cAAc,QAAQ;CAG7C,AAFA,EAAM,cAAc,GACpB,SAAS,KAAK,YAAY,EAAM,EAChC,QAAQ,IAAI,sBAAsB;GCrD9B,KAA6C,MAAqC;CACtF,IAAM,EAAE,WAAQ,OAAO,GAAe,gBAAa;CAMnD,OALA,EAAqB,GAAQ,EAAc,EAC3C,QAAsB;EACpB,GAAW;IACV,EAAE,CAAC,EAEC,kBAAA,GAAA,EAAG,aAAY,CAAA"}
+{"version":3,"file":"ThemeProvider-C_PzAJz3.js","names":[],"sources":["../src/hocs/ThemeProvider/fonts/loadFonts.ts","../src/hocs/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["const mulishRegular = new URL('../../../assets/fonts/Mulish/Mulish-Regular.ttf', import.meta.url).href;\nconst mulishMedium = new URL('../../../assets/fonts/Mulish/Mulish-Medium.ttf', import.meta.url).href;\nconst mulishSemiBold = new URL('../../../assets/fonts/Mulish/Mulish-SemiBold.ttf', import.meta.url).href;\nconst mulishBold = new URL('../../../assets/fonts/Mulish/Mulish-Bold.ttf', import.meta.url).href;\n\nconst leagueSpartanRegular = new URL('../../../assets/fonts/LeagueSpartan/LeagueSpartan-Regular.ttf', import.meta.url)\n  .href;\nconst leagueSpartanBold = new URL('../../../assets/fonts/LeagueSpartan/LeagueSpartan-Bold.ttf', import.meta.url).href;\n\nconst googleSansCodeLight = new URL('../../../assets/fonts/GoogleSansCode/Light.ttf', import.meta.url).href;\nconst googleSansCodeLightItalic = new URL('../../../assets/fonts/GoogleSansCode/LightItalic.ttf', import.meta.url).href;\nconst googleSansCodeRegular = new URL('../../../assets/fonts/GoogleSansCode/Regular.ttf', import.meta.url).href;\nconst googleSansCodeItalic = new URL('../../../assets/fonts/GoogleSansCode/Italic.ttf', import.meta.url).href;\nconst googleSansCodeMedium = new URL('../../../assets/fonts/GoogleSansCode/Medium.ttf', import.meta.url).href;\nconst googleSansCodeMediumItalic = new URL('../../../assets/fonts/GoogleSansCode/MediumItalic.ttf', import.meta.url)\n  .href;\nconst googleSansCodeSemiBold = new URL('../../../assets/fonts/GoogleSansCode/SemiBold.ttf', import.meta.url).href;\nconst googleSansCodeSemiBoldItalic = new URL('../../../assets/fonts/GoogleSansCode/SemiBoldItalic.ttf', import.meta.url)\n  .href;\nconst googleSansCodeBold = new URL('../../../assets/fonts/GoogleSansCode/Bold.ttf', import.meta.url).href;\nconst googleSansCodeBoldItalic = new URL('../../../assets/fonts/GoogleSansCode/BoldItalic.ttf', import.meta.url).href;\n\nconst materialSymbolsRounded = new URL(\n  '../../../assets/fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.woff2',\n  import.meta.url,\n).href;\n\nconst fontFaceCSS = `\n@font-face { font-family: 'Mulish'; src: url('${mulishRegular}') format('truetype'); }\n@font-face { font-family: 'Mulish'; src: url('${mulishMedium}') format('truetype'); font-weight: 500; }\n@font-face { font-family: 'Mulish'; src: url('${mulishSemiBold}') format('truetype'); font-weight: 600; }\n@font-face { font-family: 'Mulish'; src: url('${mulishBold}') format('truetype'); font-weight: 700; }\n\n@font-face { font-family: 'League Spartan'; src: url('${leagueSpartanRegular}') format('truetype'); }\n@font-face { font-family: 'League Spartan'; src: url('${leagueSpartanBold}') format('truetype'); font-weight: bold; }\n\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeLight}') format('truetype'); font-weight: 300; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeLightItalic}') format('truetype'); font-weight: 300; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeRegular}') format('truetype'); font-weight: 400; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeItalic}') format('truetype'); font-weight: 400; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeMedium}') format('truetype'); font-weight: 500; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeMediumItalic}') format('truetype'); font-weight: 500; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeSemiBold}') format('truetype'); font-weight: 600; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeSemiBoldItalic}') format('truetype'); font-weight: 600; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeBold}') format('truetype'); font-weight: 700; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeBoldItalic}') format('truetype'); font-weight: 700; font-style: italic; }\n\n@font-face { font-family: 'Material Symbols Rounded'; src: url('${materialSymbolsRounded}') format('woff2'); font-weight: 100 900; font-style: normal; font-display: block; }\n`;\n\nlet injected = false;\n\nexport const loadFonts = () => {\n  if (typeof document === 'undefined' || injected) return;\n  injected = true;\n  const style = document.createElement('style');\n  style.textContent = fontFaceCSS;\n  document.head.appendChild(style);\n};\n","import { useLayoutEffect } from 'react';\nimport { ThemeProviderComponent } from './ThemeProvider.interface';\nimport type { Theme } from './ThemeProvider.interface';\nimport { useCreateThemeStyles } from './useThemeProvider.hook';\nimport { loadFonts } from './fonts/loadFonts';\nimport { ToastProvider } from '@components/molecules/Toast';\n\nconst ThemeProvider = <T extends readonly Theme[]>(props: ThemeProviderComponent<T>) => {\n  const { themes, theme: selectedTheme, children, toast } = props;\n  useCreateThemeStyles(themes, selectedTheme);\n  useLayoutEffect(() => {\n    loadFonts();\n  }, []);\n\n  return (\n    <ToastProvider position={toast?.position} duration={toast?.duration}>\n      {children}\n    </ToastProvider>\n  );\n};\n\nexport default ThemeProvider;\n"],"mappings":";;;;AA2BA,IAAM,IAAc;gDA3BE,IAAA,IAAA,iv1IAAA,KAAA,OAAA,KAAA,IAA2E,CAAC,KA4BpC;gDA3BzC,IAAA,IAAA,qy1IAAA,KAAA,OAAA,KAAA,IAA0E,CAAC,KA4BnC;gDA3BtC,IAAA,IAAA,qt1IAAA,KAAA,OAAA,KAAA,IAA4E,CAAC,KA4BrC;gDA3B5C,IAAA,IAAA,iz1IAAA,KAAA,OAAA,KAAA,IAAwE,CAAC,KA4BjC;;wDA1B9B,IAAA,IAAA,im0EAAA,KAAA,OAAA,KAAA,IAAyF,CACnH,KA2B0E;wDA1BnD,IAAA,IAAA,yv0EAAA,KAAA,OAAA,KAAA,IAAsF,CAAC,KA2BvC;;0DAzB9C,IAAA,IAAA,qgvEAAA,KAAA,OAAA,KAAA,IAA0E,CAAC,KA2BzB;0DA1B5C,IAAA,IAAA,q30EAAA,KAAA,OAAA,KAAA,IAAgF,CAAC,KA2B/B;0DA1BtD,IAAA,IAAA,yqvEAAA,KAAA,OAAA,KAAA,IAA4E,CAAC,KA2B3B;0DA1BnD,IAAA,IAAA,y80EAAA,KAAA,OAAA,KAAA,IAA2E,CAAC,KA2B1B;0DA1BlD,IAAA,IAAA,ykvEAAA,KAAA,OAAA,KAAA,IAA2E,CAAC,KA2B1B;0DA1B5C,IAAA,IAAA,qj1EAAA,KAAA,OAAA,KAAA,IAAiF,CACjH,KA0BkF;0DAzBtD,IAAA,IAAA,ihwEAAA,KAAA,OAAA,KAAA,IAA6E,CAAC,KA0B5B;0DAzB5C,IAAA,IAAA,y/1EAAA,KAAA,OAAA,KAAA,IAAmF,CACrH,KAyBoF;0DAxB5D,IAAA,IAAA,qxwEAAA,KAAA,OAAA,KAAA,IAAyE,CAAC,KAyBxB;0DAxB5C,IAAA,IAAA,qo2EAAA,KAAA,OAAA,KAAA,IAA+E,CAAC,KAyB9B;;kEAvBpD,IAAA,IAAA,m7pxNAAA,KAAA,OAAA,KAAA,IAG9B,CAAC,KAsBuF;GAGrF,IAAW,IAEF,UAAkB;CAC7B,IAAI,OAAO,WAAa,OAAe,GAAU;CACjD,IAAW;CACX,IAAM,IAAQ,SAAS,cAAc,QAAQ;CAE7C,AADA,EAAM,cAAc,GACpB,SAAS,KAAK,YAAY,EAAM;GClD5B,KAA6C,MAAqC;CACtF,IAAM,EAAE,WAAQ,OAAO,GAAe,aAAU,aAAU;CAM1D,OALA,EAAqB,GAAQ,EAAc,EAC3C,QAAsB;EACpB,GAAW;IACV,EAAE,CAAC,EAGJ,kBAAC,GAAD;EAAe,UAAU,GAAO;EAAU,UAAU,GAAO;EACxD;EACa,CAAA"}

package/dist/Toast-_9W7YGxS.js

@@ -0,0 +1,146 @@
+import { a as e, i as t, n, o as r, s as i, t as a } from "./IconButton-C3x-E-ot.js";
+import { r as o } from "./theme-BjrtNRDQ.js";
+import { createContext as s, useCallback as c, useContext as l, useMemo as u, useState as d } from "react";
+import { css as f, keyframes as p } from "@emotion/react";
+//#region src/components/molecules/Toast/Toast.emotion.ts
+var m = (e) => {
+	let t = e.endsWith("left"), n = e.endsWith("center"), r = e.startsWith("top");
+	return n ? r ? "translateY(-20px)" : "translateY(20px)" : t ? "translateX(-20px)" : "translateX(20px)";
+}, h = (e) => p`
+  from { transform: ${m(e)}; opacity: 0; }
+  to { transform: none; opacity: 1; }
+`, g = (e) => p`
+  from { transform: none; opacity: 1; }
+  to { transform: ${m(e)}; opacity: 0; }
+`, _ = (e = "bottom-right") => {
+	let t = e.startsWith("top"), n = e.endsWith("center"), r = e.endsWith("left");
+	return f`
+    &.--TOAST-zone {
+      position: fixed;
+      ${t ? "top: 24px;" : "bottom: 24px;"}
+      ${n ? "left: 50%; transform: translateX(-50%);" : r ? "left: 24px;" : "right: 24px;"}
+      display: flex;
+      flex-direction: ${t ? "column" : "column-reverse"};
+      gap: 8px;
+      z-index: 9000;
+      pointer-events: none;
+    }
+  `;
+}, v = (e) => `
+    // BORDERS
+    ${o(e, "border-color", "--TOAST-EVENTS-ENABLED-BORDER-COLOR")}
+    ${o(e, "border-width", "--TOAST-EVENTS-ENABLED-BORDER-WIDTH")}
+    ${o(e, "border-style", "--TOAST-EVENTS-ENABLED-BORDER-STYLE")}
+  `, y = (e, t = "bottom-right") => f`
+  &.--TOAST {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px;
+    min-width: 280px;
+    max-width: 420px;
+    height: 48px;
+    pointer-events: auto;
+    box-shadow:
+      rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
+      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
+      rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+    box-sizing: border-box;
+    animation: ${h(t)} 150ms ease-in-out;
+
+    &.--TOAST-exiting {
+      animation: ${g(t)} 150ms ease-in-out forwards;
+    }
+
+    ${o(e, "border-radius", "--TOAST-ROOT-BORDER-RADIUS")};
+    ${o(e, "background-color", "--TOAST-EVENTS-ENABLED-BACKGROUND-COLOR")};
+    ${o(e, "color", "--TOAST-EVENTS-ENABLED-COLOR-PRIMARY")};
+    ${v(e)};
+
+    .--TOAST-icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      ${o(e, "color", "--TOAST-EVENTS-ENABLED-ICON-COLOR")};
+    }
+
+    .--TOAST-message {
+      flex: 1;
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.875rem;
+      line-height: 1.4;
+    }
+  }
+`, b = "--TOAST", x = ({ message: r, icon: i, style: o = {}, position: s = "bottom-right", exiting: c, closable: l, onClose: u }) => /* @__PURE__ */ e("div", {
+	className: [b, c ? `${b}-exiting` : ""].filter(Boolean).join(" "),
+	css: y(o, s),
+	role: "status",
+	"data-testid": b,
+	children: [
+		i && /* @__PURE__ */ t("span", {
+			className: `${b}-icon`,
+			"data-testid": `${b}-icon`,
+			children: /* @__PURE__ */ t(n, { name: i })
+		}),
+		/* @__PURE__ */ t("span", {
+			className: `${b}-message`,
+			"data-testid": `${b}-message`,
+			children: r
+		}),
+		l && u && /* @__PURE__ */ t(a, {
+			icon: /* @__PURE__ */ t(n, { name: "close" }),
+			onClick: u,
+			"data-testid": `${b}-close`
+		})
+	]
+}), S = s(null), C = "--TOAST", w = 300, T = ({ message: e, variant: n, icon: a, position: o, exiting: s, closable: c, onClose: l }) => {
+	let { componentStyles: u } = i([r.TOAST], void 0, n.toUpperCase());
+	return /* @__PURE__ */ t(x, {
+		message: e,
+		icon: a,
+		style: u,
+		position: o,
+		exiting: s,
+		closable: c,
+		onClose: l
+	});
+}, E = ({ children: n, duration: r = 3e3, position: i = "bottom-right" }) => {
+	let [a, o] = d([]), s = c((e) => {
+		o((t) => t.map((t) => t.id === e ? {
+			...t,
+			exiting: !0
+		} : t)), window.setTimeout(() => o((t) => t.filter((t) => t.id !== e)), w);
+	}, []), l = c((e, t = {}) => {
+		let { variant: n = "default", icon: i, duration: a, closable: c } = t, l = crypto.randomUUID();
+		o((t) => [...t, {
+			id: l,
+			message: e,
+			variant: n,
+			icon: i,
+			closable: c
+		}]), window.setTimeout(() => s(l), a ?? r);
+	}, [r, s]), f = u(() => ({ push: l }), [l]);
+	return /* @__PURE__ */ e(S.Provider, {
+		value: f,
+		children: [n, /* @__PURE__ */ t("div", {
+			className: `${C}-zone`,
+			css: _(i),
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			"data-testid": `${C}-zone`,
+			children: a.map((e) => /* @__PURE__ */ t(T, {
+				...e,
+				position: i,
+				onClose: () => s(e.id)
+			}, e.id))
+		})]
+	});
+}, D = () => {
+	let e = l(S);
+	if (!e) throw Error("useToast must be used inside <ToastProvider>");
+	return e;
+};
+//#endregion
+export { E as n, D as t };
+
+//# sourceMappingURL=Toast-_9W7YGxS.js.map

package/dist/Toast-_9W7YGxS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast-_9W7YGxS.js","names":[],"sources":["../src/components/molecules/Toast/Toast.emotion.ts","../src/components/molecules/Toast/Toast.tsx","../src/components/molecules/Toast/Toast.context.ts","../src/components/molecules/Toast/Toast.provider.tsx","../src/components/molecules/Toast/Toast.hook.ts"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\nimport type { ToastPosition } from './Toast.interface';\n\nconst getOffset = (position: ToastPosition): string => {\n  const isLeft = position.endsWith('left');\n  const isCenter = position.endsWith('center');\n  const isTop = position.startsWith('top');\n  if (isCenter) return isTop ? 'translateY(-20px)' : 'translateY(20px)';\n  return isLeft ? 'translateX(-20px)' : 'translateX(20px)';\n};\n\nconst getToastIn = (position: ToastPosition) => keyframes`\n  from { transform: ${getOffset(position)}; opacity: 0; }\n  to { transform: none; opacity: 1; }\n`;\n\nconst getToastOut = (position: ToastPosition) => keyframes`\n  from { transform: none; opacity: 1; }\n  to { transform: ${getOffset(position)}; opacity: 0; }\n`;\n\nexport const zoneStyle = (position: ToastPosition = 'bottom-right') => {\n  const isTop = position.startsWith('top');\n  const isCenter = position.endsWith('center');\n  const isLeft = position.endsWith('left');\n\n  return css`\n    &.--TOAST-zone {\n      position: fixed;\n      ${isTop ? 'top: 24px;' : 'bottom: 24px;'}\n      ${isCenter ? 'left: 50%; transform: translateX(-50%);' : isLeft ? 'left: 24px;' : 'right: 24px;'}\n      display: flex;\n      flex-direction: ${isTop ? 'column' : 'column-reverse'};\n      gap: 8px;\n      z-index: 9000;\n      pointer-events: none;\n    }\n  `;\n};\n\nconst border = (theme: Record<string, string>): string => {\n  return `\n    // BORDERS\n    ${getStyle(theme, 'border-color', `--TOAST-EVENTS-ENABLED-BORDER-COLOR`)}\n    ${getStyle(theme, 'border-width', `--TOAST-EVENTS-ENABLED-BORDER-WIDTH`)}\n    ${getStyle(theme, 'border-style', `--TOAST-EVENTS-ENABLED-BORDER-STYLE`)}\n  `;\n};\n\nconst itemStyle = (theme: Record<string, string>, position: ToastPosition = 'bottom-right') => css`\n  &.--TOAST {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px;\n    min-width: 280px;\n    max-width: 420px;\n    height: 48px;\n    pointer-events: auto;\n    box-shadow:\n      rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,\n      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,\n      rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n    box-sizing: border-box;\n    animation: ${getToastIn(position)} 150ms ease-in-out;\n\n    &.--TOAST-exiting {\n      animation: ${getToastOut(position)} 150ms ease-in-out forwards;\n    }\n\n    ${getStyle(theme, 'border-radius', '--TOAST-ROOT-BORDER-RADIUS')};\n    ${getStyle(theme, 'background-color', '--TOAST-EVENTS-ENABLED-BACKGROUND-COLOR')};\n    ${getStyle(theme, 'color', '--TOAST-EVENTS-ENABLED-COLOR-PRIMARY')};\n    ${border(theme)};\n\n    .--TOAST-icon {\n      display: flex;\n      align-items: center;\n      flex-shrink: 0;\n      ${getStyle(theme, 'color', '--TOAST-EVENTS-ENABLED-ICON-COLOR')};\n    }\n\n    .--TOAST-message {\n      flex: 1;\n      font-family: ${theme['--FONTFAMILY-PRIMARY']};\n      font-size: 0.875rem;\n      line-height: 1.4;\n    }\n  }\n`;\n\nexport default itemStyle;\n","import type { FC } from 'react';\nimport Icon from '@components/atoms/Icon';\nimport IconButton from '@components/atoms/IconButton';\nimport itemStyle from './Toast.emotion';\nimport type { ToastBaseProps } from './Toast.interface';\n\nconst CLASS = '--TOAST';\n\nconst Toast: FC<ToastBaseProps> = ({\n  message,\n  icon,\n  style = {},\n  position = 'bottom-right',\n  exiting,\n  closable,\n  onClose,\n}) => (\n  <div\n    className={[CLASS, exiting ? `${CLASS}-exiting` : ''].filter(Boolean).join(' ')}\n    css={itemStyle(style, position)}\n    role='status'\n    data-testid={CLASS}\n  >\n    {icon && (\n      <span className={`${CLASS}-icon`} data-testid={`${CLASS}-icon`}>\n        <Icon name={icon} />\n      </span>\n    )}\n    <span className={`${CLASS}-message`} data-testid={`${CLASS}-message`}>\n      {message}\n    </span>\n    {closable && onClose && (\n      <IconButton icon={<Icon name='close' />} onClick={onClose} data-testid={`${CLASS}-close`} />\n    )}\n  </div>\n);\n\nexport default Toast;\n","import { createContext } from 'react';\nimport type { ToastApi } from './Toast.interface';\n\nexport const ToastContext = createContext<ToastApi | null>(null);\n","import { useCallback, useMemo, useState, type FC } from 'react';\nimport { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport { zoneStyle } from './Toast.emotion';\nimport ToastBase from './Toast';\nimport type { ToastItem, ToastApi, ToastOptions, ToastProviderProps, ToastPosition } from './Toast.interface';\nimport { ToastContext } from './Toast.context';\n\nconst CLASS = '--TOAST';\nconst ANIM_DURATION = 300;\n\nconst ToastItemWrapper: FC<ToastItem & { position: ToastPosition; onClose: () => void }> = ({\n  message,\n  variant,\n  icon,\n  position,\n  exiting,\n  closable,\n  onClose,\n}) => {\n  const { componentStyles } = useCreateComponentStyles([Component.TOAST], undefined, variant.toUpperCase());\n  return (\n    <ToastBase\n      message={message}\n      icon={icon}\n      style={componentStyles}\n      position={position}\n      exiting={exiting}\n      closable={closable}\n      onClose={onClose}\n    />\n  );\n};\n\nexport const ToastProvider: FC<ToastProviderProps> = ({ children, duration = 3000, position = 'bottom-right' }) => {\n  const [items, setItems] = useState<ToastItem[]>([]);\n\n  const dismiss = useCallback((id: string) => {\n    setItems(prev => prev.map(t => (t.id === id ? { ...t, exiting: true } : t)));\n    window.setTimeout(() => setItems(prev => prev.filter(t => t.id !== id)), ANIM_DURATION);\n  }, []);\n\n  const push = useCallback(\n    (message: ToastItem['message'], options: ToastOptions = {}) => {\n      const { variant = 'default', icon, duration: d, closable } = options;\n      const id = crypto.randomUUID();\n      setItems(prev => [...prev, { id, message, variant, icon, closable }]);\n      window.setTimeout(() => dismiss(id), d ?? duration);\n    },\n    [duration, dismiss],\n  );\n\n  const api = useMemo<ToastApi>(() => ({ push }), [push]);\n\n  return (\n    <ToastContext.Provider value={api}>\n      {children}\n      <div\n        className={`${CLASS}-zone`}\n        css={zoneStyle(position)}\n        aria-live='polite'\n        aria-atomic='true'\n        data-testid={`${CLASS}-zone`}\n      >\n        {items.map(t => (\n          <ToastItemWrapper key={t.id} {...t} position={position} onClose={() => dismiss(t.id)} />\n        ))}\n      </div>\n    </ToastContext.Provider>\n  );\n};\n","import { useContext } from 'react';\nimport { ToastContext } from './Toast.context';\n\nexport const useToast = () => {\n  const ctx = useContext(ToastContext);\n  if (!ctx) throw new Error('useToast must be used inside <ToastProvider>');\n  return ctx;\n};\n"],"mappings":";;;;;AAIA,IAAM,KAAa,MAAoC;CACrD,IAAM,IAAS,EAAS,SAAS,OAAO,EAClC,IAAW,EAAS,SAAS,SAAS,EACtC,IAAQ,EAAS,WAAW,MAAM;CAExC,OADI,IAAiB,IAAQ,sBAAsB,qBAC5C,IAAS,sBAAsB;GAGlC,KAAc,MAA4B,CAAS;sBACnC,EAAU,EAAS,CAAC;;GAIpC,KAAe,MAA4B,CAAS;;oBAEtC,EAAU,EAAS,CAAC;GAG3B,KAAa,IAA0B,mBAAmB;CACrE,IAAM,IAAQ,EAAS,WAAW,MAAM,EAClC,IAAW,EAAS,SAAS,SAAS,EACtC,IAAS,EAAS,SAAS,OAAO;CAExC,OAAO,CAAG;;;QAGJ,IAAQ,eAAe,gBAAgB;QACvC,IAAW,4CAA4C,IAAS,gBAAgB,eAAe;;wBAE/E,IAAQ,WAAW,iBAAiB;;;;;;GAQtD,KAAU,MACP;;MAEH,EAAS,GAAO,gBAAgB,sCAAsC,CAAC;MACvE,EAAS,GAAO,gBAAgB,sCAAsC,CAAC;MACvE,EAAS,GAAO,gBAAgB,sCAAsC,CAAC;KAIvE,KAAa,GAA+B,IAA0B,mBAAmB,CAAG;;;;;;;;;;;;;;;iBAejF,EAAW,EAAS,CAAC;;;mBAGnB,EAAY,EAAS,CAAC;;;MAGnC,EAAS,GAAO,iBAAiB,6BAA6B,CAAC;MAC/D,EAAS,GAAO,oBAAoB,0CAA0C,CAAC;MAC/E,EAAS,GAAO,SAAS,uCAAuC,CAAC;MACjE,EAAO,EAAM,CAAC;;;;;;QAMZ,EAAS,GAAO,SAAS,oCAAoC,CAAC;;;;;qBAKjD,EAAM,wBAAwB;;;;;GC/E7C,IAAQ,WAER,KAA6B,EACjC,YACA,SACA,WAAQ,EAAE,EACV,cAAW,gBACX,YACA,aACA,iBAEA,kBAAC,OAAD;CACE,WAAW,CAAC,GAAO,IAAU,GAAG,EAAM,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;CAC/E,KAAK,EAAU,GAAO,EAAS;CAC/B,MAAK;CACL,eAAa;WAJf;EAMG,KACC,kBAAC,QAAD;GAAM,WAAW,GAAG,EAAM;GAAQ,eAAa,GAAG,EAAM;aACtD,kBAAC,GAAD,EAAM,MAAM,GAAQ,CAAA;GACf,CAAA;EAET,kBAAC,QAAD;GAAM,WAAW,GAAG,EAAM;GAAW,eAAa,GAAG,EAAM;aACxD;GACI,CAAA;EACN,KAAY,KACX,kBAAC,GAAD;GAAY,MAAM,kBAAC,GAAD,EAAM,MAAK,SAAU,CAAA;GAAE,SAAS;GAAS,eAAa,GAAG,EAAM;GAAW,CAAA;EAE1F;IC/BK,IAAe,EAA+B,KAAK,ECK1D,IAAQ,WACR,IAAgB,KAEhB,KAAsF,EAC1F,YACA,YACA,SACA,aACA,YACA,aACA,iBACI;CACJ,IAAM,EAAE,uBAAoB,EAAyB,CAAC,EAAU,MAAM,EAAE,KAAA,GAAW,EAAQ,aAAa,CAAC;CACzG,OACE,kBAAC,GAAD;EACW;EACH;EACN,OAAO;EACG;EACD;EACC;EACD;EACT,CAAA;GAIO,KAAyC,EAAE,aAAU,cAAW,KAAM,cAAW,qBAAqB;CACjH,IAAM,CAAC,GAAO,KAAY,EAAsB,EAAE,CAAC,EAE7C,IAAU,GAAa,MAAe;EAE1C,AADA,GAAS,MAAQ,EAAK,KAAI,MAAM,EAAE,OAAO,IAAK;GAAE,GAAG;GAAG,SAAS;GAAM,GAAG,EAAG,CAAC,EAC5E,OAAO,iBAAiB,GAAS,MAAQ,EAAK,QAAO,MAAK,EAAE,OAAO,EAAG,CAAC,EAAE,EAAc;IACtF,EAAE,CAAC,EAEA,IAAO,GACV,GAA+B,IAAwB,EAAE,KAAK;EAC7D,IAAM,EAAE,aAAU,WAAW,SAAM,UAAU,GAAG,gBAAa,GACvD,IAAK,OAAO,YAAY;EAE9B,AADA,GAAS,MAAQ,CAAC,GAAG,GAAM;GAAE;GAAI;GAAS;GAAS;GAAM;GAAU,CAAC,CAAC,EACrE,OAAO,iBAAiB,EAAQ,EAAG,EAAE,KAAK,EAAS;IAErD,CAAC,GAAU,EAAQ,CACpB,EAEK,IAAM,SAAyB,EAAE,SAAM,GAAG,CAAC,EAAK,CAAC;CAEvD,OACE,kBAAC,EAAa,UAAd;EAAuB,OAAO;YAA9B,CACG,GACD,kBAAC,OAAD;GACE,WAAW,GAAG,EAAM;GACpB,KAAK,EAAU,EAAS;GACxB,aAAU;GACV,eAAY;GACZ,eAAa,GAAG,EAAM;aAErB,EAAM,KAAI,MACT,kBAAC,GAAD;IAA6B,GAAI;IAAa;IAAU,eAAe,EAAQ,EAAE,GAAG;IAAI,EAAjE,EAAE,GAA+D,CACxF;GACE,CAAA,CACgB;;GCjEf,UAAiB;CAC5B,IAAM,IAAM,EAAW,EAAa;CACpC,IAAI,CAAC,GAAK,MAAU,MAAM,+CAA+C;CACzE,OAAO"}

package/dist/atoms.mjs

@@ -1,3 +1,4 @@
-import { n as e, o as t, r as n } from "./RadioGroup.context-CdFGi5z1.js";
-import { a as r, c as i, i as a, n as o, o as s, r as c, s as l, t as u } from "./Switch-DK5hEXUS.js";
-export { i as Button, n as Checkbox, l as DatePicker, t as Icon, e as IconButton, r as NumberField, a as Radio, c as Select, o as Slider, u as Switch, s as TextField };
+import { n as e, t } from "./IconButton-C3x-E-ot.js";
+import { a as n, c as r, i, n as a, o, r as s, s as c, t as l } from "./Switch-6eNmT34-.js";
+import { n as u } from "./RadioGroup.context-v_CCYB7_.js";
+export { r as Button, u as Checkbox, c as DatePicker, e as Icon, t as IconButton, n as NumberField, i as Radio, s as Select, a as Slider, l as Switch, o as TextField };

package/dist/components/atoms/Button/Button.interface.d.ts

@@ -1,5 +1,5 @@
 import React, { type ReactNode, type JSX } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/Button';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/Button';
 export interface ButtonStyleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
     /** Content rendered inside the button. Can be a string, element, or any React node.
      * @default 'Click me!'

package/dist/components/atoms/Checkbox/Checkbox.interface.d.ts

@@ -1,7 +1,7 @@
 import React, { type JSX } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/Checkbox';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/Checkbox';
 import type { Control, FieldValues } from 'react-hook-form';
-/** Internal props used by CheckboxBase — the headless presentational layer. */
+/** Internal props used by CheckboxBase — the headless presentational layer. */
 export interface CheckboxBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'checked' | 'style'> {
     /** Text label displayed next to the checkbox. */
     label?: string;
@@ -57,7 +57,7 @@ export interface CheckboxStyleProps<TFieldValues extends FieldValues = FieldValu
      * @default 'default'
      */
     variant?: string;
-    /** Controlled mode — callback fired when the checked state changes.
+    /** Controlled mode — callback fired when the checked state changes.
      * Use this prop together with the `checked` attribute instead of RHF `control`.
      */
     onChecked?: (checked: boolean) => void;

package/dist/components/atoms/Chip/Chip.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { ChipBaseProps } from './Chip.interface';
+declare const Chip: FC<ChipBaseProps>;
+export default Chip;

package/dist/components/atoms/Chip/Chip.emotion.d.ts

@@ -0,0 +1,2 @@
+declare const Style: (theme: Record<string, string>) => import("@emotion/utils").SerializedStyles;
+export default Style;

package/dist/components/atoms/Chip/Chip.interface.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/Chip';
+export type ChipVariant = 'default' | 'ok' | 'warn' | 'err' | 'blue' | 'ghost';
+export interface ChipBaseProps {
+    children: ReactNode;
+    className?: string;
+    style?: Record<string, string>;
+}
+export interface ChipStyleProps {
+    children: ReactNode;
+    className?: string;
+    variant?: ChipVariant;
+    theme?: EVENTS;
+}

package/dist/components/atoms/Chip/index.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { ChipStyleProps } from './Chip.interface';
+export type { ChipStyleProps, ChipVariant } from './Chip.interface';
+declare const Chip: FC<ChipStyleProps>;
+export default Chip;

package/dist/components/atoms/DatePicker/DatePicker.interface.d.ts

@@ -1,5 +1,5 @@
 import type { Control, FieldValues } from 'react-hook-form';
-import type { EVENTS } from '@hocs/ThemeProvider/components/DatePicker';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/DatePicker';
 export interface DatePickerStyleProps<TFieldValues extends FieldValues = FieldValues> {
     /** RHF field name. The form value will be a `Date`. */
     name: string;
@@ -76,7 +76,7 @@ export declare enum DaysEsProps {
     Mi = "Mi",
     Ju = "Ju",
     Vi = "Vi",
-    Sa = "S\u00E1",
+    Sa = "S\u00C3\u00A1",
     Do = "Do"
 }
 export declare enum MonthsEnProps {

package/dist/components/atoms/DatePicker/DatePickerMenu/DatePickerMenu.interface.d.ts

@@ -1,5 +1,5 @@
 import type { DateCell } from '../DatePicker.interface';
-import type { EVENTS } from '@hocs/ThemeProvider/components/DatePickerMenu';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/DatePickerMenu';
 export interface DatePickerMenuStyleProps {
     /** Whether the calendar popup is visible. */
     isOpen: boolean;
@@ -23,13 +23,13 @@ export interface DatePickerMenuStyleProps {
     weeks?: DateCell[][];
     /** Year rows for the year-picker grid. */
     years?: DateCell[][];
-    /** Short weekday labels ordered for the current language (Mon–Sun or Sun–Sat). */
+    /** Short weekday labels ordered for the current language (Mon–Sun or Sun–Sat). */
     daysOfWeek?: string[];
     /** Currently selected `Date` value (used to highlight the selected day). */
     selectedValue?: Date;
     /** date-fns format string matching the cells' `value` strings. */
     format?: string;
-    /** Today's date — used to render the "today" dot indicator. */
+    /** Today's date — used to render the "today" dot indicator. */
     today?: Date;
     /** Index into the flattened `weeks` array that currently has keyboard focus. */
     focusedElement?: number;

package/dist/components/atoms/IconButton/IconButton.interface.d.ts

@@ -1,9 +1,9 @@
 import React, { type JSX } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/IconButton';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/IconButton';
 export interface IconButtonStyleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
     /** The icon element rendered inside the button. */
     icon: JSX.Element;
-    /** Click handler. Required — IconButton is always interactive. */
+    /** Click handler. Required — IconButton is always interactive. */
     onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** When `true`, horizontally mirrors the icon via a CSS transform.
      * Useful for directional icons (e.g. an arrow that should point left).

package/dist/components/atoms/NumberField/NumberField.interface.d.ts

@@ -1,7 +1,7 @@
 import React, { type JSX } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/NumberField';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/NumberField';
 import type { Control, FieldValues } from 'react-hook-form';
-/** Internal props used by NumberFieldBase — the headless presentational layer. */
+/** Internal props used by NumberFieldBase — the headless presentational layer. */
 export interface NumberFieldBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'style' | 'value' | 'type'> {
     label: string;
     value: string;

package/dist/components/atoms/Radio/Radio.interface.d.ts

@@ -1,6 +1,6 @@
 import React, { type JSX } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/Radio';
-/** Internal props used by RadioBase — the headless presentational layer. */
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/Radio';
+/** Internal props used by RadioBase — the headless presentational layer. */
 export interface RadioBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'checked' | 'style'> {
     /** The string value this radio option represents. Matched against the RadioGroup's selected value. */
     value: string;

package/dist/components/atoms/Select/Select.interface.d.ts

@@ -1,4 +1,4 @@
-import type { EVENTS } from '@hocs/ThemeProvider/components/Select';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/Select';
 import type { Control, FieldValues } from 'react-hook-form';
 import type { OptionProp } from '@interfaces';
 export interface SelectStyleProps<TFieldValues extends FieldValues = FieldValues> {
@@ -14,7 +14,7 @@ export interface SelectStyleProps<TFieldValues extends FieldValues = FieldValues
      * @default false
      */
     disabled?: boolean;
-    /** Number of options rendered per "page" — additional options are loaded as the user scrolls.
+    /** Number of options rendered per "page" — additional options are loaded as the user scrolls.
      * Must be greater than 3 to activate virtual scrolling. Defaults to all options at once.
      * @default 100
      */

package/dist/components/atoms/Select/SelectMenu/SelectMenu.interface.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/SelectMenu';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/SelectMenu';
 import type { MenuOption } from '@interfaces';
 export interface SelectMenuStyleProps {
     /** The current list of options to render. Controlled by the parent Select. */

package/dist/components/atoms/Slider/Slider.interface.d.ts

@@ -1,5 +1,5 @@
 import { type JSX } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/Slider';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/Slider';
 import type { Control, FieldValues } from 'react-hook-form';
 export interface SliderStyleProps<TFieldValues extends FieldValues = FieldValues> {
     /** RHF field name. The form value must be `number[]`.
@@ -20,7 +20,7 @@ export interface SliderStyleProps<TFieldValues extends FieldValues = FieldValues
      * @default false
      */
     disabled?: boolean;
-    /** Granularity of the value — each thumb snaps to multiples of `step`.
+    /** Granularity of the value — each thumb snaps to multiples of `step`.
      * @default 1
      */
     step?: number;
@@ -45,8 +45,8 @@ export interface SliderStyleProps<TFieldValues extends FieldValues = FieldValues
      */
     direction?: 'horizontal' | 'vertical';
     /** Controls which side of the thumb the filled track appears on.
-     * - `'normal'` — fills from `min` toward the value (or between thumbs in range mode).
-     * - `'inverted'` — fills from the value toward `max` (or outside the thumbs in range mode).
+     * - `'normal'` — fills from `min` toward the value (or between thumbs in range mode).
+     * - `'inverted'` — fills from the value toward `max` (or outside the thumbs in range mode).
      * @default 'normal'
      */
     track?: 'normal' | 'inverted';

package/dist/components/atoms/Switch/Switch.interface.d.ts

@@ -1,5 +1,5 @@
 import React, { type JSX } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/Switch';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/Switch';
 import type { Control, FieldValues } from 'react-hook-form';
 export interface SwitchStyleProps<TFieldValues extends FieldValues = FieldValues> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'style'> {
     /** RHF field name. The form value will be a `boolean`. */

package/dist/components/atoms/TextField/TextField.interface.d.ts

@@ -1,7 +1,7 @@
 import React, { type JSX } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/TextField';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/TextField';
 import type { Control, FieldValues } from 'react-hook-form';
-/** Internal props used by TextFieldBase — the headless presentational layer. */
+/** Internal props used by TextFieldBase — the headless presentational layer. */
 export interface TextFieldBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'style' | 'value'> {
     label: string;
     value: string;

package/dist/components/molecules/CheckboxGroup/CheckboxGroup.interface.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/CheckboxGroup';
+import type { EVENTS } from '@hocs/ThemeProvider/components/molecules/CheckboxGroup';
 import type { Control, FieldValues } from 'react-hook-form';
 export interface CheckboxGroupStyleProps<TFieldValues extends FieldValues = FieldValues> {
-    /** RHF field name. The form value will be `string[]` — the `value` props of all checked children. */
+    /** RHF field name. The form value will be `string[]` — the `value` props of all checked children. */
     name: string;
     /** RHF control object. */
     control: Control<TFieldValues>;

package/dist/components/molecules/CheckboxTree/CheckboxTree.interface.d.ts

@@ -1,8 +1,8 @@
 import React, { type JSX } from 'react';
 import type { Control, FieldValues } from 'react-hook-form';
-import type { EVENTS } from '@hocs/ThemeProvider/components/Checkbox';
+import type { EVENTS } from '@hocs/ThemeProvider/components/atoms/Checkbox';
 export interface CheckboxTreeStyleProps<TFieldValues extends FieldValues = FieldValues> {
-    /** RHF field name. The form value will be `string[]` — the `value` props of all checked children. */
+    /** RHF field name. The form value will be `string[]` — the `value` props of all checked children. */
     name: string;
     /** RHF control object. */
     control: Control<TFieldValues>;

package/dist/components/molecules/Modal/Modal.interface.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/Modal';
+import type { EVENTS } from '@hocs/ThemeProvider/components/molecules/Modal';
 export interface ModalStyleProps {
     /** Controls visibility of the modal. */
     open: boolean;
@@ -9,13 +9,13 @@ export interface ModalStyleProps {
      * Use `--MODAL-title` class on your title element to apply the themed title styles.
      */
     header?: ReactNode;
-    /** When `true`, renders a × close button at the end of the header bar.
+    /** When `true`, renders a × close button at the end of the header bar.
      * @default true
      */
     showCloseButton?: boolean;
     /** Width preset.
-     * - `'md'` — 480 px (default)
-     * - `'lg'` — 720 px
+     * - `'md'` — 480 px (default)
+     * - `'lg'` — 720 px
      * @default 'md'
      */
     size?: 'md' | 'lg';

package/dist/components/molecules/RadioGroup/RadioGroup.interface.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/RadioGroup';
+import type { EVENTS } from '@hocs/ThemeProvider/components/molecules/RadioGroup';
 import type { Control, FieldValues } from 'react-hook-form';
 export interface RadioGroupStyleProps<TFieldValues extends FieldValues = FieldValues> {
-    /** RHF field name. The form value will be a `string` — the `value` prop of the selected Radio. */
+    /** RHF field name. The form value will be a `string` — the `value` prop of the selected Radio. */
     name: string;
     /** RHF control object. */
     control: Control<TFieldValues>;

package/dist/components/molecules/Toast/Toast.context.d.ts

@@ -0,0 +1,2 @@
+import type { ToastApi } from './Toast.interface';
+export declare const ToastContext: import("react").Context<ToastApi | null>;

package/dist/components/molecules/Toast/Toast.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { ToastBaseProps } from './Toast.interface';
+declare const Toast: FC<ToastBaseProps>;
+export default Toast;

package/dist/components/molecules/Toast/Toast.emotion.d.ts

@@ -0,0 +1,4 @@
+import type { ToastPosition } from './Toast.interface';
+export declare const zoneStyle: (position?: ToastPosition) => import("@emotion/utils").SerializedStyles;
+declare const itemStyle: (theme: Record<string, string>, position?: ToastPosition) => import("@emotion/utils").SerializedStyles;
+export default itemStyle;

package/dist/components/molecules/Toast/Toast.hook.d.ts

@@ -0,0 +1 @@
+export declare const useToast: () => import("./Toast.interface").ToastApi;

package/dist/components/molecules/Toast/Toast.interface.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+export interface ToastItem {
+    id: string;
+    message: ReactNode;
+    variant: string;
+    icon?: string;
+    closable?: boolean;
+    exiting?: boolean;
+}
+export interface ToastOptions {
+    variant?: string;
+    icon?: string;
+    duration?: number;
+    closable?: boolean;
+}
+export interface ToastApi {
+    push: (message: ReactNode, options?: ToastOptions) => void;
+}
+export interface ToastBaseProps {
+    message: ReactNode;
+    icon?: string;
+    style?: Record<string, string>;
+    position?: ToastPosition;
+    exiting?: boolean;
+    closable?: boolean;
+    onClose?: () => void;
+}
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastProviderProps {
+    children: ReactNode;
+    duration?: number;
+    position?: ToastPosition;
+}

package/dist/components/molecules/Toast/Toast.provider.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import type { ToastProviderProps } from './Toast.interface';
+export declare const ToastProvider: FC<ToastProviderProps>;

package/dist/components/molecules/Toast/index.d.ts

@@ -0,0 +1,3 @@
+export { ToastProvider } from './Toast.provider';
+export { useToast } from './Toast.hook';
+export type { ToastApi, ToastOptions, ToastProviderProps, ToastPosition } from './Toast.interface';

package/dist/components/organisms/DataGrid/DataGrid.interface.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { EVENTS } from '@hocs/ThemeProvider/components/DataGrid';
+import type { EVENTS } from '@hocs/ThemeProvider/components/organisms/DataGrid';
 /** Determines the filter UI rendered in the column header popover. */
 export type DataGridFilterType = 'search' | 'multiselect' | 'multiselect-search';
 /** A single option entry used by `multiselect` and `multiselect-search` column filters. */
@@ -90,8 +90,8 @@ export interface DataGridStyleProps<T = Record<string, unknown>> {
      */
     onFetch: (params: DataGridFetchParams) => Promise<DataGridFetchResult<T>>;
     /** Controls how more rows are loaded when the user reaches the end of the current view.
-     * - `'pagination'` — shows a pagination bar below the table.
-     * - `'scroll'` — loads the next page automatically when the user scrolls to the bottom.
+     * - `'pagination'` — shows a pagination bar below the table.
+     * - `'scroll'` — loads the next page automatically when the user scrolls to the bottom.
      * @default 'pagination'
      */
     paginationType?: DataGridPaginationType;

package/dist/components/organisms/DataGrid/DataGridMenu/DataGridMenu.interface.d.ts

@@ -1,5 +1,5 @@
 import type { DataGridFilterType, DataGridFilterOption } from '../DataGrid.interface';
-import type { EVENTS } from '@hocs/ThemeProvider/components/DataGridMenu';
+import type { EVENTS } from '@hocs/ThemeProvider/components/organisms/DataGridMenu';
 export interface DataGridMenuStyleProps {
     /** Determines which filter UI is rendered inside the popover. */
     filterType: DataGridFilterType;

package/dist/hocs/ThemeProvider/ThemeProvider.interface.d.ts

@@ -2,6 +2,7 @@ import { type JSX } from 'react';
 import COMPONTENTS from './components';
 import { Component } from './interfaces';
 import FONTS from './fonts';
+import type { ToastPosition } from '@components/molecules/Toast';
 export interface Theme {
     name: string;
     components: COMPONTENTS;
@@ -22,8 +23,13 @@ export type ThemeNames<T extends readonly {
 }[] = readonly {
     name: string;
 }[]> = T[number]['name'];
+export interface ToastConfig {
+    position?: ToastPosition;
+    duration?: number;
+}
 export interface ThemeProviderComponent<T extends readonly Theme[] = readonly Theme[]> {
     themes: T;
     theme: ThemeNames<T>;
     children: JSX.Element;
+    toast?: ToastConfig;
 }

package/dist/hocs/ThemeProvider/components/{Button.d.ts → atoms/Button.d.ts}

@@ -1,4 +1,4 @@
-import { Component, Event, StyleValues, Styles } from '../interfaces';
+import { Component, Event, StyleValues, Styles } from '../../interfaces';
 export type ROOT = Pick<Styles, StyleValues.BORDER_RADIUS>;
 export type ENABLED = Pick<Styles, StyleValues.BACKGROUND_COLOR | StyleValues.COLOR_PRIMARY | StyleValues.BORDER_COLOR | StyleValues.BORDER_WIDTH | StyleValues.BORDER_STYLE>;
 export type HOVER = Pick<Styles, StyleValues.BACKGROUND_COLOR>;

package/dist/hocs/ThemeProvider/components/{Checkbox.d.ts → atoms/Checkbox.d.ts}

@@ -1,4 +1,4 @@
-import { Component, Event, StyleValues, Styles } from '../interfaces';
+import { Component, Event, StyleValues, Styles } from '../../interfaces';
 export type ROOT = Pick<Styles, StyleValues.BORDER_RADIUS>;
 export type ENABLED = Pick<Styles, StyleValues.COLOR_PRIMARY | StyleValues.COLOR_SECONDARY | StyleValues.ICON_COLOR | StyleValues.BACKGROUND_COLOR | StyleValues.BORDER_COLOR | StyleValues.BORDER_WIDTH | StyleValues.BORDER_STYLE>;
 export type VALUE = ENABLED;