// figma node: 9036:13170 _Control handle (9 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "state=" + __venc(p.state) + '|' + "type=" + __venc(p.type);

export function ControlHandle(_p = {}) {
  const props = { ..._p, state: _p.state ?? "default", type: _p.type ?? "false" };
  const __body0 = () => (
    <div className={props.className} style={{
      width: 24,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <svg width={24} height={24} viewBox="0 0 24 24" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 24,
        height: 24,
        overflow: "hidden",
        borderRadius: 9999,
        color: "var(--component-colors-components-sliders-slider-handle-bg)",
      }}>
        <path d={"M 0 12 C 0 5.373 5.373 0 12 0 L 12 0 C 18.627 0 24 5.373 24 12 L 24 12 C 24 18.627 18.627 24 12 24 L 12 24 C 5.373 24 0 18.627 0 12 L 0 12 Z"} fill="rgb(255,255,255)" fillRule="nonzero" />
        <path d={"M 0 12 M 24 12 M 24 12 M 0 12 M 12 0 M 24 12 M 12 24 M 0 12 M 12 24 L 12 22 C 6.477 22 2 17.523 2 12 L 0 12 L -2 12 C -2 19.732 4.268 26 12 26 L 12 24 Z M 24 12 L 22 12 C 22 17.523 17.523 22 12 22 L 12 24 L 12 26 C 19.732 26 26 19.732 26 12 L 24 12 Z M 12 0 L 12 2 C 17.523 2 22 6.477 22 12 L 24 12 L 26 12 C 26 4.268 19.732 -2 12 -2 L 12 0 Z M 12 0 L 12 -2 C 4.268 -2 -2 4.268 -2 12 L 0 12 L 2 12 C 2 6.477 6.477 2 12 2 L 12 0 Z"} fill="rgb(127,86,217)" fillRule="nonzero" />
      </svg>
      <span style={{
        position: "absolute",
        left: 0,
        top: 32,
        width: 24,
        height: 24,
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 16,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-primary-900)",
      }}>{props.text1 ?? "0%"}</span>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: 24,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <svg width={24} height={24} viewBox="0 0 24 24" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 24,
        height: 24,
        overflow: "hidden",
        borderRadius: 9999,
        color: "var(--component-colors-components-sliders-slider-handle-bg)",
      }}>
        <path d={"M 0 12 C 0 5.373 5.373 0 12 0 L 12 0 C 18.627 0 24 5.373 24 12 L 24 12 C 24 18.627 18.627 24 12 24 L 12 24 C 5.373 24 0 18.627 0 12 L 0 12 Z"} fill="rgb(255,255,255)" fillRule="nonzero" />
        <path d={"M 0 12 M 24 12 M 24 12 M 0 12 M 12 0 M 24 12 M 12 24 M 0 12 M 12 24 L 12 22 C 6.477 22 2 17.523 2 12 L 0 12 L -2 12 C -2 19.732 4.268 26 12 26 L 12 24 Z M 24 12 L 22 12 C 22 17.523 17.523 22 12 22 L 12 24 L 12 26 C 19.732 26 26 19.732 26 12 L 24 12 Z M 12 0 L 12 2 C 17.523 2 22 6.477 22 12 L 24 12 L 26 12 C 26 4.268 19.732 -2 12 -2 L 12 0 Z M 12 0 L 12 -2 C 4.268 -2 -2 4.268 -2 12 L 0 12 L 2 12 C 2 6.477 6.477 2 12 2 L 12 0 Z"} fill="rgb(127,86,217)" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: 24,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <svg width={24} height={24} viewBox="0 0 24 24" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 24,
        height: 24,
        overflow: "hidden",
        borderRadius: 9999,
        color: "var(--component-colors-components-sliders-slider-handle-bg)",
      }}>
        <path d={"M 0 12 C 0 5.373 5.373 0 12 0 L 12 0 C 18.627 0 24 5.373 24 12 L 24 12 C 24 18.627 18.627 24 12 24 L 12 24 C 5.373 24 0 18.627 0 12 L 0 12 Z"} fill="rgb(255,255,255)" fillRule="nonzero" />
        <path d={"M 0 12 M 24 12 M 24 12 M 0 12 M 12 0 M 24 12 M 12 24 M 0 12 M 12 24 L 12 22 C 6.477 22 2 17.523 2 12 L 0 12 L -2 12 C -2 19.732 4.268 26 12 26 L 12 24 Z M 24 12 L 22 12 C 22 17.523 17.523 22 12 22 L 12 24 L 12 26 C 19.732 26 26 19.732 26 12 L 24 12 Z M 12 0 L 12 2 C 17.523 2 22 6.477 22 12 L 24 12 L 26 12 C 26 4.268 19.732 -2 12 -2 L 12 0 Z M 12 0 L 12 -2 C 4.268 -2 -2 4.268 -2 12 L 0 12 L 2 12 C 2 6.477 6.477 2 12 2 L 12 0 Z"} fill="rgb(127,86,217)" fillRule="nonzero" />
      </svg>
      <div style={{
        position: "absolute",
        left: -9.5,
        top: -42,
        boxShadow: "0px 12px 16px -4px rgba(10,13,18,0.08), 0px 4px 6px -2px rgba(10,13,18,0.03), 0px 2px 2px -1px rgba(10,13,18,0.04)",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        flexWrap: "nowrap",
      }}>
        <div style={{
          position: "relative",
          borderRadius: 8,
          backgroundColor: "var(--colors-background-bg-primary-alt)",
          boxShadow: "0 0 0 1px rgba(0,0,0,0.08)",
          display: "flex",
          flexDirection: "column",
          padding: "8px 12px 8px 12px",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          boxSizing: "border-box",
          paddingLeft: "calc(var(--spacing-lg) * 1px)",
          paddingTop: "calc(var(--spacing-md) * 1px)",
          paddingRight: "calc(var(--spacing-lg) * 1px)",
          paddingBottom: "calc(var(--spacing-md) * 1px)",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "var(--colors-text-text-secondary-700)",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>{props.text1 ?? "0%"}</span>
        </div>
      </div>
    </div>
  );
  const __body3 = () => (
    <div className={props.className} style={{
      width: 24,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <svg width={24} height={24} viewBox="0 0 24 24" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 24,
        height: 24,
        overflow: "hidden",
        borderRadius: 9999,
        filter: "drop-shadow(0px 1px 3px rgba(10,13,18,0.1)) drop-shadow(0px 1px 2px rgba(10,13,18,0.1)) drop-shadow(0px 0px 2px rgb(255,255,255)) drop-shadow(0px 0px 4px rgb(158,119,237))",
        color: "var(--component-colors-components-sliders-slider-handle-bg)",
      }}>
        <path d={"M 0 12 C 0 5.373 5.373 0 12 0 L 12 0 C 18.627 0 24 5.373 24 12 L 24 12 C 24 18.627 18.627 24 12 24 L 12 24 C 5.373 24 0 18.627 0 12 L 0 12 Z"} fill="rgb(255,255,255)" fillRule="nonzero" />
        <path d={"M 0 12 M 24 12 M 24 12 M 0 12 M 12 0 M 24 12 M 12 24 M 0 12 M 12 24 L 12 22 C 6.477 22 2 17.523 2 12 L 0 12 L -2 12 C -2 19.732 4.268 26 12 26 L 12 24 Z M 24 12 L 22 12 C 22 17.523 17.523 22 12 22 L 12 24 L 12 26 C 19.732 26 26 19.732 26 12 L 24 12 Z M 12 0 L 12 2 C 17.523 2 22 6.477 22 12 L 24 12 L 26 12 C 26 4.268 19.732 -2 12 -2 L 12 0 Z M 12 0 L 12 -2 C 4.268 -2 -2 4.268 -2 12 L 0 12 L 2 12 C 2 6.477 6.477 2 12 2 L 12 0 Z"} fill="rgb(127,86,217)" fillRule="nonzero" />
      </svg>
      <span style={{
        position: "absolute",
        left: 0,
        top: 32,
        width: 24,
        height: 24,
        fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 500,
        fontSize: 16,
        textAlign: "center",
        whiteSpace: "nowrap",
        lineHeight: "24px",
        color: "var(--colors-text-text-primary-900)",
      }}>{props.text1 ?? "0%"}</span>
    </div>
  );
  const __body4 = () => (
    <div className={props.className} style={{
      width: 24,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <svg width={24} height={24} viewBox="0 0 24 24" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 24,
        height: 24,
        overflow: "hidden",
        borderRadius: 9999,
        filter: "drop-shadow(0px 1px 3px rgba(10,13,18,0.1)) drop-shadow(0px 1px 2px rgba(10,13,18,0.1)) drop-shadow(0px 0px 2px rgb(255,255,255)) drop-shadow(0px 0px 4px rgb(158,119,237))",
        color: "var(--component-colors-components-sliders-slider-handle-bg)",
      }}>
        <path d={"M 0 12 C 0 5.373 5.373 0 12 0 L 12 0 C 18.627 0 24 5.373 24 12 L 24 12 C 24 18.627 18.627 24 12 24 L 12 24 C 5.373 24 0 18.627 0 12 L 0 12 Z"} fill="rgb(255,255,255)" fillRule="nonzero" />
        <path d={"M 0 12 M 24 12 M 24 12 M 0 12 M 12 0 M 24 12 M 12 24 M 0 12 M 12 24 L 12 22 C 6.477 22 2 17.523 2 12 L 0 12 L -2 12 C -2 19.732 4.268 26 12 26 L 12 24 Z M 24 12 L 22 12 C 22 17.523 17.523 22 12 22 L 12 24 L 12 26 C 19.732 26 26 19.732 26 12 L 24 12 Z M 12 0 L 12 2 C 17.523 2 22 6.477 22 12 L 24 12 L 26 12 C 26 4.268 19.732 -2 12 -2 L 12 0 Z M 12 0 L 12 -2 C 4.268 -2 -2 4.268 -2 12 L 0 12 L 2 12 C 2 6.477 6.477 2 12 2 L 12 0 Z"} fill="rgb(127,86,217)" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body5 = () => (
    <div className={props.className} style={{
      width: 24,
      height: 24,
      position: "relative",
      ...props.style,
    }}>
      <svg width={24} height={24} viewBox="0 0 24 24" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 24,
        height: 24,
        overflow: "hidden",
        borderRadius: 9999,
        filter: "drop-shadow(0px 1px 3px rgba(10,13,18,0.1)) drop-shadow(0px 1px 2px rgba(10,13,18,0.1)) drop-shadow(0px 0px 2px rgb(255,255,255)) drop-shadow(0px 0px 4px rgb(158,119,237))",
        color: "var(--component-colors-components-sliders-slider-handle-bg)",
      }}>
        <path d={"M 0 12 C 0 5.373 5.373 0 12 0 L 12 0 C 18.627 0 24 5.373 24 12 L 24 12 C 24 18.627 18.627 24 12 24 L 12 24 C 5.373 24 0 18.627 0 12 L 0 12 Z"} fill="rgb(255,255,255)" fillRule="nonzero" />
        <path d={"M 0 12 M 24 12 M 24 12 M 0 12 M 12 0 M 24 12 M 12 24 M 0 12 M 12 24 L 12 22 C 6.477 22 2 17.523 2 12 L 0 12 L -2 12 C -2 19.732 4.268 26 12 26 L 12 24 Z M 24 12 L 22 12 C 22 17.523 17.523 22 12 22 L 12 24 L 12 26 C 19.732 26 26 19.732 26 12 L 24 12 Z M 12 0 L 12 2 C 17.523 2 22 6.477 22 12 L 24 12 L 26 12 C 26 4.268 19.732 -2 12 -2 L 12 0 Z M 12 0 L 12 -2 C 4.268 -2 -2 4.268 -2 12 L 0 12 L 2 12 C 2 6.477 6.477 2 12 2 L 12 0 Z"} fill="rgb(127,86,217)" fillRule="nonzero" />
      </svg>
      <div style={{
        position: "absolute",
        left: -9.5,
        top: -42,
        boxShadow: "0px 12px 16px -4px rgba(10,13,18,0.08), 0px 4px 6px -2px rgba(10,13,18,0.03), 0px 2px 2px -1px rgba(10,13,18,0.04)",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        flexWrap: "nowrap",
      }}>
        <div style={{
          position: "relative",
          borderRadius: 8,
          backgroundColor: "var(--colors-background-bg-primary-alt)",
          boxShadow: "0 0 0 1px rgba(0,0,0,0.08)",
          display: "flex",
          flexDirection: "column",
          padding: "8px 12px 8px 12px",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          boxSizing: "border-box",
          paddingLeft: "calc(var(--spacing-lg) * 1px)",
          paddingTop: "calc(var(--spacing-md) * 1px)",
          paddingRight: "calc(var(--spacing-lg) * 1px)",
          paddingBottom: "calc(var(--spacing-md) * 1px)",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "var(--colors-text-text-secondary-700)",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>{props.text1 ?? "0%"}</span>
        </div>
      </div>
    </div>
  );
  const __impls = {
    // figma: State=Default, Type=Text
    "state=default|type=text": __body0,
    // figma: State=Default, Type=False
    "state=default|type=false": __body1,
    // figma: State=Default, Type=Tooltip
    "state=default|type=tooltip": __body2,
    // figma: State=Hover, Type=Text
    "state=hover|type=text": __body0,
    // figma: State=Hover, Type=False
    "state=hover|type=false": __body1,
    // figma: State=Hover, Type=Tooltip
    "state=hover|type=tooltip": __body2,
    // figma: State=Focused, Type=Text
    "state=focused|type=text": __body3,
    // figma: State=Focused, Type=False
    "state=focused|type=false": __body4,
    // figma: State=Focused, Type=Tooltip
    "state=focused|type=tooltip": __body5,
  };
  return (__impls[__vkey(props)] ?? __body1)();
}
export default ControlHandle;
