import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import "clsx";
import { mergeStylesList } from "../../utils/styles.mjs";
import { Typography } from "../Typography/index.mjs";
import { TextInput as TextInput$1 } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/TextInput/TextInput.mjs";
import { getFontSize } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/utils/get-size/get-size.mjs";
const TextInput = forwardRef((props, ref) => {
  const { leftLabel, leftLabelProps, leftSection, rightLabel, rightLabelProps, rightSection, ...rest } = props;
  return /* @__PURE__ */ jsx(
    TextInput$1,
    {
      ...rest,
      styles: mergeStylesList([
        (theme) => {
          const withLeftLabel = !!props.leftLabel;
          const withRightLabel = !!props.rightLabel;
          if (!withLeftLabel && !withRightLabel) {
            return {};
          }
          const sectionBaseStyles = {
            position: "initial",
            width: "fit-content",
            border: `1px solid ${theme.colors.carbon[4]}`,
            backgroundColor: theme.colors.carbon[2],
            paddingLeft: 12,
            paddingRight: 12,
            "& > .mantine-Text-root": {
              fontSize: getFontSize(props.size ?? "md")
            }
          };
          const wrapperBaseStyles = {
            "--input-padding-inline-start": "var(--input-padding)"
          };
          return {
            wrapper: {
              display: "flex",
              // see https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/components/Input/Input.module.css#L70C4-L70C33I
              // correct input left padding
              "&[data-with-left-section]": withLeftLabel ? wrapperBaseStyles : void 0,
              "&[data-with-right-section]": withRightLabel ? wrapperBaseStyles : void 0
            },
            section: {
              '&[data-position="left"]': withLeftLabel ? {
                ...sectionBaseStyles,
                borderRightWidth: 0,
                borderTopLeftRadius: theme.defaultRadius,
                borderBottomLeftRadius: theme.defaultRadius
              } : void 0,
              '&[data-position="right"]': withRightLabel ? {
                ...sectionBaseStyles,
                borderLeftWidth: 0,
                borderTopRightRadius: theme.defaultRadius,
                borderBottomRightRadius: theme.defaultRadius
              } : void 0
            },
            input: {
              flex: 1,
              ...withLeftLabel ? {
                borderTopLeftRadius: 0,
                borderBottomLeftRadius: 0
              } : void 0,
              ...withRightLabel ? {
                borderTopRightRadius: 0,
                borderBottomRightRadius: 0
              } : void 0
            }
          };
        },
        props.styles
      ]),
      leftSection: !!leftLabel ? /* @__PURE__ */ jsx(Typography, { variant: "label-lg", ...leftLabelProps, children: leftLabel }) : leftSection,
      rightSection: !!rightLabel ? /* @__PURE__ */ jsx(Typography, { variant: "label-lg", ...rightLabelProps, children: rightLabel }) : rightSection,
      ref
    }
  );
});
export {
  TextInput
};
