import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';

import './Divider.css';const container = "_container_8f0xc_1";
const divider = "_divider_8f0xc_20";
const content = "_content_8f0xc_38";
const vertical = "_vertical_8f0xc_96";
const styles = {
	container: container,
	divider: divider,
	content: content,
	"spacing-0": "_spacing-0_8f0xc_48",
	"spacing-half": "_spacing-half_8f0xc_52",
	"spacing-1": "_spacing-1_8f0xc_56",
	"spacing-2": "_spacing-2_8f0xc_60",
	"spacing-3": "_spacing-3_8f0xc_64",
	"spacing-4": "_spacing-4_8f0xc_68",
	"spacing-5": "_spacing-5_8f0xc_72",
	"spacing-6": "_spacing-6_8f0xc_76",
	"spacing-8": "_spacing-8_8f0xc_80",
	"spacing-12": "_spacing-12_8f0xc_84",
	"align-start": "_align-start_8f0xc_88",
	"align-end": "_align-end_8f0xc_92",
	vertical: vertical
};

const Divider = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const { alignContent, ...restOfLayoutStyles } = layoutStyles;
    const {
      children,
      className,
      spacing = "0",
      vertical = false,
      style,
      ...rest
    } = componentProps;
    const ContainerClasses = cx(styles["container"], className, {
      [styles[`spacing-${spacing === 0.5 ? "half" : spacing}`]]: spacing,
      [styles["vertical"]]: vertical,
      [styles["align-start"]]: alignContent === "start",
      [styles["align-end"]]: alignContent === "end"
    });
    const contentOrdering = () => {
      if (children) {
        if (alignContent === "start") {
          return /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx("span", { className: styles["content"], children }),
            /* @__PURE__ */ jsx("hr", { className: styles["divider"] })
          ] });
        }
        if (alignContent === "end") {
          return /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx("hr", { className: styles["divider"] }),
            /* @__PURE__ */ jsx("span", { className: styles["content"], children })
          ] });
        }
        return /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx("hr", { className: styles["divider"] }),
          /* @__PURE__ */ jsx("span", { className: styles["content"], children }),
          /* @__PURE__ */ jsx("hr", { className: styles["divider"] })
        ] });
      }
      return /* @__PURE__ */ jsx("hr", { className: styles["divider"] });
    };
    const styleCombined = {
      ...style,
      ...restOfLayoutStyles
    };
    return /* @__PURE__ */ jsx(
      "span",
      {
        "data-anv": "divider",
        ref,
        style: styleCombined,
        ...rest,
        className: ContainerClasses,
        children: contentOrdering()
      }
    );
  }
);
Divider.displayName = "Divider";

export { Divider as D };
//# sourceMappingURL=Divider-C7fp5Xb6.js.map
