import {
  textInputStyle
} from "./chunk-FTMB6R72.js";

// src/components/CodeInput/SingleCodeInput.tsx
import { css, useTheme } from "@emotion/react";
import { jsx } from "@emotion/react/jsx-runtime";
var defaultWidth = "42px";
var vPadding = 15;
function SingleCodeInput({
  id,
  maxLength,
  onChange = () => {
  },
  value,
  inputRef = null,
  onKeyUp = () => {
  },
  onKeyDown = () => {
  },
  onPaste = () => {
  },
  type,
  max,
  cssProp,
  ariaLabel,
  disabled,
  onBlur,
  width = defaultWidth
}) {
  const theme = useTheme();
  const defaultCSS = css(
    `
      ${textInputStyle({
      theme,
      disabled: Boolean(disabled),
      hasError: false,
      borderRadius: 8
    }).styles}
      width: ${width};
      max-width: ${defaultWidth};
      padding: ${vPadding}px 0px;
      text-align: center;
      &:not(:last-of-type):not(:focus-visible) {
        border-right: none;
      }
      &:not(:first-of-type):not(:last-of-type) {
        border-radius: 0;
      }
      &:first-of-type {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      &:last-of-type {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
      &:focus,
      &:active {
        padding: ${vPadding - 1}px 0px !important;
      }

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        display: none;
        margin: 0;
      }
      -moz-appearance:textfield; /* Firefox */
    `,
    cssProp
  );
  return /* @__PURE__ */ jsx(
    "input",
    {
      id,
      maxLength,
      onChange: (event) => onChange(event, id),
      value,
      ref: inputRef,
      type,
      "aria-label": ariaLabel,
      onKeyUp: (event) => onKeyUp(event, id),
      onKeyDown: (event) => onKeyDown(event, id),
      onPaste: (event) => onPaste(event),
      max,
      css: defaultCSS,
      onBlur,
      inputMode: "numeric",
      pattern: "[0-9]*"
    }
  );
}

export {
  SingleCodeInput
};
