@ndla/ui 56.0.121-alpha.0 → 56.0.122-alpha.0

package/lib/Embed/ExternalEmbed.js

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _ResourceBox = require("../ResourceBox");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
-  base: {
-    "& iframe": {
-      height: "auto",
-      width: "100%"
-    }
-  }
-});
-const ExternalEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const figRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    const iframe = figRef.current?.querySelector("iframe");
-    if (iframe) {
-      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];
-      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
-      iframe.width = "";
-      iframe.height = "";
-    }
-  }, []);
-  if (embed.status === "error") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      type: "external"
-    });
-  }
-  const {
-    embedData,
-    data
-  } = embed;
-  if (embedData.type === "fullscreen") {
-    const image = {
-      src: data.iframeImage?.image.imageUrl,
-      alt: embedData.alt !== undefined ? embedData.alt : data.iframeImage?.alttext?.alttext ?? ""
-    };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
-      "data-embed-type": "external",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResourceBox.ResourceBox, {
-        image: image,
-        title: embedData.title ?? "",
-        url: embedData.url,
-        caption: embedData.caption ?? "",
-        buttonText: t("license.other.itemImage.ariaLabel")
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
-    "data-embed-type": "external",
-    ref: figRef,
-    dangerouslySetInnerHTML: {
-      __html: data?.oembed?.html ?? ""
-    }
-  });
-};
-var _default = exports.default = ExternalEmbed;

package/lib/Embed/FootnoteEmbed.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactI18next = require("react-i18next");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const StyledSup = (0, _jsx2.styled)("sup", {
-  base: {
-    "& a": {
-      textStyle: "label.xsmall",
-      marginInlineStart: "1"
-    }
-  }
-});
-const FootnoteEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  if (embed.status === "error") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: t("error")
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    id: `ref${embed.data.entryNum}`,
-    "data-embed-type": "footnote",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSup, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        href: `#note${embed.data.entryNum}`,
-        target: "_self",
-        children: `[${embed.data.entryNum}]`
-      })
-    })
-  });
-};
-var _default = exports.default = FootnoteEmbed;

package/lib/Embed/GlossEmbed.js

@@ -1,88 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GlossEmbed = void 0;
-var _react = require("react");
-var _react2 = require("@ark-ui/react");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _ConceptInlineTriggerButton = require("./ConceptInlineTriggerButton");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _Gloss = require("../Gloss");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const StyledPopoverContent = (0, _jsx2.styled)(_primitives.PopoverContent, {
-  base: {
-    width: "surface.xlarge"
-  }
-});
-const GlossEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const contentRef = (0, _react.useRef)(null);
-  if (embed.status === "error" && embed.embedData.type === "inline") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: embed.embedData.linkText
-    });
-  }
-  if (embed.status === "error" || !embed.data.concept.glossData) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      type: "gloss"
-    });
-  }
-  const {
-    concept,
-    visualElement
-  } = embed.data;
-  const audio = visualElement?.status === "success" && visualElement.resource === "audio" ? {
-    src: visualElement.data.audioFile.url,
-    title: visualElement.data.title.title
-  } : undefined;
-  if (embed.embedData.type === "inline") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
-      initialFocusEl: () => contentRef.current,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
-        asChild: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConceptInlineTriggerButton.ConceptInlineTriggerButton, {
-          children: embed.embedData.linkText
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Portal, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
-          ref: contentRef,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Gloss.Gloss, {
-              glossData: concept.glossData,
-              title: concept.title,
-              audio: audio,
-              exampleIds: embed.embedData.exampleIds,
-              exampleLangs: embed.embedData.exampleLangs
-            })
-          })
-        })
-      })]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
-    "data-embed-type": "gloss",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Gloss.Gloss, {
-      glossData: concept.glossData,
-      title: concept.title,
-      audio: audio,
-      exampleIds: embed.embedData.exampleIds,
-      exampleLangs: embed.embedData.exampleLangs,
-      variant: "bordered"
-    })
-  });
-};
-exports.GlossEmbed = GlossEmbed;

package/lib/Embed/H5pEmbed.js

