@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/basic/audio/index.js

@@ -0,0 +1,111 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { prefixPrefabResourceUrl } from "../../../utils/resource-url";
+import { removeInvalidAttributes } from "../../../utils/attr";
+const DEFAULT_CLASS = "app-audio";
+const WmAudio = memo(
+  (props) => {
+    const _a = props, {
+      mp3format,
+      prefabName,
+      muted,
+      controls,
+      loop,
+      audiopreload,
+      audiosupportmessage,
+      autoplay,
+      hint,
+      arialabel,
+      tabindex,
+      styles,
+      className
+    } = _a, restProps = __objRest(_a, [
+      "mp3format",
+      "prefabName",
+      "muted",
+      "controls",
+      "loop",
+      "audiopreload",
+      "audiosupportmessage",
+      "autoplay",
+      "hint",
+      "arialabel",
+      "tabindex",
+      "styles",
+      "className"
+    ]);
+    const computedSrc = useMemo(() => prefixPrefabResourceUrl(mp3format), [mp3format, prefabName]);
+    return /* @__PURE__ */ jsx(
+      Box,
+      __spreadProps(__spreadValues({
+        className: clsx(DEFAULT_CLASS, className),
+        title: hint,
+        "aria-label": arialabel,
+        tabIndex: tabindex,
+        sx: styles,
+        style: styles
+      }, removeInvalidAttributes(restProps)), {
+        children: /* @__PURE__ */ jsxs(
+          "audio",
+          {
+            title: hint,
+            src: computedSrc || void 0,
+            muted,
+            controls,
+            loop,
+            preload: audiopreload,
+            autoPlay: autoplay,
+            children: [
+              audiosupportmessage,
+              "Your browser does not support the audio element."
+            ]
+          }
+        )
+      })
+    );
+  },
+  (prev, current) => {
+    const keys = ["mp3format", "hint", "arialabel", "tabindex"];
+    return keys.every((key) => prev[key] === current[key]);
+  }
+);
+WmAudio.displayName = "WmAudio";
+var audio_default = withBaseWrapper(WmAudio);
+export {
+  WmAudio,
+  audio_default as default
+};

package/components/basic/audio/props.d.ts

@@ -0,0 +1,48 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Base props specific to the WmAudio component.
+ */
+export interface AudioProps {
+    /**
+     * The URL or source of the MP3 file.
+     */
+    mp3format: string;
+    /**
+     * If true, the audio will be muted.
+     * @default false
+     */
+    muted?: boolean;
+    /**
+     * If true, audio controls will be displayed.
+     * @default false
+     */
+    controls?: boolean;
+    /**
+     * If true, the audio will loop back to the start when finished.
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * Specifies if and how the audio should be preloaded.
+     * @default "auto"
+     */
+    audiopreload?: "auto" | "metadata" | "none";
+    /**
+     * Message to display if the browser does not support the audio element.
+     */
+    audiosupportmessage?: string;
+    /**
+     * If true, the audio will start playing automatically.
+     * @default false
+     */
+    autoplay?: boolean;
+    prefabName?: string;
+    /**
+     * The unique ID for the audio element.
+     */
+    id?: string;
+}
+/**
+ * Combined props for the WmAudio component, including base WaveMaker props.
+ */
+export type WmAudioProps = Prettify<AudioProps & BaseProps>;

package/components/basic/html/index.d.ts

