import { jsx as s, jsxs as c } from "@emotion/react/jsx-runtime";
import o from "clsx";
import { forwardRef as F } from "react";
import { useEnvironment as K, useModuleSkeleton as V } from "@m4l/core";
import { getComponentClasses as Y } from "../../utils/getComponentSlotRoot.js";
import { getPropDataTestId as N } from "../../test/getNameDataTestId.js";
import { useNumberInput as G } from "./hooks/useNumberInput/useNumberInput.js";
import { SkeletonStyled as H, RootStyled as J, InputStyled as L, ContainButtonsAdornmentStyled as Q, ContainerButtonsStyled as W, IncrementButtonStyled as X, DecrementButtonStyled as Z } from "./slots/NumberInputSlots.js";
import { NUMBER_INPUT_KEY_COMPONENT as r } from "./constants.js";
import { NumberInputSlots as i } from "./slots/NumberInputEnum.js";
const ut = F(function(I, C) {
  const {
    className: e,
    defaultValue: S,
    value: _,
    disabled: l = !1,
    endAdornment: g,
    error: u,
    id: h,
    max: B,
    min: E,
    onBlur: v,
    onInputChange: y,
    onFocus: P,
    onChange: M,
    required: R,
    readOnly: T = !1,
    shiftMultiplier: b,
    startAdornment: k,
    step: x,
    size: m = "medium",
    variant: D = "outlined",
    withDecimal: a = !1,
    dataTestId: d
  } = I, {
    getRootProps: O,
    getInputProps: w,
    getIncrementButtonProps: $,
    getDecrementButtonProps: A,
    focusError: j
  } = G({
    min: E,
    max: B,
    step: x,
    withDecimal: a,
    shiftMultiplier: b,
    defaultValue: S,
    disabled: l,
    error: u,
    onFocus: P,
    onInputChange: y,
    onBlur: v,
    onChange: M,
    required: R,
    readOnly: T,
    value: _,
    inputId: h,
    componentName: r
  }), { host_static_assets: p, environment_assets: f } = K(), t = {
    disabled: l,
    error: u,
    size: m,
    variant: D,
    focusError: j,
    noButtons: a
  }, U = V(), n = Y(r, i);
  if (U)
    return /* @__PURE__ */ s(
      H,
      {
        ownerState: t,
        className: o(n.skeleton, e),
        ...N(r, i.skeleton, d)
      }
    );
  const q = `${p}/${f}/frontend/components/ControlIncrement/assets/icons/chevron_up_sm.svg`, z = `${p}/${f}/frontend/components/ControlIncrement/assets/icons/chevron_down_sm.svg`;
  return /* @__PURE__ */ c(
    J,
    {
      ...N(r, i.root, d),
      className: o(n.root, e),
      ref: C,
      ownerState: t,
      ...O(),
      children: [
        k,
        /* @__PURE__ */ s(L, { className: o(n.input, e), ownerState: t, ...w() }),
        /* @__PURE__ */ c(Q, { ownerState: t, children: [
          g,
          !a && /* @__PURE__ */ c(W, { className: o(n.containerButtons, e), ownerState: t, children: [
            /* @__PURE__ */ s(
              X,
              {
                icon: q,
                size: m,
                className: o(n.increment, e),
                ownerState: t,
                ...$()
              }
            ),
            /* @__PURE__ */ s(
              Z,
              {
                icon: z,
                size: m,
                className: o(n.decrement, e),
                ownerState: t,
                ...A()
              }
            )
          ] })
        ] })
      ]
    }
  );
});
export {
  ut as NumberInput
};