@@ -1,68 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactI18next = require("react-i18next");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
-  base: {
-    "& iframe": {
-      height: "auto",
-      width: "100%"
-    }
-  }
-});
-const FigureOembed = (0, _jsx2.styled)(_primitives.Figure, {
-  base: {
-    width: "100%",
-    "& iframe": {
-      width: "100%"
-    }
-  }
-});
-const H5pEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  if (embed.status === "error") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      type: "h5p"
-    });
-  }
-  if (embed.data.oembed) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(FigureOembed, {
-      "data-embed-type": "h5p",
-      dangerouslySetInnerHTML: {
-        __html: embed.data.oembed.html ?? ""
-      }
-    });
-  }
-  const title = embed.embedData.title?.trim() ? embed.embedData.title : embed.data.h5pLicenseInformation?.h5p.title?.trim() ? embed.data.h5pLicenseInformation.h5p.title : embed.embedData.url;
-  const titleWithPrefix = `${t("embed.type.h5p")}: ${title}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
-    "data-embed-type": "h5p",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
-      title: titleWithPrefix,
-      "aria-label": titleWithPrefix,
-      src: embed.embedData.url
-    })
-  });
-};
-var _default = exports.default = H5pEmbed;

package/lib/Embed/IframeEmbed.js

@@ -1,100 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _ResourceBox = require("../ResourceBox");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const StyledIframe = (0, _jsx2.styled)("iframe", {
-  base: {
-    width: "100%",
-    border: 0
-  }
-});
-const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
-  base: {
-    clear: "both"
-  }
-});
-const IframeEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const iframeRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    const iframe = iframeRef.current;
-    if (iframe) {
-      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];
-      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
-      iframe.width = "";
-      iframe.height = "";
-    }
-  }, []);
-  if (embed.status === "error") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      type: "external"
-    });
-  }
-  const {
-    embedData,
-    data
-  } = embed;
-  if (embedData.type === "fullscreen") {
-    const iframeImage = embed.status === "success" ? data.iframeImage : undefined;
-    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
-    const image = {
-      src: iframeImage?.image.imageUrl,
-      alt: alt ?? ""
-    };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
-      "data-embed-type": "iframe",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResourceBox.ResourceBox, {
-        image: image,
-        title: embedData.title ?? "",
-        url: embedData.url,
-        caption: embedData.caption ?? "",
-        buttonText: t("license.other.itemImage.ariaLabel")
-      })
-    });
-  }
-  const {
-    width,
-    height,
-    url
-  } = embedData;
-  const strippedWidth = typeof width === "number" ? width : width?.replace(/\s*px/, "");
-  const strippedHeight = typeof height === "number" ? height : height?.replace(/\s*px/, "");
-  const title = `${t("embed.type.external")}: ${embedData.title?.trim() ? embedData.title : url}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
-    "data-embed-type": "iframe",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIframe, {
-      ref: iframeRef,
-      title: title,
-      "aria-label": title,
-      src: url,
-      width: strippedWidth,
-      height: strippedHeight,
-      allow: "fullscreen; encrypted-media",
-      loading: "lazy"
-    })
-  });
-};
-var _default = exports.default = IframeEmbed;

package/lib/Embed/ImageEmbed.js