@@ -0,0 +1,72 @@
+import React from "react";
+import { WmHtmlProps } from "./props";
+export declare const WmHtml: (props: WmHtmlProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The WmHtml component is a container for rendering HTML content.
+ * It supports string-based HTML, trusted HTML objects, and React elements.
+ * Content is sanitized using DOMPurify before rendering.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-html--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-html--docs)
+ *
+ * @param props - {@link WmHtmlProps}
+ */
+declare const _default: React.ComponentType<{
+    content: string | object;
+    horizontalalign?: "left" | "center" | "right";
+    trustAs?: boolean;
+    id?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;

package/components/basic/html/index.js

@@ -0,0 +1,184 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import clsx from "clsx";
+import { Box } from "@mui/material";
+import DOMPurify from "dompurify";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { getStyles, isReactContent } from "./utils";
+const WmHtml = (props) => {
+  const {
+    name,
+    className,
+    arialabel,
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+    onDoubleClick,
+    // Event functions coming from BaseProps
+    eventCallback,
+    forwardedRef,
+    hint,
+    content,
+    trustAs = false,
+    children,
+    horizontalalign
+  } = props;
+  const htmlRef = useRef(null);
+  const [initialContent, setInitialContent] = useState(null);
+  useEffect(() => {
+    if (!content && !initialContent && htmlRef.current && children && !isReactContent(children)) {
+      const childContent = typeof children === "string" ? children : htmlRef.current.innerHTML;
+      setInitialContent(childContent);
+    }
+  }, [content, children, initialContent]);
+  const handleClick = useCallback(
+    (e) => {
+      onClick == null ? void 0 : onClick(e, props);
+      eventCallback == null ? void 0 : eventCallback("click", { $event: e });
+    },
+    [onClick, props, eventCallback]
+  );
+  const handleDoubleClick = useCallback(
+    (e) => {
+      onDoubleClick == null ? void 0 : onDoubleClick(e, props);
+      eventCallback == null ? void 0 : eventCallback("dblclick", { $event: e });
+    },
+    [onDoubleClick, props, eventCallback]
+  );
+  const handleMouseEnter = useCallback(
+    (e) => {
+      onMouseEnter == null ? void 0 : onMouseEnter(e, props);
+      eventCallback == null ? void 0 : eventCallback("mouseenter", { $event: e });
+    },
+    [onMouseEnter, props, eventCallback]
+  );
+  const handleMouseLeave = useCallback(
+    (e) => {
+      onMouseLeave == null ? void 0 : onMouseLeave(e, props);
+      eventCallback == null ? void 0 : eventCallback("mouseleave", { $event: e });
+    },
+    [onMouseLeave, props, eventCallback]
+  );
+  const handleRefCallback = useCallback(
+    (node) => {
+      htmlRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef && node) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+  const handleFocus = useCallback(
+    (e) => {
+      var _a;
+      (_a = props == null ? void 0 : props.onFocus) == null ? void 0 : _a.call(props, e, props);
+    },
+    [props == null ? void 0 : props.onFocus, props]
+  );
+  const handleBlur = useCallback(
+    (e) => {
+      var _a;
+      (_a = props == null ? void 0 : props.onBlur) == null ? void 0 : _a.call(props, e, props);
+    },
+    [props == null ? void 0 : props.onBlur, props]
+  );
+  const domEvents = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (props == null ? void 0 : props.onFocus) && { onFocus: handleFocus }), (props == null ? void 0 : props.onBlur) && { onBlur: handleBlur }), (props == null ? void 0 : props.onClick) && { onClick: handleClick }), (props == null ? void 0 : props.onDoubleClick) && { onDoubleClick: handleDoubleClick }), (props == null ? void 0 : props.onMouseEnter) && { onMouseEnter: handleMouseEnter }), (props == null ? void 0 : props.onMouseLeave) && { onMouseLeave: handleMouseLeave });
+  const { renderContent, isReactElement } = useMemo(() => {
+    const contentToRender = content !== void 0 ? content : initialContent || children;
+    if (!contentToRender) {
+      return { renderContent: null, isReactElement: false };
+    }
+    if (isReactContent(contentToRender)) {
+      return { renderContent: contentToRender, isReactElement: true };
+    }
+    if (typeof contentToRender === "object" && contentToRender !== null) {
+      const keys = Object.keys(contentToRender);
+      if (keys.length > 0 && keys[0] === "changingThisBreaksApplicationSecurity") {
+        return {
+          renderContent: { __html: contentToRender[keys[0]] },
+          isReactElement: false
+        };
+      }
+      return {
+        renderContent: { __html: DOMPurify.sanitize(String(contentToRender)) },
+        isReactElement: false
+      };
+    }
+    const stringContent = String(contentToRender);
+    if (trustAs) {
+      return {
+        renderContent: { __html: DOMPurify.sanitize(stringContent) },
+        isReactElement: false
+      };
+    }
+    return {
+      renderContent: { __html: DOMPurify.sanitize(stringContent) },
+      isReactElement: false
+    };
+  }, [content, initialContent, children, trustAs]);
+  const containerClassName = clsx(
+    className,
+    "app-html-container",
+    "wm-html-root",
+    horizontalalign && `wm-html-align-${horizontalalign}`
+  );
+  if (isReactElement) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      __spreadProps(__spreadValues({
+        component: "div",
+        ref: handleRefCallback,
+        title: hint,
+        className: containerClassName,
+        "data-element-type": "wm-html",
+        "data-name": name,
+        "aria-label": arialabel
+      }, domEvents), {
+        style: getStyles(props),
+        hidden: props.hidden,
+        children: renderContent
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    __spreadValues(__spreadProps(__spreadValues({
+      component: "div",
+      ref: handleRefCallback,
+      title: hint,
+      className: containerClassName,
+      "data-element-type": "wm-html",
+      "data-name": name,
+      "aria-label": arialabel
+    }, domEvents), {
+      style: getStyles(props),
+      hidden: props.hidden
+    }), renderContent && { dangerouslySetInnerHTML: renderContent })
+  );
+};
+var html_default = withBaseWrapper(WmHtml);
+export {
+  WmHtml,
+  html_default as default
+};

package/components/basic/html/props.d.ts

