braid-design-system 32.16.0 → 32.16.2

package/dist/styles/lib/components/TooltipRenderer/TooltipRenderer.cjs

@@ -1,263 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const reactPopperTooltip = require("react-popper-tooltip");
-const isMobile = require("is-mobile");
-const assert = require("assert");
-const reactDom = require("react-dom");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("../../../../side-effects/lib/components/BraidProvider/BraidProvider.cjs");
-const styles_lib_components_BraidProvider_VanillaThemeContainer_cjs = require("../BraidProvider/VanillaThemeContainer.cjs");
-const styles_lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
-const styles_lib_components_Tabs_Tab_cjs = require("../Tabs/Tab.cjs");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs = require("./TooltipRenderer.css.cjs");
-const styles_lib_components_Tabs_Tabs_cjs = require("../Tabs/Tabs.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const isMobile__default = /* @__PURE__ */ _interopDefaultCompat(isMobile);
-const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
-const BraidPortal = ({ children, container }) => {
-  const { vanillaTheme } = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme();
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.TextContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_BraidProvider_VanillaThemeContainer_cjs.VanillaThemeContainer, { theme: vanillaTheme, setDefaultTextTones: true, children }) }),
-    container ?? document.body
-  );
-};
-const useThemeName = () => sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().name;
-const StaticTooltipContext = React.createContext(false);
-const TooltipTextDefaultsProvider = ({
-  children
-}) => {
-  const themeName = useThemeName();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    styles_lib_components_Accordion_AccordionItem_cjs.DefaultTextPropsProvider,
-    {
-      size: themeName === "docs" ? "small" : void 0,
-      weight: "medium",
-      children
-    }
-  );
-};
-const borderRadius = "large";
-const TooltipContent = ({
-  children,
-  opacity,
-  arrowProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  styles_lib_components_Box_Box_cjs.Box,
-  {
-    display: "flex",
-    position: "relative",
-    transition: "fast",
-    opacity: opacity === 0 ? 0 : void 0,
-    className: opacity === 0 ? styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.verticalOffsetBeforeEntrance : styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      styles_lib_components_Box_Box_cjs.Box,
-      {
-        boxShadow: "large",
-        background: "neutral",
-        borderRadius,
-        padding: "small",
-        className: [styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.maxWidth, styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0],
-        children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipTextDefaultsProvider, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { position: "relative", zIndex: 1, children }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            styles_lib_components_Box_Box_cjs.Box,
-            {
-              ...arrowProps,
-              borderRadius,
-              background: "neutral",
-              className: styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.arrow
-            }
-          )
-        ] })
-      }
-    )
-  }
-);
-const validPlacements = ["top", "bottom"];
-const normaliseRect = (domRect) => ({
-  top: Math.round((domRect == null ? void 0 : domRect.top) || 0),
-  left: Math.round((domRect == null ? void 0 : domRect.left) || 0),
-  height: Math.round((domRect == null ? void 0 : domRect.height) || 0),
-  width: Math.round((domRect == null ? void 0 : domRect.width) || 0)
-});
-const defaultRect = normaliseRect();
-const doesBoundingBoxNeedUpdating = (element, previousRect) => {
-  const currentRect = normaliseRect(element == null ? void 0 : element.getBoundingClientRect());
-  return JSON.stringify(currentRect) !== JSON.stringify(previousRect);
-};
-const TooltipRenderer = ({
-  id,
-  tooltip,
-  placement = "top",
-  children
-}) => {
-  assert__default.default(
-    validPlacements.includes(placement),
-    `The 'placement' prop must be one of the following: ${validPlacements.join(
-      ", "
-    )}`
-  );
-  const isStatic = React.useContext(StaticTooltipContext);
-  const [controlledVisible, setControlledVisible] = React.useState(false);
-  const [opacity, setOpacity] = React.useState(0);
-  const { grid, space } = styles_lib_components_Tabs_Tab_cjs.useSpace();
-  const triggerBoundingBoxRef = React.useRef(defaultRect);
-  const tooltipBoundingRectRef = React.useRef(defaultRect);
-  const {
-    visible,
-    getTooltipProps,
-    setTooltipRef,
-    tooltipRef,
-    setTriggerRef,
-    triggerRef,
-    getArrowProps,
-    update
-  } = reactPopperTooltip.usePopperTooltip(
-    {
-      placement,
-      trigger: [isMobile__default.default() ? "click" : "hover", "focus"],
-      visible: isStatic || controlledVisible,
-      onVisibleChange: (newState) => {
-        triggerBoundingBoxRef.current = normaliseRect(
-          triggerRef == null ? void 0 : triggerRef.getBoundingClientRect()
-        );
-        tooltipBoundingRectRef.current = normaliseRect(
-          tooltipRef == null ? void 0 : tooltipRef.getBoundingClientRect()
-        );
-        setControlledVisible(newState);
-      }
-    },
-    {
-      modifiers: [
-        {
-          name: "preventOverflow",
-          options: {
-            padding: space.xsmall * grid
-          }
-        },
-        {
-          name: "offset",
-          options: {
-            offset: [0, space.small * grid]
-          }
-        },
-        {
-          name: "arrow",
-          options: {
-            padding: space.xsmall * grid
-          }
-        },
-        ...isStatic ? [
-          {
-            name: "flip",
-            options: {
-              fallbackPlacements: []
-            }
-          }
-        ] : []
-      ]
-    }
-  );
-  styles_lib_components_Tabs_Tabs_cjs.useIsomorphicLayoutEffect(() => {
-    if (controlledVisible && update && (doesBoundingBoxNeedUpdating(triggerRef, triggerBoundingBoxRef.current) || doesBoundingBoxNeedUpdating(tooltipRef, tooltipBoundingRectRef.current))) {
-      triggerBoundingBoxRef.current = normaliseRect(
-        triggerRef == null ? void 0 : triggerRef.getBoundingClientRect()
-      );
-      tooltipBoundingRectRef.current = normaliseRect(
-        tooltipRef == null ? void 0 : tooltipRef.getBoundingClientRect()
-      );
-      update();
-    }
-  });
-  React.useEffect(() => {
-    if (visible) {
-      const handleKeyDown = ({ key }) => {
-        if (key === "Escape") {
-          setControlledVisible(false);
-        }
-      };
-      const handleScroll = () => {
-        setControlledVisible(false);
-      };
-      const scrollHandlerOptions = {
-        capture: true,
-        passive: true
-      };
-      document.addEventListener("keydown", handleKeyDown);
-      document.addEventListener("scroll", handleScroll, scrollHandlerOptions);
-      return () => {
-        document.removeEventListener("keydown", handleKeyDown);
-        document.removeEventListener(
-          "scroll",
-          handleScroll,
-          scrollHandlerOptions
-        );
-      };
-    }
-  }, [visible]);
-  React.useEffect(() => {
-    if (!triggerRef) {
-      return;
-    }
-    if (visible) {
-      const handleFocusIn = (event) => {
-        if (event.currentTarget !== triggerRef) {
-          setControlledVisible(false);
-        }
-      };
-      document.addEventListener("focusin", handleFocusIn);
-      return () => {
-        document.removeEventListener("focusin", handleFocusIn);
-      };
-    }
-  }, [triggerRef, visible]);
-  assert__default.default(
-    React.useEffect(() => {
-      if (tooltipRef) {
-        assert__default.default(
-          tooltipRef.querySelectorAll("button, input, select, textarea, a").length === 0,
-          "For accessibility reasons, tooltips must not contain interactive elements"
-        );
-      }
-    }, [tooltipRef]) === void 0
-  );
-  React.useEffect(() => {
-    if (!tooltipRef || !visible) {
-      return setOpacity(0);
-    }
-    const timeout = setTimeout(() => setOpacity(100), isMobile__default.default() ? 0 : 250);
-    return () => clearTimeout(timeout);
-  }, [tooltipRef, visible]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    children({
-      triggerProps: {
-        tabIndex: 0,
-        ref: setTriggerRef,
-        "aria-describedby": id
-      }
-    }),
-    triggerRef && /* @__PURE__ */ jsxRuntime.jsx(BraidPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        id,
-        role: "tooltip",
-        hidden: !visible ? true : void 0,
-        className: styles_lib_css_atoms_atoms_cjs.atoms({
-          reset: "div",
-          zIndex: "notification",
-          pointerEvents: "none",
-          display: triggerRef && visible ? void 0 : "none"
-        }),
-        ...visible ? getTooltipProps({
-          ref: setTooltipRef
-        }) : null,
-        children: /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { opacity, arrowProps: getArrowProps(), children: tooltip })
-      }
-    ) })
-  ] });
-};
-exports.BraidPortal = BraidPortal;
-exports.TooltipRenderer = TooltipRenderer;
-exports.useThemeName = useThemeName;