@@ -1,248 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getLicenseCredits = exports.getFocalPoint = exports.getCrop = exports.default = void 0;
-var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _LicenseByline = require("../LicenseByline");
-var _licenseAttributes = require("../utils/licenseAttributes");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const getLicenseCredits = copyright => {
-  return {
-    creators: copyright?.creators ?? [],
-    rightsholders: copyright?.rightsholders ?? [],
-    processors: copyright?.processors ?? []
-  };
-};
-exports.getLicenseCredits = getLicenseCredits;
-const getFigureProps = (size, float) => {
-  const actualFloat = float === "left" ? "left" : float === "right" ? "right" : undefined;
-  const replacedSize = size?.replace("-hide-byline", "") ?? "full";
-  const actualSize = replacedSize === "fullwidth" ? "full" : replacedSize;
-  return {
-    float: actualFloat,
-    // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.
-    size: actualSize === "full" && float ? "medium" : actualSize
-  };
-};
-const getSizes = (size, align) => {
-  if (align && size === "full") {
-    return "(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw";
-  }
-  if (align && size === "small") {
-    return "(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw";
-  }
-  if (align && size === "xsmall") {
-    return "(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw";
-  }
-  return "(min-width: 1024px) 1024px, 100vw";
-};
-const getFocalPoint = data => {
-  const focalX = Number.parseFloat(data.focalX ?? "");
-  const focalY = Number.parseFloat(data.focalY ?? "");
-  if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {
-    return {
-      x: focalX,
-      y: focalY
-    };
-  }
-  return undefined;
-};
-exports.getFocalPoint = getFocalPoint;
-const getCrop = data => {
-  const lowerRightX = Number.parseFloat(data.lowerRightX ?? "");
-  const lowerRightY = Number.parseFloat(data.lowerRightY ?? "");
-  const upperLeftX = Number.parseFloat(data.upperLeftX ?? "");
-  const upperLeftY = Number.parseFloat(data.upperLeftY ?? "");
-  if (!Number.isNaN(lowerRightX) && !Number.isNaN(lowerRightY) && !Number.isNaN(upperLeftX) && !Number.isNaN(upperLeftY)) {
-    return {
-      startX: lowerRightX,
-      startY: lowerRightY,
-      endX: upperLeftX,
-      endY: upperLeftY
-    };
-  }
-  return undefined;
-};
-exports.getCrop = getCrop;
-const expandedSizes = "(min-width: 1024px) 1024px, 100vw";
-const ImageWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    overflow: "hidden",
-    position: "relative",
-    width: "100%",
-    "& img": {
-      width: "100%"
-    }
-  },
-  variants: {
-    svg: {
-      true: {
-        display: "flex",
-        justifyContent: "center"
-      },
-      false: {}
-    },
-    border: {
-      true: {
-        border: "1px solid",
-        borderColor: "stroke.subtle",
-        borderRadius: "xsmall",
-        "& img": {
-          borderRadius: "0"
-        }
-      },
-      false: {}
-    },
-    expandable: {
-      true: {
-        cursor: "pointer"
-      },
-      false: {}
-    }
-  }
-});
-const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
-  base: {
-    zIndex: "docked",
-    _hover: {
-      "& [data-byline-button]": {
-        background: "background.default"
-      },
-      "& button[data-expanded]": {
-        transform: "scale(1.2)"
-      }
-    },
-    "& button[data-expanded='true']": {
-      "& svg": {
-        transform: "rotate(-45deg)"
-      }
-    }
-  }
-});
-const ExpandButton = (0, _jsx2.styled)("button", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    position: "absolute",
-    padding: "0",
-    top: "xsmall",
-    right: "xsmall",
-    width: "medium",
-    height: "medium",
-    border: "2px solid",
-    borderColor: "background.default",
-    transitionProperty: "transform, background-color, color",
-    transitionDuration: "normal",
-    transitionTimingFunction: "ease-out",
-    color: "background.default",
-    backgroundColor: "surface.action",
-    borderRadius: "large",
-    "& svg": {
-      transitionProperty: "transform",
-      transitionDuration: "normal",
-      transitionTimingFunction: "ease-out"
-    },
-    tabletDown: {
-      display: "none"
-    }
-  }
-}, {
-  defaultProps: {
-    type: "button"
-  }
-});
-const ImageEmbed = _ref => {
-  let {
-    embed,
-    previewAlt,
-    lang,
-    renderContext = "article",
-    children
-  } = _ref;
-  const [imageSizes, setImageSizes] = (0, _react.useState)(undefined);
-  const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const parsedDescription = (0, _react.useMemo)(() => {
-    if (embed.embedData.caption || renderContext === "article") {
-      return embed.embedData.caption ? (0, _htmlReactParser.default)(embed.embedData.caption) : undefined;
-    }
-    if (embed.status === "success" && embed.data.caption.caption) {
-      return (0, _htmlReactParser.default)(embed.data.caption.caption);
-    }
-  }, [embed, renderContext]);
-  if (embed.status === "error") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      type: "image",
-      figureType: figureProps?.size,
-      float: figureProps?.float
-    });
-  }
-  const {
-    data,
-    embedData
-  } = embed;
-  const altText = embedData.alt || "";
-  const sizes = getSizes(embedData.size, embedData.align);
-  const focalPoint = getFocalPoint(embedData);
-  const crop = getCrop(embedData);
-  const toggleImageSize = () => {
-    setImageSizes(sizes => !sizes ? expandedSizes : undefined);
-  };
-  const licenseProps = (0, _licenseAttributes.licenseAttributes)(data.copyright.license.license, lang, embedData.url);
-  const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
-    float: figureProps?.float,
-    size: imageSizes ? "full" : figureSize,
-    "data-embed-type": "image",
-    ...licenseProps,
-    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageWrapper, {
-      border: embedData.border === "true",
-      expandable: !!figureProps?.float,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Image, {
-        focalPoint: focalPoint,
-        contentType: data.image.contentType,
-        crop: crop,
-        sizes: imageSizes ?? sizes,
-        alt: altText,
-        src: data.image.imageUrl,
-        lang: lang,
-        onClick: figureProps?.float ? toggleImageSize : undefined,
-        variant: "rounded"
-      }), (embedData.align === "right" || embedData.align === "left") && /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandButton, {
-        "aria-label": t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`),
-        onClick: toggleImageSize,
-        "data-expanded": !!imageSizes,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AddLine, {})
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
-      type: "image",
-      copyright: data.copyright,
-      description: parsedDescription,
-      hideDescription: embedData.hideCaption === "true",
-      hideCopyright: embedData.hideByline === "true",
-      visibleAlt: previewAlt ? embed.embedData.alt : ""
-    })]
-  });
-};
-var _default = exports.default = ImageEmbed;

package/lib/Embed/InlineTriggerButton.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InlineTriggerButton = void 0;
-var _react = require("react");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _util = require("@ndla/util");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const StyledSpan = (0, _jsx2.styled)("span", {
-  base: {}
-});
-const InlineTriggerButton = exports.InlineTriggerButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    onClick,
-    ...props
-  } = _ref;
-  const spanRef = (0, _react.useRef)(null);
-
-  // Emulate a button click when pressing Enter or Space
-  const onKeyboardEvent = (0, _react.useCallback)(event => {
-    if (event.key === "Enter" || event.key === " ") {
-      spanRef.current?.click();
-    }
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSpan, {
-    ref: (0, _util.composeRefs)(spanRef, ref),
-    onKeyUp: onKeyboardEvent,
-    onClick: onClick,
-    role: "button",
-    tabIndex: 0,
-    ...props
-  });
-});