@m4l/components 0.2.35 → 1.0.0

package/components/hook-form/RHFUpload/index.6e98b291.js

@@ -1,242 +0,0 @@
-import { useCallback } from "react";
-import { useFormContext, Controller } from "react-hook-form";
-import isString from "lodash/isString";
-import { useDropzone } from "react-dropzone";
-import { I as Image } from "../../Image/index.b799c514.js";
-import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { styled, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { unstable_composeClasses } from "@mui/base";
-import { T as Typography } from "../../mui_extended/Typography/index.379dd374.js";
-import { B as Button } from "../../mui_extended/Button/index.c3084916.js";
-import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
-const UploadImageRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LRHFUploadImage?.styleOverrides
-}));
-const ICON_PREFIX = "M4LRHFUploadImage";
-const getNameRHFUploadImageDataTestId = (KEY) => {
-  return `${ICON_PREFIX}-${KEY}`;
-};
-const SkeletonUploadImage = (props) => {
-  const {
-    classes
-  } = props;
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("skeleton")
-    } : {},
-    children: ["est\xE1 con skeleton", /* @__PURE__ */ jsx(Skeleton, {
-      variant: "rectangular",
-      width: "100%",
-      height: "100%"
-    })]
-  });
-};
-const componentName = "M4LRHFUploadImage";
-generateUtilityClasses(componentName, [
-  "root",
-  "dropZoneStyle",
-  "containerFileImage",
-  "placeHolder",
-  "containerUploadBoddy",
-  "containerBodyImage",
-  "containerMessage",
-  "containerTitle",
-  "containerDescription",
-  "containerConditions",
-  "containerUploadImage",
-  "string",
-  "skeleton",
-  "inputDropZone",
-  "stateError"
-]);
-function getRHFUploadImagebUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const RHFUploadImageUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.isDragReject && "stateError", ownerState.isDragActive && "stateActive", ownerState.hasFile && "hasFile"],
-    dropZoneStyle: ["dropZoneStyle"],
-    containerFileImage: ["containerFileImage"],
-    placeHolder: ["placeHolder"],
-    containerUploadBoddy: ["containerUploadBoddy"],
-    containerBodyImage: ["containerBodyImage"],
-    containerMessage: ["containerMessage"],
-    containerTitle: ["containerTitle"],
-    containerDescription: ["containerDescription"],
-    containerConditions: ["containerConditions"],
-    containerUploadImage: ["containerUploadImage"],
-    skeleton: ["skeleton"],
-    inputDropZone: ["inputDropZone"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFUploadImagebUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function UploadImage({
-  error,
-  file,
-  helperText,
-  sx,
-  ...other
-}) {
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-    isDragReject,
-    open
-  } = useDropzone({
-    multiple: false,
-    ...other
-  });
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const ownerSate = {
-    isDragReject: isDragReject || error,
-    isDragActive,
-    hasFile: file
-  };
-  const classes = RHFUploadImageUtilityClasses(ownerSate);
-  return /* @__PURE__ */ jsx(UploadImageRoot, {
-    className: classes.root,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("root")
-    } : {},
-    children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
-      children: ["est\xE1 sin skeleton", /* @__PURE__ */ jsx("div", {
-        className: classes.containerUploadImage,
-        ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerUploadImage")
-        } : {},
-        children: /* @__PURE__ */ jsxs("div", {
-          className: classes.dropZoneStyle,
-          ...getRootProps(),
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("dropZoneStyle")
-          } : {},
-          children: [/* @__PURE__ */ jsx("input", {
-            ...getInputProps(),
-            className: classes.inputDropZone,
-            ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("inputDropZone")
-            } : {}
-          }), file && /* @__PURE__ */ jsx("div", {
-            className: classes.containerFileImage,
-            ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerFileImage")
-            } : {},
-            children: /* @__PURE__ */ jsx(Image, {
-              alt: "bgImageUploadImage",
-              src: isString(file) ? file : file.preview || "",
-              ratio: "1:1"
-            })
-          }), /* @__PURE__ */ jsx("div", {
-            className: classes.placeHolder,
-            ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("placeHolder")
-            } : {},
-            children: /* @__PURE__ */ jsxs("div", {
-              className: classes.containerUploadBoddy,
-              ...process.env.NODE_ENV !== "production" ? {
-                [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerUploadBoddy")
-              } : {},
-              children: [/* @__PURE__ */ jsx("div", {
-                className: classes.containerBodyImage,
-                ...process.env.NODE_ENV !== "production" ? {
-                  [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerBodyImage")
-                } : {},
-                children: /* @__PURE__ */ jsx(Image, {
-                  src: `${host_static_assets}/${environment_assets}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
-                  ratio: "1:1"
-                })
-              }), /* @__PURE__ */ jsxs("div", {
-                className: classes.containerMessage,
-                ...process.env.NODE_ENV !== "production" ? {
-                  [TEST_PROP_ID]: getNameRHFUploadImageDataTestId("containerMessage")
-                } : {},
-                children: [/* @__PURE__ */ jsx(Typography, {
-                  className: classes.containerTitle,
-                  variant: "subtitle",
-                  skeletonWidth: "150px",
-                  children: getLabel("upload_image.title_upload")
-                }), /* @__PURE__ */ jsx(Typography, {
-                  className: classes.containerDescription,
-                  variant: "body",
-                  children: getLabel("upload_image.description")
-                }), /* @__PURE__ */ jsx(Typography, {
-                  className: classes.containerConditions,
-                  variant: "body",
-                  children: getLabel("upload_image.conditions")
-                }), /* @__PURE__ */ jsx(Button, {
-                  onClick: open,
-                  children: getLabel("upload_image.label_button")
-                })]
-              })]
-            })
-          })]
-        })
-      }), helperText && helperText]
-    }) : /* @__PURE__ */ jsx(SkeletonUploadImage, {
-      classes: classes.skeleton
-    })
-  });
-}
-const WrapperRHFUploadImage = styled("div")(() => ({
-  width: "inherit",
-  height: "inherit",
-  padding: "1px"
-}));
-function RHFUploadImage({
-  name,
-  ...other
-}) {
-  const {
-    control,
-    setValue
-  } = useFormContext();
-  const handleDrop = useCallback((acceptedFiles) => {
-    const file = acceptedFiles[0];
-    if (file) {
-      setValue(name, Object.assign(file, {
-        preview: URL.createObjectURL(file)
-      }));
-    }
-  }, [setValue]);
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    render: ({
-      field,
-      fieldState: {
-        error
-      }
-    }) => {
-      const checkError = !!error && !field.value;
-      return /* @__PURE__ */ jsxs(WrapperRHFUploadImage, {
-        children: [/* @__PURE__ */ jsx(UploadImage, {
-          onDrop: handleDrop,
-          error: checkError,
-          ...other,
-          file: field.value
-        }), checkError && /* @__PURE__ */ jsx(HelperText, {
-          message: error.message
-        })]
-      });
-    }
-  });
-}
-export {
-  RHFUploadImage as R
-};

package/components/maps/index.34ab6a68.js

@@ -1,7 +0,0 @@
-function bearingRawToCSS(gpsBearing, offsetRotate) {
-  let rotation = -((360 + offsetRotate - gpsBearing) % 360);
-  return rotation;
-}
-export {
-  bearingRawToCSS as b
-};

package/components/modal/WindowBase.fd86f575.js

@@ -1,74 +0,0 @@
-import { m as modalUtilityClasses } from "./index.61389369.js";
-import { useEnvironment } from "@m4l/core";
-import clsx from "clsx";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { I as IconButton } from "../mui_extended/IconButton/index.f8a3021b.js";
-import { I as Icon } from "../Icon/index.ad330e78.js";
-import { u as useModal } from "../../hooks/useModal/index.f73d7e42.js";
-const Header = (props) => {
-  const {
-    title,
-    onClickCancel,
-    urlIcon,
-    classes
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const handlerClick = (e) => {
-    e.stopPropagation();
-    onClickCancel && onClickCancel();
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    id: "Header",
-    className: clsx(classes.headerContainer, "m4l_draggable_handle"),
-    children: [urlIcon && /* @__PURE__ */ jsx("div", {
-      className: classes.iconHeader,
-      children: /* @__PURE__ */ jsx(Icon, {
-        src: urlIcon,
-        size: "medium"
-      })
-    }), /* @__PURE__ */ jsx("div", {
-      className: classes.titleHeader,
-      children: title
-    }), /* @__PURE__ */ jsx(IconButton, {
-      className: classes.iconCloseHeader,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/close.svg`,
-      onClick: (e) => handlerClick(e),
-      "aria-label": "click"
-    })]
-  });
-};
-const WindowBase = (props) => {
-  const {
-    children,
-    onClickCancel,
-    ...other
-  } = props;
-  const {
-    closeModal,
-    variant
-  } = useModal();
-  const onCloseCancel = () => {
-    onClickCancel && onClickCancel();
-    closeModal();
-  };
-  const classes = modalUtilityClasses({
-    variant
-  });
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes.windowBaseRoot,
-    children: [/* @__PURE__ */ jsx(Header, {
-      ...other,
-      onClickCancel: onCloseCancel,
-      classes
-    }), /* @__PURE__ */ jsx("div", {
-      className: classes.windowContent,
-      children
-    })]
-  });
-};
-export {
-  WindowBase as W
-};

package/components/modal/WindowConfirm.ee6de236.js

@@ -1,105 +0,0 @@
-import { A as Actions } from "../CommonActions/components/Actions/index.fa7ab18c.js";
-import { Typography } from "@mui/material";
-import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { u as useModal } from "../../hooks/useModal/index.f73d7e42.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { I as Image } from "../Image/index.b799c514.js";
-import { m as modalUtilityClasses } from "./index.61389369.js";
-import { W as WindowBase } from "./WindowBase.fd86f575.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.416cbf9b.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.094290fd.js";
-const dictionary = {
-  MESSAGE: "common_actions.confirm_quit_msg"
-};
-const MessageIlustration = (props) => {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    variant
-  } = useModal();
-  const {
-    msg = getLabel(dictionary.MESSAGE),
-    classes,
-    title
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_warning.svg`;
-  const illustrationDanger = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_danger.svg`;
-  const illustrationSuccess = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_success.svg`;
-  const illustrationInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_info.svg`;
-  return /* @__PURE__ */ jsx("div", {
-    className: classes.containerMassageIlustration,
-    children: /* @__PURE__ */ jsxs("div", {
-      className: classes.modalContent,
-      children: [/* @__PURE__ */ jsx("div", {
-        className: classes.illustrationContainer,
-        children: /* @__PURE__ */ jsx(Image, {
-          className: classes.illustration,
-          src: variant === "warning" ? illustrationWarning : variant === "delete" ? illustrationDanger : variant === "success" ? illustrationSuccess : illustrationInfo
-        })
-      }), /* @__PURE__ */ jsx("div", {
-        children: /* @__PURE__ */ jsx(Typography, {
-          variant: "subtitle",
-          children: title
-        })
-      }), /* @__PURE__ */ jsx("div", {
-        className: classes.messageContainer,
-        children: /* @__PURE__ */ jsx(Typography, {
-          variant: "body",
-          children: msg
-        })
-      })]
-    })
-  });
-};
-const WindowConfirm = (props) => {
-  const {
-    variant,
-    title,
-    onClickCancel,
-    onClickIntro,
-    msg
-  } = props;
-  const {
-    closeModal
-  } = useModal();
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const onCloseCancel = () => {
-    onClickCancel && onClickCancel();
-    closeModal();
-  };
-  const classes = modalUtilityClasses({
-    variant
-  });
-  return /* @__PURE__ */ jsxs(
-    WindowBase,
-    {
-      title: getLabel("modal_dialog.label_window_confirm"),
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/window_confirm.svg`,
-      children: [/* @__PURE__ */ jsx(MessageIlustration, {
-        classes,
-        msg,
-        title
-      }), /* @__PURE__ */ jsxs(Actions, {
-        children: [/* @__PURE__ */ jsx(ActionCancel, {
-          onClick: onCloseCancel
-        }), /* @__PURE__ */ jsx(ActionIntro, {
-          onClick: onClickIntro
-        })]
-      })]
-    }
-  );
-};
-export {
-  WindowConfirm as W
-};

package/components/mui_extended/Accordion/index.7dcdfd3a.js

@@ -1,126 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass, styled, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
-import { I as IconButton } from "../IconButton/index.f8a3021b.js";
-import { useEnvironment } from "@m4l/core";
-import { unstable_composeClasses } from "@mui/base";
-import clsx from "clsx";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../../test/getNameDataTestId.14875ec7.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { I as Icon } from "../../Icon/index.ad330e78.js";
-import { T as Typography } from "../Typography/index.379dd374.js";
-const componentName = "M4LAccordion";
-generateUtilityClasses(componentName, [
-  "root",
-  "endIcon",
-  "labelIcon",
-  "label",
-  "content"
-]);
-function getAccordionUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const accordionUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    endIcon: ["endIcon"],
-    labelIcon: ["labelIcon"],
-    label: ["label"],
-    content: ["content"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getAccordionUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  borderRadius: theme.spacing(0.5),
-  height: theme.spacing(4.5),
-  minHeight: theme.spacing(4.5),
-  backgroundColor: theme.palette.background.header,
-  paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-  marginBottom: "0px"
-}));
-styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  gap: theme.spacing(2)
-}));
-const AccordionRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LAccordion?.styleOverrides
-}));
-const COMPONENT_PREFIX = "m4l-accordion";
-function Accordion(props) {
-  const {
-    label,
-    SKTWidht,
-    SKTHeight,
-    children,
-    accordionProps,
-    summaryProps,
-    labelIcon,
-    className,
-    dataTestId = ""
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const classes = accordionUtilityClasses();
-  return /* @__PURE__ */ jsx(AccordionRoot, {
-    className: clsx(classes.root, className),
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
-    } : {},
-    children: /* @__PURE__ */ jsxs(Accordion$1, {
-      variant: "outlined",
-      square: true,
-      TransitionProps: {
-        unmountOnExit: true
-      },
-      defaultExpanded: true,
-      ...accordionProps,
-      children: [/* @__PURE__ */ jsx(AccordionSummary, {
-        "aria-controls": "expanded-content",
-        disableTouchRipple: false,
-        expandIcon: /* @__PURE__ */ jsx(IconButton, {
-          "aria-label": "settings",
-          src: `${host_static_assets}/${environment_assets}/frontend/components/accordion/assets/icons/expanded.svg`,
-          className: classes.endIcon
-        }),
-        ...summaryProps,
-        children: /* @__PURE__ */ jsxs("div", {
-          className: classes.labelIcon,
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "labelIcon", dataTestId)
-          } : {},
-          children: [labelIcon && /* @__PURE__ */ jsx(Icon, {
-            src: labelIcon
-          }), /* @__PURE__ */ jsx(Typography, {
-            className: classes.label,
-            variant: "subtitle",
-            skeletonWidth: SKTWidht,
-            skeletongHeight: SKTHeight,
-            children: label
-          })]
-        })
-      }), /* @__PURE__ */ jsx(AccordionDetails, {
-        className: classes.content,
-        children
-      })]
-    })
-  });
-}
-export {
-  Accordion as A
-};

package/components/mui_extended/Avatar/index.75e6ed57.js

@@ -1,71 +0,0 @@
-import { forwardRef } from "react";
-import { Skeleton, generateUtilityClasses, generateUtilityClass, styled, Avatar as Avatar$1 } from "@mui/material";
-import { useModuleSkeleton } from "@m4l/core";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { jsx } from "react/jsx-runtime";
-import { unstable_composeClasses } from "@mui/base";
-import clsx from "clsx";
-const AVATAR_PREFIX = "M4LAvatar";
-const getNameAvatarDataTestId = (KEY) => {
-  return `${AVATAR_PREFIX}-${KEY}`;
-};
-const SkeletonAvatar = (props) => {
-  const {
-    className
-  } = props;
-  return /* @__PURE__ */ jsx(Skeleton, {
-    variant: "circular",
-    width: "32px",
-    height: "32px",
-    className,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameAvatarDataTestId("skeleton")
-    } : {}
-  });
-};
-const componentName = "M4LAvatar";
-generateUtilityClasses(componentName, [
-  "root",
-  "skeleton"
-]);
-function getAvatarUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useAvatarUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getAvatarUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const AvatarRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LAvatar?.styleOverrides
-}));
-const Avatar = forwardRef(({
-  color = "default",
-  sx,
-  className,
-  ...other
-}, ref) => {
-  const isSkeleton = useModuleSkeleton();
-  const classes = useAvatarUtilityClasses();
-  return /* @__PURE__ */ jsx(AvatarRoot, {
-    className: clsx(classes.root, className),
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameAvatarDataTestId("root")
-    } : {},
-    children: !isSkeleton ? /* @__PURE__ */ jsx(Avatar$1, {
-      ref,
-      ...other
-    }) : /* @__PURE__ */ jsx(SkeletonAvatar, {
-      className: classes.skeleton
-    })
-  });
-});
-Avatar.displayName = "Avatar";
-export {
-  Avatar as A
-};

package/components/mui_extended/Badge/index.09f5aee5.js

@@ -1,36 +0,0 @@
-import { generateUtilityClasses, styled, Badge as Badge$1 } from "@mui/material";
-import "@mui/base";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { jsx } from "react/jsx-runtime";
-const componentName = "M4LBadge";
-const badgeClasses = generateUtilityClasses(componentName, [
-  "root"
-]);
-const BadgeRoot = styled("div")(({ theme }) => ({
-  display: "flex",
-  ...theme.components?.M4LBadge?.styleOverrides
-}));
-const BADGE_PREFIX = "M4LBadge";
-const getNameBadgeDataTestId = (ELEMENTKEY, ID) => {
-  return `${BADGE_PREFIX}-${ELEMENTKEY}-${ID}`;
-};
-const Badge = (props) => {
-  const {
-    children,
-    dataTestId = "",
-    ...others
-  } = props;
-  return /* @__PURE__ */ jsx(BadgeRoot, {
-    className: badgeClasses.root,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameBadgeDataTestId("root", dataTestId)
-    } : {},
-    children: /* @__PURE__ */ jsx(Badge$1, {
-      ...others,
-      children
-    })
-  });
-};
-export {
-  Badge as B
-};

package/components/mui_extended/BoxIcon/index.e638ecc8.js

@@ -1,22 +0,0 @@
-import { Box } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
-function BoxIcon({
-  src,
-  sx
-}) {
-  return /* @__PURE__ */ jsx(Box, {
-    component: "span",
-    sx: {
-      width: 20,
-      height: 20,
-      display: "inline-block",
-      bgcolor: "currentColor",
-      mask: `url(${src}) no-repeat center / contain`,
-      WebkitMask: `url(${src}) no-repeat center / contain`,
-      ...sx
-    }
-  });
-}
-export {
-  BoxIcon as B
-};