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

import './Divider.css';const container = "_container_klljw_1";
const divider = "_divider_klljw_21";
const content = "_content_klljw_40";
const vertical = "_vertical_klljw_95";
const styles = {
	container: container,
	divider: divider,
	content: content,
	"spacing-0": "_spacing-0_klljw_50",
	"spacing-half": "_spacing-half_klljw_54",
	"spacing-1": "_spacing-1_klljw_58",
	"spacing-2": "_spacing-2_klljw_59",
	"spacing-3": "_spacing-3_klljw_63",
	"spacing-4": "_spacing-4_klljw_67",
	"spacing-5": "_spacing-5_klljw_71",
	"spacing-6": "_spacing-6_klljw_75",
	"spacing-8": "_spacing-8_klljw_79",
	"spacing-12": "_spacing-12_klljw_83",
	"align-start": "_align-start_klljw_87",
	"align-end": "_align-end_klljw_91",
	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-Ds3WKsKa.js.map
