"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);
var DropDownButton_exports = {};
__export(DropDownButton_exports, {
  default: () => DropDownButton
});
module.exports = __toCommonJS(DropDownButton_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_react2 = require("react");
var import_CaretDown8 = require("../../../../icons/CaretDown8");
var import_Plus8 = require("../../../../icons/Plus8");
var import_ArrowDown8 = require("../../../../icons/ArrowDown8");
var import_ChevronDown8 = require("../../../../icons/ChevronDown8");
var import_colorToString = require("../../../../utils/colorToString");
var import_hooks = require("../../../../hooks");
var import_Link = require("../../../../shared/Link");
var import_Button = __toESM(require("../../../Button"));
var import_useIsomorphicLayoutEffect = require("../../../../hooks/useIsomorphicLayoutEffect");
var import_css = require("@emotion/css");
var import_use_style = require("../../../../../runtimes/react/use-style");
var import_responsive_style = require("../../../../utils/responsive-style");
const DROP_DOWN_MENU_WIDTH = 200;
const DROP_DOWN_MENU_CLASS_NAME = "drop-down-menu";
function DropDownMenu({ className, position, ...restOfProps }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      ...restOfProps,
      className: (0, import_css.cx)(
        DROP_DOWN_MENU_CLASS_NAME,
        (0, import_use_style.useStyle)({
          position: "absolute",
          top: "100%",
          left: position === "left" ? 0 : "auto",
          right: position === "right" ? 0 : "auto",
          background: "#fff",
          margin: 0,
          padding: "8px 0",
          borderRadius: 4,
          boxShadow: "0 3px 10px rgba(0, 0, 0, 0.15)",
          width: DROP_DOWN_MENU_WIDTH,
          zIndex: 99,
          listStyle: "none",
          overflow: "hidden",
          transformOrigin: "50% 0",
          willChange: "transform, opacity",
          transformStyle: "preserve-3d",
          display: "none"
        }),
        className
      )
    }
  );
}
const dropIn = import_css.keyframes`
  0% {
      opacity: 0;
      transform: rotateX(-20deg);
  }
  100% {
      opacity: 1;
      transform: none;
  }
`;
const DropDownContainer = (0, import_react2.forwardRef)(function DropDownContainer2({ className, ...restOfProps }, ref) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      ...restOfProps,
      ref,
      className: (0, import_css.cx)(
        (0, import_use_style.useStyle)({
          position: "relative",
          [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {
            display: "block",
            animation: `${dropIn} 0.25s`
          }
        }),
        className
      )
    }
  );
});
function DropDownItem({ className, color, textStyle, ...restOfProps }) {
  const colorData = (0, import_hooks.useResponsiveColor)(color);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_Link.Link,
    {
      ...restOfProps,
      className: (0, import_css.cx)(
        (0, import_use_style.useStyle)({
          display: "block",
          textDecoration: "none",
          lineHeight: 1.4,
          padding: "8px 16px",
          color: "black",
          backgroundColor: "transparent",
          transition: "background-color 0.2s"
        }),
        (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveTextStyle)(textStyle)),
        (0, import_use_style.useStyle)(
          (0, import_responsive_style.useResponsiveStyle)([colorData, textStyle], ([color2, textStyle2 = {}]) => {
            const fontSize = textStyle2.fontSize || { value: 14, unit: "px" };
            const fontWeight = textStyle2.fontWeight == null ? "normal" : textStyle2.fontWeight;
            const fontStyle = textStyle2.fontStyle || [];
            const letterSpacing = textStyle2.letterSpacing == null ? null : textStyle2.letterSpacing;
            const textTransform = textStyle2.textTransform || [];
            return {
              color: color2 == null ? "black" : (0, import_colorToString.colorToString)(color2),
              fontSize: `${fontSize.value}${fontSize.unit}`,
              fontWeight,
              fontStyle: fontStyle.includes("italic") ? "italic" : "normal",
              letterSpacing: letterSpacing == null ? "normal" : `${letterSpacing}px`,
              textTransform: textTransform.includes("uppercase") ? "uppercase" : "none"
            };
          })
        ),
        (0, import_use_style.useStyle)({
          "&:hover": {
            backgroundColor: "rgba(0, 0, 0, 0.04)"
          }
        }),
        className
      )
    }
  );
}
function DropDownButton({
  label,
  caret = "caret",
  links = [],
  textColor,
  color,
  ...restOfProps
}) {
  const container = (0, import_react2.useRef)(null);
  const [position, setPosition] = (0, import_react2.useState)("left");
  (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
    if (container.current && container.current.ownerDocument.defaultView.innerWidth < container.current.offsetLeft + DROP_DOWN_MENU_WIDTH) {
      setPosition("right");
    } else {
      setPosition("left");
    }
  }, [setPosition]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DropDownContainer, { ref: container, children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_Button.default,
      {
        ...restOfProps,
        textColor: (0, import_hooks.useResponsiveColor)(textColor),
        color: (0, import_hooks.useResponsiveColor)(color),
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { marginRight: 6 }, children: label }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "inline-flex", fill: "currentColor" }, children: [
            caret === "caret" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CaretDown8.CaretDown8, {}),
            caret === "plus" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Plus8.Plus8, {}),
            caret === "arrow-down" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ArrowDown8.ArrowDown8, {}),
            caret === "chevron-down" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChevronDown8.ChevronDown8, {})
          ] })
        ] })
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropDownMenu, { position, children: links.map(({ id, payload }) => /* @__PURE__ */ (0, import_react.createElement)(DropDownItem, { ...payload, key: id }, payload.label)) })
  ] });
}
//# sourceMappingURL=index.js.map