// figma node: 8185:10238 Field (4 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "state=" + __venc(p.state);

export function Field(_p = {}) {
  const props = { ..._p, showIcon: _p.showIcon ?? true, state: _p.state ?? "default" };
  const __body0 = () => (
    <div className={props.className} style={{
      width: 913,
      display: "flex",
      flexDirection: "column",
      gap: "calc(var(--spacing-8-9) * 1px)",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "\"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
        fontWeight: 400,
        fontSize: 12,
        lineHeight: "16px",
        letterSpacing: "0.750px",
        color: "rgba(21,21,21,0.64)",
        flexShrink: 0,
        alignSelf: "stretch",
        whiteSpace: "nowrap",
      }}>{props.text1 ?? "Default"}</span>
      <div style={{
        position: "relative",
        borderRadius: 8,
        backgroundColor: "var(--input-default-background)",
        boxShadow: "inset 0 0 0 1px rgba(21,21,21,0)",
        display: "flex",
        flexDirection: "row",
        padding: "12px 16px 12px 16px",
        justifyContent: "space-between",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
        paddingLeft: "calc(var(--spacing-16-9) * 1px)",
        paddingTop: "calc(var(--spacing-12-8) * 1px)",
        paddingRight: "calc(var(--spacing-16-9) * 1px)",
        paddingBottom: "calc(var(--spacing-12-8) * 1px)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "nowrap",
          flexGrow: 1,
        }}>
          <span style={{
            position: "relative",
            fontFamily: "\"Overused Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 16,
            lineHeight: "24px",
            letterSpacing: "0.250px",
            color: "rgba(21,21,21,0.48)",
            flexGrow: 1,
            whiteSpace: "nowrap",
          }}>{props.text2 ?? "Placeholder"}</span>
          {props.showIcon && (
          <div style={{
            position: "relative",
            width: "calc(var(--button-icon-button-circle) * 1px)",
            height: "calc(var(--button-icon-button-circle) * 1px)",
            overflow: "hidden",
            flexShrink: 0,
          }}>
            <svg width={10} height={5} viewBox="0 0 10 5" fill="none" style={{
              position: "absolute",
              left: 5,
              top: 7.5,
              width: 10,
              height: 5,
              borderWidth: "calc(var(--icon-stroke-7) * 1px)",
              color: "rgb(228,90,71)",
            }}>
              <path d={"M 0.354 -0.354 C 0.158 -0.549 -0.158 -0.549 -0.354 -0.354 C -0.549 -0.158 -0.549 0.158 -0.354 0.354 L 0 0 L 0.354 -0.354 Z M 5 5 L 4.646 5.354 C 4.842 5.549 5.158 5.549 5.354 5.354 L 5 5 Z M 10.354 0.354 C 10.549 0.158 10.549 -0.158 10.354 -0.354 C 10.158 -0.549 9.842 -0.549 9.646 -0.354 L 10 0 L 10.354 0.354 Z M 0 0 L -0.354 0.354 L 4.646 5.354 L 5 5 L 5.354 4.646 L 0.354 -0.354 L 0 0 Z M 5 5 L 5.354 5.354 L 10.354 0.354 L 10 0 L 9.646 -0.354 L 4.646 4.646 L 5 5 Z"} fill="currentColor" fillRule="nonzero" />
            </svg>
          </div>
          )}
        </div>
      </div>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: 913,
      display: "flex",
      flexDirection: "column",
      gap: "calc(var(--spacing-8-9) * 1px)",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "\"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
        fontWeight: 400,
        fontSize: 12,
        lineHeight: "16px",
        letterSpacing: "0.750px",
        color: "rgba(21,21,21,0.64)",
        flexShrink: 0,
        alignSelf: "stretch",
        whiteSpace: "nowrap",
      }}>{props.text1 ?? "Active"}</span>
      <div style={{
        position: "relative",
        borderRadius: 8,
        backgroundColor: "var(--input-active-background)",
        boxShadow: "inset 0 0 0 1px rgba(21,21,21,0.32)",
        display: "flex",
        flexDirection: "row",
        padding: "12px 16px 12px 16px",
        justifyContent: "space-between",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
        paddingLeft: "calc(var(--spacing-16-9) * 1px)",
        paddingTop: "calc(var(--spacing-12-8) * 1px)",
        paddingRight: "calc(var(--spacing-16-9) * 1px)",
        paddingBottom: "calc(var(--spacing-12-8) * 1px)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "nowrap",
          flexGrow: 1,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            flexWrap: "nowrap",
            flexGrow: 1,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "\"Overused Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 16,
              whiteSpace: "nowrap",
              lineHeight: "24px",
              letterSpacing: "0.250px",
              color: "var(--input-active-text)",
              flexShrink: 0,
            }}>{props.text2 ?? "Text"}</span>
            <span style={{
              position: "relative",
              fontFamily: "\"Overused Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 16,
              whiteSpace: "nowrap",
              lineHeight: "24px",
              letterSpacing: "0.250px",
              color: "var(--input-active-text)",
              flexShrink: 0,
            }}>{props.text3 ?? "|"}</span>
          </div>
          {props.showIcon && (
          <div style={{
            position: "relative",
            width: "calc(var(--button-icon-button-circle) * 1px)",
            height: "calc(var(--button-icon-button-circle) * 1px)",
            overflow: "hidden",
            flexShrink: 0,
          }}>
            <svg width={12} height={6} viewBox="0 0 12 6" fill="none" style={{
              position: "absolute",
              left: 6,
              top: 9,
              width: 12,
              height: 6,
              borderWidth: "calc(var(--icon-stroke-7) * 1px)",
              color: "rgb(228,90,71)",
            }}>
              <path d={"M 0.354 -0.354 C 0.158 -0.549 -0.158 -0.549 -0.354 -0.354 C -0.549 -0.158 -0.549 0.158 -0.354 0.354 L 0 0 L 0.354 -0.354 Z M 6 6 L 5.646 6.354 C 5.842 6.549 6.158 6.549 6.354 6.354 L 6 6 Z M 12.354 0.354 C 12.549 0.158 12.549 -0.158 12.354 -0.354 C 12.158 -0.549 11.842 -0.549 11.646 -0.354 L 12 0 L 12.354 0.354 Z M 0 0 L -0.354 0.354 L 5.646 6.354 L 6 6 L 6.354 5.646 L 0.354 -0.354 L 0 0 Z M 6 6 L 6.354 6.354 L 12.354 0.354 L 12 0 L 11.646 -0.354 L 5.646 5.646 L 6 6 Z"} fill="currentColor" fillRule="nonzero" />
            </svg>
          </div>
          )}
        </div>
      </div>
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: 913,
      display: "flex",
      flexDirection: "column",
      gap: "calc(var(--spacing-8-9) * 1px)",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "relative",
        fontFamily: "\"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
        fontWeight: 400,
        fontSize: 12,
        lineHeight: "16px",
        letterSpacing: "0.750px",
        color: "rgba(21,21,21,0.64)",
        flexShrink: 0,
        alignSelf: "stretch",
        whiteSpace: "nowrap",
      }}>{props.text1 ?? "Filled"}</span>
      <div style={{
        position: "relative",
        borderRadius: 8,
        backgroundColor: "var(--input-filled-background)",
        boxShadow: "inset 0 0 0 1px rgba(21,21,21,0)",
        display: "flex",
        flexDirection: "row",
        padding: "12px 16px 12px 16px",
        justifyContent: "space-between",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
        paddingLeft: "calc(var(--spacing-16-9) * 1px)",
        paddingTop: "calc(var(--spacing-12-8) * 1px)",
        paddingRight: "calc(var(--spacing-16-9) * 1px)",
        paddingBottom: "calc(var(--spacing-12-8) * 1px)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "nowrap",
          flexGrow: 1,
        }}>
          <span style={{
            position: "relative",
            fontFamily: "\"Overused Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 16,
            lineHeight: "24px",
            letterSpacing: "0.250px",
            color: "var(--input-filled-text)",
            flexGrow: 1,
            whiteSpace: "nowrap",
          }}>{props.text2 ?? "Text"}</span>
          {props.showIcon && (
          <div style={{
            position: "relative",
            width: "calc(var(--button-icon-button-circle) * 1px)",
            height: "calc(var(--button-icon-button-circle) * 1px)",
            overflow: "hidden",
            flexShrink: 0,
          }}>
            <svg width={12} height={6} viewBox="0 0 12 6" fill="none" style={{
              position: "absolute",
              left: 6,
              top: 9,
              width: 12,
              height: 6,
              borderWidth: "calc(var(--icon-stroke-7) * 1px)",
              color: "rgb(228,90,71)",
            }}>
              <path d={"M 0.354 -0.354 C 0.158 -0.549 -0.158 -0.549 -0.354 -0.354 C -0.549 -0.158 -0.549 0.158 -0.354 0.354 L 0 0 L 0.354 -0.354 Z M 6 6 L 5.646 6.354 C 5.842 6.549 6.158 6.549 6.354 6.354 L 6 6 Z M 12.354 0.354 C 12.549 0.158 12.549 -0.158 12.354 -0.354 C 12.158 -0.549 11.842 -0.549 11.646 -0.354 L 12 0 L 12.354 0.354 Z M 0 0 L -0.354 0.354 L 5.646 6.354 L 6 6 L 6.354 5.646 L 0.354 -0.354 L 0 0 Z M 6 6 L 6.354 6.354 L 12.354 0.354 L 12 0 L 11.646 -0.354 L 5.646 5.646 L 6 6 Z"} fill="currentColor" fillRule="nonzero" />
            </svg>
          </div>
          )}
        </div>
      </div>
    </div>
  );
  const __body3 = () => (
    <div className={props.className} style={{
      width: 913,
      display: "flex",
      flexDirection: "column",
      gap: "calc(var(--spacing-8-9) * 1px)",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        <span style={{
          position: "relative",
          fontFamily: "\"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
          fontWeight: 400,
          fontSize: 12,
          whiteSpace: "nowrap",
          lineHeight: "16px",
          letterSpacing: "0.750px",
          color: "rgba(21,21,21,0.64)",
          flexShrink: 0,
        }}>{props.text1 ?? "error"}</span>
        <span style={{
          position: "relative",
          fontFamily: "\"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
          fontWeight: 400,
          fontSize: 12,
          whiteSpace: "nowrap",
          lineHeight: "16px",
          letterSpacing: "0.750px",
          color: "var(--ui-error)",
          flexShrink: 0,
        }}>{props.text2 ?? "ERROR TEXT"}</span>
      </div>
      <div style={{
        position: "relative",
        borderRadius: 8,
        backgroundColor: "var(--input-error-background)",
        boxShadow: "inset 0 0 0 1px rgba(21,21,21,0)",
        display: "flex",
        flexDirection: "row",
        padding: "12px 16px 12px 16px",
        justifyContent: "space-between",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
        paddingLeft: "calc(var(--spacing-16-9) * 1px)",
        paddingTop: "calc(var(--spacing-12-8) * 1px)",
        paddingRight: "calc(var(--spacing-16-9) * 1px)",
        paddingBottom: "calc(var(--spacing-12-8) * 1px)",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "nowrap",
          flexGrow: 1,
        }}>
          <span style={{
            position: "relative",
            fontFamily: "\"Overused Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 16,
            lineHeight: "24px",
            letterSpacing: "0.250px",
            color: "var(--input-error-text)",
            flexGrow: 1,
            whiteSpace: "nowrap",
          }}>{props.text3 ?? "Text"}</span>
          {props.showIcon && (
          <div style={{
            position: "relative",
            width: "calc(var(--button-icon-button-circle) * 1px)",
            height: "calc(var(--button-icon-button-circle) * 1px)",
            overflow: "hidden",
            flexShrink: 0,
          }}>
            <svg width={12} height={6} viewBox="0 0 12 6" fill="none" style={{
              position: "absolute",
              left: 6,
              top: 9,
              width: 12,
              height: 6,
              borderWidth: "calc(var(--icon-stroke-7) * 1px)",
              color: "rgb(228,90,71)",
            }}>
              <path d={"M 0.354 -0.354 C 0.158 -0.549 -0.158 -0.549 -0.354 -0.354 C -0.549 -0.158 -0.549 0.158 -0.354 0.354 L 0 0 L 0.354 -0.354 Z M 6 6 L 5.646 6.354 C 5.842 6.549 6.158 6.549 6.354 6.354 L 6 6 Z M 12.354 0.354 C 12.549 0.158 12.549 -0.158 12.354 -0.354 C 12.158 -0.549 11.842 -0.549 11.646 -0.354 L 12 0 L 12.354 0.354 Z M 0 0 L -0.354 0.354 L 5.646 6.354 L 6 6 L 6.354 5.646 L 0.354 -0.354 L 0 0 Z M 6 6 L 6.354 6.354 L 12.354 0.354 L 12 0 L 11.646 -0.354 L 5.646 5.646 L 6 6 Z"} fill="currentColor" fillRule="nonzero" />
            </svg>
          </div>
          )}
        </div>
      </div>
    </div>
  );
  const __impls = {
    // figma: State=Default
    "state=default": __body0,
    // figma: State=Active
    "state=active": __body1,
    // figma: State=Filled
    "state=filled": __body2,
    // figma: State=Error
    "state=error": __body3,
  };
  return (__impls[__vkey(props)] ?? __body0)();
}
export default Field;