package/dist/styles/lib/components/TooltipRenderer/TooltipRenderer.css.cjs

@@ -1,60 +0,0 @@
-"use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const cssUtils = require("@vanilla-extract/css-utils");
-const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
-__vanilla_filescope__.setFileScope("src/lib/components/TooltipRenderer/TooltipRenderer.css.ts", "braid-design-system");
-const constants = {
-  maxWidth: "260px",
-  arrowSize: "12px"
-};
-const maxWidth = css.style({
-  maxWidth: constants.maxWidth
-}, "maxWidth");
-const verticalOffsetBeforeEntrance = css.style({
-  transform: "translateZ(0) translateY(4px)",
-  selectors: {
-    "[data-popper-placement^=bottom] &": {
-      transform: "translateZ(0) translateY(-4px)"
-    }
-  }
-}, "verticalOffsetBeforeEntrance");
-const translateZ0 = css.style({
-  transform: "translateZ(0)"
-}, "translateZ0");
-const borderRadius = styles_lib_themes_vars_css_cjs.vars.borderRadius.small;
-const offset = cssUtils.calc(constants.arrowSize).divide(2).negate().toString();
-const arrow = css.style({
-  visibility: "hidden",
-  ":before": {
-    visibility: "visible",
-    content: "''",
-    transform: "rotate(45deg)"
-  },
-  selectors: {
-    "&, &::before": {
-      width: cssUtils.calc.add(constants.arrowSize, cssUtils.calc.multiply(borderRadius, 2)),
-      height: cssUtils.calc.add(constants.arrowSize, cssUtils.calc.multiply(borderRadius, 2)),
-      position: "absolute",
-      background: "inherit",
-      borderRadius
-    },
-    "[data-popper-placement^=top] &": {
-      bottom: offset
-    },
-    "[data-popper-placement^=bottom] &": {
-      top: offset
-    },
-    "[data-popper-placement^=left] &": {
-      right: offset
-    },
-    "[data-popper-placement^=right] &": {
-      left: offset
-    }
-  }
-}, "arrow");
-__vanilla_filescope__.endFileScope();
-exports.arrow = arrow;
-exports.maxWidth = maxWidth;
-exports.translateZ0 = translateZ0;
-exports.verticalOffsetBeforeEntrance = verticalOffsetBeforeEntrance;