@@ -0,0 +1,32 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+import React from "react";
+/** Inline `style` shape for WmHtml: base props + CSS variables used with css file */
+export type WmHtmlStyleVars = React.CSSProperties & {
+    "--wm-html-width"?: string;
+    "--wm-html-height"?: string;
+    "--wm-html-overflow"?: string;
+};
+/**
+ * Base props specific to the WmHtml component.
+ */
+export interface HtmlProps {
+    /**
+     * The HTML content to be displayed. Can be a string, object (for trusted content), or React element.
+     */
+    content: string | object;
+    /**
+     * The horizontal alignment of the content.
+     * @default "left"
+     */
+    horizontalalign?: "left" | "center" | "right";
+    /**
+     * If true, the content will be rendered as HTML without strict sanitation (though DOMPurify is still used).
+     * @default false
+     */
+    trustAs?: boolean;
+    id?: string;
+}
+/**
+ * Combined props for the WmHtml component, including base WaveMaker props.
+ */
+export type WmHtmlProps = Prettify<HtmlProps & BaseProps>;

package/components/basic/html/utils.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { WmHtmlProps } from "./props";
+export declare const getStyles: (props: WmHtmlProps) => React.CSSProperties;
+export declare const isReactContent: (value: any) => boolean;

package/components/basic/html/utils.js

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import React from "react";
+const getStyles = (props) => {
+  const { styles = {}, height, width } = props;
+  const style = __spreadValues({}, styles);
+  if (width) {
+    style["--wm-html-width"] = typeof width === "number" ? `${width}px` : String(width);
+  }
+  if (height) {
+    style["--wm-html-height"] = typeof height === "number" ? `${height}px` : String(height);
+    style["--wm-html-overflow"] = "auto";
+  }
+  return style;
+};
+const isReactContent = (value) => {
+  if (React.isValidElement(value)) return true;
+  if (Array.isArray(value)) return value.some((item) => React.isValidElement(item));
+  return false;
+};
+export {
+  getStyles,
+  isReactContent
+};

package/components/basic/icon/index.d.ts

@@ -0,0 +1,74 @@
+import React from "react";
+import { WmIconProps } from "./props";
+export declare const WmIcon: React.MemoExoticComponent<(props: WmIconProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmIcon component is used to display icons from font libraries or images.
+ * It can also include a caption/label next to the icon.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/basic-icon--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/basic-icon--docs)
+ *
+ * @param props - {@link WmIconProps}
+ */
+declare const _default: React.ComponentType<{
+    caption?: string;
+    iconclass: string;
+    iconurl?: string;
+    iconposition?: "left" | "right";
+    iconsize?: string;
+    variant?: "default:xs" | "default:sm" | "default:md" | "default:lg" | "default:2x" | "default:3x" | "default:4x" | "default:5x";
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;

package/components/basic/icon/index.js

@@ -0,0 +1,104 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import Label from "../label";
+import { WmAppIcon } from "../../common/WmAppIcon";
+const DEFAULT_CLASS = "app-icon-wrapper";
+const WmIcon = memo((props) => {
+  const {
+    name,
+    listener,
+    caption,
+    hint,
+    iconclass = "wm-sl-l sl-user",
+    iconurl,
+    prefabName,
+    iconposition = "left",
+    iconsize,
+    arialabel,
+    styles,
+    className,
+    id
+  } = props;
+  const wrapperStyle = useMemo(() => {
+    const rootStyle = __spreadValues({}, styles || {});
+    if (iconsize) {
+      rootStyle["--icon-size"] = iconsize;
+      rootStyle["--icon-width"] = iconsize;
+      rootStyle["--icon-height"] = iconsize;
+    }
+    return rootStyle;
+  }, [styles, iconsize]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: clsx(
+        DEFAULT_CLASS,
+        "wm-icon-root",
+        iconposition === "right" && "wm-icon-pos-right",
+        className
+      ),
+      component: "span",
+      style: wrapperStyle,
+      "aria-label": arialabel,
+      id,
+      "data-icon-position": iconposition,
+      hidden: props.hidden,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { component: "span", className: "sr-only", children: [
+          caption,
+          " Icon"
+        ] }),
+        /* @__PURE__ */ jsx(
+          WmAppIcon,
+          {
+            iconclass,
+            iconurl,
+            prefabName,
+            defaultClasses: iconurl ? "" : "wm-icon-media",
+            iconStyle: iconsize ? {
+              width: parseInt(iconsize || "24", 10),
+              height: parseInt(iconsize || "24", 10),
+              fontSize: iconsize
+            } : void 0
+          }
+        ),
+        caption && /* @__PURE__ */ jsx(
+          Label,
+          {
+            listener,
+            "aria-hidden": "true",
+            className: "app-label",
+            name,
+            caption,
+            hint
+          }
+        )
+      ]
+    }
+  );
+});
+WmIcon.displayName = "WmIcon";
+var icon_default = withBaseWrapper(WmIcon);
+export {
+  WmIcon,
+  icon_default as default
+};