const n = `<Box className="flex flex-col gap-[var(--spacing-4)] w-full">
    <Text type="h4">All InputGroup variants</Text>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">External Left Button:</Text>
    <InputGroup {...args}>
        <InputGroupInput placeholder="Placeholder" />
        <InputGroupAddon align="outline-left">
        <InputGroupButton label="Button" />
        </InputGroupAddon>
    </InputGroup>
    </Box>

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

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">External Left Dropdown:</Text>
    <InputGroup {...args}>
        <InputGroupInput placeholder="Placeholder" value="Placeholder" />
        <InputGroupAddon align="outline-left">
        <InputGroupDropdown
            label="English"
            menuItems={[
                { label: 'English', onClick: () => {} },
                { label: 'Deutsch', onClick: () => {} },
            ]}
        />
        </InputGroupAddon>
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Internal Right Button (Error):</Text>
    <InputGroup {...args} isError>
        <InputGroupInput placeholder="Placeholder" />
        <InputGroupAddon align="inline-right">
        <InputGroupButton label="Button" variant="ghost" />
        </InputGroupAddon>
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">External Text + Icon Button:</Text>
    <InputGroup {...args}>
        <InputGroupInput placeholder="Placeholder" />
        <InputGroupAddon align="outline-left">
        <InputGroupText>http://</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="outline-right">
        <InputGroupButton icon="Clipboard" variant="default" />
        </InputGroupAddon>
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Input with Tooltip:</Text>
    <InputGroup {...args}>
        <InputGroupInput placeholder="Type something..." />
        <InputGroupAddon align="inline-right">
        <InputGroupTooltip content="Tooltip content" />
        </InputGroupAddon>
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Input with Badge:</Text>
    <InputGroup {...args}>
        <InputGroupInput placeholder="Type something..." />
        <InputGroupAddon align="inline-right">
        <InputGroupBadge label="USD" />
        </InputGroupAddon>
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Currency Input:</Text>
    <InputGroup {...args}>
        <InputGroupInput placeholder="Type something..." />
        <InputGroupAddon align="inline-left">
        <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <InputGroupAddon align="inline-right">
        <InputGroupDropdown
            label="+1"
            menuItems={[
                { label: '+1 (US)', onClick: () => {} },
                { label: '+44 (UK)', onClick: () => {} },
            ]}
        />
        </InputGroupAddon>
    </InputGroup>
    </Box>

    <Box className="flex flex-col gap-[var(--spacing-2)]">
    <Text type="small">Complex Input with multiple addons:</Text>
    <InputGroup {...args}>
        <InputGroupInput placeholder="Type something..." />
        <InputGroupAddon align="outline-left">
        <InputGroupButton label="Button" />
        </InputGroupAddon>
        <InputGroupAddon align="inline-left">
        <InputGroupIcon name="Search" />
        <InputGroupIcon name="Loader2" animation="spin" />
        </InputGroupAddon>
        <InputGroupAddon align="inline-right">
        <InputGroupDropdown
            label="+1"
            menuItems={[
                { label: '+1 (US)', onClick: () => {} },
                { label: '+44 (UK)', onClick: () => {} },
            ]}
        />
        </InputGroupAddon>
        <InputGroupAddon align="outline-right">
        <InputGroupButton label="Button" />
        </InputGroupAddon>
    </InputGroup>
    </Box>
</Box>`;
export {
  n as default
};
//# sourceMappingURL=allVariantsComponentSource.js.map
