fui-fancyui/dist/src/components/atoms/RawInput/RawInput.js

FancyUI Libary

"use client";
import { styled as r } from "styled-components";
import { getBackgroundColor as n } from "../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.js";
const a = r.input`
  font-weight: 500;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  background-color: transparent;
  color: ${({ theme: o, $themeType: t = "secondary", $layer: e }) => n({ theme: o, $themeType: t, $layer: e })};
  text-align: ${({ $align: o }) => o !== "center" ? "left" : "center"};
  border: none;
  outline: none;
  font-size: ${({ theme: o }) => o.fontSizes.interactiveMd.fontSize};
  padding: 0;

  // Remove the default autofill background color
  &:-webkit-autofill,
  &:-webkit-autofill:focus {
    -webkit-text-fill-color: ${({ theme: o, $themeType: t = "secondary", $layer: e }) => n({ theme: o, $themeType: t, $layer: e })} !important; // Change the text color of autofill
    transition:
      background-color 600000s 0s,
      color 600000s 0s;
  }

  &[data-autocompleted] {
    background-color: transparent !important;
  }

  &::placeholder {
    color: ${({ theme: o }) => o.color.secondary[7]};
  }

  ${({ $externalStyle: o }) => o};
`;
a.displayName = "RawInput";
export {
  a as default
};