Sample input component for Framer X canvas

Input.tsx

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { Input as SLDS_Input } from "@salesforce/design-system-react"
// Open Preview: Command + P
// Learn more: https://framer.com/api

export function Input(props) {
    return <SLDS_Input {...props} />
}

Input.defaultProps = {
    height: 32,
    width: 240,
}

// Learn more: https://framer.com/api/property-controls/
addPropertyControls(Input, {
    text: {
        title: "Text",
        type: ControlType.String,
        defaultValue: "",
    },
    placeholder: {
        title: "Placeholder",
        type: ControlType.String,
        defaultValue: "What to write",
    },
})