package/dist/styles/lib/components/TooltipRenderer/TooltipRenderer.mjs

@@ -1,261 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useState, useRef, useEffect } from "react";
-import { usePopperTooltip } from "react-popper-tooltip";
-import isMobile from "is-mobile";
-import assert from "assert";
-import { createPortal } from "react-dom";
-import { TextContext, DefaultTextPropsProvider } from "../Accordion/AccordionItem.mjs";
-import { useBraidTheme } from "../../../../side-effects/lib/components/BraidProvider/BraidProvider.mjs";
-import { VanillaThemeContainer } from "../BraidProvider/VanillaThemeContainer.mjs";
-import { atoms } from "../../css/atoms/atoms.mjs";
-import { useSpace } from "../Tabs/Tab.mjs";
-import { Box } from "../Box/Box.mjs";
-import { verticalOffsetBeforeEntrance, translateZ0, maxWidth, arrow } from "./TooltipRenderer.css.mjs";
-import { useIsomorphicLayoutEffect } from "../Tabs/Tabs.mjs";
-const BraidPortal = ({ children, container }) => {
-  const { vanillaTheme } = useBraidTheme();
-  return createPortal(
-    /* @__PURE__ */ jsx(TextContext.Provider, { value: null, children: /* @__PURE__ */ jsx(VanillaThemeContainer, { theme: vanillaTheme, setDefaultTextTones: true, children }) }),
-    container ?? document.body
-  );
-};
-const useThemeName = () => useBraidTheme().name;
-const StaticTooltipContext = createContext(false);
-const TooltipTextDefaultsProvider = ({
-  children
-}) => {
-  const themeName = useThemeName();
-  return /* @__PURE__ */ jsx(
-    DefaultTextPropsProvider,
-    {
-      size: themeName === "docs" ? "small" : void 0,
-      weight: "medium",
-      children
-    }
-  );
-};
-const borderRadius = "large";
-const TooltipContent = ({
-  children,
-  opacity,
-  arrowProps
-}) => /* @__PURE__ */ jsx(
-  Box,
-  {
-    display: "flex",
-    position: "relative",
-    transition: "fast",
-    opacity: opacity === 0 ? 0 : void 0,
-    className: opacity === 0 ? verticalOffsetBeforeEntrance : translateZ0,
-    children: /* @__PURE__ */ jsx(
-      Box,
-      {
-        boxShadow: "large",
-        background: "neutral",
-        borderRadius,
-        padding: "small",
-        className: [maxWidth, translateZ0],
-        children: /* @__PURE__ */ jsxs(TooltipTextDefaultsProvider, { children: [
-          /* @__PURE__ */ jsx(Box, { position: "relative", zIndex: 1, children }),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              ...arrowProps,
-              borderRadius,
-              background: "neutral",
-              className: arrow
-            }
-          )
-        ] })
-      }
-    )
-  }
-);
-const validPlacements = ["top", "bottom"];
-const normaliseRect = (domRect) => ({
-  top: Math.round((domRect == null ? void 0 : domRect.top) || 0),
-  left: Math.round((domRect == null ? void 0 : domRect.left) || 0),
-  height: Math.round((domRect == null ? void 0 : domRect.height) || 0),
-  width: Math.round((domRect == null ? void 0 : domRect.width) || 0)
-});
-const defaultRect = normaliseRect();
-const doesBoundingBoxNeedUpdating = (element, previousRect) => {
-  const currentRect = normaliseRect(element == null ? void 0 : element.getBoundingClientRect());
-  return JSON.stringify(currentRect) !== JSON.stringify(previousRect);
-};
-const TooltipRenderer = ({
-  id,
-  tooltip,
-  placement = "top",
-  children
-}) => {
-  assert(
-    validPlacements.includes(placement),
-    `The 'placement' prop must be one of the following: ${validPlacements.join(
-      ", "
-    )}`
-  );
-  const isStatic = useContext(StaticTooltipContext);
-  const [controlledVisible, setControlledVisible] = useState(false);
-  const [opacity, setOpacity] = useState(0);
-  const { grid, space } = useSpace();
-  const triggerBoundingBoxRef = useRef(defaultRect);
-  const tooltipBoundingRectRef = useRef(defaultRect);
-  const {
-    visible,
-    getTooltipProps,
-    setTooltipRef,
-    tooltipRef,
-    setTriggerRef,
-    triggerRef,
-    getArrowProps,
-    update
-  } = usePopperTooltip(
-    {
-      placement,
-      trigger: [isMobile() ? "click" : "hover", "focus"],
-      visible: isStatic || controlledVisible,
-      onVisibleChange: (newState) => {
-        triggerBoundingBoxRef.current = normaliseRect(
-          triggerRef == null ? void 0 : triggerRef.getBoundingClientRect()
-        );
-        tooltipBoundingRectRef.current = normaliseRect(
-          tooltipRef == null ? void 0 : tooltipRef.getBoundingClientRect()
-        );
-        setControlledVisible(newState);
-      }
-    },
-    {
-      modifiers: [
-        {
-          name: "preventOverflow",
-          options: {
-            padding: space.xsmall * grid
-          }
-        },
-        {
-          name: "offset",
-          options: {
-            offset: [0, space.small * grid]
-          }
-        },
-        {
-          name: "arrow",
-          options: {
-            padding: space.xsmall * grid
-          }
-        },
-        ...isStatic ? [
-          {
-            name: "flip",
-            options: {
-              fallbackPlacements: []
-            }
-          }
-        ] : []
-      ]
-    }
-  );
-  useIsomorphicLayoutEffect(() => {
-    if (controlledVisible && update && (doesBoundingBoxNeedUpdating(triggerRef, triggerBoundingBoxRef.current) || doesBoundingBoxNeedUpdating(tooltipRef, tooltipBoundingRectRef.current))) {
-      triggerBoundingBoxRef.current = normaliseRect(
-        triggerRef == null ? void 0 : triggerRef.getBoundingClientRect()
-      );
-      tooltipBoundingRectRef.current = normaliseRect(
-        tooltipRef == null ? void 0 : tooltipRef.getBoundingClientRect()
-      );
-      update();
-    }
-  });
-  useEffect(() => {
-    if (visible) {
-      const handleKeyDown = ({ key }) => {
-        if (key === "Escape") {
-          setControlledVisible(false);
-        }
-      };
-      const handleScroll = () => {
-        setControlledVisible(false);
-      };
-      const scrollHandlerOptions = {
-        capture: true,
-        passive: true
-      };
-      document.addEventListener("keydown", handleKeyDown);
-      document.addEventListener("scroll", handleScroll, scrollHandlerOptions);
-      return () => {
-        document.removeEventListener("keydown", handleKeyDown);
-        document.removeEventListener(
-          "scroll",
-          handleScroll,
-          scrollHandlerOptions
-        );
-      };
-    }
-  }, [visible]);
-  useEffect(() => {
-    if (!triggerRef) {
-      return;
-    }
-    if (visible) {
-      const handleFocusIn = (event) => {
-        if (event.currentTarget !== triggerRef) {
-          setControlledVisible(false);
-        }
-      };
-      document.addEventListener("focusin", handleFocusIn);
-      return () => {
-        document.removeEventListener("focusin", handleFocusIn);
-      };
-    }
-  }, [triggerRef, visible]);
-  assert(
-    useEffect(() => {
-      if (tooltipRef) {
-        assert(
-          tooltipRef.querySelectorAll("button, input, select, textarea, a").length === 0,
-          "For accessibility reasons, tooltips must not contain interactive elements"
-        );
-      }
-    }, [tooltipRef]) === void 0
-  );
-  useEffect(() => {
-    if (!tooltipRef || !visible) {
-      return setOpacity(0);
-    }
-    const timeout = setTimeout(() => setOpacity(100), isMobile() ? 0 : 250);
-    return () => clearTimeout(timeout);
-  }, [tooltipRef, visible]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    children({
-      triggerProps: {
-        tabIndex: 0,
-        ref: setTriggerRef,
-        "aria-describedby": id
-      }
-    }),
-    triggerRef && /* @__PURE__ */ jsx(BraidPortal, { children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        id,
-        role: "tooltip",
-        hidden: !visible ? true : void 0,
-        className: atoms({
-          reset: "div",
-          zIndex: "notification",
-          pointerEvents: "none",
-          display: triggerRef && visible ? void 0 : "none"
-        }),
-        ...visible ? getTooltipProps({
-          ref: setTooltipRef
-        }) : null,
-        children: /* @__PURE__ */ jsx(TooltipContent, { opacity, arrowProps: getArrowProps(), children: tooltip })
-      }
-    ) })
-  ] });
-};
-export {
-  BraidPortal,
-  TooltipRenderer,
-  useThemeName
-};

