@hellboy/ds 0.1.3 → 0.2.7

package/dist/components/divider.js

@@ -0,0 +1,344 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/divider/index.ts
+var divider_exports = {};
+__export(divider_exports, {
+  Divider: () => Divider
+});
+module.exports = __toCommonJS(divider_exports);
+
+// src/components/button/button.tsx
+var import_react2 = __toESM(require("react"));
+var import_react3 = require("@ariakit/react");
+
+// src/components/icons/icons.tsx
+var import_react = require("@iconify/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Icon = ({ name, size = 24, className, loading = false, ...rest }) => {
+  const iconName = name.includes(":") ? name : `heroicons:${name}`;
+  const classes = ["icon", className].filter(Boolean).join(" ");
+  if (loading) {
+    const style = { width: size, height: size };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: `${classes} icon--skeleton`,
+        style,
+        "aria-hidden": rest["aria-label"] ? "false" : "true",
+        ...rest["aria-label"] ? { "aria-label": rest["aria-label"] } : {}
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react.Icon,
+    {
+      icon: iconName,
+      width: size,
+      height: size,
+      className: classes,
+      ...rest
+    }
+  );
+};
+
+// src/components/button/button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = import_react2.default.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    children,
+    isLoading = false,
+    disabled = false,
+    fullWidth = false,
+    startIcon,
+    endIcon,
+    iconOnly = false,
+    href,
+    active = false,
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const buttonClasses = [
+      "btn",
+      `btn--${variant}`,
+      `btn--${size}`,
+      fullWidth && "btn--full-width",
+      iconOnly && "btn--icon-only",
+      active && "btn--active",
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = size === "xs" ? 14 : size === "sm" ? 16 : size === "lg" ? 24 : 20;
+    const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "btn__spinner" }),
+      startIcon && (isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "btn__icon-placeholder", style: { width: iconSize, height: iconSize } }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: startIcon, size: iconSize, className: "btn__icon" })),
+      !iconOnly && children,
+      endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: endIcon, size: iconSize, className: "btn__icon" })
+    ] });
+    const handleClick = (e) => {
+      if (href && !isLoading && !disabled) {
+        window.location.href = href;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react3.Button,
+      {
+        ref,
+        disabled: disabled || isLoading,
+        className: buttonClasses,
+        onClick: handleClick,
+        ...props,
+        children: buttonContent
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/tooltip/tooltip.tsx
+var React2 = __toESM(require("react"));
+var ReactDOM = __toESM(require("react-dom"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Tooltip = ({
+  content,
+  children,
+  placement = "top",
+  delay = 0,
+  disabled = false
+}) => {
+  const [isVisible, setIsVisible] = React2.useState(false);
+  const [tooltipStyle, setTooltipStyle] = React2.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React2.useState(placement);
+  const triggerRef = React2.useRef(null);
+  const tooltipRef = React2.useRef(null);
+  const timeoutRef = React2.useRef();
+  React2.useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !tooltipRef.current) {
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      if (tooltipRect.width === 0 || tooltipRect.height === 0) {
+        setTimeout(updatePosition, 10);
+        return;
+      }
+      const gap = 8;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      let finalPlacement = placement;
+      if (placement === "right" && spaceRight < tooltipRect.width + gap) {
+        finalPlacement = spaceLeft >= tooltipRect.width + gap ? "left" : "bottom";
+      } else if (placement === "left" && spaceLeft < tooltipRect.width + gap) {
+        finalPlacement = spaceRight >= tooltipRect.width + gap ? "right" : "bottom";
+      } else if (placement === "bottom" && spaceBottom < tooltipRect.height + gap) {
+        finalPlacement = spaceTop >= tooltipRect.height + gap ? "top" : "bottom";
+      } else if (placement === "top" && spaceTop < tooltipRect.height + gap) {
+        finalPlacement = spaceBottom >= tooltipRect.height + gap ? "bottom" : "top";
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: 1e4,
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.right + gap;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.left - tooltipRect.width - gap;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - tooltipRect.height - gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+      }
+      if (newStyle.left < 0) {
+        newStyle.left = 0;
+      } else if (newStyle.left + tooltipRect.width > viewportWidth) {
+        newStyle.left = viewportWidth - tooltipRect.width;
+      }
+      if (newStyle.top < 0) {
+        newStyle.top = 0;
+      } else if (newStyle.top + tooltipRect.height > viewportHeight) {
+        newStyle.top = viewportHeight - tooltipRect.height;
+      }
+      setTooltipStyle(newStyle);
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isVisible, placement]);
+  const handleMouseEnter = () => {
+    if (disabled) return;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, 150);
+  };
+  const handleClick = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+  const childElement = React2.Children.only(children);
+  const childWithHandlers = React2.cloneElement(childElement, {
+    ref: triggerRef,
+    onMouseEnter: (e) => {
+      childElement.props?.onMouseEnter?.(e);
+      handleMouseEnter();
+    },
+    onMouseLeave: (e) => {
+      childElement.props?.onMouseLeave?.(e);
+      handleMouseLeave();
+    },
+    onClick: (e) => {
+      childElement.props?.onClick?.(e);
+      handleClick();
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    childWithHandlers,
+    isVisible && !disabled && ReactDOM.createPortal(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          ref: tooltipRef,
+          className: `tooltip tooltip--${resolvedPlacement}`,
+          style: {
+            ...tooltipStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: tooltipStyle.top !== void 0 ? 1 : 0,
+            visibility: tooltipStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          onMouseEnter: () => {
+            if (timeoutRef.current) {
+              clearTimeout(timeoutRef.current);
+            }
+          },
+          onMouseLeave: handleMouseLeave,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tooltip__content", children: content })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/divider/divider.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Divider = ({
+  variant = "default",
+  size = "md",
+  className,
+  scrollTarget
+}) => {
+  const dividerClasses = [
+    "divider",
+    `divider--${variant}`,
+    `divider--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  const handleGoToTop = () => {
+    let target = null;
+    if (scrollTarget) {
+      target = scrollTarget instanceof Element ? scrollTarget : typeof scrollTarget === "string" ? document.querySelector(scrollTarget) : scrollTarget;
+    } else {
+      const layoutContainer = document.querySelector(".layout__container");
+      if (layoutContainer) {
+        target = layoutContainer;
+      } else {
+        target = window;
+      }
+    }
+    if (target) {
+      if (target instanceof Window) {
+        target.scrollTo({ top: 0, behavior: "smooth" });
+      } else {
+        target.scrollTo({ top: 0, behavior: "smooth" });
+      }
+    }
+  };
+  if (variant === "with-go-top") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: dividerClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("hr", { className: "divider__line" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { content: "Scroll to top", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        Button,
+        {
+          variant: "secondary",
+          size: size === "sm" ? "sm" : size === "lg" ? "lg" : "md",
+          iconOnly: true,
+          startIcon: "heroicons:chevron-up-20-solid",
+          onClick: handleGoToTop,
+          "aria-label": "Go to top",
+          className: "divider__go-top-btn"
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("hr", { className: dividerClasses });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Divider
+});

package/dist/components/divider.mjs

@@ -0,0 +1,307 @@
+// src/components/button/button.tsx
+import React from "react";
+import { Button as AriakitButton } from "@ariakit/react";
+
+// src/components/icons/icons.tsx
+import { Icon as IconifyIcon } from "@iconify/react";
+import { jsx } from "react/jsx-runtime";
+var Icon = ({ name, size = 24, className, loading = false, ...rest }) => {
+  const iconName = name.includes(":") ? name : `heroicons:${name}`;
+  const classes = ["icon", className].filter(Boolean).join(" ");
+  if (loading) {
+    const style = { width: size, height: size };
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${classes} icon--skeleton`,
+        style,
+        "aria-hidden": rest["aria-label"] ? "false" : "true",
+        ...rest["aria-label"] ? { "aria-label": rest["aria-label"] } : {}
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    IconifyIcon,
+    {
+      icon: iconName,
+      width: size,
+      height: size,
+      className: classes,
+      ...rest
+    }
+  );
+};
+
+// src/components/button/button.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Button = React.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    children,
+    isLoading = false,
+    disabled = false,
+    fullWidth = false,
+    startIcon,
+    endIcon,
+    iconOnly = false,
+    href,
+    active = false,
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const buttonClasses = [
+      "btn",
+      `btn--${variant}`,
+      `btn--${size}`,
+      fullWidth && "btn--full-width",
+      iconOnly && "btn--icon-only",
+      active && "btn--active",
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = size === "xs" ? 14 : size === "sm" ? 16 : size === "lg" ? 24 : 20;
+    const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      isLoading && /* @__PURE__ */ jsx2("span", { className: "btn__spinner" }),
+      startIcon && (isLoading ? /* @__PURE__ */ jsx2("span", { className: "btn__icon-placeholder", style: { width: iconSize, height: iconSize } }) : /* @__PURE__ */ jsx2(Icon, { name: startIcon, size: iconSize, className: "btn__icon" })),
+      !iconOnly && children,
+      endIcon && /* @__PURE__ */ jsx2(Icon, { name: endIcon, size: iconSize, className: "btn__icon" })
+    ] });
+    const handleClick = (e) => {
+      if (href && !isLoading && !disabled) {
+        window.location.href = href;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx2(
+      AriakitButton,
+      {
+        ref,
+        disabled: disabled || isLoading,
+        className: buttonClasses,
+        onClick: handleClick,
+        ...props,
+        children: buttonContent
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/tooltip/tooltip.tsx
+import * as React2 from "react";
+import * as ReactDOM from "react-dom";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Tooltip = ({
+  content,
+  children,
+  placement = "top",
+  delay = 0,
+  disabled = false
+}) => {
+  const [isVisible, setIsVisible] = React2.useState(false);
+  const [tooltipStyle, setTooltipStyle] = React2.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React2.useState(placement);
+  const triggerRef = React2.useRef(null);
+  const tooltipRef = React2.useRef(null);
+  const timeoutRef = React2.useRef();
+  React2.useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !tooltipRef.current) {
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      if (tooltipRect.width === 0 || tooltipRect.height === 0) {
+        setTimeout(updatePosition, 10);
+        return;
+      }
+      const gap = 8;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      let finalPlacement = placement;
+      if (placement === "right" && spaceRight < tooltipRect.width + gap) {
+        finalPlacement = spaceLeft >= tooltipRect.width + gap ? "left" : "bottom";
+      } else if (placement === "left" && spaceLeft < tooltipRect.width + gap) {
+        finalPlacement = spaceRight >= tooltipRect.width + gap ? "right" : "bottom";
+      } else if (placement === "bottom" && spaceBottom < tooltipRect.height + gap) {
+        finalPlacement = spaceTop >= tooltipRect.height + gap ? "top" : "bottom";
+      } else if (placement === "top" && spaceTop < tooltipRect.height + gap) {
+        finalPlacement = spaceBottom >= tooltipRect.height + gap ? "bottom" : "top";
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: 1e4,
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.right + gap;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.left - tooltipRect.width - gap;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - tooltipRect.height - gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+      }
+      if (newStyle.left < 0) {
+        newStyle.left = 0;
+      } else if (newStyle.left + tooltipRect.width > viewportWidth) {
+        newStyle.left = viewportWidth - tooltipRect.width;
+      }
+      if (newStyle.top < 0) {
+        newStyle.top = 0;
+      } else if (newStyle.top + tooltipRect.height > viewportHeight) {
+        newStyle.top = viewportHeight - tooltipRect.height;
+      }
+      setTooltipStyle(newStyle);
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isVisible, placement]);
+  const handleMouseEnter = () => {
+    if (disabled) return;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, 150);
+  };
+  const handleClick = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+  const childElement = React2.Children.only(children);
+  const childWithHandlers = React2.cloneElement(childElement, {
+    ref: triggerRef,
+    onMouseEnter: (e) => {
+      childElement.props?.onMouseEnter?.(e);
+      handleMouseEnter();
+    },
+    onMouseLeave: (e) => {
+      childElement.props?.onMouseLeave?.(e);
+      handleMouseLeave();
+    },
+    onClick: (e) => {
+      childElement.props?.onClick?.(e);
+      handleClick();
+    }
+  });
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    childWithHandlers,
+    isVisible && !disabled && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ref: tooltipRef,
+          className: `tooltip tooltip--${resolvedPlacement}`,
+          style: {
+            ...tooltipStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: tooltipStyle.top !== void 0 ? 1 : 0,
+            visibility: tooltipStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          onMouseEnter: () => {
+            if (timeoutRef.current) {
+              clearTimeout(timeoutRef.current);
+            }
+          },
+          onMouseLeave: handleMouseLeave,
+          children: /* @__PURE__ */ jsx3("div", { className: "tooltip__content", children: content })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/divider/divider.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Divider = ({
+  variant = "default",
+  size = "md",
+  className,
+  scrollTarget
+}) => {
+  const dividerClasses = [
+    "divider",
+    `divider--${variant}`,
+    `divider--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  const handleGoToTop = () => {
+    let target = null;
+    if (scrollTarget) {
+      target = scrollTarget instanceof Element ? scrollTarget : typeof scrollTarget === "string" ? document.querySelector(scrollTarget) : scrollTarget;
+    } else {
+      const layoutContainer = document.querySelector(".layout__container");
+      if (layoutContainer) {
+        target = layoutContainer;
+      } else {
+        target = window;
+      }
+    }
+    if (target) {
+      if (target instanceof Window) {
+        target.scrollTo({ top: 0, behavior: "smooth" });
+      } else {
+        target.scrollTo({ top: 0, behavior: "smooth" });
+      }
+    }
+  };
+  if (variant === "with-go-top") {
+    return /* @__PURE__ */ jsxs3("div", { className: dividerClasses, children: [
+      /* @__PURE__ */ jsx4("hr", { className: "divider__line" }),
+      /* @__PURE__ */ jsx4(Tooltip, { content: "Scroll to top", placement: "top", children: /* @__PURE__ */ jsx4(
+        Button,
+        {
+          variant: "secondary",
+          size: size === "sm" ? "sm" : size === "lg" ? "lg" : "md",
+          iconOnly: true,
+          startIcon: "heroicons:chevron-up-20-solid",
+          onClick: handleGoToTop,
+          "aria-label": "Go to top",
+          className: "divider__go-top-btn"
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx4("hr", { className: dividerClasses });
+};
+export {
+  Divider
+};