"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Divider_exports = {};
__export(Divider_exports, {
  default: () => Divider_default
});
module.exports = __toCommonJS(Divider_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_colorToString = require("../../utils/colorToString");
var import_use_style = require("../../../runtimes/react/use-style");
var import_css = require("@emotion/css");
var import_responsive_style = require("../../utils/responsive-style");
const Divider = (0, import_react.forwardRef)(function Divider2({ id, variant, thickness, color, width, margin }, ref) {
  return (
    // IE11 has a bug with Flexbox vertical centering with min height if height is not set.
    // Wrapping it in another flex container fixes it for some reason, read more here:
    // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      "div",
      {
        ref,
        id,
        className: (0, import_css.cx)((0, import_use_style.useStyle)({ display: "flex", width: "100%" }), width, margin),
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          "div",
          {
            className: (0, import_use_style.useStyle)({
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              minHeight: 40,
              width: "100%"
            }),
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              "div",
              {
                className: (0, import_use_style.useStyle)(
                  (0, import_responsive_style.useResponsiveStyle)(
                    [variant, thickness, color],
                    ([
                      variant2 = "solid",
                      thickness2 = { value: 1, unit: "px" },
                      color2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }
                    ]) => {
                      switch (variant2) {
                        case "solid":
                        case "dashed":
                        case "dotted":
                          return {
                            borderBottomWidth: thickness2 == null ? 1 : `${thickness2.value}${thickness2.unit}`,
                            borderBottomStyle: variant2,
                            borderBottomColor: (0, import_colorToString.colorToString)(color2)
                          };
                        case "blended":
                          return {
                            height: `${thickness2.value}${thickness2.unit}`,
                            background: `linear-gradient(${[
                              "90deg",
                              (0, import_colorToString.colorToString)({ swatch: color2.swatch, alpha: 0 }),
                              (0, import_colorToString.colorToString)(color2),
                              (0, import_colorToString.colorToString)({ swatch: color2.swatch, alpha: 0 })
                            ].join(", ")})`
                          };
                        default:
                          variant2;
                          throw new Error(`Invalid variant ${variant2}.`);
                      }
                    }
                  )
                )
              }
            )
          }
        )
      }
    )
  );
});
var Divider_default = Divider;
//# sourceMappingURL=Divider.js.map