@plitzi/sdk-elements 0.37.1 → 0.37.3

package/dist/elements/form/FormControl/inputs/Textarea.d.ts

@@ -5,6 +5,8 @@ export type TextareaProps = {
     name?: string;
     placeholder?: string;
     value?: string;
+    /** Takes the focus while true: as it becomes true, whether on mount or as the field is shown again. */
+    autoFocus?: boolean;
     required?: boolean;
     /** `0` for none. */
     maxLength?: number;
@@ -12,6 +14,11 @@ export type TextareaProps = {
     readOnly?: boolean;
     onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
     onValidate?: () => void;
+    /**
+     * The id of the message saying what is wrong with the value, while something is: the field is then marked invalid
+     * and described by it, so a screen reader or a browser agent hears why the form would not send.
+     */
+    errorId?: string;
 };
-declare const Textarea: ({ className, id, name, placeholder, value, required, maxLength, disabled, readOnly, onChange, onValidate }: TextareaProps) => import("react").JSX.Element;
+declare const Textarea: ({ className, id, name, placeholder, value, autoFocus, required, maxLength, disabled, readOnly, onChange, onValidate, errorId }: TextareaProps) => import('react').JSX.Element;
 export default Textarea;

package/dist/elements/form/FormControl/inputs/Textarea.mjs

@@ -1,26 +1,31 @@
-import { useCallback as e, useRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import r from "clsx";
+import e from "./useFocusWhenShown.mjs";
+import { useCallback as t, useRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "clsx";
 //#region src/elements/form/FormControl/inputs/Textarea.tsx
-var i = ({ className: i = "", id: a = "", name: o = "", placeholder: s = "", value: c = "", required: l = !0, maxLength: u = 0, disabled: d = !1, readOnly: f = !1, onChange: p, onValidate: m }) => {
-	let h = t(null), g = e((e) => {
+var a = ({ className: a = "", id: o = "", name: s = "", placeholder: c = "", value: l = "", autoFocus: u = !1, required: d = !0, maxLength: f = 0, disabled: p = !1, readOnly: m = !1, onChange: h, onValidate: g, errorId: _ }) => {
+	let v = n(null);
+	e(v, u);
+	let y = t((e) => {
 		e.stopPropagation();
-	}, []), _ = e(() => m?.(), [m]);
-	return /* @__PURE__ */ n("textarea", {
-		ref: h,
-		className: r("form-control__textarea-container", i),
-		id: a,
-		name: o,
-		placeholder: s,
-		value: c,
-		readOnly: f,
-		required: l,
-		maxLength: u > 0 ? u : void 0,
-		disabled: d,
-		onChange: p,
-		onBlur: _,
-		onClick: g
+	}, []), b = t(() => g?.(), [g]);
+	return /* @__PURE__ */ r("textarea", {
+		ref: v,
+		className: i("form-control__textarea-container", a),
+		id: o,
+		"aria-invalid": _ ? !0 : void 0,
+		"aria-describedby": _,
+		name: s,
+		placeholder: c,
+		value: l,
+		readOnly: m,
+		required: d,
+		maxLength: f > 0 ? f : void 0,
+		disabled: p,
+		onChange: h,
+		onBlur: b,
+		onClick: y
 	});
 };
 //#endregion
-export { i as default };
+export { a as default };

package/dist/elements/form/FormControl/inputs/useFocusWhenShown.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * A field that takes the focus each time it is shown: as it mounts, and again whenever it — or anything it is in — goes
+ * from hidden to shown. The native `autofocus` only acts on insertion, and a panel that hides keeps its field mounted.
+ */
+declare const useFocusWhenShown: (ref: RefObject<HTMLInputElement | HTMLTextAreaElement | null>, shown: boolean) => void;
+export default useFocusWhenShown;

package/dist/elements/form/FormControl/inputs/useFocusWhenShown.mjs

@@ -0,0 +1,9 @@
+import { useEffect as e } from "react";
+//#region src/elements/form/FormControl/inputs/useFocusWhenShown.ts
+var t = (t, n) => {
+	e(() => {
+		n && t.current?.focus();
+	}, [t, n]);
+};
+//#endregion
+export { t as default };

package/dist/elements/index.d.ts

@@ -22,6 +22,7 @@ import { default as FontAwesome } from './media/FontAwesome';
 import { default as Image } from './media/Image';
 import { default as Video } from './media/Video';
 import { default as ApiContainer } from './provider/ApiContainer';
+import { default as Channel } from './provider/Channel';
 import { default as Container } from './structure/Container';
 import { default as DialogContainer } from './structure/DialogContainer';
 import { default as List } from './structure/List';
@@ -51,10 +52,11 @@ export * from './media/FontAwesome';
 export * from './media/Image';
 export * from './media/Video';
 export * from './provider/ApiContainer';
+export * from './provider/Channel';
 export * from './structure/Container';
 export * from './structure/DialogContainer';
 export * from './structure/List';
 export * from './structure/ModalContainer';
 export * from './structure/Pagination';
 export * from './structure/TabContainer';
-export { NodeHtml, Dropdown, NotFound, Loading, Custom, Reference, BlockHtml, BlockJsx, Page, Container, LayoutContainer, DialogContainer, ModalContainer, TabContainer, Heading, Image, Video, FontAwesome, Button, Paragraph, RichText, Text, ThemeToggle, List, Link, Markdown, Pagination, Form, FormControl, ApiContainer };
+export { NodeHtml, Dropdown, NotFound, Loading, Custom, Reference, BlockHtml, BlockJsx, Page, Container, LayoutContainer, DialogContainer, ModalContainer, TabContainer, Heading, Image, Video, FontAwesome, Button, Paragraph, RichText, Text, ThemeToggle, List, Link, Markdown, Pagination, Form, FormControl, ApiContainer, Channel };

package/dist/elements/index.mjs

@@ -23,21 +23,23 @@ import x from "./media/FontAwesome/index.mjs";
 import S from "./media/Image/index.mjs";
 import C from "./media/Video/index.mjs";
 import w from "./provider/ApiContainer/index.mjs";
-import T from "./structure/Container/index.mjs";
-import E from "./structure/DialogContainer/index.mjs";
-import D from "./structure/List/index.mjs";
-import O from "./structure/ModalContainer/index.mjs";
-import k from "./structure/Pagination/index.mjs";
-import A from "./structure/TabContainer/index.mjs";
+import T from "./provider/Channel/index.mjs";
+import E from "./structure/Container/index.mjs";
+import D from "./structure/DialogContainer/index.mjs";
+import O from "./structure/List/index.mjs";
+import k from "./structure/ModalContainer/index.mjs";
+import A from "./structure/Pagination/index.mjs";
+import j from "./structure/TabContainer/index.mjs";
 //#region src/elements/index.ts
-var j = /* @__PURE__ */ e({
+var M = /* @__PURE__ */ e({
 	ApiContainer: () => w,
 	BlockHtml: () => t,
 	BlockJsx: () => n,
 	Button: () => o,
-	Container: () => T,
+	Channel: () => T,
+	Container: () => E,
 	Custom: () => r,
-	DialogContainer: () => E,
+	DialogContainer: () => D,
 	Dropdown: () => s,
 	FontAwesome: () => x,
 	Form: () => h,
@@ -46,21 +48,21 @@ var j = /* @__PURE__ */ e({
 	Image: () => S,
 	LayoutContainer: () => _,
 	Link: () => l,
-	List: () => D,
+	List: () => O,
 	Loading: () => v,
 	Markdown: () => u,
-	ModalContainer: () => O,
+	ModalContainer: () => k,
 	NodeHtml: () => i,
 	NotFound: () => y,
 	Page: () => b,
-	Pagination: () => k,
+	Pagination: () => A,
 	Paragraph: () => d,
 	Reference: () => a,
 	RichText: () => f,
-	TabContainer: () => A,
+	TabContainer: () => j,
 	Text: () => p,
 	ThemeToggle: () => m,
 	Video: () => C
 });
 //#endregion
-export { w as ApiContainer, t as BlockHtml, n as BlockJsx, o as Button, T as Container, r as Custom, E as DialogContainer, s as Dropdown, x as FontAwesome, h as Form, g as FormControl, c as Heading, S as Image, _ as LayoutContainer, l as Link, D as List, v as Loading, u as Markdown, O as ModalContainer, i as NodeHtml, y as NotFound, b as Page, k as Pagination, d as Paragraph, a as Reference, f as RichText, A as TabContainer, p as Text, m as ThemeToggle, C as Video, j as elements_exports };
+export { w as ApiContainer, t as BlockHtml, n as BlockJsx, o as Button, T as Channel, E as Container, r as Custom, D as DialogContainer, s as Dropdown, x as FontAwesome, h as Form, g as FormControl, c as Heading, S as Image, _ as LayoutContainer, l as Link, O as List, v as Loading, u as Markdown, k as ModalContainer, i as NodeHtml, y as NotFound, b as Page, A as Pagination, d as Paragraph, a as Reference, f as RichText, j as TabContainer, p as Text, m as ThemeToggle, C as Video, M as elements_exports };

package/dist/elements/internal/LayoutContainer/LayoutContainer.d.ts

@@ -11,9 +11,9 @@ export type LayoutContainerProps = {
     children?: ReactNode;
     subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure';
 };
-declare const LayoutContainer: ({ ref, className, children, subType }: LayoutContainerProps) => import("react").JSX.Element;
+declare const LayoutContainer: ({ ref, className, children, subType }: LayoutContainerProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<LayoutContainerProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<LayoutContainerProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/internal/LayoutContainer/Settings.d.ts

@@ -6,5 +6,5 @@ type SettingsProps = {
     folder?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ id, layout, layoutContainer, subType, folder, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ id, layout, layoutContainer, subType, folder, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/internal/LayoutContainer/declaration.d.ts

@@ -4,6 +4,9 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type LayoutContainerAttributes = AuthorableAttributes<LayoutContainerProps>;
 declare const declaration: {
     readonly type: "layoutContainer";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly subType: "div";

package/dist/elements/internal/LayoutContainer/declaration.mjs

@@ -1,7 +1,19 @@
-import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+import { elementDeclaration as e, valuesOf as t } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/internal/LayoutContainer/declaration.ts
-var t = e()({
+var n = e()({
 	type: "layoutContainer",
+	attributeValues: { subType: t()([
+		"div",
+		"header",
+		"footer",
+		"nav",
+		"main",
+		"section",
+		"article",
+		"aside",
+		"address",
+		"figure"
+	]) },
 	content: {
 		attributes: { subType: "div" },
 		definition: {
@@ -41,4 +53,4 @@ var t = e()({
 	}
 });
 //#endregion
-export { t as default };
+export { n as default };

package/dist/elements/internal/LayoutContainer/index.d.ts

@@ -1,8 +1,11 @@
 declare const LayoutContainer: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./LayoutContainer').LayoutContainerProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./LayoutContainer').LayoutContainerProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "layoutContainer";
+    readonly attributeValues: {
+        readonly subType: readonly string[];
+    };
     readonly content: {
         readonly attributes: {
             readonly subType: "div";

package/dist/elements/internal/LayoutPicker/LayoutPicker.d.ts

@@ -6,5 +6,5 @@ export type LayoutPickerProps = {
     onUpdate?: (key: string, value: string) => void;
 };
 /** Which shell something is rendered inside, and the container in that shell its content goes into. */
-declare const LayoutPicker: ({ layout, layoutContainer, ownLayoutId, onUpdate }: LayoutPickerProps) => import("react").JSX.Element;
+declare const LayoutPicker: ({ layout, layoutContainer, ownLayoutId, onUpdate }: LayoutPickerProps) => import('react').JSX.Element;
 export default LayoutPicker;

package/dist/elements/internal/Loading/Loading.d.ts

@@ -3,9 +3,9 @@ export type LoadingProps = {
     ref?: RefObject<HTMLElement>;
     className?: string;
 };
-declare const Loading: ({ ref, className }: LoadingProps) => import("react").JSX.Element;
+declare const Loading: ({ ref, className }: LoadingProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<LoadingProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<LoadingProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/internal/Loading/index.d.ts

@@ -1,5 +1,5 @@
 declare const Loading: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Loading').LoadingProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Loading').LoadingProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "loading";

package/dist/elements/internal/NotFound/NotFound.d.ts

@@ -3,9 +3,9 @@ export type NotFoundProps = {
     ref?: RefObject<HTMLElement | null>;
     className?: string;
 };
-declare const NotFound: ({ ref, className }: NotFoundProps) => import("react").JSX.Element | undefined;
+declare const NotFound: ({ ref, className }: NotFoundProps) => import('react').JSX.Element | undefined;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<NotFoundProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<NotFoundProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/internal/NotFound/index.d.ts

@@ -1,5 +1,5 @@
 declare const NotFound: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./NotFound').NotFoundProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./NotFound').NotFoundProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "notFound";

package/dist/elements/internal/Page/Page.d.ts

@@ -9,9 +9,9 @@ export type PageProps = {
     layoutContainer?: string;
     children?: ReactNode;
 };
-declare const Page: ({ ref, seoEnabled, seoPageTitle, seoPageDescription, className, layout, layoutContainer, children }: PageProps) => import("react").JSX.Element;
+declare const Page: ({ ref, seoEnabled, seoPageTitle, seoPageDescription, className, layout, layoutContainer, children }: PageProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<PageProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<PageProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/internal/Page/Page.mjs

@@ -3,69 +3,60 @@ import t from "../../../Element/hocs/withElement.mjs";
 import n from "../../../Element/hooks/useElement.mjs";
 import { RootElement as r } from "../../../Element/RootElement.mjs";
 import i from "../LayoutContainer/index.mjs";
-import a from "../../../Element/hooks/useLayoutChain.mjs";
-import { use as o, useEffect as s, useMemo as c } from "react";
-import l from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useSdkStore as u } from "@plitzi/sdk-shared/store";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import p from "clsx";
-import { Helmet as m } from "@dr.pogodin/react-helmet";
+import a from "./declaration.mjs";
+import o from "../../../Element/hooks/useLayoutChain.mjs";
+import { use as s, useEffect as c, useMemo as l } from "react";
+import u from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useSdkStore as d } from "@plitzi/sdk-shared/store";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "clsx";
+import { Helmet as h } from "@dr.pogodin/react-helmet";
 //#region src/elements/internal/Page/Page.tsx
-var h = (e) => e.map((e) => ({
+var g = (e) => e.map((e) => ({
 	...e,
 	plitziElementLayout: {
 		containerId: e.slot,
 		rootId: e.slot,
 		type: "layout"
 	}
-})), g = (t, n, r) => t.reduce((t, { layout: r, slot: a, plitziElementLayout: o }) => /* @__PURE__ */ d(e, {
+})), _ = (t, n, r) => t.reduce((t, { layout: r, slot: a, plitziElementLayout: o }) => /* @__PURE__ */ f(e, {
 	body: t,
-	children: /* @__PURE__ */ d(i, { internalProps: {
+	children: /* @__PURE__ */ f(i, { internalProps: {
 		id: r,
 		rootId: n,
 		plitziElementLayout: o
 	} })
-}, a), r), _ = ({ ref: e, seoEnabled: t = !1, seoPageTitle: i = "Title", seoPageDescription: _ = "Description", className: v = "", layout: y = "", layoutContainer: b = "", children: x }) => {
-	let { id: S } = n(), { settings: { previewMode: C }, contexts: { InteractionsContext: w } } = l(), { interactionsManager: T } = o(w), [[E, D]] = u(["navigation.routeParams", "navigation.queryParams"]), O = a(y, b), k = c(() => h(O), [O]), A = c(() => g(k, S, x), [
-		k,
-		S,
-		x
-	]), j = c(() => ({ onPageLoad: {
-		action: "onPageLoad",
-		title: "On Page Load",
-		type: "trigger",
-		params: {},
-		preview: {
-			pageId: "",
-			routeParams: "",
-			queryParams: ""
-		}
-	} }), []);
-	return s(() => {
+}, a), r), v = ({ ref: e, seoEnabled: t = !1, seoPageTitle: i = "Title", seoPageDescription: v = "Description", className: y = "", layout: b = "", layoutContainer: x = "", children: S }) => {
+	let { id: C } = n(), { settings: { previewMode: w }, contexts: { InteractionsContext: T } } = u(), { interactionsManager: E } = s(T), [[D, O]] = d(["navigation.routeParams", "navigation.queryParams"]), k = o(b, x), A = l(() => g(k), [k]), j = l(() => _(A, C, S), [
+		A,
+		C,
+		S
+	]);
+	return c(() => {
 		let e = !1;
 		return queueMicrotask(() => {
-			e || T.interactionTrigger(S, "onPageLoad", {
-				pageId: S,
-				routeParams: E,
-				queryParams: D
+			e || E.interactionTrigger(C, "onPageLoad", {
+				pageId: C,
+				routeParams: D,
+				queryParams: O
 			});
 		}), () => {
 			e = !0;
 		};
 	}, [
-		S,
-		T,
-		D,
-		E
-	]), /* @__PURE__ */ f(r, {
+		C,
+		E,
+		O,
+		D
+	]), /* @__PURE__ */ p(r, {
 		ref: e,
-		className: p("plitzi-component__page", v),
-		interactionTriggers: j,
-		children: [t && C && /* @__PURE__ */ f(m, { children: [!!i && /* @__PURE__ */ d("title", { children: i }), !!_ && /* @__PURE__ */ d("meta", {
+		className: m("plitzi-component__page", y),
+		interactionTriggers: a.triggers,
+		children: [t && w && /* @__PURE__ */ p(h, { children: [!!i && /* @__PURE__ */ f("title", { children: i }), !!v && /* @__PURE__ */ f("meta", {
 			name: "description",
-			content: _
-		})] }), A]
+			content: v
+		})] }), j]
 	});
-}, v = t(_);
+}, y = t(v);
 //#endregion
-export { _ as Page, v as default };
+export { v as Page, y as default };

package/dist/elements/internal/Page/Settings.d.ts

@@ -14,5 +14,5 @@ type SettingsProps = {
     unauthorizedPageRedirect?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ id, seoEnabled, enabled, name, folder, seoPageTitle, seoPageDescription, slug, layout, layoutContainer, accessLevel, unauthorizedBehaviour, unauthorizedPageRedirect, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ id, seoEnabled, enabled, name, folder, seoPageTitle, seoPageDescription, slug, layout, layoutContainer, accessLevel, unauthorizedBehaviour, unauthorizedPageRedirect, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/internal/Page/declaration.d.ts

@@ -4,6 +4,19 @@ import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
 export type PageAttributes = AuthorableAttributes<PageProps>;
 declare const declaration: {
     readonly type: "page";
+    readonly triggers: {
+        readonly onPageLoad: {
+            readonly action: "onPageLoad";
+            readonly title: "On Page Load";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly pageId: "";
+                readonly routeParams: "";
+                readonly queryParams: "";
+            };
+        };
+    };
     readonly content: {
         readonly attributes: {
             readonly enabled: true;

package/dist/elements/internal/Page/declaration.mjs

@@ -2,6 +2,17 @@ import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
 //#region src/elements/internal/Page/declaration.ts
 var t = e()({
 	type: "page",
+	triggers: { onPageLoad: {
+		action: "onPageLoad",
+		title: "On Page Load",
+		type: "trigger",
+		params: {},
+		preview: {
+			pageId: "",
+			routeParams: "",
+			queryParams: ""
+		}
+	} },
 	content: {
 		attributes: {
 			enabled: !0,

package/dist/elements/internal/Page/index.d.ts

@@ -1,8 +1,21 @@
 declare const Page: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Page').PageProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Page').PageProps>): import('react').JSX.Element;
     displayName: string;
 } & {
     readonly type: "page";
+    readonly triggers: {
+        readonly onPageLoad: {
+            readonly action: "onPageLoad";
+            readonly title: "On Page Load";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly pageId: "";
+                readonly routeParams: "";
+                readonly queryParams: "";
+            };
+        };
+    };
     readonly content: {
         readonly attributes: {
             readonly enabled: true;

package/dist/elements/media/FontAwesome/FontAwesome.d.ts

@@ -5,10 +5,17 @@ export type FontAwesomeProps = {
     icon?: string;
     size?: string;
     iconAnimation?: string;
+    /**
+     * What the icon means, for an icon that says something on its own — a status, a rating, a warning with no words
+     * beside it. Left empty, the icon is decoration and is hidden from screen readers and browser agents: a glyph from
+     * an icon font reads as a private-use character, which is noise at best. An icon inside a button or a link is named
+     * by that button or link (its text or its `title`), never here.
+     */
+    label?: string;
 };
-declare const FontAwesome: ({ ref, className, icon, size, iconAnimation }: FontAwesomeProps) => import("react").JSX.Element;
+declare const FontAwesome: ({ ref, className, icon, size, iconAnimation, label }: FontAwesomeProps) => import('react').JSX.Element;
 declare const _default: {
-    (props: import('../../../Element/hocs/withElement').WithElementProps<FontAwesomeProps>): import("react").JSX.Element;
+    (props: import('../../../Element/hocs/withElement').WithElementProps<FontAwesomeProps>): import('react').JSX.Element;
     displayName: string;
 };
 export default _default;

package/dist/elements/media/FontAwesome/FontAwesome.mjs

@@ -3,10 +3,17 @@ import { RootElement as t } from "../../../Element/RootElement.mjs";
 import { jsx as n } from "react/jsx-runtime";
 import r from "clsx";
 //#region src/elements/media/FontAwesome/FontAwesome.tsx
-var i = ({ ref: e, className: i = "", icon: a = "fas fa-flag", size: o = "fa-1x", iconAnimation: s = "" }) => /* @__PURE__ */ n(t, {
-	ref: e,
-	tag: "i",
-	className: r("plitzi-component__fontawesome", i, a, o, s)
-}), a = e(i);
+var i = ({ ref: e, className: i = "", icon: a = "fas fa-flag", size: o = "fa-1x", iconAnimation: s = "", label: c = "" }) => {
+	let l = c ? {
+		role: "img",
+		"aria-label": c
+	} : { "aria-hidden": !0 };
+	return /* @__PURE__ */ n(t, {
+		ref: e,
+		tag: "i",
+		className: r("plitzi-component__fontawesome", i, a, o, s),
+		...l
+	});
+}, a = e(i);
 //#endregion
 export { i as FontAwesome, a as default };

package/dist/elements/media/FontAwesome/Settings.d.ts

@@ -2,7 +2,8 @@ type SettingsProps = {
     icon?: string;
     size?: 'fa-1x' | 'fa-2x' | 'fa-3x' | 'fa-4x';
     iconAnimation?: string;
+    label?: string;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ icon, size, iconAnimation, onUpdate }: SettingsProps) => import("react").JSX.Element;
+declare const Settings: ({ icon, size, iconAnimation, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;