package/dist/styles/lib/components/icons/IconArrow/IconArrow.cjs

@@ -1,42 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const styles_lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
-const styles_lib_hooks_useIcon_index_cjs = require("../../../hooks/useIcon/index.cjs");
-const styles_lib_components_icons_IconArrow_IconArrow_css_cjs = require("./IconArrow.css.cjs");
-const IconArrowSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24",
-    focusable: "false",
-    fill: "currentColor",
-    "aria-labelledby": titleId,
-    ...props,
-    children: [
-      title ? /* @__PURE__ */ jsxRuntime.jsx("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m11.293 4.293-7 7a1 1 0 1 0 1.414 1.414L11 7.414V19a1 1 0 1 0 2 0V7.414l5.293 5.293a1 1 0 1 0 1.414-1.414l-7-7a1 1 0 0 0-1.414 0Z" })
-    ]
-  }
-);
-const IconArrow = ({ direction = "up", ...props }) => {
-  const { className, ...iconProps } = styles_lib_hooks_useIcon_index_cjs.useIcon(props);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    styles_lib_components_Box_Box_cjs.Box,
-    {
-      component: IconArrowSvg,
-      className: [
-        styles_lib_components_icons_IconArrow_IconArrow_css_cjs.root,
-        className,
-        {
-          [styles_lib_components_icons_IconArrow_IconArrow_css_cjs.rotate]: direction === "right" || direction === "left",
-          [styles_lib_components_icons_IconArrow_IconArrow_css_cjs.flip]: direction === "down",
-          [styles_lib_components_icons_IconArrow_IconArrow_css_cjs.mirror]: direction === "left"
-        }
-      ],
-      ...iconProps
-    }
-  );
-};
-exports.IconArrow = IconArrow;

package/dist/styles/lib/components/icons/IconArrow/IconArrow.mjs

@@ -1,43 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Box } from "../../Box/Box.mjs";
-import { useIcon } from "../../../hooks/useIcon/index.mjs";
-import { root, rotate, flip, mirror } from "./IconArrow.css.mjs";
-const IconArrowSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24",
-    focusable: "false",
-    fill: "currentColor",
-    "aria-labelledby": titleId,
-    ...props,
-    children: [
-      title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
-      /* @__PURE__ */ jsx("path", { d: "m11.293 4.293-7 7a1 1 0 1 0 1.414 1.414L11 7.414V19a1 1 0 1 0 2 0V7.414l5.293 5.293a1 1 0 1 0 1.414-1.414l-7-7a1 1 0 0 0-1.414 0Z" })
-    ]
-  }
-);
-const IconArrow = ({ direction = "up", ...props }) => {
-  const { className, ...iconProps } = useIcon(props);
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      component: IconArrowSvg,
-      className: [
-        root,
-        className,
-        {
-          [rotate]: direction === "right" || direction === "left",
-          [flip]: direction === "down",
-          [mirror]: direction === "left"
-        }
-      ],
-      ...iconProps
-    }
-  );
-};
-export {
-  IconArrow
-};