const p = `<Box className="flex flex-col gap-[var(--spacing-4)] w-full">
    <Text type="h4">Input Props on InputGroup</Text>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Placeholder prop:</Text>
    <InputGroup {...args} placeholder="Search products...">
        <InputGroupInput />
        <InputGroupAddon align="inline-left">
        <InputGroupIcon name="Search" />
        </InputGroupAddon>
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Value prop:</Text>
    <InputGroup {...args} value="Pre-filled value">
        <InputGroupInput />
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Type=email prop:</Text>
    <InputGroup {...args} type="email" placeholder="Enter email">
        <InputGroupInput />
        <InputGroupAddon align="inline-left">
        <InputGroupIcon name="Mail" />
        </InputGroupAddon>
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Type=file prop:</Text>
    <InputGroup {...args} type="file" placeholder="Enter email" onChange={handleUploadFile}>
        <InputGroupInput />
        <InputGroupAddon align="inline-right">
        <InputGroupIcon name="File" />
        </InputGroupAddon>
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Type=password prop:</Text>
    <InputGroup {...args} type="password" placeholder="Enter password">
        <InputGroupInput />
        <InputGroupAddon align="inline-left">
        <InputGroupIcon name="Lock" />
        </InputGroupAddon>
        <InputGroupAddon align="inline-right">
        <InputGroupButton icon="Eye" variant="ghost" />
        </InputGroupAddon>
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">MaxLength prop (10 chars):</Text>
    <InputGroup {...args} maxLength={10} placeholder="Max 10 chars">
        <InputGroupInput />
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Combined with addons:</Text>
    <InputGroup {...args} placeholder="Amount" type="number">
        <InputGroupInput />
        <InputGroupAddon align="inline-left">
        <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-right">
        <InputGroupText>.00</InputGroupText>
        </InputGroupAddon>
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Props override (InputGroup placeholder, InputGroupInput overrides):</Text>
    <InputGroup {...args} placeholder="From InputGroup">
        <InputGroupInput placeholder="Overridden by InputGroupInput" />
    </InputGroup>
    </Box>
</Box>`;
export {
  p as default
};
//# sourceMappingURL=allInputPropertySource.js.map
