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 { NumberInput as NumberInput$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/NumberInput/NumberInput.mjs";
const NumberInput = forwardRef((props, ref) => {
  const { leftAddon, rightAddon, leftAddonProps, rightAddonProps, leftSection, rightSection, ...rest } = props;
  return /* @__PURE__ */ jsx(
    NumberInput$1,
    {
      ...rest,
      ref,
      styles: mergeStylesList([
        (theme) => {
          const withLeftAddon = !!leftAddon;
          const withRightAddon = !!rightAddon;
          if (!withLeftAddon && !withRightAddon) {
            return {};
          }
          const sectionBaseStyles = {
            position: "initial",
            width: "fit-content",
            border: `1px solid ${theme.colors.carbon[4]}`,
            backgroundColor: theme.colors.carbon[2],
            paddingLeft: 12,
            paddingRight: 12
          };
          const wrapperBaseStyles = {
            "--input-padding-inline-start": "var(--input-padding)"
          };
          return {
            wrapper: {
              display: "flex",
              "&[data-with-left-section]": withLeftAddon ? wrapperBaseStyles : void 0,
              "&[data-with-right-section]": withRightAddon ? wrapperBaseStyles : void 0
            },
            section: {
              '&[data-position="left"]': withLeftAddon ? {
                ...sectionBaseStyles,
                borderRightWidth: 0,
                borderTopLeftRadius: theme.defaultRadius,
                borderBottomLeftRadius: theme.defaultRadius
              } : void 0,
              '&[data-position="right"]': withRightAddon ? {
                ...sectionBaseStyles,
                borderLeftWidth: 0,
                borderTopRightRadius: theme.defaultRadius,
                borderBottomRightRadius: theme.defaultRadius
              } : void 0
            },
            input: {
              flex: 1,
              ...withLeftAddon ? {
                borderTopLeftRadius: 0,
                borderBottomLeftRadius: 0
              } : void 0,
              ...withRightAddon ? {
                borderTopRightRadius: 0,
                borderBottomRightRadius: 0
              } : void 0
            }
          };
        }
      ]),
      leftSection: !!leftAddon ? /* @__PURE__ */ jsx(Typography, { variant: "label-lg", ...leftAddonProps, children: leftAddon }) : leftSection,
      rightSection: !!rightAddon ? /* @__PURE__ */ jsx(Typography, { variant: "label-lg", ...rightAddonProps, children: rightAddon }) : rightSection
    }
  );
});
export {
  NumberInput
};
