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-DMDdfIah.js';

import './Divider.css';const container = "_container_1t0cy_2";
const divider = "_divider_1t0cy_23";
const content = "_content_1t0cy_41";
const vertical = "_vertical_1t0cy_52";
const styles = {
	container: container,
	divider: divider,
	content: content,
	vertical: vertical,
	"align-start": "_align-start_1t0cy_58",
	"align-end": "_align-end_1t0cy_61",
	"spacing-0": "_spacing-0_1t0cy_64",
	"spacing-half": "_spacing-half_1t0cy_68",
	"spacing-1": "_spacing-1_1t0cy_72",
	"spacing-2": "_spacing-2_1t0cy_76",
	"spacing-3": "_spacing-3_1t0cy_80",
	"spacing-4": "_spacing-4_1t0cy_84",
	"spacing-5": "_spacing-5_1t0cy_88",
	"spacing-6": "_spacing-6_1t0cy_92",
	"spacing-8": "_spacing-8_1t0cy_96",
	"spacing-12": "_spacing-12_1t0cy_100"
};

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-B1UoK8ho.js.map
